feat(system): 优化系统日志页面布局和功能

- 修改系统日志页面的列配置，增加固定列和对齐方式
- 优化表格组件的样式和功能，支持右列固定和自定义样式
- 调整分页配置，统一表格相关属性

web/src/views/monitor.vue

@@ -15,11 +15,13 @@
         <div class="search-item">
           <span>运行模式</span>
           <a-select v-model:value="workMode" style="width: 220px">
-            <a-select-option :value="item.value" v-for="item in workModes">{{ item.label }}</a-select-option>
+            <a-select-option :value="item.value" v-for="item in workModes">{{
+              item.label
+            }}</a-select-option>
           </a-select>
         </div>
         <div class="search-item">
-          <a-button type="primary">下发</a-button>
+          <a-button type="primary" @click="handleDispatch">下发</a-button>
         </div>
       </div>
     </div>
@@ -33,13 +35,14 @@
           :class="systemType == system.systemType ? 'active' : ''"
         >
           <span class="name">{{ system.name }}</span>
-          <span class="des">边缘网关：{{ system.power }} W</span>
-          <span class="des">总有功功率(台区)：{{ system.num }}</span>
+          <span class="des" v-for="title in system.titles" :key="title.v"
+            >{{ title.v }}：{{ system[title.key] }}{{ title.sufix }}
+          </span>
         </div>
       </div>
       <div class="container">
-        <videos v-if="systemType == 4" :station-id="selectStationId"/>
-        <device v-else :station-id="selectStationId" :system-type="systemType"/>
+        <videos v-if="systemType == 4" :station-id="selectStationId" />
+        <device v-else :station-id="selectStationId" :system-type="systemType" />
       </div>
     </div>
   </div>
@@ -62,10 +65,14 @@ export default {
       systemType: 1,
       value: [],
       stations: [],
-      selectStationId:'',
+      selectStationId: '',
       systems: [
         {
           name: '储能系统',
+          titles: [
+            { v: '边缘网关', key: 'num' },
+            { v: '总有功功率(台区)', key: 'power', sufix: 'kW' }
+          ],
           power: 60,
           num: 62,
           systemType: 1
@@ -74,99 +81,125 @@ export default {
           name: '充电系统',
           power: 60,
           num: 62,
-          systemType: 2
+          systemType: 2,
+          titles: [
+            { v: '总功率', key: 'power', sufix: 'kW' },
+            { v: '数量', key: 'num' }
+          ]
         },
         {
           name: '光伏系统',
           power: 60,
           num: 62,
-          systemType: 3
+          systemType: 3,
+          titles: [
+            { v: '总功率', key: 'power', sufix: 'kW' },
+            { v: '数量', key: 'num' }
+          ]
         },
         {
           name: '安防系统',
           power: 60,
           num: 62,
-          systemType: 4
+          systemType: 4,
+          titles: [
+            { v: '总功率', key: 'power', sufix: 'kW' },
+            { v: '数量', key: 'num' }
+          ]
         }
         // {
         //   name: "储能系统4",
         // }
       ],
-      workMode:'',
-      workModes:[
+      workMode: '',
+      workModes: [
         // 0：手动，1：峰谷套利，2：增网配容，3：应急供电，4：并网保电，5：自定时段
         {
-          value:0,
-          label:'手动'
+          value: 0,
+          label: '手动'
         },
         {
-          value:1,
-          label:'峰谷套利'
+          value: 1,
+          label: '峰谷套利'
         },
         {
-          value:2,
-          label:'增网配容'
+          value: 2,
+          label: '增网配容'
         },
         {
-          value:3,
-          label:'应急供电'
+          value: 3,
+          label: '应急供电'
         },
         {
-          value:4,
-          label:'并网保电'
+          value: 4,
+          label: '并网保电'
         },
         {
-          value:5,
-          label:'自定时段'
+          value: 5,
+          label: '自定时段'
         }
-       
       ],
-      deviceGroup:[]
+      deviceGroup: []
     }
   },
   mounted() {
     this.getStations()
   },
   methods: {
+    //下发
+    async handleDispatch() {
+      console.log(this.workMode)
+      try {
+        const res = await postReq('/updateStation', {
+          station_id: this.selectStationId,
+          work_mode: this.workMode
+        })
+        if (res.errcode == 0) {
+          this.$message.success('下发成功')
+        }
+      } catch (error) {
+        this.$message.error('下发失败')
+      }
+    },
     //场站切换
-    getStationChange(val){
-      console.log(val);
+    getStationChange(val) {
+      console.log(val)
       this.getStationAttr()
-      
     },
     //查询场站列表
     async getStations() {
       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
-        this.selectStationId=this.stations[0]['station_id']
+        this.selectStationId = this.stations[0]['station_id']
         this.getStationAttr()
       } catch (error) {
         this.stations = []
-        this.selectStationId=''
+        this.selectStationId = ''
         this.$message.error(error.message)
       }
     },
     // 查询场站的参数
-    async getStationAttr(){
+    async getStationAttr() {
       try {
         const res = await getReq('/queryStationOverview', { station_id: this.selectStationId })
 
-        res.data.device_group.forEach((Element,index) => {
-          this.systems[index].num=Element.count
-          this.systems[index].power=Element.power
-        });
-        this.workMode=res.data.work_mode
+        res.data.device_group.forEach((Element, index) => {
+          this.systems[index].num = Element.count
+          this.systems[index].power = Element.power
+        })
+        this.workMode = res.data.work_mode
       } catch (error) {
         this.deviceGroup = []
-        this.workMode=''
+        this.workMode = ''
         // this.$message.error(error.errmsg)
       }
     },
 
-    
     chooseStation(system) {
+      console.log(system, 'system')
+
       this.systemType = system.systemType
     }
   }
@@ -176,8 +209,8 @@ export default {
 <style scoped lang="scss">
 @import url(@/style/color.scss);
 .monitor {
-  width: 100%;
-  height: 100%;
+  // width: 100%;
+  height: calc(100% - 40px);
   padding: 20px;
   background: $bg1-color;
   border-radius: 15px;
@@ -207,24 +240,21 @@ export default {
     display: flex;
     justify-content: space-between;
     .stations {
-      min-width: 155px;
-      max-width: 235px;
-      width: 13%;
-      height: 100%;
+      display: grid;
       border-radius: 12px;
       background: $bg2-color;
-      padding: 15px 0;
-      overflow-y: auto;
+      padding-top: 10px;
+      grid-template-rows: repeat(auto-fit, minmax(140px, 4fr));
       .station-item {
-        width: calc(100% - 30px);
-        margin: 0 15px 15px 15px;
+        flex: 1;
+        width: 100px;
+        margin: 0 10px 10px 10px;
         border-radius: 12px;
-        min-width: 150px;
-
+        min-width: 160px;
         display: flex;
         flex-direction: column;
         color: #fff;
-        padding: 10px 15px;
+        padding: 10px 10px;
         cursor: pointer;
 
         .name {
@@ -236,6 +266,11 @@ export default {
           font-size: 14px;
           font-weight: 600;
           line-height: 40px;
+          display: inline-block;
+          max-width: 160px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
       }
       .active {
@@ -243,7 +278,7 @@ export default {
       }
     }
     .container {
-      width: 100%;
+      width: calc(100% - 200px);
       display: flex;
       justify-content: space-between;
     }