From 20b0ce2db27b64a60de60aee05dedd448099e330 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期一, 08 七月 2024 10:12:16 +0800 Subject: [PATCH] xiugai --- src/views/riskWarningSys/warningBigScreen/components/profession.vue | 67 ++++++++++++++++----------------- 1 files changed, 32 insertions(+), 35 deletions(-) diff --git a/src/views/riskWarningSys/warningBigScreen/components/profession.vue b/src/views/riskWarningSys/warningBigScreen/components/profession.vue index 215c675..fcd1347 100644 --- a/src/views/riskWarningSys/warningBigScreen/components/profession.vue +++ b/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 { -- Gitblit v1.9.2