From a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:49:12 +0800
Subject: [PATCH] feat:事件弹窗显示调整
---
src/views/TaskManage/TaskTop/TaskIndustry.vue | 152 +++++++++++++++++++++++++-------------------------
1 files changed, 77 insertions(+), 75 deletions(-)
diff --git a/src/views/TaskManage/TaskTop/TaskIndustry.vue b/src/views/TaskManage/TaskTop/TaskIndustry.vue
index 47968cf..81de854 100644
--- a/src/views/TaskManage/TaskTop/TaskIndustry.vue
+++ b/src/views/TaskManage/TaskTop/TaskIndustry.vue
@@ -1,17 +1,20 @@
-<!-- 业务统计 -->
+<!-- 任务算法统计 -->
<template>
- <!-- <common-title title="行业统计" :style="{ marginLeft: pxToRem(14) }"></common-title> -->
<div class="task-industry">
+ <div class="title">任务算法统计</div>
<div class="chart" ref="chartRef"></div>
</div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue';
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: {
@@ -21,112 +24,111 @@
legend: {
orient: 'horizontal',
left: 'center',
- bottom: '5%',
+ bottom: '2%',
textStyle: {
- color: '#fff',
+ color: '#6B90B5',
fontSize: 12
},
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 10,
- formatter: function(name) {
- let data = option.series[0].data;
- let total = 0;
- let tarValue = 0;
- for (let i = 0; i < data.length; i++) {
- total += data[i].value;
- if (data[i].name === name) {
- tarValue = data[i].value;
- }
- }
- let percentage = ((tarValue / total) * 100).toFixed(1);
- return `${name} ${percentage}%`;
- }
+ itemWidth: 2, // 减小图例标记的宽度
+ itemHeight: 3, // 减小图例标记的高度
+ itemGap: 8, // 减小图例项之间的间距
+ formatter: '{name}' // 简化图例文本
},
series: [
{
name: '行业统计',
type: 'pie',
- radius: '60%',
- center: ['35%', '50%'],
- itemStyle: {
- borderRadius: 4,
- borderColor: 'rgba(255,255,255,0.2)',
- borderWidth: 1
- },
+ 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' } }
+ ],
label: {
show: true,
- position: 'inside',
+ position: 'outside',
formatter: '{c}',
fontSize: 12,
color: '#fff'
},
labelLine: {
- show: false
- },
- emphasis: {
- scale: true,
- scaleSize: 10
+ show: true,
+ length: 5,
+ length2: 8,
+ lineStyle: {
+ color: '#fff'
+ }
}
}
]
};
// 获取行业统计数据
-const getIndustryJobNumPieChart = () => {
- industryJobNumPieChart().then(res => {
+const getIndustryJobNumPieChart = (value) => {
+ industryJobNumPieChart(value).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.forEach(item => {
+ const matchData = res.data.data.find(d => d.name === item.name);
+ if (matchData) {
+ item.value = matchData.value;
}
- }));
- option.series[0].data = data;
- chart.setOption(option);
+ });
+ chart.value.setOption(option);
});
};
-// 生成随机颜色
-const getRandomColor = () => {
- const colors = ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'];
- return colors[Math.floor(Math.random() * colors.length)];
-};
+
+// 获取行业统计数据
+// 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.value.setOption(option);
+// });
+// };
+
+// 添加监听
+watch(() => store.state.task.taskSearchParams, (newVal) => {
+ console.log(newVal, '2222');
+ 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>
<style lang="scss" scoped>
.task-industry {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- // margin-left: 29px;
- // padding: 16px 16px;
- width: 340px;
- height: 200px;
- background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%
- );
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
+ width: 244px;
+ height: 100%;
+ .title {
+ 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: 100%;
+ height: 200px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3