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/TaskEvent.vue | 103 ++++++++++++++++++++++++---------------------------
1 files changed, 48 insertions(+), 55 deletions(-)
diff --git a/src/views/TaskManage/TaskTop/TaskEvent.vue b/src/views/TaskManage/TaskTop/TaskEvent.vue
index 59c695e..8f64a96 100644
--- a/src/views/TaskManage/TaskTop/TaskEvent.vue
+++ b/src/views/TaskManage/TaskTop/TaskEvent.vue
@@ -1,43 +1,51 @@
-<!-- 任务事件统计 -->
+<!-- 任务事件数量比统计 -->
<template>
- <!-- <common-title title="任务事件统计"></common-title> -->
<div class="task-event">
+ <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 { 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} 件'
},
legend: {
data: ['任务', '事件'],
+ top: '2%',
textStyle: {
- color: '#fff'
+ color: '#6B90B5',
+ fontSize: 12,
},
- bottom: '5%'
},
grid: {
top: '15%',
left: '3%',
right: '4%',
- bottom: '15%',
+ bottom: '2%',
containLabel: true
},
xAxis: {
@@ -55,6 +63,7 @@
},
yAxis: {
type: 'value',
+ name: '单位：件',
axisLine: {
lineStyle: {
color: '#fff'
@@ -73,22 +82,22 @@
{
name: '任务',
type: 'bar',
- barWidth: '20%',
+ barWidth: '6px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#1EE7E7' },
- { offset: 1, color: 'rgba(30, 231, 231, 0.1)' }
+ { offset: 0, color: '#1EE7C5' },
+ { offset: 1, color: '#84EDFF' }
])
}
},
{
name: '事件',
type: 'bar',
- barWidth: '20%',
+ barWidth: '6px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#0070FF' },
- { offset: 1, color: 'rgba(0, 112, 255, 0.1)' }
+ { offset: 0, color: '#69BCFF' },
+ { offset: 1, color: '#183FFF' }
])
}
}
@@ -96,65 +105,49 @@
};
// 获取行业统计数据
-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);
});
};
-// 生成随机颜色
-const getRandomColor = () => {
- const colors = ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'];
- return colors[Math.floor(Math.random() * colors.length)];
-};
-
-onBeforeUnmount(() => {
- if (chart) {
- chart.dispose();
- chart = null;
+// 添加监听
+watch(() => store.state.task.taskSearchParams, (newVal) => {
+ console.log(newVal, '1111');
+ 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>
.task-event {
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: 660px;
+ height: 100%;
+ margin-left: 40px;
+ .title {
+ 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: 100%;
+ height: 200px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3