From e7f868d31981e130880c119144a3d28ac3e19157 Mon Sep 17 00:00:00 2001
From: sjl <1716605279@qq.com>
Date: Thu, 21 Nov 2024 15:30:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../machine/device/components/devicePopup.vue | 65 +---------------
 .../machine/device/components/monitorTab.vue  | 75 +++++++++++++++++++
 2 files changed, 79 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/views/machine/device/components/monitorTab.vue

diff --git a/frontend/src/views/machine/device/components/devicePopup.vue b/frontend/src/views/machine/device/components/devicePopup.vue
index 51d6859..adad227 100644
--- a/frontend/src/views/machine/device/components/devicePopup.vue
+++ b/frontend/src/views/machine/device/components/devicePopup.vue
@@ -201,28 +201,9 @@
                     </el-form>            
                 </div>  
             </el-tab-pane>
-            <el-tab-pane label="监测点台账信息" v-if="MonIsShow">
-                <div class='table-box' ref='popupBaseView'>
-                    <ProTable
-                        ref='proTable'
-                        :columns='columns'
-                       
-                    >
-                    <!-- 表格 header 按钮 -->
-                    <template #tableHeader='scope'>
-                        <el-button type='primary' :icon='CirclePlus' >新增</el-button>
-                        <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>批量删除</el-button>
-                    </template>
-                    <!-- 表格操作 -->
-                    <template #operation>
-                        <el-button type='primary' link :icon='EditPen'>复制</el-button>
-                        <el-button type='primary' link :icon='EditPen'>编辑</el-button>
-                        <el-button type='primary' link :icon='Delete'>删除</el-button>
-                    </template>
-                    </ProTable>
-                </div>
-            </el-tab-pane>
-   
+
+            <!-- 监测点台账信息 tab pane -->
+            <MonitorTable :MonIsShow="MonIsShow"/>
         </el-tabs>
         <template #footer>
             <div >
@@ -245,9 +226,7 @@ import { useDictStore } from '@/stores/modules/dict'
 import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
 // 使用 dayjs 库格式化
 import dayjs from 'dayjs'
-import { getPqMonList } from '@/api/device/monitor'
-import { type ColumnProps } from '@/components/ProTable/interface'
-import { type Monitor } from '@/api/device/interface/monitor'
+import MonitorTable from '@/views/machine/device/components/monitorTab.vue';
 
 const MonIsShow = ref(false)
 const DevIsShow = ref(false)
@@ -452,41 +431,5 @@ const props = defineProps<{
 
 
 
-// 表格配置项
-const columns = reactive<ColumnProps<Monitor.ResPqMon>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { type: 'index', fixed: 'left', width: 70, label: '序号' },
-  {
-    prop: '',
-    label: '所属母线',
-    width: 200,
-  },
-  {
-    prop: '',
-    label: '被检通道',
-    width: 200,
-  },
-  {
-    prop: '',
-    label: 'PT变比',
-    width: 110,
-  },
-  {
-    prop: '',
-    label: 'CT变比',
-    width: 130,
-  },
-  {
-    prop: '',
-    label: '接线方式',
-    width: 130,
 
-  },
-  {
-    prop: '',
-    label: '谐波系统监测点ID',
-    minWidth: 250,
-  },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
-])
 </script>
\ No newline at end of file
diff --git a/frontend/src/views/machine/device/components/monitorTab.vue b/frontend/src/views/machine/device/components/monitorTab.vue
new file mode 100644
index 0000000..a4e1a44
--- /dev/null
+++ b/frontend/src/views/machine/device/components/monitorTab.vue
@@ -0,0 +1,75 @@
+<!-- components/MonitorPointTable.vue -->
+<template>
+    <el-tab-pane label="监测点台账信息" v-if="MonIsShow">
+      <div class='table-box' ref='popupBaseView'>
+        <ProTable
+          ref='proTable'
+          :columns='columns'
+        >
+          <!-- 表格 header 按钮 -->
+          <template #tableHeader='scope'>
+            <el-button type='primary' :icon='CirclePlus'>新增</el-button>
+            <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>批量删除</el-button>
+          </template>
+          <!-- 表格操作 -->
+          <template #operation>
+            <el-button type='primary' link :icon='EditPen'>复制</el-button>
+            <el-button type='primary' link :icon='EditPen'>编辑</el-button>
+            <el-button type='primary' link :icon='Delete'>删除</el-button>
+          </template>
+        </ProTable>
+      </div>
+    </el-tab-pane>
+  </template>
+  
+  <script setup lang="ts">
+    import { ref, defineProps, reactive } from 'vue';
+    import ProTable from '@/components/ProTable/index.vue'; // 假设 ProTable 是自定义组件
+    import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue';
+    import { getPqMonList } from '@/api/device/monitor'
+    import { type ColumnProps } from '@/components/ProTable/interface'
+    import { type Monitor } from '@/api/device/interface/monitor'
+  const props = defineProps({
+    MonIsShow: Boolean,
+  });
+
+
+  // 表格配置项
+const columns = reactive<ColumnProps<Monitor.ResPqMon>[]>([
+  { type: 'selection', fixed: 'left', width: 70 },
+  { type: 'index', fixed: 'left', width: 70, label: '序号' },
+  {
+    prop: '',
+    label: '所属母线',
+    width: 200,
+  },
+  {
+    prop: '',
+    label: '被检通道',
+    width: 200,
+  },
+  {
+    prop: '',
+    label: 'PT变比',
+    width: 110,
+  },
+  {
+    prop: '',
+    label: 'CT变比',
+    width: 130,
+  },
+  {
+    prop: '',
+    label: '接线方式',
+    width: 130,
+
+  },
+  {
+    prop: '',
+    label: '谐波系统监测点ID',
+    minWidth: 250,
+  },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
+])
+  </script>
+  
\ No newline at end of file