xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

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

@@ -1,9 +1,6 @@
<template>
   <div class="charts-cont">
      <div v-show="curValue===true" class="stock" :id="stock1">

      </div>
      <div v-show="curValue===false" class="stock" :id="stock2"></div>
      <div class="stock" :id="stock1"></div>
   </div>
</template>

@@ -19,9 +16,11 @@
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
   import * as echarts from 'echarts';
   import '/@/theme/bigScreen.css'
  import {riskWarningApi} from "/@/api/riskWarning";

   interface stateType {
      curValue: boolean
    stockData: []
    changeCharts: any
   }
   export default defineComponent({
      name: 'stock',
@@ -29,595 +28,127 @@
      props:{
         size: Number
      },
      setup(props) {
      setup(props,context) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const stock1 = ref("eChartStock1" + Date.now() + Math.random())
         const stock2 = ref("eChartStock2" + Date.now() + Math.random())
         const state = reactive<stateType>({
            curValue: true
        stockData: [],
        changeCharts: null
         })

         const swit = setInterval(()=>{
            state.curValue = !state.curValue
            if(state.curValue == true){
               nextTick(()=>{
                  initStock1()
               })
            }else{
               nextTick(()=>{
                  initStock2()
               })
            }
         },5000)
      const getSupplies = async () => {
        let res = await riskWarningApi().getEmergencySupplies();
        if (res.data.code === '200') {
          state.stockData = res.data.data
          const chartData = state.stockData.reduce((acc, curr, index) => {
            if (index % 4 === 0) acc.push([]);
            acc[acc.length - 1].push(curr);
            return acc;
          }, [])
          const maxNum = Math.max(...state.stockData.map(i=>i.count))
          let curIndex = 0
          const renderCharts = () => {
            const data = chartData[curIndex]
            initStock(data,maxNum)
            curIndex = (curIndex + 1) % chartData.length
          }
          renderCharts()
          state.changeCharts = setInterval(renderCharts,5000)
          context.emit('getData',state.stockData)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }


         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initStock1 =()=>{
         const initStock =(data,maxNum)=>{
            let dom = document.getElementById(stock1.value);
            let myChart = echarts.init(dom);

            let option: EChartsOption;

            option = {
               series: [
                  {
                     name: '消防耗材',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 2103, name: '消防耗材'},
                        { value: 2310, name: '消防耗材未使用'}
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|2103}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#2D74C0" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#21D9DC" // 100% 处的颜色
                           }]
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }]
                        }
                     ],
                     center: ['20%','25%']
                  },
                  {
                     name: '安全帽',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 23509, name: '安全帽'},
                        { value: 34312, name: '安全帽未使用'}
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|23509}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#0DAA2E" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#4CF475" // 100% 处的颜色
                           }]
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }]
                        }
                     ],
                     center: ['50%','25%']
                  },
                  {
                     name: '防护服',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 12830, name: '防护服'},
                        { value: 22140, name: '防护服未使用'}
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|12830}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#E8B21D" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#E5DC44" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        }
                     ],
                     center: ['80%','25%']
                  },
                  {
                     name: '劳保鞋',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 5492, name: '劳保鞋'},
                        { value: 10842, name: '劳保鞋未使用'}
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|5492}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#D65146" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#F58C28" // 100% 处的颜色
                           }]
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }]
                        }
                     ],
                     center: ['33.33%','75%']
                  },
                  {
                     name: '动火护具',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 44043, name: '动火护具'},
                        { value: 68102, name: '动火护具未使用' }
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|44043}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#4449D1" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#A86DE5" // 100% 处的颜色
                           }]
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }]
                        }
                     ],
                     center: ['66.66%','75%']
                  }
               ],
          series: data.map((item,index)=>{
            const centerList = [
              ['30%','25%'],['70%','25%'],['30%','75%'],['70%','75%']
            ]
            const i = {
              type: 'gauge',
              radius: '40%',
              startAngle: 90,
              endAngle: -270,
              pointer: {
                show: false
              },
              progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                  borderWidth: 0,
                  borderColor: '#464646'
                },
              },
              axisLine: {
                lineStyle: {
                  width: fontSize(10),
                  color: [[1,'#666']]
                },
                show: true
              },
              splitLine: {
                show: false,
                distance: 0,
                length: 10
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                distance: 50
              },
              data: [
                {
                  value: item.count,
                  name: item.name,
                  title: {
                    offsetCenter: ['0%', '-25%'],
                    color: '#fff'
                  },
                },
              ],
              center: centerList[index],
              // max: maxNum,
              title: {
                fontSize: fontSize(11),
              },
              detail: {
                width: 50,
                height: fontSize(20),
                fontSize: fontSize(24),
                color: 'inherit',
                borderColor: 'inherit',
                borderRadius: 20,
                borderWidth: 0,
                formatter: '{value}'
              }
            }
            return i
          })
            };

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

         const initStock2 =()=>{
            let dom = document.getElementById(stock2.value);
            let myChart = echarts.init(dom);

            let option: EChartsOption;

            option = {
               series: [
                  {
                     name: '急救包',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 8603, name: '急救包'},
                        { value: 12032, name: '急救包未使用'}
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|8603}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#2D74C0" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#21D9DC" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        }
                     ],
                     center: ['20%','25%']
                  },
                  {
                     name: '人员培训资料',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 8960, name: '人员培训资料'},
                        { value: 9890, name: '人员培训资料未使用'}
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|8960}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#0DAA2E" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#4CF475" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        }
                     ],
                     center: ['50%','25%']
                  },
                  {
                     name: '安全护具',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 12302, name: '安全护具'},
                        { value: 20130, name: '安全护具未使用'}
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|12302}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#E8B21D" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#E5DC44" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        }
                     ],
                     center: ['80%','25%']
                  },
                  {
                     name: '高空护具',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 42948, name: '高空护具'},
                        { value: 89342, name: '高空护具未使用'}
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|42948}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#D65146" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#F58C28" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        }
                     ],
                     center: ['33.33%','75%']
                  },
                  {
                     name: '防尘护具',
                     type: 'pie',
                     radius: [fontSize(40), fontSize(50)],
                     data: [
                        { value: 1220, name: '防尘护具'},
                        { value: 5034, name: '防尘护具未使用' }
                     ],
                     label: {
                        show: true,
                        position: 'center',
                        formatter: '{total|{a}}' + '\n\r' + '{active|1220}',
                        rich: {
                           total:{
                              fontSize: fontSize(12),
                              color:'#999',
                              lineHeight: fontSize(16)
                           },
                           active: {
                              fontSize: fontSize(16),
                              color:'#999',
                           },
                        }
                     },
                     color: [
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#4449D1" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#A86DE5" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        },
                        {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [{
                              offset: 0, color: "#333" // 0% 处的颜色
                           }, {
                              offset: 1, color: "#333" // 100% 处的颜色
                           }],
                           global: false // 缺省为 false
                        }
                     ],
                     center: ['66.66%','75%']
                  }
               ],
            };

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

         function fontSize(val){
@@ -627,14 +158,13 @@

         // 页面载入时执行方法
         onMounted(() => {
            initStock1();
            getSupplies()
         });
         onBeforeUnmount(() =>{
            clearInterval(swit)
            clearInterval(state.changeCharts)
         })
         return {
            stock1,
            stock2,
            Search,
            fontSize,
            ...toRefs(state)