| | |
| | | const totalNum = ref(0) |
| | | const dateSelect = ref('CURRENT_YEAR'); |
| | | const refresh = () => { |
| | | params.value.dateEnum = 'CURRENT_YEAR'; |
| | | checked.value = 'CURRENT_YEAR'; |
| | | dateSelect.value = 'CURRENT_YEAR'; |
| | | |
| | | getBarChartData(params.value); |
| | | }; |
| | | let timeClick = (item, index) => { |
| | |
| | | dateSelect.value = item; |
| | | getBarChartData(params.value); |
| | | }; |
| | | const seriesObj = {}; |
| | | const echartsOption = { |
| | | title: { |
| | | text: seriesObj ? '' :'暂无数据', |
| | | left: 'center', |
| | | top: 'center', |
| | | textStyle: { |
| | | color: '#999', |
| | | fontSize: '1.6rem', |
| | | fontWeight: 'normal' |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | |
| | | legend: { |
| | | itemWidth: 14, |
| | | itemHeight: 8, |
| | | data: ['照片总数', '视频总数', 'AI识别', '全景', '三维', '正射'], // 确保包含所有系列名称 |
| | | data: ['照片总数', '视频总数', 'AI识别', '全景', '三维', '正射'], |
| | | top: '-1%', |
| | | textStyle: { |
| | | color: '#383838', |
| | |
| | | }, |
| | | }, |
| | | grid: { |
| | | // top: '5%', |
| | | top: '9%', |
| | | left: 0, |
| | | right: 0, |
| | | bottom: 0, |
| | |
| | | { name: '三维', value: 0, type: '3', color: '#04C598' }, |
| | | { name: '正射', value: 0, type: '4', color: '#3673E8' }, |
| | | ]); |
| | | const seriesObj = {}; |
| | | |
| | | eventTypeList.value.forEach(item => { |
| | | seriesObj[item.name] = { |
| | | type: 'bar', |
| | |
| | | gettaskOutcomApi(value).then(res => { |
| | | const list = res?.data?.data || []; |
| | | |
| | | |
| | | 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(); |
| | |
| | | background: #ffffff !important; |
| | | margin-top: 10px; |
| | | margin-left: 10px; |
| | | height: pxToVh(400); |
| | | height: pxToVh(473); |
| | | .card-title { |
| | | display: flex; |
| | | margin-bottom: 10px; |
| | | // margin-bottom: 10px; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .cardtotal { |
| | |
| | | } |
| | | .chart { |
| | | width: 98%; |
| | | // height: 265px; |
| | | height: pxToVh(285); |
| | | height: pxToVh(380); |
| | | padding-left: 10px; |
| | | margin-top: 27px; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |