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/TaskEvent.vue | 84 +++++++++++++++++++----------------------
1 files changed, 39 insertions(+), 45 deletions(-)
diff --git a/src/views/TaskManage/TaskTop/TaskEvent.vue b/src/views/TaskManage/TaskTop/TaskEvent.vue
index cb3189d..1bf02d5 100644
--- a/src/views/TaskManage/TaskTop/TaskEvent.vue
+++ b/src/views/TaskManage/TaskTop/TaskEvent.vue
@@ -10,22 +10,28 @@
import * as echarts from 'echarts';
import { jobEventBar } from '@/api/home/task';
import dayjs from 'dayjs';
+import useEchartsResize from '@/hooks/useEchartsResize';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+// const setTaskSearchParams = computed(() => store.state.task.setTaskSearchParams);
// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);
// 图表
const chartRef = ref(null);
-let chart = null;
+let { chart } = useEchartsResize(chartRef)
+
const option = {
tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- formatter: '{b}: {c} 件'
- },
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
legend: {
data: ['任务', '事件'],
top: '2%',
@@ -42,18 +48,17 @@
containLabel: true
},
xAxis: {
- type: 'category',
- axisLine: {
- lineStyle: {
- color: '#fff'
- }
- },
- axisLabel: {
- color: '#fff',
- interval: 0,
- rotate: 30
- }
- },
+ type: 'category',
+ // data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+ axisLine: {
+ lineStyle: {
+ color: '#fff',
+ },
+ },
+ axisLabel: {
+ color: '#fff',
+ },
+ },
yAxis: {
type: 'value',
name: '单位：件',
@@ -74,8 +79,8 @@
series: [
{
name: '任务',
- type: 'bar',
- barWidth: '6px',
+ type: 'bar',
+ barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#1EE7C5' },
@@ -86,7 +91,7 @@
{
name: '事件',
type: 'bar',
- barWidth: '6px',
+ barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#69BCFF' },
@@ -98,39 +103,27 @@
};
// 获取行业统计数据
-const getJobEventBar = (value,date_enum) => {
- jobEventBar({date_enum}).then(res => {
+const getJobEventBar = (value) => {
+ jobEventBar(value).then(res => {
if (res.data.code !== 0) return;
option.xAxis.data = res.data.data.map(item => item.name);
option.series[0].data = res.data?.data.map(item => item.data[0].value);
option.series[1].data = res.data?.data.map(item => item.data[1].value);
- chart.setOption(option);
+ chart.value.setOption(option);
});
};
-onBeforeUnmount(() => {
- if (chart) {
- chart.dispose();
- chart = null;
+// 添加监听
+watch(() => store.state.task.taskSearchParams, (newVal) => {
+ if (newVal) {
+ getJobEventBar(newVal);
}
- window.removeEventListener('resize', handleResize);
-});
+}, { deep: true });
onMounted(() => {
- chart = echarts.init(chartRef.value);
- getJobEventBar(newTime.value, 'CURRENT_YEAR');
-
- window.addEventListener('resize', () => {
- if (chart && !chart.isDisposed()) {
- chart.resize();
- }
- });
+ getJobEventBar({date_enum: 'TODAY'});
});
-onUnmounted(() => {
- window.removeEventListener('resize', chart?.resize);
- chart?.dispose();
-});
</script>
<style lang="scss" scoped>
@@ -140,17 +133,18 @@
height: 100%;
margin-left: 40px;
.title {
- margin-top: 10px;
+ margin-top: 10px;
width: 660px;
height: 28.6px;
background: url('@/assets/images/task/task-event-total.png') no-repeat center / 100% 100%;
color: #CFEAFF;
padding-left: 44px;
line-height: 8px;
+ font-size: 14px;
}
.chart {
width: 100%;
height: 200px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3