feat(views): 优化“历史数据曲线”

1.无数据显示“-”。
2.新增数据区域缩放功能。

src/views/env-monitor/HumitureCurve.vue

@@ -6,6 +6,7 @@ import { LineChart, PieChart } from 'echarts/charts';
 import {
   AxisPointerComponent,
   DatasetComponent,
+  DataZoomComponent,
   GridComponent,
   LegendComponent,
   MarkLineComponent,
@@ -39,6 +40,7 @@ use([
   PieChart,
   MarkLineComponent,
   AxisPointerComponent,
+  DataZoomComponent,
 ]);
 
 const { handleRequest } = useRequest();
@@ -156,35 +158,43 @@ const addCustomizedTime = (status: boolean) => {
 const getMaximumScale = (value: string, scale: string) => {
   if (curvedDataList.value) {
     if (value === '1') {
-      const a: number[] = getCurvedData(curvedDataList.value.supplyTempData, 'value') as number[];
-      const b: number[] = getCurvedData(curvedDataList.value.tempData, 'value') as number[];
-      const merged = a.concat(b, curvedDataList.value.tempUpper, curvedDataList.value.tempPreset);
+      const a: string[] = getCurvedData(curvedDataList.value.supplyTempData, 'value') as string[];
+      const b: string[] = getCurvedData(curvedDataList.value.tempData, 'value') as string[];
+      const merged = a.concat(b, String(curvedDataList.value.tempUpper), String(curvedDataList.value.tempPreset));
+
+      const filteredArray = merged.filter((item) => item !== '-').map(Number);
       if (scale === 'max') {
-        return Math.max(...merged); // 最大值
+        return Math.max(...filteredArray); // 最大值
       }
 
       if (scale === 'min') {
-        Math.min(...merged); // 最小值
+        Math.min(...filteredArray); // 最小值
       }
     }
 
     if (value === '2') {
-      const a: number[] = getCurvedData(curvedDataList.value.supplyHumidityData, 'value') as number[];
-      const b: number[] = getCurvedData(curvedDataList.value.humidityData, 'value') as number[];
-      const merged = a.concat(b, curvedDataList.value.humidityUpper, curvedDataList.value.humidityPreset);
+      const a: string[] = getCurvedData(curvedDataList.value.supplyHumidityData, 'value') as string[];
+      const b: string[] = getCurvedData(curvedDataList.value.humidityData, 'value') as string[];
+      const merged = a.concat(
+        b,
+        String(curvedDataList.value.humidityUpper),
+        String(curvedDataList.value.humidityPreset),
+      );
+      const filteredArray = merged.filter((item) => item !== '-').map(Number);
+
       if (scale === 'max') {
-        return Math.max(...merged); // 最大值
+        return Math.max(...filteredArray); // 最大值
       }
 
       if (scale === 'min') {
-        Math.min(...merged); // 最小值
+        Math.min(...filteredArray); // 最小值
       }
     }
   }
 };
 
 const getCurvedData = (data: HistoricalDataSequence[], value: string) => {
-  const listNumber: number[] = [];
+  const listNumber: string[] = [];
   const listString: string[] = [];
   if (data) {
     data.forEach((item) => {
@@ -192,7 +202,7 @@ const getCurvedData = (data: HistoricalDataSequence[], value: string) => {
         listString.push(item.time.slice(5));
       }
       if (value === 'value') {
-        listNumber.push(item.value);
+        listNumber.push(item.value ? String(item.value) : '-');
       }
     });
   }
@@ -228,14 +238,20 @@ const option = computed(() => {
         params.forEach(function (item) {
           // 创建一个圆形的 HTML 元素
           const circle = `<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 5px;"></span>`;
-          result += circle + item.seriesName + ':&nbsp;&nbsp;' + item.value + '°C<br/>';
+          result +=
+            circle +
+            item.seriesName +
+            ':&nbsp;&nbsp;' +
+            item.value +
+            (degreeValue.value === '1' ? ' °C' : ' %') +
+            '<br/>';
         });
         return result;
       },
       backgroundColor: 'rgba(255, 255, 255, 0.75)',
     },
     legend: {
-      bottom: 0,
+      bottom: -5,
       data: [
         {
           name:
@@ -243,8 +259,9 @@ const option = computed(() => {
             temperatureHumidity() +
             t('envMonitor.setValue') +
             '：' +
-            (degreeValue.value === '1' ? curvedDataList.value.tempPreset : curvedDataList.value.humidityPreset) +
-            '℃',
+            (degreeValue.value === '1'
+              ? curvedDataList.value.tempPreset + '℃'
+              : curvedDataList.value.humidityPreset + '%'),
           icon: 'path://M128 501.333v64H0v-64zm213.333 0v64h-128v-64zm213.334 0v64h-128v-64zm234.666 0v64h-128v-64zm234.667 0v64H896v-64z',
           itemStyle: {
             color: '#67C23A',
@@ -257,8 +274,9 @@ const option = computed(() => {
             temperatureHumidity() +
             t('envMonitor.upperLimitValue') +
             '：' +
-            (degreeValue.value === '1' ? curvedDataList.value.tempUpper : curvedDataList.value.humidityUpper) +
-            '℃',
+            (degreeValue.value === '1'
+              ? curvedDataList.value.tempUpper + '℃'
+              : curvedDataList.value.humidityUpper + '%'),
           icon: 'path://M128 501.333v64H0v-64zm213.333 0v64h-128v-64zm213.334 0v64h-128v-64zm234.666 0v64h-128v-64zm234.667 0v64H896v-64z',
           itemStyle: {
             color: '#F56C6C',
@@ -322,6 +340,19 @@ const option = computed(() => {
         },
       },
     },
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 100,
+        bottom: 35,
+      },
+      {
+        start: 0,
+        end: 100,
+        bottom: 35,
+      },
+    ],
     series: [
       // 室内温度设定值虚线
       {
@@ -330,8 +361,9 @@ const option = computed(() => {
           temperatureHumidity() +
           t('envMonitor.setValue') +
           '：' +
-          (degreeValue.value === '1' ? curvedDataList.value.tempPreset : curvedDataList.value.humidityPreset) +
-          '℃',
+          (degreeValue.value === '1'
+            ? curvedDataList.value.tempPreset + '℃'
+            : curvedDataList.value.humidityPreset + '%'),
         type: 'line',
         silent: true, // 设置该系列不响应事件，图例不可点击
         lineStyle: {
@@ -359,8 +391,7 @@ const option = computed(() => {
           temperatureHumidity() +
           t('envMonitor.upperLimitValue') +
           '：' +
-          (degreeValue.value === '1' ? curvedDataList.value.tempUpper : curvedDataList.value.humidityUpper) +
-          '℃',
+          (degreeValue.value === '1' ? curvedDataList.value.tempUpper + '℃' : curvedDataList.value.humidityUpper + '%'),
         type: 'line',
         silent: true, // 设置该系列不响应事件，图例不可点击
         lineStyle: {
@@ -434,7 +465,7 @@ const option = computed(() => {
     grid: {
       top: 30, // 上边距为0
       right: 30, // 右边距为0
-      // bottom: 30, // 下边距为0
+      bottom: 90, // 下边距为0
       left: 30, // 左边距为0
     },
   };