无人机管理后台前端(已迁走)
张含笑
2025-09-01 2ca94de8ede18ac07ccfd8dec7b6f6a707adde9b
src/views/wel/components/flightStatistics.vue
@@ -59,14 +59,14 @@
});
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([
@@ -145,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,
@@ -176,7 +178,7 @@
        },
      },
      axisLabel: {
        interval: 0,
        // interval: 0,
        color: '#383838',
      },
    },
@@ -187,6 +189,8 @@
    nameTextStyle: {
      color: '#383838',
      fontSize: '1.2rem',
      // padding: [0, 0, 14, 0]
    },
    axisLine: {
      show: false,
@@ -213,6 +217,7 @@
        nameTextStyle: {
          color: '#383838',
          fontSize: '1.2rem',
          // padding: [0, 0, 14, 0]
        },
     
    
@@ -238,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',
@@ -263,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,
      },
@@ -289,7 +368,7 @@
  padding: 4px 14px 0 15px;
  background: #ffffff !important;
  margin-top: 5px;
    height: pxToVh(400);
    height: pxToVh(471);
  .fytitle {
    display: flex;
@@ -338,7 +417,7 @@
  }
  .flycenter {
    margin-top: 13px;
    margin-top: 8px;
    .centerBox {
      display: flex;
@@ -349,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;
@@ -372,7 +453,7 @@
        }
        .flydata {
          margin-top: 10px;
      margin-left: 11px;
          text-align: right;
          font-size: 14px;
          color: #7c8091;
@@ -388,9 +469,8 @@
    }
    .lineChart {
     height: pxToVh(233) ;
     height: pxToVh(374) ;
      width: 100%;
      .lineBox {
        width: 100%;
        height: 100%;