feat: 巡检任务情况

罗广辉

2025-03-31 a2b9df511eec2ed1c9193cdf6e9f9659e5936898

feat: 巡检任务情况

 src/api/home/index.js

@@ -15,3 +15,11 @@
    method: 'post',
  });
};

// 巡检任务柱状图数据
export const getJobNumBar = () => {
  return request({
    url: '/drone-device-core/wayline/waylineJobInfo/jobNumBar',
    method: 'post',
  });
};

 src/views/Home/components/HomeLeft/InspectionRaskDetails.vue

@@ -14,7 +14,7 @@
      </div>
      <div class="status">
        <div v-for="item in list">
          <div :style="{ color: item.color }" class="value">{{ item.value }}</div>
          <div :style="{ color: item.color }" class="value">{{ jobStatistics[item.field] }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
@@ -29,14 +29,14 @@
import { pxToRem } from '@/utils/rem';
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
import { getJobStatistics, getTotalJobNum } from '@/api/home';
import { getJobNumBar, getJobStatistics, getTotalJobNum } from '@/api/home';

const list = ref([
  { name: '计划执行', value: 89, color: '#FFFFFF' },
  { name: '执行中', value: 100, color: '#FFA768' },
  { name: '待执行', value: 66, color: '#FFE17E' },
  { name: '已执行', value: 10, color: '#8EFFAC' },
  { name: '执行失败', value: 10, color: '#FF8E8E' },
  { name: '计划执行', value: 89, color: '#FFFFFF',field:'planned_executions' },
  { name: '执行中', value: 100, color: '#FFA768',field:'running_num' },
  { name: '待执行', value: 66, color: '#FFE17E',field:'pending_executions' },
  { name: '已执行', value: 10, color: '#8EFFAC',field:'executed' },
  { name: '执行失败', value: 10, color: '#FF8E8E',field:'failed_executions' },
]);
const option = {
  grid: {
@@ -145,12 +145,23 @@

const chartRef = ref(null);
const total = ref(0);
const jobStatistics = ref({
  "planned_executions": 0,
  "executed": 0,
  "running_num": 0,
  "failed_executions": 0,
  "pending_executions": 0
})

onMounted(() => {
  getTotalJobNum().then(res => {
    total.value = res.data?.data || 0
  })
  getJobStatistics().then(res => {

    jobStatistics.value = res.data?.data || {}
  })
  getJobNumBar().then(res => {
    console.log(res.data.data);
  })
  const chart = echarts.init(chartRef.value);
  chart.setOption(option);