feat：调整统计图显示和任务管理日期选择

chenyao

2025-04-21 73613843f912b79818700f55f684c679f3a34654

feat：调整统计图显示和任务管理日期选择

 src/views/SignMachineNest/MachineRight/InspectionRaskList.vue

@@ -92,6 +92,7 @@

// 单个机巢信息
const singleUavHome = computed(() => store.state.home.singleUavHome)
const osdVisible = computed(() => store.state.home.osdVisible);

const isMore = ref(true)
// 控制加载状态
@@ -215,6 +216,16 @@
    }
})

// 监听如果当前任务飞行完毕，当前任务即消失
watch(() => store.state.home.deviceState, async (newValue) => {
    const deviceInfo = newValue?.deviceInfo[osdVisible.value.sn];
    if (!deviceInfo) return
    // 重新刷新数据
    if (deviceInfo?.mode_code === 14) {
        getJobList()
    }
});

const { init: initTaskWayline, removeEntitys } = useTaskWayline()

onMounted(async () => {

 src/views/SignMachineNest/MachineRight/MachineMonitor.vue

@@ -44,12 +44,9 @@
const isTakeOff = ref(false)
// 监听ws消息
watch(() => store.state.home.deviceState, async (newValue) => {
    console.log(osdVisible.value.sn,'333333')
        const deviceInfo = newValue?.deviceInfo[osdVisible.value.sn]
        if (!deviceInfo) return
		
        const currentIsTakeOff = ![14, 0].includes(deviceInfo?.mode_code)
        console.log(isTakeOff.value, currentIsTakeOff,'8888')
        // 如果还是之前的状态，不切换
        if (isTakeOff.value === currentIsTakeOff) return
        isTakeOff.value = currentIsTakeOff

 src/views/TaskManage/SearchBox.vue

@@ -25,7 +25,7 @@
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="YYYY-MM-DD"
                        @change="handleSearch"
                        @change="handleDateChange"
                    />
        </el-form-item>
        <el-form-item>
@@ -69,6 +69,7 @@
</template>
<script setup>
import { pxToRem } from '@/utils/rem'
import { ElMessage } from 'element-plus'
import { deptsByAreaCode, getDockInfo } from '@/api/home/common';
import TaskAlgorithmBusiness from './components/TaskAlgorithmBusiness.vue';
import dayjs from 'dayjs';
@@ -168,7 +169,8 @@

let timeClick = (item,index) => {
  checked.value = item;
  // model.value = dateRanges[item];
  // dateRange.value = dateRanges[item];
  dateRange.value = [];
  // emit('change', dateRanges[item],timeListEnum[index]);
  searchForm.date_enum = timeListEnum[index];
  handleSearch();
@@ -176,6 +178,10 @@
// 搜索
const handleSearch = () => {
  if (!dateRange.value) { dateRange.value = []; }
  if (dateRange.value && dateRange.value.length) {
      // 有值时 清除 日 本周 本月 本年状态
      checked.value = '';
  }
  // 提交至store
  let params = {
    ...searchForm,
@@ -185,6 +191,20 @@
  store.commit('setTaskSearchParams', params);
  emit('search', params);
};
const handleDateChange = (val) => {
  if (val && val.length === 2) {
    const start = dayjs(val[0])
    const end = dayjs(val[1])
    const diff = end.diff(start, 'day')
    
    if (diff > 30) {
      ElMessage.warning('日期范围不能超过30天')
      dateRange.value = []
      return
    }
  }
  handleSearch()
};
// 重置
const handleReset = () => {
  dateRange.value = [];

 src/views/TaskManage/TaskTop/TaskEvent.vue

@@ -27,12 +27,11 @@

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: '{b}: {c} 件'
  },
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
  legend: {
    data: ['任务', '事件'],
    top: '2%',
@@ -49,18 +48,17 @@
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    },
    axisLabel: {
      color: '#fff',
      interval: 0,
      rotate: 30
    }
  },
        type: 'category',
        // data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        axisLine: {
            lineStyle: {
                color: '#fff',
            },
        },
        axisLabel: {
            color: '#fff',
        },
    },
  yAxis: {
    type: 'value',
    name: '单位：件',
@@ -81,8 +79,8 @@
  series: [
    {
      name: '任务',
      type: 'bar',
      barWidth: '6px',
            type: 'bar',
            barWidth: '20%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1EE7C5' },
@@ -93,7 +91,7 @@
    {
      name: '事件',
      type: 'bar',
      barWidth: '6px',
      barWidth: '20%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#69BCFF' },

 src/views/TaskManage/TaskTop/TaskTime.vue

@@ -45,19 +45,37 @@
    bottom: '2%',
    containLabel: true
  },
  // xAxis: {
  //   type: 'category',
  //   axisLine: {
  //     lineStyle: {
  //       color: '#fff'
  //     }
  //   },
  //   axisLabel: {
  //     color: '#fff',
  //     interval: 0,
  //     rotate: 30
  //   }
  // },
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    },
    axisLabel: {
      color: '#fff',
      interval: 0,
      rotate: 30
    }
  },
        type: 'category',
        data: ['1'],
        axisLine: {
            show: false, // 隐藏轴线
        },
        axisTick: {
            show: true,
            length: 2,
            lineStyle: {
                color: '#ffffff',
            },
        },
        axisLabel: {
            color: '#ffffff',
            margin: 8,
        },
    },
  yAxis: {
    type: 'value',
    name: '单位：件',

 src/views/TaskManage/TaskTop/TaskTotal.vue

@@ -70,11 +70,11 @@
    }
    img { width: 160px; height: 110px;}
    .num {
      width: 50px;
      width: 100px;
      position: absolute;
      font-size: 32px;
      top: 90px;
      left: 48px;
      left: 24px;
    }
  }
  .other-total {