xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

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

@@ -10,18 +10,18 @@
<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,40 +29,34 @@
      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
                  }
               ],
               radius: '65%',
               activeRadius: '60%',
               color: ['#FAC858','#EE6666'],
               lineWidth: fontSize(25),
               digitalFlopStyle: {
                  fontSize: 16,
                  fill: '#999'
               }
            }
         })
        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 =()=>{
         const initPro =(data)=>{
            let dom = document.getElementById(pro.value);
            let myChart = echarts.init(dom);

            let option: EChartsOption;

            option = {
               tooltip: {
                  trigger: 'item'
@@ -77,17 +71,17 @@
               },
               series: [
                  {
                     name: 'Access From',
                     name: '人员专业度分布',
                     type: 'pie',
                     radius: ['45%', '70%'],
                     avoidLabelOverlap: false,
                     itemStyle: {
                        borderRadius: 4
                        borderRadius: 2
                     },
                     label: {
                        show: true,
                        position: 'outer',
                        fontSize: fontSize(12),
                        fontSize: fontSize(8),
                        color: '#999',
                        textBorderWidth: 0,
                        width: 30,
@@ -105,10 +99,13 @@
                           fontWeight: 'bold'
                        }
                     },
                     data: [
                        { value: 1048, name: '持证人员' },
                        { value: 735, name: '非持证人员' }
                     ],
                     data: data.map(i=>{
                const obj = {
                  name: i.name,
                  value: i.count
                }
                return obj
              }),
                     center: ['50%','55%']
                  }
               ]
@@ -126,7 +123,7 @@

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

         return {