From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示
---
src/views/TaskManage/TaskTop/TaskIndustry.vue | 82 +++++++++++++++++------------------------
1 files changed, 34 insertions(+), 48 deletions(-)
diff --git a/src/views/TaskManage/TaskTop/TaskIndustry.vue b/src/views/TaskManage/TaskTop/TaskIndustry.vue
index 326d6b8..e27b5df 100644
--- a/src/views/TaskManage/TaskTop/TaskIndustry.vue
+++ b/src/views/TaskManage/TaskTop/TaskIndustry.vue
@@ -1,7 +1,7 @@
<!-- 任务算法统计 -->
<template>
<div class="task-industry">
- <div class="title">任务算法统计</div>
+ <div class="title">机巢事件前五数量占比</div>
<div class="chart" ref="chartRef"></div>
</div>
</template>
@@ -9,8 +9,12 @@
<script setup>
import * as echarts from 'echarts';
import { industryJobNumPieChart } from '@/api/home/task';
+import useEchartsResize from '@/hooks/useEchartsResize';
+import { useStore } from 'vuex';
+
+const store = useStore();
const chartRef = ref(null);
-let chart = null;
+let { chart } = useEchartsResize(chartRef);
const option = {
tooltip: {
@@ -37,13 +41,14 @@
roseType: 'radius',
radius: ['20%', '70%'],
center: ['50%', '45%'],
- data: [
- { name: '国土类', value: 0, itemStyle: { color: '#3D7FFF' } },
- { name: '城管类', value: 0, itemStyle: { color: '#8277E9' } },
- { name: '消防类', value: 0, itemStyle: { color: '#FFB77E' } },
- { name: '林业类', value: 0, itemStyle: { color: '#44D7B6' } },
- { name: '公安类', value: 0, itemStyle: { color: '#62F4FF' } }
- ],
+ data: [],
+ // [
+ // { name: '国土类', value: 0, itemStyle: { color: '#3D7FFF' } },
+ // { name: '城管类', value: 0, itemStyle: { color: '#8277E9' } },
+ // { name: '消防类', value: 0, itemStyle: { color: '#FFB77E' } },
+ // { name: '林业类', value: 0, itemStyle: { color: '#44D7B6' } },
+ // { name: '公安类', value: 0, itemStyle: { color: '#62F4FF' } }
+ // ],
label: {
show: true,
position: 'outside',
@@ -64,49 +69,29 @@
};
// 获取行业统计数据
-const getIndustryJobNumPieChart = () => {
- industryJobNumPieChart().then(res => {
+const getIndustryJobNumPieChart = (value) => {
+ industryJobNumPieChart(value).then(res => {
if (res.data.code !== 0) return;
- option.series[0].data.forEach(item => {
- const matchData = res.data.data.find(d => d.name === item.name);
- if (matchData) {
- item.value = matchData.value;
- }
- });
- chart.setOption(option);
+ option.series[0].data = res.data.data;
+ // forEach(item => {
+ // const matchData = res.data.data.find(d => d.name === item.name);
+ // if (matchData) {
+ // item.value = matchData.value;
+ // }
+ // });
+ chart.value.setOption(option);
});
};
-
-// 获取行业统计数据
-// const getIndustryJobNumPieChart = () => {
-// industryJobNumPieChart().then(res => {
-// if (res.data.code !== 0) return;
-// const data = res.data.data.map(item => ({
-// name: item.name,
-// value: item.value,
-// itemStyle: {
-// color: getRandomColor()
-// }
-// }));
-// option.series[0].data = data;
-// chart.setOption(option);
-// });
-// };
-
+// 添加监听
+watch(() => store.state.task.taskSearchParams, (newVal) => {
+ if (newVal) {
+ getIndustryJobNumPieChart(newVal);
+ }
+}, { deep: true });
onMounted(() => {
- chart = echarts.init(chartRef.value);
- getIndustryJobNumPieChart();
-
- window.addEventListener('resize', () => {
- chart?.resize();
- });
-});
-
-onUnmounted(() => {
- window.removeEventListener('resize', chart?.resize);
- chart?.dispose();
+ getIndustryJobNumPieChart({date_enum: 'TODAY'});
});
</script>
@@ -116,17 +101,18 @@
width: 244px;
height: 100%;
.title {
- margin-top: 10px;
+ margin-top: 10px;
width: 244px;
height: 26px;
background: url('@/assets/images/task/title.png') no-repeat center / 100% 100%;
color: #CFEAFF;
padding-left: 38px;
line-height: 8px;
+ font-size: 14px;
}
.chart {
width: 100%;
height: 200px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3