新修改添加页面

batman

2023-03-16 b6cacf34f55a6d53e3019ff0c886ff3a2335c066

 src/views/specialWorkSystem/specialIndex/index.vue

@@ -16,6 +16,7 @@
    </div>
    <div class="topChart">
      <div class="chart-item">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <div class="chart-tit">
          <span class="tit">八大作业各分类分布图</span>
          <div class="filter-part filter-part2">
@@ -31,6 +32,7 @@
        </el-radio-group>
      </div>
      <div class="chart-item">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <div class="chart-tit">
          <span class="tit">各事业部关联作业分析</span>
          <div class="filter-part">
@@ -50,6 +52,7 @@
    </div>
    <div class="topChart">
      <div class="chart-item">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <div class="chart-tit">
          <span class="tit">关联作业趋势图</span>
          <div class="filter-part filter-part2">
@@ -59,6 +62,7 @@
        <div class="chart" :id="zyqs"></div>
      </div>
      <div class="chart-item">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <div class="chart-tit">
          <span class="tit">异常警报关联人</span>
          <div class="filter-part">
@@ -69,12 +73,12 @@
                active-text="作业人"
                inactive-text="监护人"
            />
            <el-radio-group v-model="chartSearch4.days" size="small" @change="(value)=>changeTime2(value)">
              <el-radio :label='7' border>近7天</el-radio>
              <el-radio :label='30' border>近30天</el-radio>
              <el-radio :label='90' border>近90天</el-radio>
              <el-radio :label='365' border>近一年</el-radio>
            </el-radio-group>
            <el-select :teleported="false" v-model="chartSearch4.period" size="small">
              <el-option label="近7天" value="week"/>
              <el-option label="近30天" value="month"/>
              <el-option label="近90天" value="season"/>
              <el-option label="近1年" value="year"/>
            </el-select>
            <el-select :teleported="false" v-model="chartSearch4.workType" size="small">
              <el-option
                  v-for="item in workType1"
@@ -104,6 +108,7 @@
    </div>
    <div>
      <div class="homeCard">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <el-row>
          <el-col :span="5" style="display:flex;align-items: center">
            <span style="white-space: nowrap">作业类型：</span>
@@ -277,6 +282,7 @@
import * as echarts from "echarts";
import screenfull from "screenfull";
import VideoDetail from "/@/views/specialWorkSystem/specialIndex/components/videoDetail.vue";
import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3'

// 定义接口来定义对象的类型
interface stateType {
@@ -550,7 +556,7 @@
    });
    // 页面载入时执行方法
    onMounted(() => {
      getListByPage();
      // getListByPage();
      getAllDepartment();
      initZyfb()
      initSlfx()
@@ -623,7 +629,7 @@
          textStyle: {
            // 设置默认的文字颜色
            color: state.themeColor,
            fontSize: 12
            // fontSize: 12
          },
          itemStyle: {
            borderWidth: 0 // 设置图例边框宽度为0
@@ -638,21 +644,29 @@
            itemStyle: {
              borderRadius: 1,
              borderColor: '#fff',
              borderWidth: 2
              borderWidth: 1
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
              show: true,
              position: 'outside',
              overflow: 'truncate',
              borderWidth: 0,
              color: state.themeColor
            },
            labelLine: {
              show: true
              show: true,    // 显示指示线
              lineStyle: {
                color: '#ccc',
                width: 1,
                type: 'solid'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            },
            data: [
              { value: 1048, name: '动火作业' },
@@ -735,7 +749,17 @@
          }
        },
        yAxis: {
          type: 'value'
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fafafa',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel:{
            color: '#ccc'
          }
        },
        grid: {
          top: '8%',
@@ -744,7 +768,10 @@
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
            type: 'line'
            type: 'line',
            label:{
              show: true
            }
          }
        ]
      }
@@ -756,7 +783,7 @@
    }
    // 刷新
    const reLoadData = async () => {
      getListByPage();
      // getListByPage();
    };

    // 填写表单
@@ -781,29 +808,29 @@
    };

    // 分页获取列表
    const getListByPage = async () => {
      const dateRange = JSON.parse(JSON.stringify(state.searchDate))
      if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
      const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
      let res = await workApplyApi().getApplyList(data);
      if (res.data.code === '200') {
        state.workData = JSON.parse(JSON.stringify(res.data.data));
        state.workData = state.workData.map((item) => {
          if (item.operators == null || item.operators == []) {
            item.operators = [];
          } else {
            item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
          }
          return item;
        });
        state.totalSize1 = res.data.total;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };
    // const getListByPage = async () => {
    //   const dateRange = JSON.parse(JSON.stringify(state.searchDate))
    //   if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
    //   const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
    //   let res = await workApplyApi().getApplyList(data);
    //   if (res.data.code === '200') {
    //     state.workData = JSON.parse(JSON.stringify(res.data.data));
    //     state.workData = state.workData.map((item) => {
    //       if (item.operators == null || item.operators == []) {
    //         item.operators = [];
    //       } else {
    //         item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
    //       }
    //       return item;
    //     });
    //     state.totalSize1 = res.data.total;
    //   } else {
    //     ElMessage({
    //       type: 'warning',
    //       message: res.data.msg
    //     });
    //   }
    // };

    // 表格数据格式化
    const toNames = (row, column, cellValue, index) => {
@@ -830,7 +857,7 @@
          message: '请输入查询关键词'
        });
      } else {
        getListByPage();
        // getListByPage();
      }
    };
    // 重置搜索
@@ -838,16 +865,16 @@
      state.searchWord = null;
      state.searchDep = null;
      state.searchDate = []
      getListByPage();
      // getListByPage();
    };

    const handleSizeChange1 = (val: number) => {
      state.pageSize1 = val;
      getListByPage();
      // getListByPage();
    };
    const handleCurrentChange1 = (val: number) => {
      state.pageIndex1 = val;
      getListByPage();
      // getListByPage();
    };

    // 查看记录
@@ -941,7 +968,7 @@
      searchRecord,
      clearSearch,
      viewRecord,
      getListByPage,
      // getListByPage,
      handleSizeChange1,
      handleCurrentChange1,
      ...toRefs(state)
@@ -1417,25 +1444,38 @@

  .full{
    position:fixed;
    background: #fff;
    border-radius: 17px;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(54, 252, 252, .6);
    border-radius: 17px 1px 1px 17px;
    box-shadow: 3px 3px 12px rgba(0,0,0,.2);
    height: 34px;
    line-height: 34px;
    top: 0;
    right: 20px;
    height: 32px;
    line-height: 30px;
    top: 10px;
    right: 2px;
    display: flex;
    justify-content: center;
    backdrop-filter: blur(2px);
    z-index: 99999;
  }
  .topChart{
    .chart-item{
      border-radius: 4px;
      background: rgba(8, 109, 209, 0.2);
      border: 1px solid rgba(54, 252, 252, .6);
      background: rgba(0, 61, 121, 0.2);
      backdrop-filter: blur(5px);
      position: relative;
      z-index: 2;
      &:last-of-type{
        position: relative;
        z-index: 1;
      }

      .item-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .el-radio.is-bordered.is-checked{
        border-color: #11FEEE !important;
@@ -1521,11 +1561,18 @@
  }
  .homeCard{
    border-radius: 4px;
    background: rgba(8, 109, 209, 0.2);
    border: 1px solid rgba(54, 252, 252, .6);
    background: rgba(0, 61, 121, 0.2);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 3;
    .item-bg{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .el-row{
      &>div{
        &>span{