Default Changelist

马宇豪

2024-03-13 ce115e4c67e98c143159039494f14c7bcda59415

 src/views/riskWarningSys/warningBigScreen/components/risk.vue

@@ -1,12 +1,22 @@
<template>
   <div class="charts-cont">
      <div v-show="curValue===true" class="risk" :id="risk1"></div>
      <div v-show="curValue===false" class="risk" :id="risk2"></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>
</template>

<script lang="ts">
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} from 'vue';
   import { toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount, watchEffect } from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
@@ -17,44 +27,226 @@
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
   import * as echarts from 'echarts';
   import '/@/theme/bigScreen.css'
   import { useScreenTheme } from "/@/stores/screenTheme";
  import { riskWarningApi } from '/@/api/riskWarning';
  import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";


   interface stateType {
      curValue: boolean
      curValue: boolean,
      timeValue: Array<any>,
      optionList: Array<any>,
      selector: string,
      riskData: Array<any>,
      riskProps: object,
    departmentList: Array<any>,
    departmentRecursionList: Array<DepartmentState>;
    myVar: any
   }
  interface DepartmentState {
    depId: number;
    depName: string;
  }
   export default defineComponent({
      name: 'risk',
      components: {},
      props:{
         size: Number,
         month: Number
         theme: Boolean,
      dep: Array
      },
      setup(props) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const screenThemes = useScreenTheme()
         const { screenTheme }  = storeToRefs(screenThemes);
         const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
         const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
         // const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
         const state = reactive<stateType>({
            curValue: true
            curValue: true,
            timeValue: [],
            optionList: [],
            riskProps: {
               expandTrigger: 'hover'
            },
            selector: 'select-dark',
            riskData: [],
        departmentList: [],
        departmentRecursionList: [],
        myVar: null
         })
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: 'numeric',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };
      const makeList = () =>{
        for(let i=0;i<=60;i++){
          const newObj = {
            label: 1990 + i + '',
            value: 1990 + i + '',
            children: [
              {
                label: '年度',
                value: 0
              },
              {
                label: '一月',
                value: 1
              },
              {
                label: '二月',
                value: 2
              },
              {
                label: '三月',
                value: 3
              },
              {
                label: '四月',
                value: 4
              },
              {
                label: '五月',
                value: 5
              },
              {
                label: '六月',
                value: 6
              },
              {
                label: '七月',
                value: 7
              },
              {
                label: '八月',
                value: 8
              },
              {
                label: '九月',
                value: 9
              },
              {
                label: '十月',
                value: 10
              },
              {
                label: '十一月',
                value: 11
              },
              {
                label: '十二月',
                value: 12
              }
            ]
          }
          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();
        if (res.data.code === '200') {
          state.departmentList = JSON.parse(JSON.stringify(res.data.data))
          recursion(state.departmentList);
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };

         const swi = setInterval(()=>{
            state.curValue = !state.curValue
            if(state.curValue == true){
               nextTick(()=>{
                  initRisk1()
               })
            }else{
               nextTick(()=>{
                  initRisk2()
               })
            }
      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 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);
        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)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

         },5000)
         const changeTime = (value)=>{
            state.timeValue[0] = value[0]
            state.timeValue[1] = value[1]
            getDataByYearId()
         }


         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initRisk1 =()=>{
         const initRisk1 =(depList,deathList,hardList,lightList)=>{
            let dom = document.getElementById(risk1.value);
            let myChart = echarts.init(dom);

@@ -68,8 +260,33 @@
                     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: [
            //滑动条
            {
              xAxisIndex: 0, //这里是从X轴的0刻度开始
              show: false, //是否显示滑动条，不影响使用
              type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 6, // 一次性展示几个。
            },
          ],
               legend: {
                  top: '1%',
                  top: '0',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
@@ -86,8 +303,7 @@
               },
               xAxis: {
                  type: 'category',
                  // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                  data: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
                  data: depList,
                  axisLine:{
                     show: true,
                     lineStyle:{
@@ -95,7 +311,8 @@
                     }
                  },
                  axisLabel:{
                     color: '#999'
                     color: '#999',
              fontSize: fontSize(9)
                  }
               },
               yAxis: {
@@ -124,8 +341,7 @@
                     emphasis: {
                        focus: 'series'
                     },
                     // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
                     data: [320, 302, 301, 334, 390, 330],
                     data: deathList,
                     barCategoryGap: '50%'
                  },
                  {
@@ -138,8 +354,7 @@
                     emphasis: {
                        focus: 'series'
                     },
                     // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
                     data: [120, 132, 101, 134, 90, 230],
                     data: hardList,
                     barCategoryGap: '50%'
                  },
                  {
@@ -152,131 +367,162 @@
                     emphasis: {
                        focus: 'series'
                     },
                     // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
                     data: [220, 182, 191, 234, 290, 330],
                     data: lightList,
                     barCategoryGap: '50%'
                  }
               ]
            };

            option && myChart.setOption(option);
            // 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)
        }
            window.addEventListener("resize",function (){
               myChart.resize();
            });
            echarts.init(document.getElementById(risk2.value)).dispose()
            // echarts.init(document.getElementById(risk2.value)).dispose()
         }

         const initRisk2 =()=>{
            let dom = document.getElementById(risk2.value);
            let myChart = echarts.init(dom);
         // 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()
         // }

            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: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                  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, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
                     data: [320, 301, 334, 390, 330, 320],
                     barCategoryGap: '50%'
                  },
                  {
                     name: '可能造成重伤的',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: false
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
                     data: [90, 230, 210, 132, 101, 134],
                     barCategoryGap: '50%'
                  },
                  {
                     name: '可能造成轻伤的',
                     type: 'bar',
                     stack: 'total',
                     label: {
                        show: false
                     },
                     emphasis: {
                        focus: 'series'
                     },
                     // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
                     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){
               state.selector =  'select-dark'
            }else{
               state.selector =  'select-light'
            }
         }

      const getTime = () =>{
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
        const temp = curTime.split('-')
        state.timeValue[0] = temp[0]
        state.timeValue[1] = Number(temp[1])
      }

         watchEffect(() => {
            if(props.theme){
               state.selector =  'select-dark'
            }else{
               state.selector =  'select-light'
            }
        getDataByYearId()
         })

         function fontSize(val){
            let nowClientWidth = document.documentElement.clientWidth;
@@ -285,18 +531,24 @@

         // 页面载入时执行方法
         onMounted(() => {
            initRisk1();
            // initRisk1();
            getTheme();
        getTime();
        makeList();
        getAllDepartment();
        getDataByYearId()
         });

         onBeforeUnmount(() =>{
            clearInterval(swi)
            clearInterval(state.myVar)
        state.myVar = null
         })

         return {
            risk1,
            risk2,
            Search,
            fontSize,
            changeTime,
            ...toRefs(state)
         };
      },
