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

- 调整设备编号展示位置，解决信息冗余问题 - 优化设备状态展示方式，增加颜色区分 - 改进设备参数展示布局，提高可读性 - 统一模态样式，调整弹窗位置
2026-05-27 18:59:26 +08:00 · 2025-09-12 16:34:29 +08:00
parent 7bb53a6ea6
commit 5e44faee0d
24 changed files with 409 additions and 190 deletions
--- a/web/src/views/MainView.vue
+++ b/web/src/views/MainView.vue
@@ -14,7 +14,7 @@
      </span>
    </div>

-    <div class="page">
+    <div class="page" ref="page">
      <div class="subMenu" v-if="subMenu.length > 0">
        <div
          class="subItem"
@@ -58,7 +58,6 @@ export default {
      currentKey: '',
      subCurrentKey: '',
      menuList: [],
-     
      subMenu: [],
      currentTime: '',
      timer: null,
@@ -94,6 +93,8 @@ export default {
  },

  mounted() {
+    console.log(this.$refs.page.offsetHeight,'============');
+    
    this.getDateTime()
    this.timer = setInterval(() => {
      this.getDateTime()
--- a/web/src/views/monitor.vue
+++ b/web/src/views/monitor.vue
@@ -4,7 +4,7 @@
      <div class="left">
        <div class="search-item">
          <span>场站切换</span>
-          <a-select v-model:value="selectStationId" style="width: 220px" @change="getStationChange">
+          <a-select v-model:value="selectStationId" style="width: 400px" @change="getStationChange">
            <a-select-option v-for="station in stations" :value="station['station_id']"
              >{{ station.name }}
            </a-select-option>
@@ -70,7 +70,7 @@ export default {
        {
          name: '储能系统',
          titles: [
-            { v: '边缘网关', key: 'num' },
+            { v: '边缘网关编号', key: 'num' },
            { v: '总有功功率(台区)', key: 'power', sufix: 'kW' }
          ],
          power: 60,
@@ -114,10 +114,10 @@ export default {
      workMode: '',
      workModes: [
        // 0：手动，1：峰谷套利，2：增网配容，3：应急供电，4：并网保电，5：自定时段
-        {
-          value: 0,
-          label: '手动'
-        },
+        // {
+        //   value: 0,
+        //   label: '手动'
+        // },
        {
          value: 1,
          label: '峰谷套利'
@@ -256,6 +256,9 @@ export default {
        color: #fff;
        padding: 10px 10px;
        cursor: pointer;
+        &:hover{
+          background: $table-bg;
+        }

        .name {
          font-size: 20px;
--- a/web/src/views/predict.vue
+++ b/web/src/views/predict.vue
@@ -49,7 +49,7 @@ export default {
            },
            {
              key: 'W_store_ou',
-              label: '储能放电电量',
+              label: '放电电量',
              seriesOptions:{
                symbol: 'circle',
                symbolSize: 8,
@@ -73,7 +73,7 @@ export default {
     
            {
              key: 'W_charge',
-              label: '运行负荷',
+              label: '充电电量',
              seriesOptions:{
                symbol: 'circle',
                symbolSize: 8,
--- a/web/src/views/system/alarmLog.vue
+++ b/web/src/views/system/alarmLog.vue
@@ -26,7 +26,7 @@
        </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
        :record="formState"
--- a/web/src/views/system/device.vue
+++ b/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>
--- a/web/src/views/system/log.vue
+++ b/web/src/views/system/log.vue
@@ -23,7 +23,7 @@
        </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
        :record="record"
--- a/web/src/views/system/permission.vue
+++ b/web/src/views/system/permission.vue
@@ -30,7 +30,7 @@
        </template>
      </TreeTable>
    </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
        :record="record"
--- a/web/src/views/system/policy.vue
+++ b/web/src/views/system/policy.vue
@@ -24,17 +24,17 @@
      </ComTable>
    </div>
  </div>
-  <div>
+  <!-- <div> -->
    <a-modal
      v-model:open="formModal"
-      width="900px"
-      style="top: 20px;"
+      width="800px"
+      style="top: 80px;height: 600px;"
      :footer="null"
      :get-container="() => $refs.policy"
    >
-      <policyForm :form-state="formState" :form-status="formStatus" @closeModal="closeModal" />
+      <policyForm v-if="formModal" :form-state="formState" :form-status="formStatus" @closeModal="closeModal" />
    </a-modal>
-  </div>
+  <!-- </div> -->
 </template>

 <script>
@@ -236,7 +236,6 @@ export default {
  .content-table {
    width: 100%;
    height: calc(100% - 90px);
-    padding: 0 10px;
  }
 }
 </style>
--- a/web/src/views/system/role.vue
+++ b/web/src/views/system/role.vue
@@ -30,7 +30,7 @@
        </template>
      </ComTable>
    </div>
-    <a-modal v-model:open="formModal" width="950px" style="top: 20px" :footer="null" :destroy-on-close="true">
+    <a-modal v-model:open="formModal" width="950px" style="top: 80px" :footer="null" :destroy-on-close="true">
      <!-- action:edit add -->
      <EditCom
        :show-flag="formModal"
--- a/web/src/views/system/service.vue
+++ b/web/src/views/system/service.vue
@@ -26,7 +26,7 @@
        </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
        :record="record"
--- a/web/src/views/system/station.vue
+++ b/web/src/views/system/station.vue
@@ -31,7 +31,7 @@
        </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
        :record="record"
--- a/web/src/views/system/user.vue
+++ b/web/src/views/system/user.vue
@@ -26,7 +26,7 @@
        </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
        :record="record"