Explorar o código

feat(views): 优化“环境监控”模块

1.折线图最大值与最小值取值逻辑。
2.分段控制器优化显示样式。
wangshun hai 1 mes
pai
achega
78df9e431f
Modificáronse 1 ficheiros con 49 adicións e 5 borrados
  1. 49 5
      src/views/env-monitor/HumitureCurve.vue

+ 49 - 5
src/views/env-monitor/HumitureCurve.vue

@@ -153,6 +153,36 @@ 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);
+      if (scale === 'max') {
+        return Math.max(...merged); // 最大值
+      }
+
+      if (scale === 'min') {
+        Math.min(...merged); // 最小值
+      }
+    }
+
+    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);
+      if (scale === 'max') {
+        return Math.max(...merged); // 最大值
+      }
+
+      if (scale === 'min') {
+        Math.min(...merged); // 最小值
+      }
+    }
+  }
+};
+
 const getCurvedData = (data: HistoricalDataSequence[], value: string) => {
   const listNumber: number[] = [];
   const listString: string[] = [];
@@ -162,7 +192,7 @@ const getCurvedData = (data: HistoricalDataSequence[], value: string) => {
         listString.push(item.time.slice(5));
       }
       if (value === 'value') {
-        listNumber.push(item.value);
+        listNumber.push(Number(item.value));
       }
     });
   }
@@ -278,9 +308,8 @@ const option = computed(() => {
     },
     yAxis: {
       type: 'value',
-      min: 0,
-      max: degreeValue.value === '1' ? 40 : 100,
-      interval: degreeValue.value === '1' ? 10 : 20,
+      min: getMaximumScale(degreeValue.value, 'min'),
+      max: getMaximumScale(degreeValue.value, 'max'),
       axisLine: {
         lineStyle: {
           color: '#999999', // Y轴线颜色
@@ -350,6 +379,7 @@ const option = computed(() => {
           label: { show: false },
         },
       },
+
       // 室内温度折线
       {
         name: t('envMonitor.indoor') + temperatureHumidity(),
@@ -435,7 +465,7 @@ onMounted(() => {
 <template>
   <div>
     <AFlex justify="space-between" align="center">
-      <div style="width: 160px">
+      <div class="segmented-style">
         <ASegmented v-model:value="degreeValue" :options="degreeData" :block="true">
           <template #label="{ payload }">
             <SvgIcon :name="payload.icon" />
@@ -496,6 +526,20 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+.segmented-style {
+  width: 160px;
+}
+
+:deep(.segmented-style) {
+  .ant-segmented {
+    background-color: var(--antd-color-primary-opacity-15);
+  }
+
+  .ant-segmented .ant-segmented-item-label {
+    color: var(--antd-color-primary-hover);
+  }
+}
+
 .chart {
   width: 560px;
   height: 700px;