feat:数据中心优化

张含笑

2025-07-21 3be2e099bbc05e902dfcfabc403ade0a2aba8ef4

 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,6 +51,12 @@
  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 = {
@@ -61,32 +67,50 @@
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,7 +142,6 @@
    // 处理可能缺失的数据项
    if (!hasDuration) flight_time.push(0);
    if (!hasDistance) flight_distance.push(0);

  });
  var option = {
    tooltip: {
@@ -161,14 +182,40 @@
    },
    yAxis: [
      {
        type: 'log',
        name: '单位:小时',
    type: 'value', 
    name: '单位:小时',
    nameTextStyle: {
      color: '#383838',
      fontSize: '1.2rem',
    },
    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',
        },
        min: 1,
        logBase: 3,
     
    
        axisLine: {
          show: false,
          lineStyle: {
@@ -176,41 +223,15 @@
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#cdd5e2',
            width: 1,
            opacity: 0.5,
          },
        },
        axisLabel: {
          color: '#666666', // 直接配置颜色
        },
      },
      {
        type: 'log',
        name: '单位:公里',
        nameTextStyle: {
          color: '#383838',
        },
        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: '#383838', // 直接配置颜色
        },
@@ -268,7 +289,7 @@
  padding: 4px 14px 0 15px;
  background: #ffffff !important;
  margin-top: 5px;
height: 100%;
    height: pxToVh(400);

  .fytitle {
    display: flex;
@@ -367,7 +388,7 @@
    }

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

      .lineBox {