马宇豪
2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330
src/views/riskWarningSys/warningBigScreen/components/risk.vue
@@ -1,15 +1,15 @@
<template>
   <div class="charts-cont">
      <div :class="selector">
         <el-cascader
               class="timeSe"
               :teleported="false"
               v-model="timeValue"
               :options="optionList"
               :props="riskProps"
               @change="changeTime"
         />
      </div>
<!--      <div :class="selector">-->
<!--         <el-cascader-->
<!--               class="timeSe"-->
<!--               :teleported="false"-->
<!--               v-model="timeValue"-->
<!--               :options="optionList"-->
<!--               :props="riskProps"-->
<!--               @change="changeTime"-->
<!--         />-->
<!--      </div>-->
      <div class="risk" :id="risk1"></div>
<!--      <div v-show="curValue===false" class="risk" :id="risk2"></div>-->
   </div>
@@ -55,7 +55,7 @@
         theme: Boolean,
      dep: Array
      },
      setup(props) {
      setup(props,context) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const screenThemes = useScreenTheme()
@@ -147,19 +147,6 @@
          state.optionList.push(newObj)
        }
      }
         // const swi = setInterval(()=>{
         //    state.curValue = !state.curValue
         //    if(state.curValue == true){
         //       nextTick(()=>{
         //          initRisk1()
         //       })
         //    }else{
         //       nextTick(()=>{
         //          initRisk2()
         //       })
         //    }
      //
         // },5000)
      // 获取部门列表
      const getAllDepartment = async () => {
        let res = await teamManageApi().getAllDepartment();
@@ -184,51 +171,13 @@
          }
        }
      };
      // const recursion = (value: any) => {
      //   for (let i of value) {
      //     if (i.children.length !== 0) {
      //       state.departmentRecursionList.push(i);
      //       recursion(i.children);
      //     } else {
      //       state.departmentRecursionList.push(i);
      //     }
      //   }
      // };
      const getDataByYearId = async () => {
        getTime()
        const data = {
          depId: screenTheme.value.depId || 1,
          beginYear: state.timeValue[0],
          beginMonth: state.timeValue[1],
          endYear: state.timeValue[0],
          endMonth: state.timeValue[1]
        }
        if(state.timeValue[1] == 0){
          data.beginMonth = 1
          data.endMonth = 12
        }
        let res = await riskWarningApi().getPreventByTimeDep(data);
        let res = await riskWarningApi().getDpLine();
        if (res.data.code === '200') {
          state.riskData = res.data.data
          const depList = []
          const deathList = []
          const hardList = []
          const lightList = []
          for(let index in state.riskData){
            state.riskData[index].depId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.riskData[index].depId))?.depName;
            depList.push(state.riskData[index].depId)
            deathList.push(state.riskData[index].detail.deathCount)
            hardList.push(state.riskData[index].detail.heavyInjureCount)
            lightList.push(state.riskData[index].detail.lightInjureCount)
          }
          // state.departmentList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName;
          if(depList.length == 0){
            depList.push('该部门不包含子部门数据')
            deathList.push(0)
            hardList.push(0)
            lightList.push(0)
          }
          initRisk1(depList,deathList,hardList,lightList)
          initRisk1(state.riskData)
          context.emit('getData',state.riskData)
        } else {
          ElMessage({
            type: 'warning',
@@ -246,12 +195,10 @@
         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initRisk1 =(depList,deathList,hardList,lightList)=>{
         const initRisk1 =(data)=>{
            let dom = document.getElementById(risk1.value);
            let myChart = echarts.init(dom);
            let option: EChartsOption;
            option = {
               tooltip: {
                  trigger: 'axis',
@@ -260,245 +207,47 @@
                     type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                  }
               },
          // dataZoom: {
          //   type: 'slider',
          //   show: true,
          //   textStyle: {
          //     color: '#fff'
          //   },
          //   realtime: true,
          //   top: 20,
          //   left: 10,
          //   height: 12,
          //   width: 80,
          //   start: 0,
          //   end: 100,
          //   orient: 'horizontal'
          // },
          dataZoom: [
            //滑动条
          color: ['#91cc75','#ee6666'],
          grid: [
            {
              xAxisIndex: 0, //这里是从X轴的0刻度开始
              show: false, //是否显示滑动条,不影响使用
              type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 6, // 一次性展示几个。
            },
          ],
               legend: {
                  top: '0',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: 'auto',
                     fontSize: fontSize(12)
              top: '5%',
              right: '2%',
              bottom: '10%'
                  }
               },
               grid: {
                  left: '2%',
                  right: '4%',
                  bottom: '0',
                  containLabel: true
               },
          ],
               xAxis: {
                  type: 'category',
                  data: depList,
                  axisLine:{
                     show: true,
                     lineStyle:{
                        color: '#999'
                     }
                  },
            data: data.map(i=>i.time),
                  axisLabel:{
                     color: '#999',
              fontSize: fontSize(9)
              color: '#fff'
                  }
               },
               yAxis: {
                  type: 'value',
                  axisLine:{
                     show: true,
                     lineStyle:{
                        type: 'dotted'
                     }
                  },
                  axisLabel:{
                     color: '#999'
                  },
                  splitLine:{
                     show: false
              lineStyle: {
                color: 'rgba(255,255,255,.2)'
              }
                  }
               },
               series: [
                  {
                     name: '可能造成死亡的',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: false
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: deathList,
                     barCategoryGap: '50%'
              name: '一般隐患',
              type: 'line',
              data: data.map(i=>i.generalDanger?i.generalDanger:0)
                  },
                  {
                     name: '可能造成重伤的',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: false
              name: '重大隐患',
              type: 'line',
              data: data.map(i=>i.majorDanger?i.majorDanger:0)
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: hardList,
                     barCategoryGap: '50%'
                  },
                  {
                     name: '可能造成轻伤的',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: false
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     data: lightList,
                     barCategoryGap: '50%'
                  }
               ]
            };
            // option && myChart.setOption(option);
        if (option && typeof option === 'object') {
          myChart.setOption(option);
          state.myVar = setInterval(function(){
            if (option.dataZoom[0].endValue == depList.length ) {
              option.dataZoom[0].endValue = 4;
              option.dataZoom[0].startValue = 0;
            } else {
              option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
              option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
            }
            myChart.setOption(option);
          }, 6000)
        }
            option && myChart.setOption(option);
            window.addEventListener("resize",function (){
               myChart.resize();
            });
            // echarts.init(document.getElementById(risk2.value)).dispose()
            })
         }
         // const initRisk2 =()=>{
         //    let dom = document.getElementById(risk2.value);
         //    let myChart = echarts.init(dom);
      //
         //    let option: EChartsOption;
      //
         //    option = {
         //       tooltip: {
         //          trigger: 'axis',
         //          axisPointer: {
         //             // Use axis to trigger tooltip
         //             type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
         //          }
         //       },
         //       legend: {
         //          top: '1%',
         //          left: 'center',
         //          itemWidth: fontSize(10),
         //          itemHeight: fontSize(8),
         //          textStyle:{
         //             color: 'auto',
         //             fontSize: fontSize(12)
         //          }
         //       },
         //       grid: {
         //          left: '2%',
         //          right: '4%',
         //          bottom: '0',
         //          containLabel: true
         //       },
         //       xAxis: {
         //          type: 'category',
         //          data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
         //          axisLine:{
         //             show: true,
         //             lineStyle:{
         //                color: '#999'
         //             }
         //          },
         //          axisLabel:{
         //             color: '#999'
         //          }
         //       },
         //       yAxis: {
         //          type: 'value',
         //          axisLine:{
         //             show: true,
         //             lineStyle:{
         //                type: 'dotted'
         //             }
         //          },
         //          axisLabel:{
         //             color: '#999'
         //          },
         //          splitLine:{
         //             show: false
         //          }
         //       },
         //       series: [
         //          {
         //             name: '可能造成死亡的',
         //             type: 'bar',
         //             stack: 'total',
         //             label: {
         //                show: false
         //             },
         //             emphasis: {
         //                focus: 'series'
         //             },
         //             data: [320, 301, 334, 390, 330, 320],
         //             barCategoryGap: '50%'
         //          },
         //          {
         //             name: '可能造成重伤的',
         //             type: 'bar',
         //             stack: 'total',
         //             label: {
         //                show: false
         //             },
         //             emphasis: {
         //                focus: 'series'
         //             },
         //             data: [90, 230, 210, 132, 101, 134],
         //             barCategoryGap: '50%'
         //          },
         //          {
         //             name: '可能造成轻伤的',
         //             type: 'bar',
         //             stack: 'total',
         //             label: {
         //                show: false
         //             },
         //             emphasis: {
         //                focus: 'series'
         //             },
         //             data: [290, 330, 310, 191, 234, 290],
         //             barCategoryGap: '50%'
         //          }
         //       ]
         //    };
      //
         //    option && myChart.setOption(option);
         //    window.addEventListener("resize",function (){
         //       myChart.resize();
         //    });
         //    echarts.init(document.getElementById(risk1.value)).dispose()
         // }
         const getTheme =()=>{
            if(screenTheme.value.isDark){