perf(views): 优化环境监控区域

1.完善”时间轴滚动查询“功能。
2.优化监控点与区域联动。

src/views/env-monitor/EnvMonitor.vue

@@ -19,6 +19,7 @@ import {
   getMonitorPointInfo,
   getPageList,
   getRegionsPointsData,
+  getRegionsPointsValue,
   queryDevicesList,
   regionDelete,
   regionUpdate,
@@ -96,6 +97,8 @@ const formRef = ref<FormInstance>();
 const listDisplay = ref<boolean>(true);
 const timeList = ref<TimeList[]>([]);
 const timeLineIndex = ref<number>(0);
+const monitoringPointList = ref<MonitoringPointData[]>([]);
+const chooseTime = ref<string>();
 
 const envMonitorStyle = ref<EnvMonitorStyle>({
   background: `url(${envMonitorBgc})`,
@@ -165,7 +168,7 @@ const getGroupRegionsList = () => {
 
 const regionNameOk = () => {
   if (!regionName.value) {
-    return message.warning('请输入区域名称');
+    return message.warning(t('envMonitor.pleaseRegionName'));
   }
   handleRequest(async () => {
     if (gradeTwo.value && regionName.value) {
@@ -189,7 +192,7 @@ const regionNameOk = () => {
 
 const regionNameDelete = () => {
   if (!regionName.value) {
-    return message.warning('请输入区域名称');
+    return message.warning(t('envMonitor.pleaseRegionName'));
   }
   handleRequest(async () => {
     if (monitoringForm.value.regionId) {
@@ -216,7 +219,7 @@ const editingRegionName = () => {
     titleRegions.value = false;
     regionNameOpen.value = true;
   } else {
-    return message.warning('请选择区域名称');
+    return message.warning(t('envMonitor.selectNameArea'));
   }
 };
 
@@ -264,11 +267,15 @@ const getRegionsPointsList = (value: number) => {
         });
       });
       if (monitoringPointData.value.length) {
-        monitoringId.value = monitoringPointData.value[0].id;
-      }
+        monitoringPointData.value.sort((item1, item2) => {
+          // 优先级：3 > 2 > 其他
+          const priority1 = item1.status === 3 ? 1 : item1.status === 2 ? 2 : 3;
+          const priority2 = item2.status === 3 ? 1 : item2.status === 2 ? 2 : 3;
 
-      if (data[0].id) {
-        selectId.value = data[0].id;
+          return priority1 - priority2;
+        });
+        monitoringId.value = monitoringPointData.value[0].id;
+        selectId.value = monitoringPointData.value[0].regionId;
       }
     }
   });
@@ -384,6 +391,7 @@ const selectClick = (id: number) => {
 const historicalDataClick = (data: MonitoringPointData) => {
   monitoringName.value = data.name;
   monitoringId.value = data.id;
+  selectId.value = data.regionId;
   monitoringDataOpen.value = true;
 };
 
@@ -554,8 +562,42 @@ const returnCurrently = () => {
   }
 };
 
-const addTimeLine = (index: number) => {
-  timeLineIndex.value = index;
+const addTimeLine = (value: TimeList) => {
+  chooseTime.value = value.time;
+  timeLineIndex.value = value.index;
+};
+
+const confirmTimeLine = () => {
+  handleRequest(async () => {
+    if (gradeTwo.value) {
+      monitoringPointList.value = await getRegionsPointsValue(gradeTwo.value, {
+        endTime: chooseTime.value ? chooseTime.value : '',
+      });
+      mergeData();
+      monitoringPointData.value = monitoringPointList.value;
+      monitoringId.value = monitoringPointData.value[0].id;
+      selectId.value = monitoringPointData.value[0].regionId;
+    }
+  });
+};
+
+// 合并逻辑
+const mergeData = () => {
+  // 将 monitoringPointData 转换为 Map 以便快速查找（Key 为 id）
+  const aMap = new Map(monitoringPointData.value.map((item) => [item.id, item]));
+
+  // 遍历 monitoringPointList 并更新数据
+  monitoringPointList.value = monitoringPointList.value.map((itemB) => {
+    const matchedItemA = aMap.get(itemB.id);
+    // 如果 monitoringPointData 中存在相同 id，合并数据（保留其他属性）
+    return matchedItemA
+      ? {
+          ...itemB,
+          humidityData: matchedItemA.humidityData,
+          tempData: matchedItemA.tempData,
+        }
+      : itemB;
+  });
 };
 
 // 注册鼠标滚轮插件
@@ -738,31 +780,36 @@ const copyAreaCanvas = () => {
               <div>&nbsp;&nbsp;&nbsp;</div>
 
               <div v-for="item in timeList" :key="item.time">
-                <AFlex :vertical="true">
-                  <div v-if="item.integral" class="time-style">{{ item.time }}</div>
-                  <div @click="addTimeLine(item.index)">
-                    <AFlex align="flex-end" class="integral-style">
-                      <AFlex
-                        :vertical="true"
-                        justify="center"
-                        align="center"
-                        v-if="item.index === timeLineIndex"
-                        class="confirm-axis-div"
-                      >
-                        <div class="confirm-axis-circle"></div>
-                        <div class="confirm-axis"></div>
+                <!-- :class="item.index === timeLineIndex ? 'background-alarm' : 'background-default'" -->
+                <AFlex align="flex-end" class="background-default">
+                  <AFlex :vertical="true">
+                    <div v-if="item.integral" class="time-style">{{ item.time }}</div>
+                    <div @click="addTimeLine(item)">
+                      <AFlex align="flex-end" class="integral-style">
+                        <AFlex
+                          :vertical="true"
+                          justify="center"
+                          align="center"
+                          v-if="item.index === timeLineIndex"
+                          class="confirm-axis-div"
+                        >
+                          <div class="confirm-axis-circle"></div>
+                          <div class="confirm-axis"></div>
+                        </AFlex>
+                        <div v-else :class="item.integral ? 'integral' : 'integral-height'"></div>
                       </AFlex>
-                      <div v-else :class="item.integral ? 'integral' : 'integral-height'"></div>
-                    </AFlex>
-                  </div>
+                    </div>
+                  </AFlex>
                 </AFlex>
               </div>
             </AFlex>
           </div>
         </div>
         <AFlex>
-          <AButton type="text" class="return-currently" @click="returnCurrently">返回当前</AButton>
-          <AButton type="primary" class="timeline-confirm">确定</AButton>
+          <AButton type="text" class="return-currently" @click="returnCurrently">{{
+            $t('envMonitor.returnCurrent')
+          }}</AButton>
+          <AButton type="primary" class="timeline-confirm" @click="confirmTimeLine">{{ $t('common.confirm') }}</AButton>
         </AFlex>
       </AFlex>
       <AFlex class="content-monitoring-canvas">
@@ -972,7 +1019,7 @@ const copyAreaCanvas = () => {
             <AFormItem label="室内温度配置">
               <AFlex align="center">
                 <AInputNumber class="input-number-width" v-model:value="monitoringForm.tempUpper" :min="0" :max="999" />
-                <div class="configure-text">上限值</div>
+                <div class="configure-text">{{ $t('envMonitor.upperLimitValue') }}</div>
               </AFlex>
             </AFormItem>
             <AFormItem>
@@ -1151,19 +1198,19 @@ const copyAreaCanvas = () => {
 
     <AModal
       v-model:open="regionCopyOpen"
-      title="复制面板"
+      :title="$t('envMonitor.copyPanel')"
       :footer="null"
       width="460px"
       :mask-closable="false"
       :keyboard="false"
     >
-      <div class="region-name">选择你要复制到的区域</div>
+      <div class="region-name">{{ $t('envMonitor.selectCopyArea') }}</div>
       <ASelect
         v-model:value="copyToRegionId"
         style="width: 100%"
         :options="copyToRegionList"
         :field-names="{ label: 'name', value: 'id' }"
-        placeholder="请选择"
+        :placeholder="$t('common.plzSelect')"
       />
       <AFlex justify="flex-end" class="region-name-top">
         <AButton class="default-button cancel-button" @click="regionCopyOpen = false">{{
@@ -1182,6 +1229,16 @@ const copyAreaCanvas = () => {
 </template>
 
 <style lang="scss" scoped>
+.background-default {
+  height: 40px;
+  background-color: #fff;
+}
+
+.background-alarm {
+  height: 40px;
+  background-color: rgb(245 108 108 / 15%);
+}
+
 .confirm-axis-div {
   margin-left: -3px;
 }
@@ -1195,6 +1252,7 @@ const copyAreaCanvas = () => {
 
 .return-currently {
   margin-left: 10px;
+  color: #32bac0;
 }
 
 .timeline-confirm {