修改指标选择

马宇豪

2023-03-14 2c4edb31e7da37c98e5660ab478f43e01a77003c

 src/views/specialWorkSystem/specialIndex/index.vue

@@ -23,11 +23,11 @@
          </div>
        </div>
        <div class="chart" :id="zyfb"></div>
        <el-radio-group v-model="chartSearch1.period" size="small">
          <el-radio label="week" border>近7天</el-radio>
          <el-radio label="month" border>近30天</el-radio>
          <el-radio label="season" border>近90天</el-radio>
          <el-radio label="year" border>近一年</el-radio>
        <el-radio-group v-model="chartSearch1.days" size="small" @change="(value)=>changeTime1(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>
      </div>
      <div class="chart-item">
@@ -69,12 +69,12 @@
                active-text="作业人"
                inactive-text="监护人"
            />
            <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-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.workType" size="small">
              <el-option
                  v-for="item in workType1"
@@ -311,7 +311,8 @@
  reviewRules: object;
  warningData: Array<any>;
  isFull:boolean;
  themeColor:string
  themeColor:string;
  endTime:string
}
interface type {
  id: number;
@@ -363,11 +364,11 @@
      chosenIndex: null,
      searchWord: null,
      searchStatus: null,
      endTime: '',
      chartSearch1: {
        searchDep: null,
        startTime: '2023-03-08',
        endTime: '2023-02-08',
        period: 'month'
        startTime: '',
        days: 30
      },
      chartSearch2: {
        searchDep: null,
@@ -377,7 +378,9 @@
        searchDep: null
      },
      chartSearch4: {
        searchDep: null
        searchDep: null,
        startTime: '',
        days: 30
      },
      searchDep2: null,
      searchDep: null,
@@ -552,7 +555,30 @@
      initZyfb()
      initSlfx()
      initZyqs()
      state.endTime = formatDate(new Date())
      // state.chartSearch1.startTime = getPeriod(30)
      console.log(state.chartSearch1.startTime,state.endTime,'默认时间段')
    });
    const getPeriod =(num)=> {
      const currentDate = new Date();
      const startTime = new Date();
      startTime.setDate(currentDate.getDate() - num);
      return formatDate(startTime)
    }
    const formatDate =(date)=> {
      const year = date.getFullYear().toString().slice(-2);
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      return `${year}-${month}-${day} 00:00:00`;
    }
    const changeTime1=(value:number)=>{
      state.chartSearch1.startTime = getPeriod(value)
      console.log(state.chartSearch1.startTime,state.endTime,'结束段')
    }
    const changeTime2=(value:number)=>{
      state.chartSearch4.startTime = getPeriod(value)
      console.log(state.chartSearch4.startTime,state.endTime,'结束段')
    }
    const toFullscreen =()=>{
      const element = document.getElementById('bigScreen')
      if (!screenfull.isEnabled) {
@@ -597,7 +623,7 @@
          textStyle: {
            // 设置默认的文字颜色
            color: state.themeColor,
            fontSize: 12
            // fontSize: 12
          },
          itemStyle: {
            borderWidth: 0 // 设置图例边框宽度为0
@@ -612,21 +638,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: '动火作业' },
@@ -709,7 +743,17 @@
          }
        },
        yAxis: {
          type: 'value'
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fafafa',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel:{
            color: '#ccc'
          }
        },
        grid: {
          top: '8%',
@@ -718,7 +762,10 @@
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
            type: 'line'
            type: 'line',
            label:{
              show: true
            }
          }
        ]
      }
@@ -903,6 +950,8 @@
      zyfb,
      slfx,
      zyqs,
      changeTime1,
      changeTime2,
      toFullscreen,
      handleReview,
      openVideo,
@@ -942,7 +991,7 @@
    line-height: 34px;
    top: 80px;
    right: 20px;
    z-index: 99999;
    z-index: 9;
  }

  .demo-tabs {
@@ -1389,13 +1438,17 @@

  .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{