xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

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

@@ -1,11 +1,16 @@
<template>
   <div class="charts-cont">
      <div :class="choose" >
         <div :class="cur===1?'act':''" @click="changeTab(1)">月度</div>
         <div :class="cur===2?'act':''" @click="changeTab(2)">年度</div>
      <div :class="selector">
         <el-cascader
               class="timeSe"
               :teleported="false"
               v-model="timeValue"
               :options="optionList"
               :props="riskProps"
               @change="changeTime"
         />
      </div>
      <div v-show="cur===1" class="month" :id="accidentMonth"></div>
      <div v-show="cur===2" class="month" :id="accidentYear"></div>
      <div class="month" :id="accidentMonth"></div>
   </div>
</template>

@@ -22,12 +27,16 @@
   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 {
      cur: number,
      curColor: string,
      choose: string
   }
    accData: Array<any>;
      timeValue: Array<any>,
      optionList: Array<any>,
      selector: string,
      riskProps: object
  }
   export default defineComponent({
      name: 'accident',
      components: {},
@@ -35,28 +44,124 @@
         size: Number,
         theme: Boolean
      },
      setup(props) {
      setup(props,context) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const screenThemes = useScreenTheme()
         const { screenTheme }  = storeToRefs(screenThemes);
         const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
         const accidentYear = ref("eChartFix" + Date.now() + Math.random())
         const state = reactive<stateType>({
            cur: 1,
            curColor: '#fff',
            choose: 'choose-dark'
        accData: [],
            timeValue: [],
            optionList: [],
            riskProps: {
               expandTrigger: 'hover'
            },
            selector: 'select-dark'
         })
      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 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])
      }
      const getDataByYearId = async () => {
        const data = {
          year: state.timeValue[0],
          month: state.timeValue[1],
        }
        if(state.timeValue[1] == 0){
          data.month = ''
        }
        let res = await riskWarningApi().getRiskByTimeDep(data);
        if (res.data.code === '200') {
          state.accData = res.data.data
          initAccidentByMonth(state.accData)
          context.emit('getData',state.accData)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

         const changeTab =(i)=>{
            state.cur = i
            nextTick(()=>{
               initAccidentByYear();
            })
         }
         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initAccidentByMonth =()=>{
         const initAccidentByMonth =(data)=>{
            let dom = document.getElementById(accidentMonth.value);
            let myChart = echarts.init(dom);

@@ -78,7 +183,7 @@
               },
               series: [
                  {
                     name: '月度数据',
                     name: '事故等级数量',
                     type: 'pie',
                     radius: ['50%', '80%'],
                     avoidLabelOverlap: false,
@@ -105,13 +210,12 @@
                           fontWeight: 'bold'
                        }
                     },
                     data: [
                        { value: 1, name: '特别重大事故' },
                        { value: 10, name: '重大事故' },
                        { value: 20, name: '较大事故' },
                        { value: 33, name: '一般事故' },
                        { value: 50, name: '未遂事故' }
                     ],
                     data: data.map(i=>{
                return {
                  name: i.accidentGrade,
                  value: i.count
                }
              }),
                     center: ['50%','60%']
                  }
               ]
@@ -123,74 +227,7 @@
               myChart.resize();
            });
         }
         // 隐患整改情况
         const initAccidentByYear =()=>{
            let dom = document.getElementById(accidentYear.value);
            let myChart = echarts.init(dom);

            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'item'
               },
               legend: {
                  top: '0',
                  left: 'center',
                  itemWidth: fontSize(10),
                  itemHeight: fontSize(8),
                  textStyle:{
                     color: 'auto',
                     fontSize: fontSize(11)
                  }
               },
               series: [
                  {
                     name: '年度数据',
                     type: 'pie',
                     radius: ['50%', '80%'],
                     avoidLabelOverlap: false,
                     itemStyle: {
                        borderRadius: fontSize(2)
                     },
                     label: {
                        show: false,
                        position: 'outer',
                        fontSize: fontSize(10),
                        textBorderWidth: 0,
                        width: fontSize(40),
                        overflow: 'break'
                     },
                     // labelLine: {
                     //    show: true,
                     //    length: fontSize(10),
                     //    length2: fontSize(10)
                     // },
                     emphasis: {
                        label: {
                           show: true,
                           fontSize: fontSize(22),
                           fontWeight: 'bold'
                        }
                     },
                     data: [
                        { value: 10, name: '特别重大事故' },
                        { value: 20, name: '重大事故' },
                        { value: 100, name: '较大事故' },
                        { value: 130, name: '一般事故' },
                        { value: 150, name: '未遂事故' }
                     ],
                     center: ['50%','60%']
                  }
               ]
            };

            option && myChart.setOption(option);

            window.addEventListener("resize",function (){
               myChart.resize();
            });
         }

         function fontSize(val){
            let nowClientWidth = document.documentElement.clientWidth;
@@ -198,36 +235,43 @@
         }
         const getTheme =()=>{
            if(screenTheme.value.isDark){
               state.choose =  'choose-dark'
               state.selector =  'select-dark'
            }else{
               state.choose =  'choose-light'
               state.selector =  'select-light'
            }
         }

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

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

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

         onUnmounted(() =>{

         })

         return {
            accidentMonth,
            accidentYear,
            Search,
            changeTab,
        changeTime,
            fontSize,
            ...toRefs(state)
         };
@@ -242,58 +286,115 @@
      padding: 5%;
      position: relative;

      .choose-dark{
      .select-dark{
         position: absolute;
         right: 4%;
         bottom: 4%;
         z-index: 999;
         display: flex;
         align-items: center;
         font-size: 0.75rem;
         justify-content: space-between;
         z-index: 99999;
         top: -20px;
         right: 3rem;
         width: 30%;
         height: 1.5rem;
         margin-right: 0.8rem;

         div{
            padding: 2px 6px;
            box-sizing: border-box;
            color: rgba(17,254,238,.4);
         ::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);
            border-radius: 2px;
            cursor: pointer;
         }
         div:hover{
            color: #11FEEE;
            border: 1px solid #11FEEE;
            z-index: 999999 !important;
            .el-cascader-node__label{
               color: #11FEEE;
            }
            .el-icon{
               color: #11FEEE;
            }
            .el-cascader-node{
               &:hover{
                  background: #0049af;
               }
            }
         }
         .act{
         ::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;
            border: 1px solid #11FEEE;

            input{
               font-size: 0.8rem;
               color: #11FEEE;
            }
            .el-icon{
               color: #11FEEE;
            }
         }
      }
      .choose-light{
         position: absolute;
         right: 4%;
         bottom: 4%;
         z-index: 999;
         display: flex;
         align-items: center;
         font-size: 0.75rem;
         justify-content: space-between;

         div{
            padding: 2px 6px;
            box-sizing: border-box;
            color: #ccc;
      .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;
            border-radius: 2px;
            cursor: pointer;
            color: #fff;
            z-index: 999999 !important;
            .el-cascader-node__label{
               color: #000;
            }
            .el-icon{
               color: #000;
            }
            .el-cascader-node{
               &:hover{
                  background: #ccc;
               }
            }
         }
         div:hover{
            color: #333;
            border: 1px solid #333;
         ::v-deep(.el-cascader-menu){
            min-width: 80px !important;
         }
         .act{
            color: #333;
            border: 1px solid #333;
         ::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;
            }
         }
      }
      .month{