perf(components): 优化“折线图”组件

1.新增“预警”状态显示。
2.优化温度，湿度根据状态显示不同样式。
3.优化折线图最大与最小刻度显示逻辑。

src/components/LineChart.vue

@@ -52,8 +52,8 @@ const getCurvedData = () => {
   }
 };
 
-const getColor = (value: number) => {
-  if (props.data.status === 1) {
+const getColor = (value: number, status: number) => {
+  if (status === 1) {
     if (value === 1) {
       return '#32BAC0';
     } else if (value === 2) {
@@ -61,7 +61,15 @@ const getColor = (value: number) => {
     }
   }
 
-  if (props.data.status === 2 || props.data.status === 3) {
+  if (status === 2) {
+    if (value === 1) {
+      return '#E6A23C';
+    } else if (value === 2) {
+      return 'rgba(230,162,60,0.15)';
+    }
+  }
+
+  if (status === 3) {
     if (value === 1) {
       return '#F56C6C';
     } else if (value === 2) {
@@ -69,7 +77,7 @@ const getColor = (value: number) => {
     }
   }
 
-  if (props.data.status === 0 || props.data.status === -1 || !props.data.status) {
+  if (status === 0 || status === -1 || !status) {
     if (value === 1) {
       return '#999';
     } else if (value === 2) {
@@ -82,7 +90,7 @@ const option = computed(() => {
   getCurvedData();
   if (!props.data) return {};
   return {
-    backgroundColor: getColor(2),
+    backgroundColor: getColor(2, props.data.status),
 
     xAxis: {
       show: false, // 隐藏 X 轴
@@ -91,8 +99,8 @@ const option = computed(() => {
     },
     yAxis: {
       type: 'value', // 数值轴
-      min: 0, // 最小值
-      max: 100, // 最大值
+      min: Math.min(...list.value), // 最小值
+      max: Math.max(...list.value, props.data.tempUpper), // 最大值
       interval: 20, // 刻度间隔
       show: false, // 隐藏 X 轴
     },
@@ -101,13 +109,13 @@ const option = computed(() => {
         type: 'line',
         data: list.value,
         symbol: 'none', // 不显示数据点
-        color: getColor(1),
+        color: getColor(1, props.data.status),
         lineStyle: {
           width: 2,
         },
         markLine: {
           // 添加最大值虚线
-          silent: true,
+          silent: props.data.tempUpper != null ? true : false,
           symbol: 'none',
 
           lineStyle: {
@@ -116,7 +124,7 @@ const option = computed(() => {
             width: 1,
           },
           label: {
-            show: true, // 必须开启标签
+            show: props.data.tempUpper != null ? true : false, // 必须开启标签
             position: 'insideStartTop', // 标签位置（左侧上方）
             formatter: '{c}°C', // 显示值（{c} 会自动替换为 yAxis 的值）
             color: 'rgba(0,0,0,0.5)', // 文字颜色
@@ -124,11 +132,14 @@ const option = computed(() => {
             offset: [-6, 0], // 微调位置 [水平偏移, 垂直偏移]
             fontSize: '10px',
           },
-          data: [
-            {
-              yAxis: props.data.tempUpper, // 在最大值位置画线
-            },
-          ],
+          data:
+            props.data.tempUpper != null
+              ? [
+                  {
+                    yAxis: props.data.tempUpper, // 在最大值位置画线
+                  },
+                ]
+              : [],
         },
       },
     ],
@@ -199,16 +210,25 @@ onUnmounted(() => {
           justify="center"
           align="center"
           class="line-chart-footer-div"
-          :style="`background:${props.data.status === 0 || props.data.status === -1 || !props.data.status ? '#F0F0F0' : '#f2fcf9'}`"
+          :style="`background:${getColor(2, props.data.tempExStatus)}`"
         >
-          <SvgIcon
-            class="line-chart-icon"
-            :style="`color:${props.data.status === 0 || props.data.status === -1 || !props.data.status ? '#999' : '#32BAC0'}`"
-            name="temperature"
+          <SvgIcon class="line-chart-icon" :style="`color:${getColor(1, props.data.tempExStatus)}`" name="temperature"
         /></AFlex>
         <div>
-          <span class="line-chart-footer-text">{{ data.temperature }}</span>
-          <span class="line-chart-footer-unit">℃</span>
+          <span
+            class="line-chart-footer-text"
+            :style="
+              data.humidityExStatus ? `color:${getColor(1, props.data.tempExStatus)}` : 'color: rgb(0 0 0 / 85%);'
+            "
+            >{{ data.temperature }}</span
+          >
+          <span
+            class="line-chart-footer-unit"
+            :style="
+              data.humidityExStatus ? `color:${getColor(1, props.data.tempExStatus)}` : 'color: rgb(0 0 0 / 85%);'
+            "
+            >℃</span
+          >
         </div>
       </AFlex>
       <AFlex align="center">
@@ -216,15 +236,27 @@ onUnmounted(() => {
           justify="center"
           align="center"
           class="line-chart-footer-div"
-          :style="`background:${props.data.status === 0 || props.data.status === -1 || !props.data.status ? '#F0F0F0' : '#f2fcf9'}`"
+          :style="`background:${getColor(2, props.data.humidityExStatus)}`"
           ><SvgIcon
             class="line-chart-icon"
-            :style="`color:${props.data.status === 0 || props.data.status === -1 || !props.data.status ? '#999' : '#32BAC0'}`"
+            :style="`color:${getColor(1, props.data.humidityExStatus)}`"
             name="humidity"
         /></AFlex>
         <div>
-          <span class="line-chart-footer-text">{{ data.humidity }}</span>
-          <span class="line-chart-footer-unit">％</span>
+          <span
+            class="line-chart-footer-text"
+            :style="
+              data.humidityExStatus ? `color:${getColor(1, props.data.humidityExStatus)}` : 'color: rgb(0 0 0 / 85%);'
+            "
+            >{{ data.humidity }}</span
+          >
+          <span
+            class="line-chart-footer-unit"
+            :style="
+              data.humidityExStatus ? `color:${getColor(1, props.data.humidityExStatus)}` : 'color: rgb(0 0 0 / 85%);'
+            "
+            >％</span
+          >
         </div>
       </AFlex>
     </AFlex>
@@ -256,7 +288,6 @@ onUnmounted(() => {
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
-  color: rgb(0 0 0 / 85%);
   text-align: left;
 }
 
@@ -265,7 +296,6 @@ onUnmounted(() => {
   font-style: normal;
   font-weight: 500;
   line-height: 28px;
-  color: rgb(0 0 0 / 85%);
   text-align: left;
 }