无人机管理后台前端(已迁走)
张含笑
2025-07-17 1d79d97a675194ab5cd6b7273829edefc095a648
feat:工作台优化
2 files modified
73 ■■■■ changed files
src/views/wel/components/flightStatistics.vue 9 ●●●●● patch | view | raw | blame | history
src/views/wel/components/taskOutcome.vue 64 ●●●● patch | view | raw | blame | history
src/views/wel/components/flightStatistics.vue
@@ -116,8 +116,6 @@
  } else {
    flyparams.value.date_enum = 'YEAR';
  }
    console.log('ttt', flyparams.value);
  getFlyList();
  getFlyTimeList();
};
@@ -140,8 +138,6 @@
          hasDuration = true;
          break;
        case '飞行里程':
          // 转换为万公 (假设原始单位是米)
          // flight_distance.push((parseFloat(item.value) / 10 || 0));
          flight_distance.push(parseFloat(item.value) || 0);
          hasDistance = true;
          break;
@@ -233,7 +229,7 @@
          },
        },
        splitLine: {
          show: true,
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#cdd5e2',
@@ -241,6 +237,7 @@
            opacity: 0.5,
          },
        },
        axisLabel: {
          color: '#383838', // 直接配置颜色
        },
@@ -298,7 +295,7 @@
  padding: 4px 14px 0 15px;
  background: #ffffff !important;
  margin-top: 5px;
  height: 100%;
    height: pxToVh(400);
  .fytitle {
    display: flex;
src/views/wel/components/taskOutcome.vue
@@ -25,9 +25,9 @@
<script setup >
import { getdisposeApi} from '@/api/home/index';
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import useEchartsResize from '@/hooks/useEchartsResize'
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import useEchartsResize from '@/hooks/useEchartsResize';
let checked = ref('YEAR');
let timeListStr = ['本周', '本月', '本年'];
let timeListEnum = ['WEEK', 'MONTH', 'YEAR'];
@@ -43,7 +43,6 @@
  checked.value = item;
  params.value.date_enum = item;
  dateSelect.value = item;
};
const echartsOption = {
    tooltip: {
@@ -51,7 +50,6 @@
        axisPointer: {
            type: 'shadow',
        },
    },
    legend: {
        itemWidth: 14,
@@ -74,6 +72,9 @@
        type: 'category',
        axisLine: {
            show: true, // 隐藏轴线
       lineStyle: {
          color: '#cdd5e2',
        },
        },
        axisLabel: {
            color: '#383838',
@@ -106,22 +107,21 @@
            },
            splitLine: {
                lineStyle: {
                    color: '#9A9A9A',
          color: '#cdd5e2',
                    type: 'dashed', // 设置为虚线
                },
            },
        },
    ],
    series: [],
}
};
const eventTypeList = ref([
    { name: '待处理', value: 0, color: '#FF7411' },
    { name: '处理中', value: 0, color: '#FFFF61' },
    { name: '已完成', value: 0, color: '#06D957' },
])
const seriesObj = {}
]);
const seriesObj = {};
eventTypeList.value.forEach(item => {
    seriesObj[item.name] = {
        type: 'bar',
@@ -133,36 +133,34 @@
        name: item.name,
        itemStyle: { color: item.color },
        data: [],
    }
})
const echartsRef = ref(null)
let { chart } = useEchartsResize(echartsRef)
  };
});
const echartsRef = ref(null);
let { chart } = useEchartsResize(echartsRef);
// 获取柱状图数据
const getBarChartData = value => {
    getdisposeApi(value).then(res => {
        const list = res?.data?.data || []
        echartsOption.xAxis.data = list.map(item => item.name)
    const list = res?.data?.data || [];
    echartsOption.xAxis.data = list.map(item => item.name);
        // 赋值前清空数据
        Object.keys(seriesObj).forEach(key => {
            seriesObj[key].data = []
        })
      seriesObj[key].data = [];
    });
        list.forEach(item => {
            item.data.forEach((item1, index) => {
                if (!seriesObj?.[item1.name]) return
                seriesObj[item1.name].data.push(item1.value)
            })
        })
        if (!seriesObj?.[item1.name]) return;
        seriesObj[item1.name].data.push(item1.value);
      });
    });
        echartsOption.series = Object.values(seriesObj)
    echartsOption.series = Object.values(seriesObj);
    
        chart.value.setOption(echartsOption)
    })
}
    chart.value.setOption(echartsOption);
  });
};
onMounted(() => {
    getBarChartData(params.value)
})
  getBarChartData(params.value);
});
</script>
<style scoped lang="scss">
@@ -172,7 +170,7 @@
  background: #ffffff !important;
  margin-top: 10px;
  margin-left: 10px;
  height: 100%;
  height: pxToVh(400);
.card-title {
    display: flex;
    margin-bottom: 10px;
@@ -257,8 +255,8 @@
}
.chart {
        width: 98%;
        height: 250px;
        padding-left: 15px;
  height: 265px;
  padding-left: 10px;
        margin-top: 27px;
    }
</style>