[Mod t0000] 改进测点页面交互

Discription

为测点过滤器添加 disable 属性
完善测点表单与测点图的交互

Associated Tasks

Assignee

@houzekong

src/api/sys/monitor.ts

@@ -89,10 +89,12 @@ export function getMonitorSite(params: MonitorSiteParams, mode: ErrorMessageMode
 export const monitorSiteOperationUrl = 'http://82.157.13.146:18224/valkyrja/';
 
 /** 发送测点操作指令 */
-export function postMonitorOperation(el, params: MonitorSiteOperationParams) {
+export function postMonitorOperation(el: Window, params: MonitorSiteOperationParams) {
+  if (!el) return;
   el.postMessage(JSON.stringify(params), '*');
 }
 
+/** 处理测点操作反馈信息及其他相关的反馈信息 */
 export function handleMonitorOperation(
   raw: MessageEvent<string>,
   callback: (data: MonitorSiteOperation) => void,

src/views/vent/monitor/site/components/siteFilter.vue

@@ -5,6 +5,7 @@
       <Input
         v-model:value="formData.keyword"
         placeholder="输入关键词，回车以搜索"
+        :disabled="disabled"
         @press-enter="submit"
       />
     </FormItem>
@@ -12,8 +13,7 @@
       <CheckableTag
         v-for="tag in tags"
         :key="tag.value"
-        class="ml-2px mr-2px"
-        :style="{ color: tag.color }"
+        :style="{ color: tag.color, cursor: disabled ? 'not-allowed' : 'pointer' }"
         :checked="formData.tag === tag.value"
         @change="changeHandler(tag.value)"
       >
@@ -28,6 +28,7 @@
   import { ref, defineEmits } from 'vue';
 
   // props & emits
+  const props = defineProps<{ disabled: boolean }>();
   const emit = defineEmits<{ submit: [value: MonitorSiteTreeParams] }>();
 
   // 配置项
@@ -37,41 +38,49 @@
       label: '全部',
       color: 'white',
       value: defaltTag,
+      checked: false,
     },
     {
       label: '正常',
       color: 'green',
       value: 'normal',
+      checked: false,
     },
     {
       label: '报警',
       color: 'red',
       value: 'warn',
+      checked: false,
     },
     {
       label: '未知',
       color: 'blue',
       value: 'unknown',
+      checked: false,
     },
     {
       label: '故障',
       color: 'orange',
       value: 'fault',
+      checked: false,
     },
     {
       label: '未接入',
       color: 'purple',
       value: 'offline',
+      checked: false,
     },
     {
       label: '失败',
       color: 'gray',
       value: 'fail',
+      checked: false,
     },
     {
       label: '无效',
       color: 'white',
       value: 'none',
+      checked: false,
     },
   ];
 
@@ -86,6 +95,7 @@
   }
 
   function changeHandler(value: string) {
+    if (props.disabled) return;
     formData.value.tag = value;
     submit();
   }

src/views/vent/monitor/site/components/siteForm.vue

@@ -1,31 +1,28 @@
 <template>
   <!-- 测点操作表单 -->
-  <div>
-    <BasicForm
-      :model="site"
-      :schemas="schemas"
-      :label-col="{ span: 8 }"
-      :wrapper-col="{ span: 16 }"
-      label-align="right"
-      :showActionButtonGroup="false"
-      @register="register"
-    >
-      <template #create-btn>
-        <Button type="primary" :rounded="true" @click="createSite">新建测点</Button>
-      </template>
-      <template #copy-btn>
+  <BasicForm
+    :model="site"
+    :schemas="schemas"
+    :label-col="{ span: 9 }"
+    :wrapper-col="{ span: 15 }"
+    :showActionButtonGroup="false"
+    size="small"
+    label-align="right"
+    @register="register"
+  >
+    <template #create-btn>
+      <Button type="primary" :rounded="true" @click="createSite">新建测点</Button>
+    </template>
+    <template #edit-btn>
+      <Button type="primary" :rounded="true" @click="editSite">编辑测点</Button>
+    </template>
+    <!-- <template #copy-btn>
         <Button type="primary" :rounded="true" @click="copySite">复制测点</Button>
