feat: 更新任务管理和地图事件图标

chenyao

2025-04-17 6fa9f11846281816941e2602254ad42e3944f6b9

feat: 更新任务管理和地图事件图标

 src/assets/images/home/useUavHome/eventAggregationImg.png

 src/store/modules/task.js

@@ -8,8 +8,6 @@
  actions: {},
  mutations: {
    setTaskSearchParams: (state, data) => {
      console.log(data)
            // setStore({ name: 'taskSearchParams', content: data })
            state.taskSearchParams = data;
        },
  },

 src/views/TaskManage/SearchBox.vue

@@ -40,7 +40,7 @@
          </div>
        </el-form-item>
        <el-form-item label="任务算法:" v-if="isExpand">
          <TaskAlgorithmBusiness :setWidth="200" :showAlgorithm="true" @algorithmChange="algorithmChange"/>
          <TaskAlgorithmBusiness :setWidth="186" :showAlgorithm="true" @algorithmChange="algorithmChange"/>
        </el-form-item>
        <el-form-item label="所属部门:" v-if="isExpand">
          <el-select class="ztzf-select" v-model="searchForm.create_dept" placeholder="请选择部门" clearable>
@@ -53,7 +53,7 @@
          </el-select>
        </el-form-item>
        <el-form-item label="任务类型:" v-if="isExpand">
          <TaskAlgorithmBusiness :setWidth="200" :showBusiness="true" @businessChange="businessChange"/>
          <TaskAlgorithmBusiness :setWidth="186" :showBusiness="true" @businessChange="businessChange"/>
        </el-form-item>
        <div class="more" v-if="isExpand" @click="toggleExpand">收起</div>
        <div class="more" v-else @click="toggleExpand">更多</div>
@@ -84,7 +84,7 @@
  ai_types: [], // 算法类型
  area_code: '', // 区域code
  create_dept: '', // 创建部门
  date_enum: '', // 日期枚举,可用值:TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
  date_enum: 'TODAY', // 日期枚举,可用值:TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
  device_sn: '', // 设备编号
  end_date: null, // 结束时间
  industry_type: '', // 行业key
@@ -102,30 +102,6 @@
];

const emit = defineEmits(['search','addTask']);

const handleSearch = () => {
  // 提交至store
  let params = {
    ...searchForm,
    start_date: dateRange.value.length ? `${dateRange.value[0]} 00:00:00` : null,
    end_date: dateRange.value.length ? `${dateRange.value[1]} 23:59:59` : null
  }
  store.commit('setTaskSearchParams', params);
  emit('search', params);
};

const handleReset = () => {
  dateRange.value = null;
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = '';
  });
  handleSearch();
};

// 新增任务
const addTask = () => {
  emit('addTask');
};

const algorithmChange = (val) => {
  searchForm.ai_types = val;
@@ -160,6 +136,7 @@
};
const deptChange = (value) => {
  // 处理机巢数据
  searchForm.device_sn = '';
  machineData.value = '';
  machineData.value = deptTreeData.value.find(item => item.area_code === value)?.devices || [];
  // 所属部门重新请求值
@@ -193,13 +170,42 @@
  // model.value = dateRanges[item];
  // emit('change', dateRanges[item],timeListEnum[index]);
  searchForm.date_enum = timeListEnum[index];
  handleSearch();
};
// 搜索
const handleSearch = () => {
  if (!dateRange.value) { dateRange.value = []; }
  // 提交至store
  let params = {
    ...searchForm,
    start_date: dateRange.value.length ? `${dateRange?.value[0]} 00:00:00` : null,
    end_date: dateRange.value.length ? `${dateRange?.value[1]} 23:59:59` : null
  }
  store.commit('setTaskSearchParams', params);
  emit('search', params);
};
// 重置
const handleReset = () => {
  dateRange.value = [];
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = '';
  });
  searchForm.ai_types = [];
  searchForm.date_enum = 'TODAY';
  checked.value = 'today';
  handleSearch();
};

// 新增任务
const addTask = () => {
  emit('addTask');
};

onMounted(() => {
  // requestDictionary();
  getDeptsByAreaCode();
  requestDockInfo();
  // 查询一次
  handleSearch();
});
</script>


 src/views/TaskManage/TaskIntermediateContent/AddTask.vue