@@ -309,6 +561,117 @@
      height: 100%;
      padding: 5% 5% 2%;
      position: relative;
      .select-dark{
         position: absolute;
         z-index: 99999;
         top: -20px;
         right: 3rem;
         width: 30%;
         height: 1.5rem;
         margin-right: 0.8rem;

         ::v-deep(.el-cascader){
            width: 100% !important;
            line-height: 100%;
         }
         ::v-deep(.el-popper){
            background-color: rgba(10,31,92,1);
            border: 1px solid rgba(17,254,238,.4);
            color: #11FEEE;
            z-index: 999999 !important;
            .el-cascader-node__label{
               color: #11FEEE;
            }
            .el-icon{
               color: #11FEEE;
            }
            .el-cascader-node{
               &:hover{
                  background: #0049af;
               }
            }
         }
         ::v-deep(.el-cascader-menu){
            min-width: 50px !important;
         }
         ::v-deep(.el-popper__arrow){
            &::before{
               background-color: rgba(10,31,92,.6) !important;
               border: 1px solid rgba(17,254,238,.4);
            }
         }
         ::v-deep(.el-input__wrapper){
            box-shadow: none;
            border: 1px solid rgba(17,254,238,.2);
            background: rgba(10,31,92,.6) !important;
            height: 1.5rem;
            color: #11FEEE;

            input{
               font-size: 0.8rem;
               color: #11FEEE;
            }
            .el-icon{
               color: #11FEEE;
            }
         }
      }

      .select-light{
         position: absolute;
         z-index: 99999;
         top: -20px;
         right: 3rem;
         width: 30%;
         height: 20px;
         margin-right: 0.8rem;

         ::v-deep(.el-cascader){
            width: 100% !important;
            line-height: 100%;
         }
         ::v-deep(.el-popper){
            background-color: rgba(255,255,255,1);
            border: 1px solid #ccc;
            color: #fff;
            z-index: 999999 !important;
            .el-cascader-node__label{
               color: #000;
            }
            .el-icon{
               color: #000;
            }
            .el-cascader-node{
               &:hover{
                  background: #ccc;
               }
            }
         }
         ::v-deep(.el-cascader-menu){
            min-width: 80px !important;
         }
         ::v-deep(.el-popper__arrow){
            &::before{
               background-color: rgba(255,255,255,.6) !important;
               border: 1px solid #ccc;
            }
         }
         ::v-deep(.el-input__wrapper){
            box-shadow: none;
            border: 1px solid #ccc;
            background: #fff !important;
            height: 1.5rem;
            color: #fff;

            input{
               font-size: 0.8rem;
               color: #000;
            }
            .el-icon{
               color: #000;
            }
         }
      }

      .risk{
         width: 100%;