feat: 名称修改

罗广辉

2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9

 src/views/wel/components/flightStatistics.vue

@@ -3,7 +3,7 @@
    <div class="fytitle">
      <div class="cardtotal">
        <p>飞行统计</p>
        <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
        <img @click="refresh" src="/src/assets/images/workbench/st1.svg" alt="" />
      </div>
      <div class="time-card">
        <div
@@ -35,7 +35,7 @@
</template>

<script setup>
import { getJobEventByStatus, getJobEventTotal, getFly, getFlyTime } from '@/api/home/index';
import { getFly, getFlyTime, tongjiNestApi } from '@/api/home/index';
import flyImg1 from '@/assets/images/workbench/fy2.svg';
import flyImg2 from '@/assets/images/workbench/fy3.svg';
import flyImg3 from '@/assets/images/workbench/fy4.svg';
@@ -51,42 +51,66 @@
  end_date: undefined,
  start_date: undefined,
});
const flyparams = ref({
  date_enum: 'YEAR',
  device_sn: '',
  end_date: undefined,
  start_date: undefined,
});
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 },
  { name: '飞行里程', value: 0, img: flyImg2 },
  //   { name: '任务成果', value: 0, img: flyImg3 },
  { name: '飞行时长', value: 0, img: flyImg1, key: 'hour_count' },
  { name: '飞行里程', value: 0, img: flyImg2, key: 'flight_mileage' },

]);
// 飞行统计
const getFlyList = () => {
  getFly(params.value).then(res => {
 

  tongjiNestApi(flyparams.value).then(res => {
    flyTypeList.value = flyTypeList.value.map(item => ({
      ...item,
      value: res.data.data[keyMapping[item.name]] || 0,
      value: res.data.data[item.key] || 0,
    }));

  });
};
const getFlyTimeList = () => {
  getFlyTime(params.value).then(res => {
    const resList = res?.data?.data || [];

    lineCharts(resList);
  });
};
const refresh = () => {

  getFlyList();
  getFlyTimeList();

  
};
let timeClick = (item, index) => {
  checked.value = item;
  params.value.date_enum = item;
  dateSelect.value = item;
  if (item === 'CURRENT_MONTH') {
    flyparams.value.date_enum = 'MONTH';
  } else if (item === 'CURRENT_WEEK') {
    flyparams.value.date_enum = 'WEEK';
  } else {
    flyparams.value.date_enum = 'YEAR';
  }
  getFlyList();
  getFlyTimeList();
};
@@ -109,8 +133,6 @@
          hasDuration = true;
          break;
        case '飞行里程':
          // 转换为万公 (假设原始单位是米)
          // flight_distance.push((parseFloat(item.value) / 10 || 0));
          flight_distance.push(parseFloat(item.value) || 0);
          hasDistance = true;
          break;
@@ -120,27 +142,28 @@
    // 处理可能缺失的数据项
    if (!hasDuration) flight_time.push(0);
    if (!hasDistance) flight_distance.push(0);

  });
  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,
@@ -155,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: {
@@ -203,7 +228,7 @@
          },
        },
        splitLine: {
          show: true,
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#cdd5e2',
@@ -211,26 +236,91 @@
            opacity: 0.5,
          },
        },
     
        axisLabel: {
          color: '#383838', // 直接配置颜色
        },
      },
    ],
    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',
@@ -242,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,
      },
@@ -268,7 +368,7 @@
  padding: 4px 14px 0 15px;
  background: #ffffff !important;
  margin-top: 5px;
height: 100%;
    height: pxToVh(471);

  .fytitle {
    display: flex;
@@ -317,7 +417,7 @@
  }

  .flycenter {
    margin-top: 13px;
    margin-top: 8px;

    .centerBox {
      display: flex;
@@ -328,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;
@@ -351,7 +453,7 @@
        }

        .flydata {
          margin-top: 10px;
      margin-left: 11px;
          text-align: right;
          font-size: 14px;
          color: #7c8091;
@@ -367,9 +469,8 @@
    }

    .lineChart {
      height: 209px;
     height: pxToVh(374) ;
      width: 100%;

      .lineBox {
        width: 100%;
        height: 100%;