xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

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

@@ -1,27 +1,27 @@
<template>
   <div class="charts-cont">
<!--      <div class="pro" :id="pro">-->
      <div class="pro" :id="pro">

<!--      </div>-->
      <dv-active-ring-chart :config="config" style="width:100%;height:100%" />
      </div>
<!--      <dv-active-ring-chart :config="config" style="width:100%;height:100%" />-->
   </div>
</template>

<script lang="ts">
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} 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 { ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
   import * as echarts from 'echarts';
   import '/@/theme/bigScreen.css'
  import {riskWarningApi} from "/@/api/riskWarning";


   interface stateType {
    proData: []
   }
   export default defineComponent({
      name: 'profession',
@@ -29,96 +29,93 @@
      props:{
         size: Number
      },
      setup(props) {
      setup(props,context) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const pro = ref("eChartPro" + Date.now() + Math.random())
         const state = reactive<stateType>({
            config:{
               data: [
                  {
                     name: '持证人员',
                     value: 55
                  },
                  {
                     name: '非持证人员',
                     value: 120
        proData: []
      })

      const getUserCount = async () => {
        let res = await riskWarningApi().getUserCount();
        if (res.data.code === '200') {
          state.proData = res.data.data
          initPro(state.proData)
          context.emit('getData',state.proData)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initPro =(data)=>{
            let dom = document.getElementById(pro.value);
            let myChart = echarts.init(dom);
            let option: EChartsOption;
            option = {
               tooltip: {
                  trigger: 'item'
               },
               legend: {
                  top: '0',
                  left: 'center',
                  textStyle:{
                     color: '#999',
                     fontSize: fontSize(11)
                  }
               ],
               radius: '65%',
               activeRadius: '60%',
               color: ['#FAC858','#EE6666'],
               lineWidth: fontSize(25),
               digitalFlopStyle: {
                  fontSize: 16,
                  fill: '#fff'
               }
            }
         })
         // type EChartsOption = echarts.EChartsOption
         // // 隐患整改情况
         // const initPro =()=>{
         //    let dom = document.getElementById(pro.value);
         //    let myChart = echarts.init(dom);
         //
         //    let option: EChartsOption;
         //
         //    option = {
         //       tooltip: {
         //          trigger: 'item'
         //       },
         //       legend: {
         //          top: '0',
         //          left: 'center',
         //          textStyle:{
         //             color: '#fff',
         //             fontSize: fontSize(11)
         //          }
         //       },
         //       series: [
         //          {
         //             name: 'Access From',
         //             type: 'pie',
         //             radius: ['45%', '70%'],
         //             avoidLabelOverlap: false,
         //             itemStyle: {
         //                borderRadius: 4
         //             },
         //             label: {
         //                show: true,
         //                position: 'outer',
         //                fontSize: fontSize(12),
         //                color: '#ffffff',
         //                textBorderWidth: 0,
         //                width: 30,
         //                overflow: 'break'
         //             },
         //             labelLine: {
         //                show: true,
         //                length: 10,
         //                length2: 10
         //             },
         //             emphasis: {
         //                label: {
         //                   show: true,
         //                   fontSize: fontSize(22),
         //                   fontWeight: 'bold'
         //                }
         //             },
         //             data: [
         //                { value: 1048, name: '持证人员' },
         //                { value: 735, name: '非持证人员' }
         //             ],
         //             center: ['50%','55%']
         //          }
         //       ]
         //    };
         //
         //    option && myChart.setOption(option);
         //    window.addEventListener("resize",function (){
         //       myChart.resize();
         //    });
         // }
               },
               series: [
                  {
                     name: '人员专业度分布',
                     type: 'pie',
                     radius: ['45%', '70%'],
                     avoidLabelOverlap: false,
                     itemStyle: {
                        borderRadius: 2
                     },
                     label: {
                        show: true,
                        position: 'outer',
                        fontSize: fontSize(8),
                        color: '#999',
                        textBorderWidth: 0,
                        width: 30,
                        overflow: 'break'
                     },
                     labelLine: {
                        show: true,
                        length: 10,
                        length2: 10
                     },
                     emphasis: {
                        label: {
                           show: true,
                           fontSize: fontSize(22),
                           fontWeight: 'bold'
                        }
                     },
                     data: data.map(i=>{
                const obj = {
                  name: i.name,
                  value: i.count
                }
                return obj
              }),
                     center: ['50%','55%']
                  }
               ]
            };

            option && myChart.setOption(option);
            window.addEventListener("resize",function (){
               myChart.resize();
            });
         }
         function fontSize(val){
            let nowClientWidth = document.documentElement.clientWidth;
            return val * (nowClientWidth/1920) * Number(props.size);
@@ -126,6 +123,7 @@

         // 页面载入时执行方法
         onMounted(() => {
        getUserCount()
         });

         return {