无人机管理后台前端(已迁走)
张含笑
2025-07-17 3e60c5060d204e59246dc0be8ac3370a3610deb2
feat:工作台接口对接
2 files modified
107 ■■■■ changed files
src/api/home/index.js 8 ●●●●● patch | view | raw | blame | history
src/views/wel/components/taskOutcome.vue 99 ●●●● patch | view | raw | blame | history
src/api/home/index.js
@@ -114,4 +114,12 @@
        method: 'post',
        data,
    })
}
// 任务成果
export const gettaskOutcomApi = data => {
    return request({
        url: `/blade-resource/attach/getManageAttachTypeStatistics`,
        method: 'post',
        data,
    })
}
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;
}