xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

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

@@ -1,10 +1,6 @@
<template>
   <div class="charts-cont">
    <span v-if="lastDays == -1" :class="tip">该部门本年未进行应急演练</span>
    <span v-else :class="tip">距本年度上次演练结束{{lastDays}}天</span>
      <div v-show="curTab === 1" class="train" :id="train1"></div>
      <div v-show="curTab === 2" class="train" :id="train2"></div>
      <div v-show="curTab === 3" class="train" :id="train3"></div>
      <div class="train" :id="train1"></div>
   </div>
</template>

@@ -34,12 +30,8 @@
   import '/@/theme/bigScreen.css'

   interface stateType {
      curTab: number,
    timeValue: Array<any>,
    traData: Array<any>,
    monthData: Array<any>,
    lastDays: number | null,
    tip: string,
    changeChart: any
   }
   export default defineComponent({
      name: 'accident',
@@ -48,78 +40,35 @@
         size: Number,
      theme: Boolean
      },
      setup(props) {
      setup(props,context) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
      const screenThemes = useScreenTheme()
      const { screenTheme }  = storeToRefs(screenThemes);
         const train1 = ref("eChartTrain1" + Date.now() + Math.random())
         const train2 = ref("eChartTrain2" + Date.now() + Math.random())
         const train3 = ref("eChartTrain3" + Date.now() + Math.random())
         const state = reactive<stateType>({
            curTab: 1,
        timeValue: [],
        traData: [],
        monthData: [],
        lastDays: null,
        tip: 'tip-dark'
        changeChart: null
         })
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: 'numeric',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };

      const getDataById = async () => {
        getTime()
        const data = {
          depId: screenTheme.value.depId || 1,
          beginYear: state.timeValue[0],
          beginMonth: 1,
          endYear: state.timeValue[0],
          endMonth: state.timeValue[1]
        }
        let res = await riskWarningApi().getEmergencyByDep(data);
        let res = await riskWarningApi().getSafeCheckTask();
        if (res.data.code === '200') {
          state.traData = res.data.data
          const result = []
          let lastTime = ''
          for(let index in state.traData){
            if(state.traData[index].detail && state.traData[index].detail.length>0){
              let total = state.traData[index].detail.reduce((pre,cur)=>{
                return pre+cur.practiceCount
              },0)
              result.push(total)
              state.traData[index].totalCount = total
            }else{
              result.push(0)
            }
            for(let i in state.traData[index].detail){
              if(state.traData[index].detail[i].lastPracticeTime != null){
                lastTime = state.traData[index].detail[i].lastPracticeTime
              }
            }
          const chartData = state.traData.reduce((acc, curr, index) => {
            if (index % 4 === 0) acc.push([]);
            acc[acc.length - 1].push(curr);
            return acc;
          }, [])
          let curIndex = 0
          const renderCharts = () => {
            const data = chartData[curIndex]
            initTrain1(data)
            curIndex = (curIndex + 1) % chartData.length
          }
          if(!lastTime){
            state.lastDays = -1
          }else{
            const date = new Date(lastTime)
            const nTime = Date.now() - date.getTime()
            state.lastDays = Math.floor(nTime / 86400000)
          }
          const arrNum = Math.ceil(result.length/4, 10);
          let index = 0; // 定义初始索引
          let resIndex = 0; // 用来保存每次拆分的长度
          while(index< arrNum){
            state.monthData[index]= result.slice(resIndex,4+resIndex);
            resIndex += 4;
            index++;
          }
          initTrain1()
          renderCharts()
          state.changeChart = setInterval(renderCharts,5000)
          context.emit('getData',state.traData)
        } else {
          ElMessage({
            type: 'warning',
@@ -127,43 +76,14 @@
          });
        }
      }
      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 getTheme =()=>{
        if(screenTheme.value.isDark){
          state.tip =  'tip-dark'
        }else{
          state.tip =  'tip-light'
        }
      }
         const changeTab = setInterval(()=>{
            if(state.curTab<3){
               state.curTab = state.curTab + 1
               if(state.curTab == 2){
                  nextTick(()=>{
                     initTrain2()
                  })
               }else{
                  nextTick(()=>{
                     initTrain3()
                  })
               }

            }else{
               state.curTab = 1
               nextTick(()=>{
                  initTrain1()
               })
            }
         },5000)
      }

         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initTrain1 =()=>{
         const initTrain1 =(data)=>{
            let dom = document.getElementById(train1.value);
            let myChart = echarts.init(dom);
            let option: EChartsOption;
@@ -200,7 +120,7 @@
               },
               yAxis: {
                  type: 'category',
                  data: ['一月', '二月', '三月', '四月'],
                  data: data.map(i=>i.year+ '.' + i.month),
                  axisLine:{
                     show: true,
                     lineStyle:{
@@ -208,14 +128,14 @@
                     }
                  },
                  axisLabel:{
                     color: '#999'
                     color: '#fff'
                  }
               },
               series: [
                  {
                     name: '2011',
                     type: 'bar',
                     data: state.monthData[0],
                     data: data.map(i=>i.count),
                     itemStyle:{
                        color: {
                           x: 0,
@@ -250,193 +170,6 @@
            window.addEventListener("resize",function (){
               myChart.resize();
            });
            echarts.init(document.getElementById(train2.value)).dispose()
            echarts.init(document.getElementById(train3.value)).dispose()
         }

         const initTrain2 =()=>{
            let dom = document.getElementById(train2.value);
            let myChart = echarts.init(dom);
            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                     type: 'shadow'
                  }
               },
               grid: {
                  top: '1%',
                  left: '2%',
                  right: '2%',
                  bottom: '2%',
                  containLabel: true
               },
               xAxis: {
                  type: 'value',
                  boundaryGap: [0, 0.01],
                  axisLine:{
                     show: true,
                     lineStyle:{
                        type: 'dotted'
                     }
                  },
                  axisLabel:{
                     color: '#999'
                  },
                  splitLine:{
                     show: false
                  }
               },
               yAxis: {
                  type: 'category',
                  data: ['五月', '六月','七月', '八月'],
                  axisLine:{
                     show: true,
                     lineStyle:{
                        color: '#999'
                     }
                  },
                  axisLabel:{
                     color: '#999'
                  }
               },
               series: [
                  {
                     name: '2011',
                     type: 'bar',
                     // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                     data: state.monthData[1],
                     barCategoryGap: '50%',
                     itemStyle:{
                        color: {
                           x: 0,
                           y: 0,
                           x2: 1,
                           y2: 0,
                           colorStops: [
                              {
                                 offset: 0.1,
                                 color: "#2D74C0", // 线处的颜色
                              },
                              {
                                 offset: 0.9,
                                 color: "#21D9DC", // 坐标轴处的颜色
                              },
                           ]
                        },
                        borderRadius: [0,99,99,0]
                     },
                     label:{
                        show: true,
                        position: 'outside',
                        color: '#999',
                        fontSize: fontSize(11)
                     }
                  }
               ]
            };

            option && myChart.setOption(option);
            window.addEventListener("resize",function (){
               myChart.resize();
            });
            echarts.init(document.getElementById(train1.value)).dispose()
            echarts.init(document.getElementById(train3.value)).dispose()
         }

         const initTrain3 =()=>{
            let dom = document.getElementById(train3.value);
            let myChart = echarts.init(dom);
            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                     type: 'shadow'
                  }
               },
               grid: {
                  top: '1%',
                  left: '2%',
                  right: '2%',
                  bottom: '2%',
                  containLabel: true
               },
               xAxis: {
                  type: 'value',
                  boundaryGap: [0, 0.01],
                  axisLine:{
                     show: true,
                     lineStyle:{
                        type: 'dotted'
                     }
                  },
                  axisLabel:{
                     color: '#999'
                  },
                  splitLine:{
                     show: false
                  }
               },
               yAxis: {
                  type: 'category',
                  // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                  data: ['九月', '十月', '十一月', '十二月'],
                  axisLine:{
                     show: true,
                     lineStyle:{
                        color: '#999'
                     }
                  },
                  axisLabel:{
                     color: '#999'
                  }
               },
               series: [
                  {
                     name: '2011',
                     type: 'bar',
                     // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                     data: state.monthData[2],
                     barCategoryGap: '50%',
                     itemStyle:{
                        color: {
                           x: 0,
                           y: 0,
                           x2: 1,
                           y2: 0,
                           colorStops: [
                              {
                                 offset: 0.1,
                                 color: "#2D74C0", // 线处的颜色
                              },
                              {
                                 offset: 0.9,
                                 color: "#21D9DC", // 坐标轴处的颜色
                              },
                           ]
                        },
                        borderRadius: [0,99,99,0]
                     },
                     label:{
                        show: true,
                        position: 'outside',
                        color: '#999',
                        fontSize: fontSize(11)
                     }
                  }
               ]
            };

            option && myChart.setOption(option);
            window.addEventListener("resize",function (){
               myChart.resize();
            });
            echarts.init(document.getElementById(train1.value)).dispose()
            echarts.init(document.getElementById(train2.value)).dispose()
         }

         function fontSize(val){
@@ -446,27 +179,19 @@


      watchEffect(() => {
        if(props.theme){
          state.tip =  'tip-dark'
        }else{
          state.tip =  'tip-light'
        }
        getDataById()
        // getDataById()
      })

         // 页面载入时执行方法
         onMounted(() => {
        getTime();
        getTheme();
        getDataById()
         });
         onBeforeUnmount(() =>{
            clearInterval(changeTab)
        clearInterval(state.changeChart)
         })
         return {
            train1,
            train2,
            train3,
            Search,
            fontSize,
            ...toRefs(state)