From 3e60c5060d204e59246dc0be8ac3370a3610deb2 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 17 Jul 2025 17:11:23 +0800
Subject: [PATCH] feat:工作台接口对接
---
src/views/wel/components/taskOutcome.vue | 99 ++++++++++++++++++++++++++++++++++++-------------
1 files changed, 73 insertions(+), 26 deletions(-)
diff --git a/src/views/wel/components/taskOutcome.vue b/src/views/wel/components/taskOutcome.vue
index 5c71603..8b8e01c 100644
--- a/src/views/wel/components/taskOutcome.vue
+++ b/src/views/wel/components/taskOutcome.vue
@@ -24,30 +24,31 @@
</template>
<script setup>
-import { getdisposeApi } from '@/api/home/index';
+import { getdisposeApi, gettaskOutcomApi } from '@/api/home/index';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import useEchartsResize from '@/hooks/useEchartsResize';
-let checked = ref('YEAR');
+let checked = ref('CURRENT_YEAR');
let timeListStr = ['本周', '本月', '本年'];
-let timeListEnum = ['WEEK', 'MONTH', 'YEAR'];
+let timeListEnum = ['CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
const params = ref({
- date_enum: 'YEAR',
+ dateEnum: 'CURRENT_YEAR',
device_sn: '',
end_date: undefined,
start_date: undefined,
});
-const dateSelect = ref('YEAR');
+const dateSelect = ref('CURRENT_YEAR');
const refresh = () => {
- params.value.date_enum = 'YEAR';
- checked.value = 'YEAR';
- dateSelect.value = 'YEAR';
+ params.value.dateEnum = 'CURRENT_YEAR';
+ checked.value = 'CURRENT_YEAR';
+ dateSelect.value = 'CURRENT_YEAR';
getBarChartData(params.value);
};
let timeClick = (item, index) => {
checked.value = item;
- params.value.date_enum = item;
+ params.value.dateEnum = item;
dateSelect.value = item;
+ getBarChartData(params.value);
};
const echartsOption = {
tooltip: {
@@ -59,7 +60,7 @@
legend: {
itemWidth: 14,
itemHeight: 8,
- data: ['待处理', '处理中', '已完成'], // 确保包含所有系列名称
+ data: ['照片总数', '视频总数', 'AI识别', '全景', '三维', '正射'], // 确保包含所有系列名称
top: '-1%',
textStyle: {
color: '#383838',
@@ -77,9 +78,9 @@
type: 'category',
axisLine: {
show: true, // 隐藏轴线
- lineStyle: {
- color: '#cdd5e2',
- },
+ lineStyle: {
+ color: '#cdd5e2',
+ },
},
axisLabel: {
color: '#383838',
@@ -120,11 +121,13 @@
],
series: [],
};
-
const eventTypeList = ref([
- { name: '待处理', value: 0, color: '#FF7411' },
- { name: '处理中', value: 0, color: '#FFFF61' },
- { name: '已完成', value: 0, color: '#06D957' },
+ {name: '照片总数', value: 0, type: '0', color: '#ED672D' },
+ { name: '视频总数', value: 0, type: '1', color: '#F5B763' },
+ { name: 'AI识别', value: 0, type: '2', color: '#6851C3' },
+ { name: '全景', value: 0, type: '5', color: '#FFE100' },
+ { name: '三维', value: 0, type: '3', color: '#04C598' },
+ { name: '正射', value: 0, type: '4', color: '#3673E8' },
]);
const seriesObj = {};
eventTypeList.value.forEach(item => {
@@ -144,22 +147,66 @@
let { chart } = useEchartsResize(echartsRef);
// 获取柱状图数据
const getBarChartData = value => {
- getdisposeApi(value).then(res => {
+ gettaskOutcomApi(value).then(res => {
const list = res?.data?.data || [];
+ console.log('list',list);
+
+ // 清空现有的eventTypeList值
+ eventTypeList.value.forEach(item => {
+ item.value = 0;
+ });
+
+ // 创建一个类型映射以便快速查找
+ const typeMap = new Map();
+ eventTypeList.value.forEach(item => {
+ typeMap.set(item.type, item);
+ });
+
+ // 处理图表数据 - 确保每个月份都有所有类型的数据
echartsOption.xAxis.data = list.map(item => item.name);
- // 赋值前清空数据
+
+ // 清空系列数据
Object.keys(seriesObj).forEach(key => {
seriesObj[key].data = [];
});
- list.forEach(item => {
- item.data.forEach((item1, index) => {
- if (!seriesObj?.[item1.name]) return;
- seriesObj[item1.name].data.push(item1.value);
+
+ // 遍历所有月份
+ list.forEach(month => {
+ // 创建一个临时映射存储当月的数据
+ const monthData = new Map();
+ month.data.forEach(item => {
+ monthData.set(item.name, item.value);
+ });
+
+ // 为每个类型添加数据（如果有则用实际值，没有则为0）
+ eventTypeList.value.forEach(typeItem => {
+ const value = monthData.get(typeItem.type) || 0;
+
+ // 添加到图表系列
+ if (seriesObj[typeItem.name]) {
+ seriesObj[typeItem.name].data.push(value);
+ }
});
});
-
+
+ // 更新eventTypeList的值（取最后一个月份的数据）
+ if (list.length > 0) {
+ const lastMonth = list[list.length - 1];
+ const lastMonthData = new Map();
+ lastMonth.data.forEach(item => {
+ lastMonthData.set(item.name, item.value);
+ });
+
+ eventTypeList.value.forEach(item => {
+ const value = lastMonthData.get(item.type);
+ if (value !== undefined) {
+ item.value = value;
+ }
+ });
+ }
+
+ // 更新图表
echartsOption.series = Object.values(seriesObj);
-
chart.value.setOption(echartsOption);
});
};
@@ -261,7 +308,7 @@
.chart {
width: 98%;
// height: 265px;
- height: pxToVh(285);
+ height: pxToVh(285);
padding-left: 10px;
margin-top: 27px;
}
--
Gitblit v1.9.3