feat(system): 优化设备列表展示逻辑

- 调整设备编号展示位置，解决信息冗余问题
- 优化设备状态展示方式，增加颜色区分
- 改进设备参数展示布局，提高可读性
- 统一模态样式，调整弹窗位置

web/src/views/system/device.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="device">
-    <searchBox
-      :btn-option-list="btnOptionList"
-      @operateForm="operateForm"
-    ></searchBox>
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
 
     <div class="content-table">
       <ComTable
@@ -17,10 +14,12 @@
         <template #type="record">
           <span>{{ getType(record.type) }}</span>
         </template>
-         <template #isEnable="record">
-          <span><a-tag :color="record.is_open==1 ? 'green' : 'red'">{{
-                record.is_open==1 ? '启用' : '禁用'
-              }}</a-tag></span>
+        <template #isEnable="record">
+          <span
+            ><a-tag :color="record.is_open == 1 ? 'green' : 'red'">{{
+              record.is_open == 1 ? '启用' : '禁用'
+            }}</a-tag></span
+          >
         </template>
 
         <template #action="record">
@@ -28,13 +27,15 @@
         </template>
       </ComTable>
     </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal v-model:open="formModal" width="750px" style="top: 80px" :footer="null">
       <!-- action:edit add -->
       <EditCom
+        v-if="formModal"
         :record="formState"
         @operateForm="operateForm"
         type="device"
         :action="formStatus"
+        ref="editComRef"
       ></EditCom>
     </a-modal>
   </div>
@@ -50,8 +51,8 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import { createVNode } from 'vue'
 
 import searchBox from '@/components/SearchBox.vue'
-import {deviceTypeList} from '@/utils/config'
-export default { 
+import { deviceTypeList } from '@/utils/config'
+export default {
   name: '',
   components: {
     searchBox,
@@ -72,9 +73,9 @@ export default {
       },
       btnOptionList: [],
       paramsDate: {},
-      tableData:[],
-      tableOption:{},
-      stations:[],//场站列表
+      tableData: [],
+      tableOption: {},
+      stations: [] //场站列表
     }
   },
   computed: {},
@@ -99,23 +100,20 @@ export default {
   methods: {
     //查询场站列表
     async getStations() {
-      this.stations=[]
+      this.stations = []
       try {
-        const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
+        const res = await getReq('/queryStationList', { page: 0, page_size: 10000 })
 
         this.stations = res.data
-        
       } catch (error) {
         this.stations = []
-        
       }
-      return 
+      return
     },
     //获取设备类型
-    getType(type){
-      const deviceType = this.deviceTypeList.find((item) => item.value == type).label||''
+    getType(type) {
+      const deviceType = this.deviceTypeList.find((item) => item.value == type).label || ''
       return deviceType
-      
     },
     async getList() {
       this.$refs.comTable.loading = true
@@ -150,25 +148,24 @@ export default {
     },
     async operateForm(type, record = {}) {
       this.formStatus = type
-      if(type=='add'){
+      if (type == 'add') {
         this.formModal = true
         this.formState = {}
         this.getRuleFormInfo()
-      }else if(type=='edit'||type=='read'){ 
+      } else if (type == 'edit' || type == 'read') {
         await this.getRuleFormInfo(record)
 
         this.formModal = true
         this.formState = record
-      }else if(type=='del'){
-        this.handleDelete([record.device_id],this.getList)
-      }else if(type=='back'){
+      } else if (type == 'del') {
+        this.handleDelete([record.device_id], this.getList)
+      } else if (type == 'back') {
         this.formModal = false
         this.getList()
       }
-      
     },
     //  删除操作
-    async handleDelete(id,callback) {
+    async handleDelete(id, callback) {
       const that = this
       this.$Modal.confirm({
         title: '你确认删除数据吗?',
@@ -176,10 +173,10 @@ export default {
 
         async onOk() {
           try {
-            const res = await getReq('/deleteDevice',{device_id:id})
+            const res = await getReq('/deleteDevice', { device_id: id })
             if (res.errcode === 0) {
               this.$message.success(res.errmsg)
-              this.pageOption.page=1
+              this.pageOption.page = 1
               callback()
             } else {
               throw res
@@ -188,14 +185,11 @@ export default {
             callback()
           }
         },
-        onCancel() {
-        },
+        onCancel() {},
         class: 'test'
       })
     },
     async getRuleFormInfo(record) {
-      
-
       const row = record || {}
 
       for (let e of deviceOptions) {
@@ -209,14 +203,12 @@ export default {
           }
 
           if (i.key === 'station_id') {
-            i.list =  this.stations
+            i.list = this.stations
           }
-          if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
-            const attrs=JSON.parse(row.attrs||"{}")
+          if (['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)) {
+            const attrs = JSON.parse(row.attrs || '{}')
             e.ruleForm[i.key] = attrs[i.key]
           }
-          
-
         }
       }
     },
@@ -237,7 +229,6 @@ export default {
   .content-table {
     width: 100%;
     height: calc(100% - 90px);
-    padding: 0 10px;
   }
 }
 </style>