Merge branch 'feature-obs' of hrx/vent-forewarn-micro into master

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

@@ -1,5 +1,5 @@
 <template>
-  <!-- 测点列表过滤器 -->
+  <!-- 测点过滤器 -->
   <Form :model="formData" layout="vertical" :wrapperCol="{ span: 24 }">
     <FormItem>
       <Input
@@ -28,9 +28,7 @@
   import { defineExpose, ref, defineEmits } from 'vue';
 
   // props & emits
-  const emit = defineEmits<{
-    submit: [value: MonitorSiteTreeParams];
-  }>();
+  const emit = defineEmits<{ submit: [value: MonitorSiteTreeParams] }>();
 
   // 配置项
   const defaltTag = '0';

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

@@ -1,5 +1,5 @@
 <template>
-  <!-- 测点表单 -->
+  <!-- 测点操作表单 -->
   <BasicForm
     :model="site"
     :schemas="schemas"
@@ -20,18 +20,14 @@
   </BasicForm>
 </template>
 <script setup lang="ts">
-  import { MonitorSite, MonitorSiteOperationParams } from '@/api/sys/model/monitorModel';
+  import { MonitorSiteTreeNode, MonitorSiteOperationParams } from '@/api/sys/model/monitorModel';
   import { defineProps } from 'vue';
   import { BasicForm, FormSchema } from '@/components/Form/index';
   import { Button } from 'ant-design-vue';
 
   // props & emits
-  defineProps<{
-    site?: MonitorSite;
-  }>();
-  const emit = defineEmits<{
-    submit: [value: MonitorSiteOperationParams];
-  }>();
+  defineProps<{ site?: MonitorSiteTreeNode }>();
+  const emit = defineEmits<{ submit: [value: MonitorSiteOperationParams] }>();
 
   // 生成输入类表单项的帮助函数
   function generateInputSchema({
@@ -61,7 +57,7 @@
     };
   }
 
-  // 生成按钮类表单项的帮助函数，具体的按钮写在BasicForm对应色的slot下
+  // 生成按钮类表单项的帮助函数，具体的按钮写在BasicForm对应的slot下
   function generateButtonSchema({ slot }: { slot: string }): FormSchema {
     return {
       field: slot,
@@ -98,7 +94,7 @@
     generateInputSchema({ field: 'z', label: 'Z', span: 3 }),
   ];
 
-  // 点击按钮后处理提交逻辑的方法
+  // 提交创建测点所需的数据
   function createSite(model: MonitorSiteOperationParams) {
     emit('submit', {
       clickType: 'newPoin', // 点击类型  新建测点
@@ -108,6 +104,7 @@
       from: 'tank',
     });
   }
+  // 提交复制测点所需的数据
   function copySite(model: MonitorSiteOperationParams) {
     emit('submit', {
       clickType: 'copyPoint', // 点击类型  新建测点
@@ -117,6 +114,7 @@
       from: 'tank',
     });
   }
+  // 提交编辑测点所需的数据
   function editSite(model: MonitorSiteOperationParams) {
     emit('submit', {
       clickType: 'modifyPoint', // 点击类型  新建测点

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

@@ -14,8 +14,9 @@
   import { MonitorSiteTreeNode } from '@/api/sys/model/monitorModel';
   import { TreeNode } from '../types/siteTree';
 
+  // props & emits
   const props = defineProps<{ treeData?: MonitorSiteTreeNode }>();
-  const emit = defineEmits(['select']);
+  const emit = defineEmits<{ select: [value: MonitorSiteTreeNode] }>();
 
   const processedTreeData = ref<TreeNode[]>([
     {
@@ -27,18 +28,19 @@
   ]);
   const expandedKeys = ref<string[]>([]);
 
-  // 递归处理树节点并格式化为需要的格式
+  // 递归处理树节点并格式化为需要的格式，将父节点记录到指定数组中
   function walk(node: MonitorSiteTreeNode, parentNodeKeys: string[]): TreeNode {
+    // 在这里赋值
     const res: TreeNode = {
       title: node.label,
       key: node.id,
       disabled: !!node.display,
-      children: [],
       raw: node,
+      children: [],
     };
 
     if (node.children) {
-      // 额外的，记录它们的key以将它们全部展开
+      // 记录所有的父节点id
       parentNodeKeys.push(node.id);
       node.children.forEach((child) => {
         res.children.push(walk(child, parentNodeKeys));

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

@@ -1,8 +1,11 @@
 <template>
+  <!-- 监测-测点页面 -->
   <div class="monitor-site flex">
     <!-- 左侧内容 -->
     <div class="h-full flex-basis-385px p-10px flex flex-col">
+      <!-- 测点过滤器 -->
       <SiteFilter class="flex-shrink-0 flex-grow-0" @submit="refreshTree" />
+      <!-- 测点树 -->
       <SiteTree
         class="w-full flex-grow-1 h-0 scroll-auto"
         :tree-data="treeData"
@@ -11,13 +14,19 @@
     </div>
     <!-- 右侧内容 主要内容 -->
     <div class="h-full flex-grow-1 relative">
+      <!-- 测点图 -->
       <IFrame
         ref="iframeRef"
         class="w-full h-full"
         :frame-src="monitorSiteOperationUrl"
         @message="handleMessage"
       />
-      <SiteForm class="absolute w-full bg-#0960bd44 p-10px top-0" :site="selectedSite" />
+      <!-- 操作测点的表单 -->
+      <SiteForm
+        class="absolute w-full bg-#0960bd44 p-10px top-0"
+        :site="selectedSite"
+        @submit="handleSubmit"
+      />
     </div>
   </div>
 </template>
@@ -29,7 +38,7 @@
   import {
     MonitorSiteTreeParams,
     MonitorSiteTreeNode,
-    MonitorSite,
+    MonitorSiteOperationParams,
   } from '@/api/sys/model/monitorModel';
   import {
     getMonitorSiteTree,
@@ -50,28 +59,32 @@
   }
 
   // 选中的测点
-  const selectedSite = ref<MonitorSite>();
-
-  // 测点操作（iframe）相关，包括下发指令及处理消息
+  const selectedSite = ref<MonitorSiteTreeNode>();
 
-  // 聚焦到测点上;
-  function focusOnSite(site: MonitorSite) {
+  // 聚焦到测点上
+  function focusOnSite(site: MonitorSiteTreeNode) {
     selectedSite.value = site;
     postMonitorOperation(iframeRef.value!, {
       clickType: 'treePoint',
-      id: site.mineCode,
+      id: site.id,
       data: {},
       type: 'treeSensor',
       from: 'tank',
     });
   }
 
+  // 处理测点图返回的数据
   function handleMessage(msg: any) {
     handleMonitorOperation(msg, (d) => {
       console.log(d);
     });
   }
 
+  // 提交操作请求
+  function handleSubmit(formData: MonitorSiteOperationParams) {
+    postMonitorOperation(iframeRef.value!, formData);
+  }
+
   onMounted(() => {
     refreshTree({});
   });
@@ -82,6 +95,8 @@
     selectedSite,
     refreshTree,
     focusOnSite,
+    handleMessage,
+    handleSubmit,
   });
 </script>
 <style scoped>