feat(views): 完善“环境监控”模块操作逻辑

src/views/env-monitor/EnvMonitor.vue

@@ -27,6 +27,8 @@ import { HumitureType } from '@/constants';
 
 import envMonitorBgc from '@/assets/img/env-monitor-bgc.png';
 
+import HumitureCurve from './HumitureCurve.vue';
+
 import type { CSSProperties } from 'vue';
 import type { FormInstance, Rule } from 'ant-design-vue/es/form';
 import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
@@ -56,6 +58,8 @@ const gradeTwo = ref<number | undefined>(undefined);
 const monitoringPointOpen = ref<boolean>(false);
 const outdoorOpen = ref<boolean>(false);
 const regionNameOpen = ref<boolean>(false);
+const monitoringDataOpen = ref<boolean>(false);
+const regionCopyOpen = ref<boolean>(false);
 const regionName = ref<string>('');
 const groupRegions = ref<GroupRegions[]>([]);
 const titleRegions = ref<boolean>(true);
@@ -67,16 +71,13 @@ const outdoorDevicesList = ref<DevicesListItem[]>([]);
 const returnDeviceParamsList = ref<DeviceParams[]>([]);
 const supplyDeviceParamsList = ref<DeviceParams[]>([]);
 const outdoorDeviceParamsList = ref<DeviceParams[]>([]);
-
 const monitoringPointData = ref<MonitoringPointData[]>([]);
 const regionNameList = ref<RegionNameList[]>([]);
 const regionList = ref<RegionsPointsItem[]>([]);
 const selectId = ref<number>(0);
-
+const monitoringName = ref<string>();
 const monitoringId = ref<number>();
-
 const formRef = ref<FormInstance>();
-
 const envMonitorStyle = ref<EnvMonitorStyle>({
   background: `url(${envMonitorBgc})`,
   backgroundSize: 'cover',
@@ -136,7 +137,6 @@ const rules: Record<string, Rule[]> = {
 const { handleRequest } = useRequest();
 
 const getGroupRegionsList = () => {
-  console.log(gradeTwo.value);
   handleRequest(async () => {
     if (gradeTwo.value) {
       groupRegions.value = await getGroupRegions(gradeTwo.value);
@@ -241,6 +241,9 @@ const getRegionsPointsList = (value: number) => {
           id,
         });
       });
+
+      monitoringId.value = monitoringPointData.value[0].id;
+
       if (data[0].id) {
         selectId.value = data[0].id;
       }
@@ -354,6 +357,12 @@ const selectClick = (id: number) => {
   selectId.value = id;
 };
 
+const historicalDataClick = (data: MonitoringPointData) => {
+  monitoringName.value = data.name;
+  monitoringId.value = data.id;
+  monitoringDataOpen.value = true;
+};
+
 const editorClick = (monitoringPointId: number) => {
   handleRequest(async () => {
     const {
@@ -454,6 +463,14 @@ const offOutdoorDrawer = () => {
   outdoorOpen.value = false;
 };
 
+const offMonitoringDrawer = () => {
+  monitoringDataOpen.value = false;
+};
+
+const copyRegion = () => {
+  regionCopyOpen.value = true;
+};
+
 watch(
   () => gradeOne.value,
   (count) => {
@@ -522,12 +539,17 @@ onMounted(() => {
       <AFlex class="content-monitoring-canvas">
         <div class="content-monitoring-canvas-left">
           <div v-for="item in monitoringPointData" :key="item.id">
-            <LineChart :data="item" @editorClick="editorClick" />
+            <LineChart
+              :data="item"
+              :monitoring-id="monitoringId"
+              @editorClick="editorClick"
+              @historicalDataClick="historicalDataClick"
+            />
           </div>
         </div>
 
         <AFlex :style="envMonitorStyle" class="monitoring-img">
-          <AFlex v-if="regionList.length" align="center" class="list-regions">
+          <AFlex v-show="regionList.length" align="center" class="list-regions">
             <ButtonTabs
               :data="regionNameList"
               :select-id="selectId"
@@ -537,7 +559,7 @@ onMounted(() => {
               @selectClick="selectClick"
             />
           </AFlex>
-          <div v-if="regionList.length" class="canvas-div">
+          <div v-show="regionList.length" class="canvas-div">
             <AFlex justify="space-between" class="canvas-div-top">
               <AButton class="icon-button" @click="addOutdoorDrawer">
                 <SvgIcon name="outdoor" />
@@ -547,9 +569,11 @@ onMounted(() => {
                 <AFlex justify="center" align="center" class="button-icon">
                   <SvgIcon name="edit-o" />
                 </AFlex>
-                <AFlex justify="center" align="center" class="button-icon">
-                  <SvgIcon name="copy" />
-                </AFlex>
+                <div @click="copyRegion">
+                  <AFlex justify="center" align="center" class="button-icon">
+                    <SvgIcon name="copy" />
+                  </AFlex>
+                </div>
               </AFlex>
             </AFlex>
             <div class="canvas-content">
@@ -830,6 +854,21 @@ onMounted(() => {
       </template>
     </ADrawer>
 
+    <ADrawer
+      width="612"
+      :open="monitoringDataOpen"
+      :closable="false"
+      class="drawer-monitoring"
+      :header-style="headerStyle"
+      :footer-style="footerStyle"
+    >
+      <template #title>{{ monitoringName }}</template>
+      <template #extra>
+        <SvgIcon class="off-icon" @click="offMonitoringDrawer" name="close" />
+      </template>
+      <HumitureCurve :monitoring-id="monitoringId" :monitoring-data="monitoringPointData" />
+    </ADrawer>
+
     <AModal
       v-model:open="regionNameOpen"
       :title="titleRegions ? '添加区域' : '编辑区域'"
@@ -851,6 +890,30 @@ onMounted(() => {
         <AButton type="primary" @click="regionNameOk">{{ $t('common.confirm') }}</AButton>
       </AFlex>
     </AModal>
+
+    <AModal
+      v-model:open="regionCopyOpen"
+      title="复制面板"
+      :footer="null"
+      width="460px"
+      :mask-closable="false"
+      :keyboard="false"
+    >
+      <div class="region-name">请选择你要复制的区域</div>
+      <ASelect
+        style="width: 100%"
+        :options="regionNameList"
+        :field-names="{ label: 'name', value: 'id' }"
+        placeholder="请选择"
+      />
+
+      <AFlex justify="flex-end" class="region-name-top">
+        <AButton class="default-button cancel-button" @click="regionCopyOpen = false">{{
+          $t('common.cancel')
+        }}</AButton>
+        <AButton type="primary">{{ $t('common.confirm') }}</AButton>
+      </AFlex>
+    </AModal>
   </div>
 </template>