无人机管理后台前端(已迁走)
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9
src/views/wel/components/flightStatistics.vue
@@ -59,29 +59,24 @@
});
const chartRef = ref(null);
let { chart: lineChart } = useEchartsResize(chartRef);
const keyMapping = {
  飞行时长: 'total_flight_time',
  飞行里程: 'total_flight_distance',
  //   任务成果: 'event_num',
};
// const keyMapping = {
//   '飞行时长': 'total_flight_time',
//   '飞行里程': 'total_flight_distance',
//   //   任务成果: 'event_num',
// };
const unitMap = {
  飞行时长: '小时',
  飞行里程: '公里',
  //   任务成果: '个',
  '飞行时长': '小时',
  '飞行里程': '公里',
};
const flyTypeList = ref([
  { name: '飞行时长', value: 0, img: flyImg1, key: 'hour_count' },
  { name: '飞行里程', value: 0, img: flyImg2, key: 'flight_mileage' },
  //   { name: '任务成果', value: 0, img: flyImg3 },
]);
// 飞行统计
const getFlyList = () => {
  // getFly(params.value).then(res => {
  //   flyTypeList.value = flyTypeList.value.map(item => ({
  //     ...item,
  //     value: res.data.data[keyMapping[item.name]] || 0,
  //   }));
  // });
  tongjiNestApi(flyparams.value).then(res => {
    flyTypeList.value = flyTypeList.value.map(item => ({
@@ -94,18 +89,18 @@
const getFlyTimeList = () => {
  getFlyTime(params.value).then(res => {
    const resList = res?.data?.data || [];
    lineCharts(resList);
  });
};
const refresh = () => {
  params.value.date_enum = 'CURRENT_YEAR';
  checked.value = 'CURRENT_YEAR';
  dateSelect.value = 'CURRENT_YEAR';
  getFlyList();
  getFlyTimeList();
};
let timeClick = (item, index) => {
  checked.value = item;
  params.value.date_enum = item;
  dateSelect.value = item;
@@ -150,23 +145,25 @@
  });
  var option = {
    tooltip: {
      trigger: 'item',
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        type: 'shadow'
      },
      // position: 'top'
    },
    grid: {
      left: '2%',
      right: '4%',
      bottom: '14%',
      top: '16%',
      top: '9%',
      containLabel: true,
    },
    legend: {
      data: ['飞行时长', '飞行里程'],
      left: 'center',
      top: '5%',
      color: '#383838', // 直接配置颜色
      // top: '5%',
      color: '#383838',
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
@@ -181,47 +178,49 @@
        },
      },
      axisLabel: {
        interval: 0,
        // interval: 0,
        color: '#383838',
      },
    },
    yAxis: [
      {
        type: 'log',
        name: '单位:小时',
        nameTextStyle: {
          color: '#383838',
          fontSize: '1.2rem',
        },
        min: 1,
        logBase: 3,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#cdd5e2',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#cdd5e2',
            width: 1,
            opacity: 0.5,
          },
        },
        axisLabel: {
          color: '#666666', // 直接配置颜色
        },
    type: 'value',
    name: '单位:小时',
    nameTextStyle: {
      color: '#383838',
      fontSize: '1.2rem',
      // padding: [0, 0, 14, 0]
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#cdd5e2',
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#cdd5e2',
        width: 1,
        opacity: 0.5,
      },
    },
    axisLabel: {
      color: '#666666',
    }
  },
      {
        type: 'log',
        type: 'value',
        name: '单位:公里',
        nameTextStyle: {
          color: '#383838',
          fontSize: '1.2rem',
          // padding: [0, 0, 14, 0]
        },
        min: 1,
        logBase: 3,
        axisLine: {
          show: false,
          lineStyle: {
@@ -244,20 +243,84 @@
      },
    ],
    series: [
      {
        name: '飞行时长',
        type: 'bar',
        barWidth: '8px',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#91C1FF' },
            { offset: 1, color: '#2970FF' },
          ]),
          borderRadius: 4,
        },
        data: flight_time,
      },
  // {//柱底圆片
  //           name: "",
  //           type: "pictorialBar",
  //           symbolSize: [8, 10],//调整截面形状
  //           symbolOffset: [0, 5],
  //           z: 12,
  //           itemStyle: {
  //                   "normal": {
  //                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  //                               offset: 0,
  //                              "color": "#91C1FF"
  //                           },
  //                           {
  //                               offset: 1,
  //                               "color": "#2970FF"
  //                           }
  //                       ],false)
  //                   }
  //               },
  //           data: flight_time,
  //       },
        //柱体
        {
            name: '飞行时长',
            type: 'bar',
             barWidth: '8px',
            itemStyle: {
                    "normal": {
                        "color": {
                            "x": 0,
                            "y": 0,
                            "x2": 0,
                            "y2": 1,
                            "type": "linear",
                            "global": false,
                            "colorStops": [{//第一节下面
                                "offset": 0,
                                "color": "#91C1FF"
                            }, {
                                "offset": 1,
                                "color": "#2970FF"
                            }]
                        }
                    }
                },
           data: flight_time,
        },
        //柱顶圆片
        {
           name: '',
            type: "pictorialBar",
          tooltip: { show: false },
            symbolSize: [8, 8],//调整截面形状
            symbolOffset: [0, -3],
            z: 12,
            symbolPosition: "end",
                "itemStyle": {
                    "normal": {
                         color: new echarts.graphic.LinearGradient(0,0,0,1,
                            [{
                                    offset: 0,
                                    color: "#9DC9FD"
                                },
                                {
                                    offset: 1,
                                    color: "#3279FA"
                                }
                            ],
                            false
                        ),
                    }
                },
            data: flight_time,
        },
      {
        name: '飞行里程',
        type: 'line',
@@ -269,11 +332,21 @@
        lineStyle: {
          width: 2,
          type: 'solid',
          color: '#01D0A7',
        },
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#01D0A7',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(1,208,167,0.4) '
            },
            {
              offset: 1,
              color: 'rgba(1,208,167,0) '
            }
          ])
        },
        data: flight_distance,
      },
@@ -295,7 +368,7 @@
  padding: 4px 14px 0 15px;
  background: #ffffff !important;
  margin-top: 5px;
    height: pxToVh(400);
    height: pxToVh(471);
  .fytitle {
    display: flex;
@@ -344,7 +417,7 @@
  }
  .flycenter {
    margin-top: 13px;
    margin-top: 8px;
    .centerBox {
      display: flex;
@@ -355,13 +428,15 @@
        padding: 7px 7px 0 15px;
        width: 196px;
        flex: 1;
        // height: 80px;
        height: pxToVh(80);
       height: 41px;
        //height: pxToVh(41);
        background: #f6f8fe;
        box-shadow: 0px 5px 4px 0px #ebf1ff;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #ffffff;
        margin-right: 16px;
        display: flex;
        align-items: center;
        img {
          width: 15px;
@@ -378,7 +453,7 @@
        }
        .flydata {
          margin-top: 10px;
      margin-left: 11px;
          text-align: right;
          font-size: 14px;
          color: #7c8091;
@@ -394,9 +469,8 @@
    }
    .lineChart {
     height: pxToVh(233) ;
     height: pxToVh(374) ;
      width: 100%;
      .lineBox {
        width: 100%;
        height: 100%;