xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

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

@@ -1,88 +1,89 @@
<template>
   <div class="charts-cont">
      <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>

<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
    traData: Array<any>,
    changeChart: any
   }
   export default defineComponent({
      name: 'accident',
      components: {},
      props:{
         size: Number
         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
        traData: [],
        changeChart: null
         })

         // 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 changeTab = setInterval(()=>{
            if(state.curTab<3){
               state.curTab = state.curTab + 1
               if(state.curTab == 2){
                  nextTick(()=>{
                     initTrain2()
                  })
               }else{
                  nextTick(()=>{
                     initTrain3()
                  })
               }
      const getDataById = async () => {
        let res = await riskWarningApi().getSafeCheckTask();
        if (res.data.code === '200') {
          state.traData = res.data.data
          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
          }
          renderCharts()
          state.changeChart = setInterval(renderCharts,5000)
          context.emit('getData',state.traData)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

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

      }

         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initTrain1 =()=>{
         const initTrain1 =(data)=>{
            let dom = document.getElementById(train1.value);
            let myChart = echarts.init(dom);
            let option: EChartsOption;
@@ -111,7 +112,7 @@
                     }
                  },
                  axisLabel:{
                     color: '#ccc'
                     color: '#999'
                  },
                  splitLine:{
                     show: false
@@ -119,12 +120,11 @@
               },
               yAxis: {
                  type: 'category',
                  // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                  data: ['一月', '二月', '三月', '四月'],
                  data: data.map(i=>i.year+ '.' + i.month),
                  axisLine:{
                     show: true,
                     lineStyle:{
                        color: '#fff'
                        color: '#999'
                     }
                  },
                  axisLabel:{
@@ -135,8 +135,7 @@
                  {
                     name: '2011',
                     type: 'bar',
                     // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                     data: [18203, 23489, 29034, 104970],
                     data: data.map(i=>i.count),
                     itemStyle:{
                        color: {
                           x: 0,
@@ -160,7 +159,7 @@
                     label:{
                        show: true,
                        position: 'outside',
                        color: '#fff',
                        color: '#999',
                        fontSize: fontSize(11)
                     }
                  }
@@ -171,194 +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: '#ccc'
                  },
                  splitLine:{
                     show: false
                  }
               },
               yAxis: {
                  type: 'category',
                  // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                  data: ['五月', '六月','七月', '八月'],
                  axisLine:{
                     show: true,
                     lineStyle:{
                        color: '#fff'
                     }
                  },
                  axisLabel:{
                     color: '#fff'
                  }
               },
               series: [
                  {
                     name: '2011',
                     type: 'bar',
                     // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                     data: [131744, 630230, 18203, 23489],
                     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: '#fff',
                        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: '#ccc'
                  },
                  splitLine:{
                     show: false
                  }
               },
               yAxis: {
                  type: 'category',
                  // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                  data: ['九月', '十月', '十一月', '十二月'],
                  axisLine:{
                     show: true,
                     lineStyle:{
                        color: '#fff'
                     }
                  },
                  axisLabel:{
                     color: '#fff'
                  }
               },
               series: [
                  {
                     name: '2011',
                     type: 'bar',
                     // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                     data: [29034, 104970, 131744, 630230],
                     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: '#fff',
                        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){
@@ -366,17 +177,21 @@
            return val * (nowClientWidth/1920) * Number(props.size);
         }


      watchEffect(() => {
        // getDataById()
      })

         // 页面载入时执行方法
         onMounted(() => {
            initTrain1();
        getTheme();
        getDataById()
         });
         onBeforeUnmount(() =>{
            clearInterval(changeTab)
        clearInterval(state.changeChart)
         })
         return {
            train1,
            train2,
            train3,
            Search,
            fontSize,
            ...toRefs(state)
@@ -397,6 +212,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;