Default Changelist

马宇豪

2023-03-10 e5e9b84b800f1623f85be45a3565689917898c78

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

@@ -1,5 +1,7 @@
<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>
@@ -7,59 +9,138 @@
</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";
   import { Session } from '/@/utils/storage';
   import { Search } from '@element-plus/icons-vue'
  import {useScreenTheme} from "/@/stores/screenTheme"
   import { ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
  import { riskWarningApi } from '/@/api/riskWarning';
   import * as echarts from 'echarts';
   import '/@/theme/bigScreen.css'

   interface stateType {
      curTab: number
      curTab: number,
    timeValue: Array<any>,
    traData: Array<any>,
    monthData: Array<any>,
    lastDays: number | null,
    tip: string,
   }
   export default defineComponent({
      name: 'accident',
      components: {},
      props:{
         size: Number
         size: Number,
      theme: Boolean
      },
      setup(props) {
         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
            curTab: 1,
        timeValue: [],
        traData: [],
        monthData: [],
        lastDays: null,
        tip: 'tip-dark'
         })
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: 'numeric',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };

         // 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)
         // }
      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);
        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
              }
            }
          }
          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()
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }
      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
@@ -119,7 +200,6 @@
               },
               yAxis: {
                  type: 'category',
                  // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                  data: ['一月', '二月', '三月', '四月'],
                  axisLine:{
                     show: true,
@@ -135,8 +215,7 @@
                  {
                     name: '2011',
                     type: 'bar',
                     // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                     data: [18203, 23489, 29034, 104970],
                     data: state.monthData[0],
                     itemStyle:{
                        color: {
                           x: 0,
@@ -212,7 +291,6 @@
               },
               yAxis: {
                  type: 'category',
                  // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                  data: ['五月', '六月','七月', '八月'],
                  axisLine:{
                     show: true,
@@ -229,7 +307,7 @@
                     name: '2011',
                     type: 'bar',
                     // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                     data: [131744, 630230, 18203, 23489],
                     data: state.monthData[1],
                     barCategoryGap: '50%',
                     itemStyle:{
                        color: {
@@ -322,7 +400,7 @@
                     name: '2011',
                     type: 'bar',
                     // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                     data: [29034, 104970, 131744, 630230],
                     data: state.monthData[2],
                     barCategoryGap: '50%',
                     itemStyle:{
                        color: {
@@ -366,9 +444,21 @@
            return val * (nowClientWidth/1920) * Number(props.size);
         }


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

         // 页面载入时执行方法
         onMounted(() => {
            initTrain1();
        getTime();
        getTheme();
        getDataById()
         });
         onBeforeUnmount(() =>{
            clearInterval(changeTab)
@@ -397,6 +487,18 @@
         height: 100%;
      }
   }
  .tip-dark{
    display: block;
    font-size: 0.8rem;
    color: #11feee;
    height: 1rem;
  }
  .tip-light{
    display: block;
    font-size: 0.8rem;
    color: #333;
    height: 1rem;
  }
   .home-container {
      height: 100%;
      overflow: hidden;