@@ -8,6 +8,7 @@
        :width="pxToRem(1500)"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        @close="cancel"
    >
        <!-- <el-divider content-position="left">新建任务</el-divider> -->
        <div class="task-contain">

 src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -105,7 +105,7 @@
        if (row.status === 2 || row.status === 1){
            rowData.value = row? row : {};
            isShowCurrentTaskDetails.value = true;
        }else{
        } else{
            ElMessage.warning('todo 跳历史任务详情')
        }
    }else{

 src/views/TaskManage/TaskTop/TaskEvent.vue

@@ -117,7 +117,6 @@

// 添加监听
watch(() => store.state.task.taskSearchParams, (newVal) => {
  console.log(newVal, '1111');
  if (newVal) {
    getJobEventBar(newVal);
  }

 src/views/TaskManage/TaskTop/TaskIndustry.vue

@@ -1,7 +1,7 @@
<!-- 任务算法统计 -->
 <template>
  <div class="task-industry">
    <div class="title">任务算法统计</div>
    <div class="title">任务算法类型</div>
    <div class="chart" ref="chartRef"></div>
  </div>
 </template>
@@ -41,13 +41,14 @@
      roseType: 'radius',
      radius: ['20%', '70%'],
      center: ['50%', '45%'],
      data: [
        { name: '国土类', value: 0, itemStyle: { color: '#3D7FFF' } },
        { name: '城管类', value: 0, itemStyle: { color: '#8277E9' } },
        { name: '消防类', value: 0, itemStyle: { color: '#FFB77E' } },
        { name: '林业类', value: 0, itemStyle: { color: '#44D7B6' } },
        { name: '公安类', value: 0, itemStyle: { color: '#62F4FF' } }
      ],
      data: [],
      // [
      //   { name: '国土类', value: 0, itemStyle: { color: '#3D7FFF' } },
      //   { name: '城管类', value: 0, itemStyle: { color: '#8277E9' } },
      //   { name: '消防类', value: 0, itemStyle: { color: '#FFB77E' } },
      //   { name: '林业类', value: 0, itemStyle: { color: '#44D7B6' } },
      //   { name: '公安类', value: 0, itemStyle: { color: '#62F4FF' } }
      // ],
      label: {
        show: true,
        position: 'outside',
@@ -71,36 +72,19 @@
const getIndustryJobNumPieChart = (value) => {
  industryJobNumPieChart(value).then(res => {
    if (res.data.code !== 0) return;
    option.series[0].data.forEach(item => {
      const matchData = res.data.data.find(d => d.name === item.name);
      if (matchData) {
        item.value = matchData.value;
      }
    });
    option.series[0].data = res.data.data;
    // forEach(item => {
    //   const matchData = res.data.data.find(d => d.name === item.name);
    //   if (matchData) {
    //     item.value = matchData.value;
    //   }
    // });
    chart.value.setOption(option);
  });
};


// 获取行业统计数据
// const getIndustryJobNumPieChart = () => {
//   industryJobNumPieChart().then(res => {
//     if (res.data.code !== 0) return;
//     const data = res.data.data.map(item => ({
//       name: item.name,
//       value: item.value,
//       itemStyle: {
//         color: getRandomColor()
//       }
//     }));
//     option.series[0].data = data;
//     chart.value.setOption(option);
//   });
// };

// 添加监听
watch(() => store.state.task.taskSearchParams, (newVal) => {
  console.log(newVal, '2222');
  if (newVal) {
    getIndustryJobNumPieChart(newVal);
  }

 src/views/TaskManage/components/TaskAlgorithmBusiness.vue

@@ -1,12 +1,12 @@
<!-- 关联算法和综合业务 -->
<template>
  <div class="task-algorithm" v-if="showAlgorithm">
    <el-select class="ztzf-select" :style="{ width:setWidth +'px' }" v-model="ai_types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择算法" clearable @change="handleAlgorithmChange">
    <el-select class="ztzf-select" :style="{ width: pxToRem(setWidth) }" v-model="ai_types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择算法" clearable @change="handleAlgorithmChange">
      <el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
    </el-select>
  </div>
  <div class="task-business" v-if="showBusiness">
    <el-select class="ztzf-select" :style="{ width:setWidth +'px' }" v-model="industry_type" placeholder="请选择类型" clearable @change="handleBusinessChange">
    <el-select class="ztzf-select" :style="{ width: pxToRem(setWidth) }" v-model="industry_type" placeholder="请选择类型" clearable @change="handleBusinessChange">
      <el-option v-for="item in taskBusiness" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
    </el-select>
  </div>
@@ -14,7 +14,8 @@

<script setup>

import { getMultipleDictionary } from '@/api/system/dictbiz'
import { getMultipleDictionary } from '@/api/system/dictbiz';
import { pxToRem } from '@/utils/rem'

// 接收父组件传参
const props = defineProps({
@@ -27,7 +28,7 @@
    default: false
  },
  setWidth: {
    type: String,
    type: Number,
    default: '100%'
  }
});