| | |
| | | </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: { |
| | |
| | | legend: { |
| | | itemWidth: 14, |
| | | itemHeight: 8, |
| | | data: ['待处理', '处理中', '已完成'], // 确保包含所有系列名称 |
| | | data: ['照片总数', '视频总数', 'AI识别', '全景', '三维', '正射'], // 确保包含所有系列名称 |
| | | top: '-1%', |
| | | textStyle: { |
| | | color: '#383838', |
| | |
| | | type: 'category', |
| | | axisLine: { |
| | | show: true, // 隐藏轴线 |
| | | lineStyle: { |
| | | color: '#cdd5e2', |
| | | }, |
| | | lineStyle: { |
| | | color: '#cdd5e2', |
| | | }, |
| | | }, |
| | | axisLabel: { |
| | | color: '#383838', |
| | |
| | | ], |
| | | 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 => { |
| | |
| | | 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); |
| | | }); |
| | | }; |
| | |
| | | .chart { |
| | | width: 98%; |
| | | // height: 265px; |
| | | height: pxToVh(285); |
| | | height: pxToVh(285); |
| | | padding-left: 10px; |
| | | margin-top: 27px; |
| | | } |