-      </template>
-      <template #edit-btn>
-        <Button type="primary" :rounded="true" @click="editSite">编辑测点</Button>
-      </template>
-    </BasicForm>
-    <Button type="primary" shape="circle" @click="targetSite">
-      <template #icon>
-        <Icon icon="mdi:target" />
-      </template>
-    </Button>
-  </div>
+      </template> -->
+    <template #pick-btn>
+      <Button type="primary" :rounded="true" @click="pickSite">拾取坐标</Button>
+    </template>
+  </BasicForm>
 </template>
 <script setup lang="ts">
   import {
@@ -37,13 +34,12 @@
   import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
   import { Button } from 'ant-design-vue';
   import { SensorDict, SystemSourceDict } from '../const';
-  import Icon from '@/components/Icon/Icon.vue';
 
   // props & emits
-  defineProps<{ site?: MonitorSiteTreeNode }>();
+  defineProps<{ site: Partial<MonitorSiteTreeNode> }>();
   const emit = defineEmits<{
     save: [value: SaveMonitorSiteParams];
-    message: [value: MonitorSiteOperationParams];
+    operation: [value: MonitorSiteOperationParams];
   }>();
 
   // 生成输入类表单项的帮助函数
@@ -132,13 +128,14 @@
     generateInputSchema({ field: 'sensorStatus', label: '测点使用状态', required: true }),
     generateInputSchema({ field: 'pos', label: '所属位置', required: true }),
     generateInputSchema({ field: 'x', label: 'X', required: true, span: 3 }),
-    generateButtonSchema({ slot: 'copy-btn' }),
+    generateButtonSchema({ slot: 'edit-btn' }),
     generateSelectSchema({ field: 'srouce', label: '系统来源', dict: SystemSourceDict }),
     generateInputSchema({ field: 'data_type', label: '数据类型', required: true }),
     generateInputSchema({ field: 'nuit', label: '单位', required: true }),
     generateInputSchema({ field: 'distance', label: '巷道距离' }),
     generateInputSchema({ field: 'y', label: 'Y', required: true, span: 3 }),
-    generateButtonSchema({ slot: 'edit-btn' }),
+    // generateButtonSchema({ slot: 'copy-btn' }),
+    generateButtonSchema({ slot: 'pick-btn' }),
     generateInputSchema({ field: 'max_messure', label: '高量程' }),
     generateInputSchema({ field: 'min_messure', label: '低量程' }),
     generateInputSchema({ field: 'warn_limit', label: '报警上限', required: true }),
@@ -157,11 +154,11 @@
   }
 
   // 提交复制测点所需的数据
-  function copySite() {
-    validate().then((v) => {
-      emit('save', v as SaveMonitorSiteParams);
-    });
-  }
+  // function copySite() {
+  //   validate().then((v) => {
+  //     emit('save', v as SaveMonitorSiteParams);
+  //   });
+  // }
 
   // 提交编辑测点所需的数据
   function editSite() {
@@ -170,9 +167,9 @@
     });
   }
 
-  // 定位测点
-  function targetSite() {
-    emit('message', {
+  // 拾取测点
+  function pickSite() {
+    emit('operation', {
       clickType: 'pickPiont', // 拾取坐标
       from: 'tank',
     });

src/views/vent/monitor/site/index.vue

@@ -2,29 +2,29 @@
   <!-- 监测-测点页面 -->
   <div class="monitor-site flex">
     <!-- 左侧内容 -->
-    <div class="h-850px flex-basis-415px p-10px">
+    <div class="h-860px flex-basis-420px p-10px flex-shrink-0">
       <!-- 测点过滤器 -->
-      <SiteFilter class="w-full h-100px" @submit="refreshTree" />
+      <SiteFilter class="w-full h-100px" :disabled="true" @submit="refreshTree" />
       <!-- 测点树 -->
       <SiteTree class="w-full h-700px" :tree-data="treeData" @select="focusOnSite" />
     </div>
-    <!-- 右侧内容 主要内容 -->
-    <div class="h-850px flex-grow-1 relative">
+    <!-- 右侧内容，即主要内容 -->
+    <div class="h-860px flex-grow-1">
+      <!-- 操作测点的表单 -->
+      <SiteForm
+        class="w-full bg-#0960bd44 p-10px"
+        :site="selectedSite"
+        @operation="handleOperation"
+        @save="handleSave"
+      />
       <!-- 测点图 -->
       <IFrame
         ref="iframeRef"
-        class="w-full h-760px"
+        class="w-full"
         :frame-src="monitorSiteOperationUrl"
-        :height="850"
+        :height="700"
         @message="handleMessage"
       />
-      <!-- 操作测点的表单 -->
-      <SiteForm
-        class="absolute w-full bg-#0960bd44 p-10px top-0"
-        :site="selectedSite"
-        @message="handleSubmit"
-        @save="handleSave"
-      />
     </div>
   </div>
 </template>
@@ -43,7 +43,6 @@
     getMonitorSiteTree,
     postMonitorOperation,
     monitorSiteOperationUrl,
-    handleMonitorOperation,
     saveMonitorSite,
   } from '@/api/sys/monitor';
   import IFrame from '@/views/sys/iframe/index.vue';
@@ -61,7 +60,7 @@
   }
 
   // 选中的测点
-  const selectedSite = ref<MonitorSiteTreeNode>();
+  const selectedSite = ref<Partial<MonitorSiteTreeNode>>({});
 
   // 聚焦到测点上
   function focusOnSite(site: MonitorSiteTreeNode) {
@@ -77,13 +76,12 @@
 
   // 处理测点图返回的数据
   function handleMessage(msg: any) {
-    handleMonitorOperation(msg, (d) => {
-      console.log(d);
-    });
+    const data = JSON.parse(msg);
+    selectedSite.value = { ...selectedSite.value, ...data };
   }
 
   // 提交一些与iframe操作的请求
-  function handleSubmit(formData: MonitorSiteOperationParams) {
+  function handleOperation(formData: MonitorSiteOperationParams) {
     postMonitorOperation(iframeRef.value!, formData);
   }
 
@@ -105,14 +103,14 @@
     refreshTree,
     focusOnSite,
     handleMessage,
-    handleSubmit,
+    handleOperation,
   });
 </script>
 <style scoped>
   .monitor-site {
     position: relative;
     width: 100%;
-    height: calc(100vh - 70px);
+    height: calc(100vh - 60px);
     margin-top: 50px;
   }
 </style>