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

src/views/env-monitor/EnvMonitor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, useTemplateRef, watch } from 'vue';
 import { message } from 'ant-design-vue';
 
 import ButtonTabs from '@/components/ButtonTabs.vue';
@@ -27,6 +27,7 @@ import { HumitureType } from '@/constants';
 
 import envMonitorBgc from '@/assets/img/env-monitor-bgc.png';
 
+import EnvMonitorList from './EnvMonitorList.vue';
 import HumitureCurve from './HumitureCurve.vue';
 
 import type { CSSProperties } from 'vue';
@@ -50,6 +51,13 @@ interface EnvMonitorStyle {
   backgroundSize: string;
 }
 
+interface TimeList {
+  time: string;
+  integral: boolean;
+}
+
+const envMonitorListRef = useTemplateRef('envMonitorList');
+
 const oneDeviceGroup = ref<DeviceGroup[]>([]);
 const twoDeviceGroup = ref<DeviceGroup[]>([]);
 
@@ -74,10 +82,14 @@ const outdoorDeviceParamsList = ref<DeviceParams[]>([]);
 const monitoringPointData = ref<MonitoringPointData[]>([]);
 const regionNameList = ref<RegionNameList[]>([]);
 const regionList = ref<RegionsPointsItem[]>([]);
+const monitoringList = ref<RegionsPointsItem[]>([]);
 const selectId = ref<number>(0);
 const monitoringName = ref<string>();
 const monitoringId = ref<number>();
 const formRef = ref<FormInstance>();
