From 02409bfbe15f22fc3b5dccadabfd860a660a49d9 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 11 Oct 2025 10:37:14 +0800
Subject: [PATCH] feat: 名称修改
---
src/views/wel/components/taskOutcome.vue | 323 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 185 insertions(+), 138 deletions(-)
diff --git a/src/views/wel/components/taskOutcome.vue b/src/views/wel/components/taskOutcome.vue
index 422bfb3..773c115 100644
--- a/src/views/wel/components/taskOutcome.vue
+++ b/src/views/wel/components/taskOutcome.vue
@@ -1,11 +1,11 @@
<template>
- <div class="taskOutcome">
+ <div class="taskOutcome">
<div class="card-title">
<div class="cardtotal">
<p>任务成果</p>
- <span class="total-number">1856</span>
+ <span class="total-number">{{totalNum}}</span>
<p>个</p>
- <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
+ <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
</div>
<div class="time-card">
<div
@@ -19,150 +19,197 @@
</div>
</div>
</div>
- <div class="chart" ref="echartsRef"></div>
- </div>
+ <div class="chart" ref="echartsRef"></div>
+ </div>
</template>
-<script setup >
-import { getdisposeApi} from '@/api/home/index';
-import * as echarts from 'echarts'
-import dayjs from 'dayjs'
-import useEchartsResize from '@/hooks/useEchartsResize'
-let checked = ref('YEAR');
+<script setup>
+import { getdisposeApi, gettaskOutcomApi } from '@/api/home/index';
+import * as echarts from 'echarts';
+import dayjs from 'dayjs';
+import useEchartsResize from '@/hooks/useEchartsResize';
+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 totalNum = ref(0)
+const dateSelect = ref('CURRENT_YEAR');
+const refresh = () => {
+ 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 seriesObj = {};
const echartsOption = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
-
- },
- legend: {
- itemWidth: 14,
- itemHeight: 8,
- data: ['待处理', '处理中', '已完成', '事件完成率'], // 确保包含所有系列名称
- top: '-1%',
- textStyle: {
- color: '#383838',
- fontSize: 12,
- },
- },
- grid: {
- // top: '5%',
- left: 0,
- right: 0,
- bottom: 0,
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- axisLine: {
- show: true, // 隐藏轴线
- },
- axisLabel: {
- color: '#383838',
- // interval: 0, // 显示所有标签
- },
- data: [],
- },
- yAxis: [
- {
- type: 'value',
- name: '',
- nameTextStyle: {
- color: '#E6F7FF',
- fontSize: '1rem',
- padding: [-8, 0, 0, 0], // 调整单位文字位置，向左偏移
- verticalAlign: 'top',
- lineHeight: 12,
- },
- axisLabel: {
- interval: 0, // 显示所有标签
- color: '#383838',
- fontFamily: 'Source Han Sans CN, Source Han Sans CN',
- fontWeight: 400,
- fontSize: 10,
- },
- axisLine: {
- lineStyle: {
- color: '#383838',
- },
- },
- splitLine: {
- lineStyle: {
- color: '#9A9A9A',
- type: 'dashed', // 设置为虚线
- },
- },
- },
-
- ],
- series: [],
-}
-
+ title: {
+ text: seriesObj ? '' :'暂无数据',
+ left: 'center',
+ top: 'center',
+ textStyle: {
+ color: '#999',
+ fontSize: '1.6rem',
+ fontWeight: 'normal'
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: {
+ itemWidth: 14,
+ itemHeight: 8,
+ data: ['照片总数', '视频总数', 'AI识别', '全景', '三维', '正射'],
+ top: '-1%',
+ textStyle: {
+ color: '#383838',
+ fontSize: 12,
+ },
+ },
+ grid: {
+ top: '9%',
+ left: 0,
+ right: 0,
+ bottom: 0,
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ axisLine: {
+ show: true, // 隐藏轴线
+ lineStyle: {
+ color: '#cdd5e2',
+ },
+ },
+ axisLabel: {
+ color: '#383838',
+ // interval: 0, // 显示所有标签
+ },
+ data: [],
+ },
+ yAxis: [
+ {
+ type: 'value',
+ name: '',
+ nameTextStyle: {
+ color: '#E6F7FF',
+ fontSize: '1rem',
+ padding: [-8, 0, 0, 0], // 调整单位文字位置，向左偏移
+ verticalAlign: 'top',
+ lineHeight: 12,
+ },
+ axisLabel: {
+ interval: 0, // 显示所有标签
+ color: '#383838',
+ fontFamily: 'Source Han Sans CN, Source Han Sans CN',
+ fontWeight: 400,
+ fontSize: 10,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#383838',
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#cdd5e2',
+ type: 'dashed', // 设置为虚线
+ },
+ },
+ },
+ ],
+ series: [],
+};
const eventTypeList = ref([
- { name: '待处理', value: 0, color: '#FF7411' },
- { name: '处理中', value: 0, color: '#FFFF61' },
- { name: '已完成', value: 0, color: '#06D957' },
-])
-const seriesObj = {}
+ {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' },
+]);
+
eventTypeList.value.forEach(item => {
- seriesObj[item.name] = {
- type: 'bar',
- stack: 'Ad',
- barWidth: 8,
- emphasis: {
- focus: 'series',
- },
- name: item.name,
- itemStyle: { color: item.color },
- data: [],
- }
-})
-const echartsRef = ref(null)
-let { chart } = useEchartsResize(echartsRef)
-
-
+ seriesObj[item.name] = {
+ type: 'bar',
+ stack: 'Ad',
+ barWidth: 8,
+ emphasis: {
+ focus: 'series',
+ },
+ name: item.name,
+ itemStyle: { color: item.color },
+ data: [],
+ };
+});
+const echartsRef = ref(null);
+let { chart } = useEchartsResize(echartsRef);
// 获取柱状图数据
const getBarChartData = value => {
- getdisposeApi(value).then(res => {
- const list = res?.data?.data || []
- 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)
- })
- })
+ gettaskOutcomApi(value).then(res => {
+ const list = res?.data?.data || [];
- echartsOption.series = Object.values(seriesObj)
-
- chart.value.setOption(echartsOption)
- })
-}
+
+ 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(month => {
+ totalNum.value = month.total
+ const monthData = new Map();
+ month.data.forEach(item => {
+ monthData.set(item.name, item.value);
+ });
+ eventTypeList.value.forEach(typeItem => {
+ const value = monthData.get(typeItem.type) || 0;
+ if (seriesObj[typeItem.name]) {
+ seriesObj[typeItem.name].data.push(value);
+ }
+ });
+ });
+ 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);
+ });
+};
onMounted(() => {
- getBarChartData(params.value)
-})
+ getBarChartData(params.value);
+});
</script>
<style scoped lang="scss">
@@ -172,10 +219,10 @@
background: #ffffff !important;
margin-top: 10px;
margin-left: 10px;
- height: 100%;
-.card-title {
+ height: pxToVh(473);
+ .card-title {
display: flex;
- margin-bottom: 10px;
+ // margin-bottom: 10px;
align-items: center;
justify-content: space-between;
.cardtotal {
@@ -215,8 +262,8 @@
}
}
}
-
- .time-card {
+
+.time-card {
text-align: center;
// height: 30px;
height: pxToVh(30);
@@ -256,9 +303,9 @@
}
}
.chart {
- width: 98%;
- height: 250px;
- padding-left: 15px;
- margin-top: 27px;
- }
-</style>
\ No newline at end of file
+ width: 98%;
+ height: pxToVh(380);
+ padding-left: 10px;
+ margin-top: 10px;
+}
+</style>
--
Gitblit v1.9.3