标准设备，比对模式被检设备

frontend/src/views/machine/device/components/devicePopup.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
-    <el-tabs type="border-card">
+  <el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
+    <el-tabs type="border-card" v-model="activeTab">
       <el-tab-pane label="设备台账信息">
         <div>
           <el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false" label-width="auto" class="form-three">
@@ -9,15 +9,16 @@
               <el-input v-model="formContent.createId" placeholder="请输入装置编号" @input="handleInput" maxlength="32" show-word-limit/>
             </el-form-item>
             <el-form-item label="设备名称" prop="name">
-              <el-input v-model='formContent.name' placeholder="请输入设备名称" :disabled="scene === '1'" maxlength="32" show-word-limit/>
+              <el-input v-model='formContent.name' placeholder="请输入设备名称" :disabled="scene === '1' || formContent.importFlag == 1" maxlength="32" show-word-limit  />
             </el-form-item>
             <el-form-item label='设备类型' prop='devType'>
-              <el-select v-model="formContent.devType" filterable clearable placeholder="请选择设备类型" @change="handleDevTypeChange">
+              <el-select v-model="formContent.devType" filterable clearable placeholder="请选择设备类型" @change="handleDevTypeChange"   :disabled="formContent.importFlag == 1">
                 <el-option
                     v-for="item in devTypeOptions"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
+                  
                 />
               </el-select>
             </el-form-item>
@@ -31,31 +32,23 @@
                 />
               </el-select>
             </el-form-item>
-            <!--                                <el-form-item label='设备模式'  prop='pattern' >-->
-            <!--                                    <el-select v-model="formContent.pattern"  clearable placeholder="请选择设备模式" disabled>-->
-            <!--                                    <el-option -->
-            <!--                                    v-for="item in dictStore.getDictData('Pattern')"-->
-            <!--                                    :key="item.id"-->
-            <!--                                    :label="item.name"-->
-            <!--                                    :value="item.id"-->
-            <!--                                    />-->
-            <!--                                </el-select>-->
-            <!--                                </el-form-item>           -->
             <el-form-item label='设备厂家' prop='manufacturer' v-if="scene != '1'">
-              <el-select v-model="formContent.manufacturer" clearable placeholder="请选择设备厂家">
+              <el-select v-model="formContent.manufacturer" clearable placeholder="请选择设备厂家"  :disabled="formContent.importFlag == 1">
                 <el-option
                     v-for="item in dictStore.getDictData('Dev_Manufacturers')"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
+                    
                 />
               </el-select>
             </el-form-item>
-            <el-form-item label="出厂日期" prop="createDate" v-if="scene === '0'">
+            <el-form-item :label="createDateTitle" prop="createDate" v-if="scene === '0'" >
               <el-date-picker
                   v-model="formContent.createDate"
-                  placeholder="请选择出厂日期"
+                  :placeholder="`请选择${createDateTitle}`"
                   :disabled-date="disabledDate"
+                  :disabled="formContent.importFlag == 1"
               />
             </el-form-item>
 
@@ -65,46 +58,62 @@
             <el-form-item label="软件版本" prop="softwareVersion" v-if="scene === '0'">
               <el-input v-model="formContent.softwareVersion" placeholder="请输入软件版本"/>
             </el-form-item>
+            <el-form-item label='定检日期' prop='inspectDate' v-if="MonIsShow">
+              <el-date-picker
+                  v-model="formContent.inspectDate"
+                  placeholder="请选择定检日期"
+                  :disabled-date="disabledDate"
+                 :disabled="formContent.importFlag == 1"
+              />
+            </el-form-item>
             <el-divider>参数信息</el-divider>
-            <el-form-item label="通道数" prop="devChns">
+            <el-form-item label="通道数" prop="devChns" v-if="DevIsShow">
               <el-input v-model='formContent.devChns' :disabled="true"/>
             </el-form-item>
-            <el-form-item label="额定电压(V)" prop="devVolt">
+            <el-form-item label="额定电压(V)" prop="devVolt" v-if="DevIsShow">
               <el-input v-model='formContent.devVolt' :disabled="true"/>
             </el-form-item>
-            <el-form-item label="额定电流(A)" prop="devCurr">
+            <el-form-item label="额定电流(A)" prop="devCurr" v-if="DevIsShow">
               <el-input v-model='formContent.devCurr' :disabled="true"/>
             </el-form-item>
+            <el-form-item label='被检通道' prop='inspectChannel' :label-width='100' v-if="MonIsShow">
+                <el-select v-model="formContent.inspectChannel"  multiple collapse-tags  :disabled="true"  :max-collapse-tags="4" placeholder="请选择被检通道" clearable>
+                    <el-option
+                        v-for="(option, index) in pqChannelArray"
+                        :key="index"
+                        :label="option.label"
+                        :value="option.value"
+                    />
+                </el-select>                      
+            </el-form-item>
             <el-form-item label='通讯协议' prop='protocol'>
