xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

 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,49 +27,178 @@
   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) {
      setup(props,context) {
         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 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);
          }
        }
      };

         },5000)
      const getDataByYearId = async () => {
        let res = await riskWarningApi().getDpLine();
        if (res.data.code === '200') {
          state.riskData = res.data.data
          initRisk1(state.riskData)
          context.emit('getData',state.riskData)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

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


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

            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'axis',
@@ -68,215 +207,71 @@
                     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: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
                  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, 302, 301, 334, 390, 330],
                     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: [120, 132, 101, 134, 90, 230],
                     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: [220, 182, 191, 234, 290, 330],
                     barCategoryGap: '50%'
                  }
               ]
          color: ['#91cc75','#ee6666'],
          grid: [
            {
              top: '5%',
              right: '2%',
              bottom: '10%'
            }
          ],
          xAxis: {
            type: 'category',
            data: data.map(i=>i.time),
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            splitLine:{
              lineStyle: {
                color: 'rgba(255,255,255,.2)'
              }
            }
          },
          series: [
            {
              name: '一般隐患',
              type: 'line',
              data: data.map(i=>i.generalDanger?i.generalDanger:0)
            },
            {
              name: '重大隐患',
              type: 'line',
              data: data.map(i=>i.majorDanger?i.majorDanger:0)
            },
          ]
            };

            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: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                  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 +280,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 +310,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%;