+const listDisplay = ref<boolean>(true);
+const timeList = ref<TimeList[]>([]);
+
 const envMonitorStyle = ref<EnvMonitorStyle>({
   background: `url(${envMonitorBgc})`,
   backgroundSize: 'cover',
@@ -225,6 +237,7 @@ const addAllGatewayList = (value: number) => {
 const getRegionsPointsList = (value: number) => {
   monitoringPointData.value = [];
   regionNameList.value = [];
+  monitoringList.value = [];
 
   handleRequest(async () => {
     const data = await getRegionsPointsData(value);
@@ -234,6 +247,7 @@ const getRegionsPointsList = (value: number) => {
         const { id, regionName } = item;
         if (item.points.length) {
           monitoringPointData.value.push(...item.points);
+          monitoringList.value.push({ ...item, name: item.regionName });
         }
 
         regionNameList.value.push({
@@ -241,8 +255,9 @@ const getRegionsPointsList = (value: number) => {
           id,
         });
       });
-
-      monitoringId.value = monitoringPointData.value[0].id;
+      if (monitoringPointData.value.length) {
+        monitoringId.value = monitoringPointData.value[0].id;
+      }
 
       if (data[0].id) {
         selectId.value = data[0].id;
@@ -471,6 +486,37 @@ const copyRegion = () => {
   regionCopyOpen.value = true;
 };
 
+const switchDisplay = () => {
+  listDisplay.value = !listDisplay.value;
+  if (!listDisplay.value) {
+    envMonitorListRef.value?.getMonitoringList();
+  }
+};
+
+const generateTimeArray = () => {
+  const now = new Date();
+  const currentHour = now.getHours();
+  const currentMinute = now.getMinutes();
+  const minutes = [0, 12, 24, 36, 48];
+  const result = [];
+
+  for (let hour = 0; hour <= currentHour; hour++) {
+    for (const minute of minutes) {
+      // 过滤超过当前时间的条目
+      if (hour === currentHour && minute > currentMinute) break;
+
+      // 生成时间字符串并添加 integral 标识
+      const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+      result.push({
+        time: timeStr,
+        integral: minute === 0, // 分钟为0时标记为整点
+      });
+    }
+  }
+
+  return result;
+};
+
 watch(
   () => gradeOne.value,
   (count) => {
@@ -494,6 +540,7 @@ watch(
 onMounted(() => {
   addAllGatewayList(-1);
   getDeviceGroup();
+  timeList.value = generateTimeArray();
 });
 </script>
 
@@ -501,46 +548,55 @@ onMounted(() => {
   <div>
     <AFlex justify="space-between">
       <AFlex align="center">
-        <div class="text-top">环境监控</div>
-        <ASelect
-          class="select-width select-monitoring"
-          v-model:value="gradeOne"
-          :options="oneDeviceGroup"
-          :field-names="{ label: 'groupName', value: 'id' }"
-          placeholder="请选择"
-        />
-        <ASelect
-          class="select-width"
-          v-model:value="gradeTwo"
-          :options="twoDeviceGroup"
-          :field-names="{ label: 'groupName', value: 'id' }"
-          placeholder="请选择"
-        />
+        <div class="text-top">{{ $t('navigation.envMonitor') }}</div>
+        <div v-show="listDisplay">
+          <ASelect
+            class="select-width select-monitoring"
+            v-model:value="gradeOne"
+            :options="oneDeviceGroup"
+            :field-names="{ label: 'groupName', value: 'id' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+          <ASelect
+            class="select-width"
+            v-model:value="gradeTwo"
+            :options="twoDeviceGroup"
+            :field-names="{ label: 'groupName', value: 'id' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+        </div>
       </AFlex>
 
       <div>
-        <AButton class="icon-button default-button">
+        <AButton class="icon-button default-button" @click="switchDisplay">
           <AFlex align="center">
-            <SvgIcon name="plus" />
-            <span>切换到列表显示 </span>
+            <SvgIcon name="switch" />
+            <span>{{ listDisplay ? $t('envMonitor.listDisplay') : $t('envMonitor.cardDisplay') }} </span>
           </AFlex>
         </AButton>
         <AButton type="primary" class="icon-button button-monitoring" @click="addMonitoringPoint">
           <AFlex align="center">
             <SvgIcon name="plus" />
-            <span> 添加检测点 </span>
+            <span> {{ $t('envMonitor.addInspectionPoints') }} </span>
           </AFlex>
         </AButton>
       </div>
     </AFlex>
 
-    <div class="content-monitoring">
-      <div class="content-monitoring-top">123</div>
+    <div class="content-monitoring" v-show="listDisplay">
+      <div class="content-monitoring-top">
+        <AFlex>
+          <div v-for="item in timeList" :key="item.time">
+            <div>1</div>
+          </div>
+        </AFlex>
+      </div>
       <AFlex class="content-monitoring-canvas">
         <div class="content-monitoring-canvas-left">
           <div v-for="item in monitoringPointData" :key="item.id">
             <LineChart
               :data="item"
+              :icon-show="true"
               :monitoring-id="monitoringId"
               @editorClick="editorClick"
               @historicalDataClick="historicalDataClick"
@@ -587,6 +643,13 @@ onMounted(() => {
       </AFlex>
     </div>
 
+    <EnvMonitorList
+      ref="envMonitorList"
+      v-show="!listDisplay"
+      :monitor-data="monitoringList"
+      :monitoring-point-data="monitoringPointData"
+    />
+
     <ADrawer
       width="600"
       :open="monitoringPointOpen"
@@ -595,22 +658,28 @@ onMounted(() => {
       :header-style="headerStyle"
       :footer-style="footerStyle"
     >
-      <template #title>{{ titleMonitoring ? '添加检测点' : '编辑监测点' }} </template>
+      <template #title
+        >{{ titleMonitoring ? $t('envMonitor.addInspectionPoints') : $t('envMonitor.editorialMonitoringPoint') }}
+      </template>
       <template #extra>
         <SvgIcon class="off-icon" @click="offDrawer" name="close" />
       </template>
       <AForm ref="formRef" class="form-ref" :model="monitoringForm" layout="vertical" :rules="rules">
         <AFormItem name="name">
-          <AInput v-model:value="monitoringForm.name" class="input-wdith region-bottom" placeholder="请输入" />
+          <AInput
+            v-model:value="monitoringForm.name"
+            class="input-wdith region-bottom"
+            :placeholder="$t('common.plzSelect')"
+          />
         </AFormItem>
-        <AFormItem label="区域" name="regionId">
+        <AFormItem :label="$t('envMonitor.region')" name="regionId">
           <AFlex align="center">
             <ASelect
               class="input-wdith"
               v-model:value="monitoringForm.regionId"
               :options="groupRegions"
               :field-names="{ label: 'regionName', value: 'id' }"
-              placeholder="请选择"
+              :placeholder="$t('common.plzSelect')"
               @change="addRegionList"
             />
 
@@ -627,18 +696,18 @@ onMounted(() => {
           </AFlex>
         </AFormItem>
         <ARadioGroup v-model:value="monitoringForm.tempHumidityControlMode" class="radio-group">
-          <ARadio value="2">回风控制</ARadio>
-          <ARadio value="1">送风控制</ARadio>
+          <ARadio value="2">{{ $t('envMonitor.returnControl') }}</ARadio>
+          <ARadio value="1">{{ $t('envMonitor.supplyControl') }}</ARadio>
         </ARadioGroup>
         <AFlex justify="space-between">
           <div>
-            <AFormItem class="form-item" label="回风温湿度仪表" name="returnDevGroupId">
+            <AFormItem class="form-item" :label="$t('envMonitor.returnTemperatureAndhumidity')" name="returnDevGroupId">
               <ASelect
                 class="input-wdith"
                 v-model:value="monitoringForm.returnDevGroupId"
                 :options="twoDeviceGroup"
                 :field-names="{ label: 'groupName', value: 'id' }"
-                placeholder="请选择"
+                :placeholder="$t('common.plzSelect')"
                 @change="(value, option) => adddDeviceGroup(value, option, HumitureType.ReturnAir)"
               />
             </AFormItem>
@@ -648,7 +717,7 @@ onMounted(() => {
                 v-model:value="monitoringForm.returnDevId"
                 :options="returnDevicesList"
                 :field-names="{ label: 'deviceName', value: 'id' }"
-                placeholder="请选择"
+                :placeholder="$t('common.plzSelect')"
                 @change="(value, option) => adddDevice(value, option, HumitureType.ReturnAir)"
               />
             </AFormItem>
@@ -659,7 +728,7 @@ onMounted(() => {
                 v-model:value="monitoringForm.returnTempParamCode"
                 :options="returnDeviceParamsList"
                 :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
-                placeholder="请选择"
+                :placeholder="$t('common.plzSelect')"
               />
             </AFormItem>
             <AFormItem name="returnHumidityParamCode">
@@ -668,18 +737,18 @@ onMounted(() => {
                 v-model:value="monitoringForm.returnHumidityParamCode"
                 :options="returnDeviceParamsList"
                 :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
-                placeholder="请选择"
+                :placeholder="$t('common.plzSelect')"
               />
             </AFormItem>
           </div>
           <div>
-            <AFormItem label="送风温湿度仪表" name="supplyDevGroupId">
+            <AFormItem :label="$t('envMonitor.supplyTemperatureAndhumidity')" name="supplyDevGroupId">
               <ASelect
                 class="input-wdith"
                 v-model:value="monitoringForm.supplyDevGroupId"
                 :options="twoDeviceGroup"
                 :field-names="{ label: 'groupName', value: 'id' }"
-                placeholder="请选择"
+                :placeholder="$t('common.plzSelect')"
                 @change="(value, option) => adddDeviceGroup(value, option, HumitureType.SupplyAir)"
               />
             </AFormItem>
@@ -689,7 +758,7 @@ onMounted(() => {
                 v-model:value="monitoringForm.supplyDevId"
                 :options="supplyDevicesList"
                 :field-names="{ label: 'deviceName', value: 'id' }"
-                placeholder="请选择"
+                :placeholder="$t('common.plzSelect')"
                 @change="(value, option) => adddDevice(value, option, HumitureType.SupplyAir)"
               />
             </AFormItem>
@@ -700,7 +769,7 @@ onMounted(() => {
                 v-model:value="monitoringForm.supplyTempParamCode"
                 :options="supplyDeviceParamsList"
                 :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
-                placeholder="请选择"
+                :placeholder="$t('common.plzSelect')"
               />
             </AFormItem>
             <AFormItem name="supplyHumidityParamCode">
@@ -709,7 +778,7 @@ onMounted(() => {
                 v-model:value="monitoringForm.supplyHumidityParamCode"
                 :options="supplyDeviceParamsList"
                 :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
-                placeholder="请选择"
+                :placeholder="$t('common.plzSelect')"
               />
             </AFormItem>
           </div>
@@ -805,7 +874,7 @@ onMounted(() => {
             v-model:value="outdooForm.outsideDevGroupId"
             :options="twoDeviceGroup"
             :field-names="{ label: 'groupName', value: 'id' }"
-            placeholder="请选择"
+            :placeholder="$t('common.plzSelect')"
             @change="(value, option) => adddDeviceGroup(value, option, HumitureType.Outdoor)"
           />
         </AFormItem>
@@ -815,7 +884,7 @@ onMounted(() => {
             v-model:value="outdooForm.outsideDevId"
             :options="outdoorDevicesList"
             :field-names="{ label: 'deviceName', value: 'id' }"
-            placeholder="请选择"
+            :placeholder="$t('common.plzSelect')"
             @change="(value, option) => adddDevice(value, option, HumitureType.Outdoor)"
           />
         </AFormItem>
@@ -825,7 +894,7 @@ onMounted(() => {
             v-model:value="outdooForm.outsideTempParamCode"
             :options="outdoorDeviceParamsList"
             :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
-            placeholder="请选择"
+            :placeholder="$t('common.plzSelect')"
           />
         </AFormItem>
         <AFormItem name="outsideHumidityParamCode">
@@ -834,7 +903,7 @@ onMounted(() => {
             v-model:value="outdooForm.outsideHumidityParamCode"
             :options="outdoorDeviceParamsList"
             :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
-            placeholder="请选择"
+            :placeholder="$t('common.plzSelect')"
           />
         </AFormItem>
         <AFormItem name="outsideEnthalpyParamCode">
@@ -843,7 +912,7 @@ onMounted(() => {
             v-model:value="outdooForm.outsideEnthalpyParamCode"
             :options="outdoorDeviceParamsList"
             :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
-            placeholder="请选择"
+            :placeholder="$t('common.plzSelect')"
           />
         </AFormItem>
       </AForm>
@@ -866,7 +935,13 @@ onMounted(() => {
       <template #extra>
         <SvgIcon class="off-icon" @click="offMonitoringDrawer" name="close" />
       </template>
-      <HumitureCurve :monitoring-id="monitoringId" :monitoring-data="monitoringPointData" />
+      <HumitureCurve
+        :monitoring-id="monitoringId"
+        :monitoring-data="monitoringPointData"
+        :set-show="true"
+        :width="'580px'"
+        :height="'700px'"
+      />
     </ADrawer>
 
     <AModal
@@ -878,7 +953,7 @@ onMounted(() => {
       :keyboard="false"
     >
       <div class="region-name">区域名</div>
-      <AInput v-model:value="regionName" placeholder="请输入" />
+      <AInput v-model:value="regionName" :placeholder="$t('common.plzSelect')" />
 
       <AFlex justify="flex-end" class="region-name-top">
         <AButton v-if="!titleRegions" class="default-button" @click="regionNameDelete">{{