-              <el-select v-model="formContent.protocol" clearable placeholder="请选择通讯协议">
+              <el-select v-model="formContent.protocol" clearable placeholder="请选择通讯协议"   :disabled="formContent.importFlag == 1">
                 <el-option
                     v-for="item in dictStore.getDictData('Protocol')"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
+                   
                 />
               </el-select>
             </el-form-item>
-            <!-- <el-form-item label="IP地址" prop="ip">
-              <IPAddress v-model:value="formContent.ip"/>
-            </el-form-item> -->
             <el-form-item label="IP地址" prop="ip" placeholder="请输入IP地址">
-              <el-input v-model="formContent.ip"/>
+              <el-input v-model="formContent.ip"  :disabled="formContent.importFlag == 1"/>
             </el-form-item>
             <el-form-item label="端口号" prop="port" placeholder="请输入端口号">
-              <el-input v-model="formContent.port"/>
+              <el-input v-model="formContent.port"  :disabled="formContent.importFlag == 1"/>
             </el-form-item>
             <el-form-item label='是否加密' prop='encryptionFlag'>
-              <el-select v-model="formContent.encryptionFlag" clearable placeholder="请选择是否加密">
+              <el-select v-model="formContent.encryptionFlag" clearable placeholder="请选择是否加密" :disabled="formContent.importFlag == 1">
                 <el-option label="是" :value="1"></el-option>
                 <el-option label="否" :value="0"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label='识别码' prop='series' clearable v-if="formContent.encryptionFlag">
-              <el-input v-model='formContent.series' placeholder="请输入识别码" show-password/>
+              <el-input v-model='formContent.series' placeholder="请输入识别码" show-password  :disabled="formContent.importFlag == 1"/>
             </el-form-item>
             <el-form-item label='密钥' prop='devKey' clearable v-if="formContent.encryptionFlag">
-              <el-input v-model='formContent.devKey' placeholder="请输入密钥" show-password/>
+              <el-input v-model='formContent.devKey' placeholder="请输入密钥" show-password  :disabled="formContent.importFlag == 1"/>
             </el-form-item>
             <el-form-item label='样品编号' prop='sampleId' clearable v-if="DevIsShow && scene === '0'">
               <el-input v-model='formContent.sampleId' placeholder="请输入样品编号"/>
@@ -127,13 +136,13 @@
               </el-select>
             </el-form-item>
             <el-form-item label='所属地市' prop='cityName' clearable placeholder="请输入所属地市" v-if="MonIsShow">
-              <el-input v-model='formContent.cityName'/>
+              <el-input v-model='formContent.cityName'  :disabled="formContent.importFlag == 1"/>
             </el-form-item>
-            <el-form-item label='所属供电公司' prop='gDName' clearable placeholder="请输入所属供电公司" v-if="MonIsShow">
-              <el-input v-model='formContent.gDName'/>
+            <el-form-item label='所属供电公司' prop='gdName' clearable placeholder="请输入所属供电公司" v-if="MonIsShow">
+              <el-input v-model='formContent.gdName'  :disabled="formContent.importFlag == 1"/>
             </el-form-item>
             <el-form-item label='所属电站' prop='subName' clearable placeholder="请输入所属电站" v-if="MonIsShow">
-              <el-input v-model='formContent.subName'/>
+              <el-input v-model='formContent.subName'  :disabled="formContent.importFlag == 1"/>
             </el-form-item>
             <el-form-item v-auth.device="'factorFlag'" label="是否支持系数校准" prop='factorFlag' v-if="scene === '1'">
               <el-radio-group v-model="formContent.factorFlag">
@@ -145,21 +154,19 @@
         </div>
       </el-tab-pane>
 
-      <!-- 监测点台账信息 tab pane -->
-      <MonitorTable :MonIsShow="MonIsShow"/>
-    </el-tabs>
-    <template #footer>
-      <div>
-        <el-button @click='close()'>取 消</el-button>
-        <el-button type="primary" @click='save()'>保存</el-button>
-      </div>
-    </template>
-  </el-dialog>
+            <!-- 监测点台账信息 tab pane -->
+            <MonitorTable @getParameter="getParameter" :MonIsShow="MonIsShow"  :DevFormContent = "formContent"/>
+        </el-tabs>
+        <template #footer>
+            <div >
+                <el-button @click='close()'>取 消</el-button>
+                <el-button type="primary" @click='save()'>保存</el-button>
+            </div>
+        </template>
+    </el-dialog>
 
 </template>
 <script setup lang='ts'>
-
-import IPAddress from '@/components/IpAddress/index.vue'
 import {dialogBig} from '@/utils/elementBind'
 import {type Device} from '@/api/device/interface/device'
 import {ElMessage, type FormItemRule} from 'element-plus'
@@ -171,18 +178,31 @@ import {CirclePlus, Delete, EditPen} from '@element-plus/icons-vue'
 import dayjs from 'dayjs'
 import MonitorTable from '@/views/machine/device/components/monitorTab.vue';
 import {useAppSceneStore} from "@/stores/modules/mode";
+import { generateUUID } from '@/utils'
+import { Monitor } from '@/api/device/interface/monitor'
+
 
 const AppSceneStore = useAppSceneStore()
 const MonIsShow = ref(false)
 const DevIsShow = ref(false)
 // 存储设备类型选项
 const devTypeOptions = ref<Device.ResDev[]>([])
+const monitor = ref<Monitor.ResPqMon[]>([])
 // const IsPasswordShow = ref(false)
 const dictStore = useDictStore()
 const mode = ref()
 const scene = ref('')
 // 定义弹出组件元信息
 const dialogFormRef = ref()
+const createDateTitle = ref('')
+const activeTab = ref('0') // '0' 对应第一个 tab
+
+const pqChannelArray = ref([
+  {
+    value: '1',
+    label: '1',
+  }
+])
 const disabledDate = (time: Date) => {
   return time.getTime() > Date.now()
 }
@@ -190,7 +210,7 @@ const disabledDate = (time: Date) => {
 function useMetaInfo() {
   const dialogVisible = ref(false)
   const titleType = ref('add')
-  const formContent = ref<Device.ResPqDev>({
+  const formContent = reactive<Device.ResPqDev>({
     id: '',
     name: '',
     pattern: mode.value,
@@ -207,13 +227,20 @@ function useMetaInfo() {
     ip: '',
     port: 102,
     encryptionFlag: 0,
-    reCheckNum: 0,
+    recheckNum: 0,
     state: 1,
     factorFlag: 1,
     icdId: '',
     power: '',
     preinvestmentPlan: '',
-    delegate:''
+    delegate:'',
+    inspectDate:dayjs().format('YYYY-MM-DD'),
+    cityName: '', 
+    gdName: '',
+    subName: '',
+    importFlag:0,
+    inspectChannel:[],
+    monitorList:[]
   })
   return {dialogVisible, titleType, formContent}
 }
@@ -221,31 +248,41 @@ function useMetaInfo() {
 const {dialogVisible, titleType, formContent} = useMetaInfo()
 // 清空formContent
 const resetFormContent = () => {
-  formContent.value = {
-    id: '',
-    name: '',
-    pattern: mode.value,
-    devType: '',
-    devChns: 1,
-    devVolt: 57.74,
-    devCurr: 5,
-    manufacturer: '',
-    createDate: dayjs().format('YYYY-MM-DD'),
-    createId: '',
-    hardwareVersion: '',
-    softwareVersion: '',
-    protocol: 'MMS',
-    ip: '',
-    port: 102,
-    encryptionFlag: 0,
-    reCheckNum: 0,
-    state: 1,
-    factorFlag: 1,
-    icdId: '',
-    power: '',
-    preinvestmentPlan: '',
-    delegate:''
-  }
+   Object.assign(
+      formContent,{
+      id: '',
+      name: '',
+      pattern: mode.value,
+      devType: '',
+      devChns: 1,
+      devVolt: 57.74,
+      devCurr: 5,
+      manufacturer: '',
+      createDate: dayjs().format('YYYY-MM-DD'),
+      createId: '',
+      hardwareVersion: '',
+      softwareVersion: '',
+      protocol: 'MMS',
+      ip: '',
+      port: 102,
+      encryptionFlag: 0,
+      recheckNum: 0,
+      state: 1,
+      factorFlag: 1,
+      icdId: '',
+      power: '',
+      preinvestmentPlan: '',
+      delegate:'',
+      inspectDate:dayjs().format('YYYY-MM-DD'),
+      cityName: '', 
+      gdName: '',
+      subName: '',
+      importFlag:0,
+      inspectChannel:[],
+      monitorList:[]
+        }
+    )
+
 }
 
 
@@ -291,7 +328,7 @@ const rules = computed(() => {
   const dynamicRules = {...baseRules};
 
   if (scene.value === '0') {//只有电科院需要展示
-    dynamicRules.createDate = [{required: true, message: '出厂日期必填！', trigger: 'blur'}];
+    dynamicRules.createDate = [{required: true, message: createDateTitle.value + '必填！', trigger: 'blur'}];
   }
   if (scene.value === '1') {//只有楼下出厂需要展示
     dynamicRules.preinvestmentPlan = [{required: true, message: '预投计划必选！', trigger: 'change'}];
@@ -310,7 +347,13 @@ const rules = computed(() => {
   if (scene.value !== '2') {
     dynamicRules.name = [{required: true, message: '设备名称必填！', trigger: 'blur'}];
     dynamicRules.manufacturer = [{required: true, message: '生产厂家必选！', trigger: 'change'}];
+  }
 
+  if(mode.value === '比对式'){
+    dynamicRules.inspectDate = [{required: true, message: '定检日期必填！', trigger: 'blur'}];
+    dynamicRules.cityName = [{required: true, message: '所属地市必填！', trigger: 'blur'}];
+    dynamicRules.gdName = [{required: true, message: '所属供电公司必填！', trigger: 'blur'}];
+    dynamicRules.subName = [{required: true, message: '所属电站必填！', trigger: 'blur'}];
   }
 
 
@@ -324,49 +367,75 @@ const close = () => {
   resetFormContent()
   // 重置表单
   dialogFormRef.value?.resetFields()
-
 }
 
-// 保存数据
-const save = () => {
-  try {
-    dialogFormRef.value?.validate(async (valid: boolean) => {
+//子组件监测点变化通知父组件设备台账
+const getParameter = (data: Monitor.ResPqMon[]) => {
+      monitor.value = data  
+      //保存监测点信息自动更新设备台账的被检通道
+      formContent.inspectChannel = monitor.value
+                                  .map(item => item.num.toString())
+                                  .sort((a, b) => parseFloat(a) - parseFloat(b));
+}
+  
+  // 保存数据
+  const save = () => {
+    try {      
+        dialogFormRef.value?.validate(async (valid: boolean) => {
+         
+        if (formContent.encryptionFlag === 0) {
+              formContent.series = ''
+              formContent.devKey = ''
+        }
+        if (valid) {
+          formContent.createDate = dayjs(formContent.createDate).format('YYYY-MM-DD');
+          if (AppSceneStore.currentScene === '1') {
+            formContent.name = formContent.createId
+          }
 
-      if (formContent.value.encryptionFlag === 0) {
-        formContent.value.series = ''
-        formContent.value.devKey = ''
-      }
-      if (valid) {
-        formContent.value.createDate = dayjs(formContent.value.createDate).format('YYYY-MM-DD');
-        if (AppSceneStore.currentScene === '1') {
-          formContent.value.name = formContent.value.createId
+        if (formContent.arrivedDate) {
+          formContent.arrivedDate = dayjs(formContent.arrivedDate).format('YYYY-MM-DD');
         }
 
-        if (formContent.value.arrivedDate) {
-          formContent.value.arrivedDate = dayjs(formContent.value.arrivedDate).format('YYYY-MM-DD');
+        if(mode.value == '比对式'){
+          if (formContent.inspectDate) {
+            formContent.inspectDate = dayjs(formContent.inspectDate).format('YYYY-MM-DD');
+          }
+
+          //可检通道转为字符串逗号分隔
+          // 确保 inspectChannel 是数组再执行 join
+         if (Array.isArray(formContent.inspectChannel)) {
+            formContent.inspectChannel = formContent.inspectChannel
+              .map(Number)  // 将值转为数字以保证正确排序
+              .sort((a, b) => a - b)  // 数字升序排序
+              .map(String) // 恢复为字符串用于保存
+              .join(',');
+          }
         }
+       
 
         //保存时判是否加密，把识别码密钥字段清空
-        if (formContent.value.encryptionFlag === 0) {
-          formContent.value.series = null
-          formContent.value.devKey = null
+        if (formContent.encryptionFlag === 0) {
+          formContent.series = null
+          formContent.devKey = null
         }
-
-        if (formContent.value.id) {
-          await updatePqDev(formContent.value);
+  	    formContent.monitorList = monitor.value
+         
+        if (titleType.value  != 'add') {
+          await updatePqDev(formContent);
           ElMessage.success({message: `${dialogTitle.value}成功！`})
         } else {
           // 新增需要把设备模式转成字典ID
-          const patternItem = dictStore.getDictData('Pattern').find(item => item.name === formContent.value.pattern);
+          const patternItem = dictStore.getDictData('Pattern').find(item => item.name === formContent.pattern);
           if (patternItem) {
-            formContent.value.pattern = patternItem.id;
+            formContent.pattern = patternItem.id;
           }
           // 新增需要把通讯协议转成字典ID
-          const protocolItem = dictStore.getDictData('Protocol').find(item => item.name === formContent.value.protocol);
+          const protocolItem = dictStore.getDictData('Protocol').find(item => item.name === formContent.protocol);
           if (protocolItem) {
-            formContent.value.protocol = protocolItem.id;
+            formContent.protocol = protocolItem.id;
           }
-          await addPqDev(formContent.value);
+          await addPqDev(formContent);
           ElMessage.success({message: `${dialogTitle.value}成功！`})
 
         }
@@ -385,92 +454,100 @@ const save = () => {
 
 // 打开弹窗，可能是新增，也可能是编辑
 const open = async (sign: string, data: Device.ResPqDev, currentMode: string, currentScene: string, devType: Device.ResDev[]) => {
+  dialogFormRef.value?.resetFields()
   devTypeOptions.value = devType
   mode.value = currentMode
   scene.value = currentScene
   titleType.value = sign
   dialogVisible.value = true
+  activeTab.value = '0' // 强制回到第一个 tab
 
   if (currentMode === '比对式') {
+    createDateTitle.value = '投运日期'
     DevIsShow.value = false
     MonIsShow.value = true
   } else {
+    createDateTitle.value = '出厂日期'
     DevIsShow.value = true
     MonIsShow.value = false
   }
 
-  if (data.encryptionFlag === 1) {
-    //handleEncryptionChange(1)
-  } else {
-    //handleEncryptionChange(0)
-  }
+
   if (data.id) {
-    formContent.value = {...data}
+    updateDeviceByType(data.devType)
+     Object.assign(formContent,{ ...data })
+     if (typeof formContent.inspectChannel === 'string') {
+          formContent.inspectChannel = formContent.inspectChannel.split(',').filter(Boolean)
+      }
+    
   } else {
     resetFormContent()
-    if (scene.value === '2') {
+    //只有比对式设备ID由前端传
+    if(currentMode === '比对式')
+       formContent.id = generateUUID().replaceAll("-","")
+
+    if(scene.value === '2'){
       const manufacturers = dictStore.getDictData('Dev_Manufacturers');
       const nanjingCanxuan = manufacturers.find(item => item.name === '南京灿能');
       if (nanjingCanxuan) {
-        formContent.value.manufacturer = nanjingCanxuan.id;
+        formContent.manufacturer = nanjingCanxuan.id;
       }
     }
-
-    //handleEncryptionChange(1)
+    // 设置默认设备参数
+    updateDeviceByType('') // 可传空或默认类型
   }
 
-  // 重置表单
-  dialogFormRef.value?.resetFields()
 }
-//   const handleEncryptionChange = (value: number) => {
-//     // 根据是否加密来显示或隐藏识别码和密钥
-//     if(value === 1){
-//         IsPasswordShow.value = true
-//
-//     }else
-//     {
-//          IsPasswordShow.value = false
-//         // formContent.value.series = ''
-//         // formContent.value.devKey = ''
-//         // rules.value.series = [];
-//         // rules.value.devKey = [];
-//     }
-// }
+
+
+
+const updateDeviceByType = (devTypeId: string) => {
+  const dev = devTypeOptions.value.find(t => t.id === devTypeId)
+  if (dev) {
+    formContent.devChns = dev.devChns
+    formContent.devCurr = dev.devCurr
+    formContent.devVolt = dev.devVolt
+    formContent.icdId = dev.icd
+    formContent.power = dev.power
+
+    // 动态设置 pqChannelArray 从 1 到 dev.devChns.length
+    pqChannelArray.value = Array.from({ length: dev.devChns }, (_, i) => ({
+      value: String(i + 1),
+      label: String(i + 1),
+    }))
+  } else {
+    // 默认值处理
+    formContent.devChns = 1
+    formContent.devCurr = 1
+    formContent.devVolt = 57.74
+    pqChannelArray.value = [{ value: '1', label: '1' }]
+  }
+}
 
 const handleDevTypeChange = (value: string) => {
-  // 在这里处理选中事件的逻辑
-  const dev = devTypeOptions.value.find(t => t.id === value)
-  if (dev) {
-    formContent.value.devChns = dev.devChns; // 默认值为1
-    formContent.value.devCurr = dev.devCurr; // 默认值为1
-    formContent.value.devVolt = dev.devVolt; // 默认值为1
-    formContent.value.icdId = dev.icd
-    formContent.value.power = dev.power
-    // if (dev.name.includes('882B')) {
-    //   formContent.value.ip = '172.17.102.220'
-    // } else if (dev.name.includes('882A')) {
-    //   formContent.value.ip = '172.17.102.221'
-    // } else {
-    //   formContent.value.ip = '172.17.102.200'
-    // }
-
-
-  } else {
-    formContent.value.devChns = 1; // 默认值为1
-    formContent.value.devCurr = 1; // 默认值为1
-    formContent.value.devVolt = 57.74; // 默认值为1
-    //formContent.value.ip = '172.17.102.200'
+    updateDeviceByType(value)
+    const maxChannel = formContent.devChns
+  
+    // 过滤掉超出新通道数范围的选项
+    if (Array.isArray(formContent.inspectChannel)) {
+      formContent.inspectChannel = formContent.inspectChannel.filter(
+        (channel) => parseInt(channel, 10) <= maxChannel
+      )
+    }
+    //切换设备类型时，删除超出最大通道数的监测点台账
+    monitor.value = monitor.value.filter(
+        (monitor) => parseInt(monitor.num.toString(), 10) <= maxChannel
+    )
+    formContent.monitorList = monitor.value
   }
 
-}
 
 
 const handleInput = (value: string) => {
   // 在这里处理选中事件的逻辑
   if (scene.value === '1') {
-    formContent.value.name = value
+    formContent.name = value
   }
-
 }
 
 

frontend/src/views/machine/device/components/monitorPopup.vue

@@ -0,0 +1,239 @@
+<template>
+    <!-- 基础信息弹出框 -->
+  <el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogMiddle" @close="close" align-center>
+    <div>
+        <el-form :model="formContent"  ref='dialogFormRef' :rules='rules' class="form-two">
+            <el-form-item label="名称" prop="name" >
+                <el-input v-model='formContent.name' placeholder="请输入监测点名称"/>
+            </el-form-item>
+            <el-form-item label="线路号" prop="num" >
+                <el-select v-model="formContent.num"  clearable placeholder="请选择线路号" @change="handleMonNumChange">
+                     <el-option
+                        v-for="item in lineNum"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                    />
+                </el-select>
+            </el-form-item>   
+             <el-form-item label="所属母线" prop="busbar" placeholder="请输入所属母线" >
+                <el-input v-model="formContent.busbar" />
+            </el-form-item>    
+            <el-form-item label="PT变比" prop="pt" placeholder="请输入PT变比" >
+                <el-input v-model="formContent.pt" />
+            </el-form-item>   
+            <el-form-item label="CT变比" prop="ct" placeholder="请输入CT变比" >
+                <el-input v-model="formContent.ct" />
+            </el-form-item>
+             <el-form-item label='接线方式'  prop='connection' >
+                <el-select v-model="formContent.connection"  clearable placeholder="请选择接线方式">
+                  <el-option
+                      v-for="item in dictStore.getDictData('Dev_Connect')"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label='统计间隔'  prop='statInterval' >
+                <el-select v-model="formContent.statInterval"  clearable placeholder="请选择统计间隔">
+                  <el-option
+                        v-for="item in dictStore.getDictData('Dev_Chns')"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.code"
+                    />
+                </el-select>
+              </el-form-item>
+               <el-form-item label="谐波系统检测点id" prop="harmSysId" placeholder="请输入谐波系统检测点id" >
+                <el-input v-model="formContent.harmSysId" />
+            </el-form-item>   
+        </el-form>
+      </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="close()">取消</el-button>
+        <el-button type="primary" @click="save()" >
+          保存
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  </template>
+  
+  <script lang="ts" setup>
+  import{  ElMessage, type FormInstance,type FormItemRule } from 'element-plus'
+  import type { ProTableInstance } from '@/components/ProTable/interface'
+  import { ref,computed, Ref, toRaw  } from 'vue'
+  import { type Monitor } from '@/api/device/interface/monitor'
+  import {dialogMiddle} from '@/utils/elementBind'
+  import { useDictStore } from '@/stores/modules/dict'
+  import { generateUUID } from '@/utils'
+  import { Device } from '@/api/device/interface/device'
+
+  const dictStore = useDictStore()
+  const lineNum = ref<{ id: number; name: string }[]>([])
+  const originalNum = ref<number | null>(null) // 存储编辑前的 num 值
+  const monitorTable = ref<any[]>()
+  // 定义弹出组件元信息
+  const dialogFormRef = ref()
+ function useMetaInfo() {
+    const dialogVisible = ref(false)
+    const titleType = ref('add')
+    const formContent = ref<Monitor.ResPqMon>({
+        id: '',
+        devId: '',
+        busbar: '',
+        name: '',
+        num: 1,
+        pt: '',
+        ct: '',
+        connection: '',
+        statInterval: 1,
+        harmSysId: '',
+    })
+    return { dialogVisible, titleType, formContent }
+  }
+  
+  const { dialogVisible, titleType, formContent } = useMetaInfo()
+
+
+  const emit = defineEmits(['get-parameter'])
+// 清空formContent
+const resetFormContent = () => {
+    formContent.value = {
+         id: '',
+        devId: '',
+        busbar: '',
+        name: '',
+        num: 1,
+        pt: '',
+        ct: '',
+        connection: '',
+        statInterval: 1,
+        harmSysId: '',
+    }
+  }
+  
+  let dialogTitle = computed(() => {
+    return titleType.value === 'add' ? '新增监测点台账' : '编辑监测点台账'
+  })
+
+  // 关闭弹窗
+  const close = () => {
+      dialogVisible.value = false
+    }
+
+
+   //定义校验规则
+  const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+        name : [{ required: true, message: '监测点名称必填！', trigger: 'blur' }],
+        num:[ { required: true, message: '线路号必选', trigger: 'change' }],
+        pt: [
+            { required: true, message: 'PT变比必填！', trigger: 'blur' },
+             { pattern: /^[1-9]\d*:[1-9]\d*$/, message: 'PT变比格式应为 n:n 形式，例如 1:1', trigger: 'blur' }
+        ],
+        ct: [
+            { required: true, message: 'CT变比必填！', trigger: 'blur' },
+             { pattern: /^[1-9]\d*:[1-9]\d*$/, message: 'CT变比格式应为 n:n 形式，例如 1:1', trigger: 'blur' }
+        ],
+        connection: [{ required: true, message: '接线方式必选！', trigger: 'change' }],
+        busbar : [{ required: true, message: '所属母线必填！', trigger: 'blur' }],
+        harmSysId : [{ required: true, message: '谐波系统检测点id必填！', trigger: 'blur' }],
+  })
+
+  
+  // 保存数据
+  const save = () => {
+    try {
+        dialogFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+           // 校验名称是否重复
+            const isNameDuplicate = monitorTable.value.some(
+              item => item.name === formContent.value.name && item.id !== formContent.value.id
+            )
+
+            if (isNameDuplicate) {
+              ElMessage.error({ message: '监测点名称已存在，请重新输入！' })
+              return
+            }
+
+            if (titleType.value != 'edit') 
+            {
+              formContent.value.id = generateUUID().replaceAll("-","")
+            }
+            emit('get-parameter', formContent.value)
+            ElMessage.success({ message: `${dialogTitle.value}成功！` })
+            close()
+        }
+      })
+    } catch (err) {
+      console.error('验证过程中出现错误', err)
+    }
+  }
+  
+
+
+  // 打开弹窗，可能是新增，也可能是编辑
+  const open = async (sign: string, data: Monitor.ResPqMon,device: Device.ResPqDev,table: any[]) => {
+    // 重置表单
+    //dialogFormRef.value?.resetFields()
+    titleType.value = sign
+    dialogVisible.value = true
+    monitorTable.value = table|| [] 
+      // 提取 table 中已使用的 num（安全处理）
+      const usedNums = new Set<number>()
+      if (table && table.length > 0) {
+        table.forEach(item => {
+          if (item.num != null) {
+            usedNums.add(Number(item.num))
+          }
+        })
+      }
+      
+    lineNum.value = Array.from({ length: device.devChns }, (_, i) => {
+      const id = i + 1;
+      return {
+        id,
+        name: id.toString()
+      };
+    }).filter(item => !usedNums.has(item.id)); // 过滤掉已被使用的线路号
+
+
+    if (sign == 'edit') {
+      formContent.value = { ...data }
+      originalNum.value = data.num // 记录原始线路号
+    } else {
+      resetFormContent()
+      originalNum.value = null
+       // 设置默认选中第一个线路号
+      if (lineNum.value.length > 0) {
+        formContent.value.num = lineNum.value[0].id
+      }
+    }
+     formContent.value.devId = device.id  
+  }
+
+
+
+  const handleMonNumChange = (value: string) => {
+     const newValue = parseInt(value)
+    if (originalNum.value && originalNum.value !== newValue) {
+      // 将原来的 num 添加回 lineNum（表示释放）
+      lineNum.value.push({
+        id: originalNum.value,
+        name: originalNum.value.toString()
+      })
+      //移除新选择的 num（因为已被占用）
+      lineNum.value = lineNum.value.filter(item => item.id !== newValue).sort((a, b) => a.id - b.id)
+
+      // 更新 originalNum 为最新值，以便下次修改
+      originalNum.value = newValue
+    }
+  }
+  
+  // 对外映射
+  defineExpose({ open })
+  
+  </script>

frontend/src/views/machine/device/components/monitorTab.vue

@@ -4,75 +4,189 @@
       <div class='table-box' ref='popupBaseView'>
         <ProTable
           ref='proTable'
+          :pagination="false"
+          :toolButton="false"
           :columns='columns'
-          :style="{ height: '326px',maxHeight: '400px',overflow:'hidden'}"
+          :data="tableData"
+          :style="{ height: '375px',maxHeight: '400px',overflow:'hidden'}"
         >
           <!-- 表格 header 按钮 -->
           <template #tableHeader='scope'>
-            <el-button type='primary' :icon='CirclePlus'>新增</el-button>
-            <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>删除</el-button>
+            <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')" :disabled="props.DevFormContent.importFlag == 1">新增</el-button>
+            <el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
+                     @click='batchDelete(scope.selectedListIds)'>
+            删除
+          </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 #operation="scope">
+            <el-button v-auth.device="'edit'" type='primary' link :icon='EditPen' :model-value='false' :disabled="props.DevFormContent.importFlag == 1"
+                     @click="openDialog('edit', scope.row)">编辑
+            </el-button>
+            <el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row.id)' >删除
+            </el-button>
           </template>
         </ProTable>
       </div>
+       <MonitorPopup @getParameter="getParameter" ref='monitorPopup'/>
     </el-tab-pane>
   </template>
   
   <script setup lang="ts">
-    import { ref, defineProps, reactive } from 'vue';
+    import { ref, defineProps, reactive, watch } 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 { CirclePlus, Delete, EditPen, MessageBox } from '@element-plus/icons-vue';
+
+    import MonitorPopup from '@/views/machine/device/components/monitorPopup.vue'
+    import { ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
     import { type Monitor } from '@/api/device/interface/monitor'
+    import { useDictStore } from '@/stores/modules/dict';
+    import { useHandleData } from '@/hooks/useHandleData';
+    import { Device } from '@/api/device/interface/device';
+    import { ElMessage, ElMessageBox } from 'element-plus';
 
   // 定义 props
-const props = defineProps<{
-  MonIsShow: boolean;
-}>();
+  const props = defineProps<{
+    MonIsShow: boolean;
+    DevFormContent:Device.ResPqDev
+  }>();
 
+ // ProTable 实例
+  const proTable = ref<ProTableInstance>()
+  const dictStore = useDictStore()
+  const monitorPopup = ref()
+  const tableData = ref<any[]>([])
+  const title_Type = ref('add')
 
   // 表格配置项
 const columns = reactive<ColumnProps<Monitor.ResPqMon>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
   { type: 'index', fixed: 'left', width: 70, label: '序号' },
+   {
+    prop: 'name',
+    label: '名称',
+    width: 200,
+  },
   {
-    prop: '',
+    prop: 'busbar',
     label: '所属母线',
     width: 200,
   },
   {
-    prop: '',
-    label: '被检通道',
+    prop: 'num',
+    label: '线路号',
     width: 200,
   },
   {
-    prop: '',
+    prop: 'pt',
     label: 'PT变比',
     width: 110,
   },
   {
-    prop: '',
+    prop: 'ct',
     label: 'CT变比',
     width: 130,
   },
   {
-    prop: '',
+    prop: 'connection',
     label: '接线方式',
+    enum: dictStore.getDictData('Dev_Connect'),
+    fieldNames: {label: 'name', value: 'id'},
     width: 130,
-
   },
   {
-    prop: '',
-    label: '谐波系统监测点ID',
-    minWidth: 250,
+    prop: 'statInterval',
+    label: '统计间隔',
+    width: 130,
   },
   { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
 ])
+
+
+const emit = defineEmits(['get-parameter'])
+
+const getParameter = (data: Monitor.ResPqMon) => {
+  if (title_Type.value === 'edit') {
+    // 编辑：替换已有的数据
+    const index = tableData.value.findIndex(item => item.id === data.id)
+    if (index > -1) {
+      tableData.value = [
+        ...tableData.value.slice(0, index),
+        data,
+        ...tableData.value.slice(index + 1)
+      ]
+    }
+  } else {
+    // 新增：追加数据
+    tableData.value = [...tableData.value, data]
+    
+  }
+
+  emit('get-parameter', tableData.value)
+}
+
+
+ // 打开 drawer(新增、编辑)
+  const openDialog =  (titleType: string, row: Partial<Monitor.ResPqMon> = {}) => {
+      if(props.DevFormContent.devType == '' || props.DevFormContent.devType == undefined){
+            ElMessageBox.confirm(
+                  '请先选择被检设备类型',
+                  '提示',
+                  {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                  },
+            )
+            return
+      }
+       title_Type.value = titleType
+       monitorPopup.value?.open(titleType, row,props.DevFormContent,tableData.value)
+  }
+  
+  
+  // 批量删除监测点台账
+  const batchDelete =  (ids: string[]) => {
+      ElMessageBox.confirm(`是否批量删除监测点?`, "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        draggable: true
+      }).then(async () => {
+        tableData.value = tableData.value.filter(item => !ids.includes(item.id));
+        proTable.value?.clearSelection()
+
+      ElMessage({
+        type: "success",
+        message: `批量删除监测点成功!`
+      });
+  });
+    
+  }
+  
+  // 删除监测点台账
+const handleDelete =  (id: string) => {
+    ElMessageBox.confirm(`是否删除监测点?`, "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        draggable: true
+      }).then(async () => {
+         tableData.value = tableData.value.filter(item => item.id !== id)
+         proTable.value?.clearSelection()
+      ElMessage({
+        type: "success",
+        message: `删除监测点成功!`
+      });
+  });
+}
+
+
+watch(
+  () => props.DevFormContent.monitorList,
+  (newVal) => {
+    tableData.value = newVal|| []
+  },
+  { immediate: true }
+)
+
   </script>