feat(web): 新增设备管理功能

- 新增设备管理页面和相关功能

web/src/views/monitor.vue

@@ -4,7 +4,7 @@
       <div class="left">
         <div class="search-item">
           <span>场站切换</span>
-          <a-select v-model:value="selectStation" style="width: 220px">
+          <a-select v-model:value="selectStationId" style="width: 220px" @change="getStationChange">
             <a-select-option v-for="station in stations" :value="station['station_id']"
               >{{ station.name }}
             </a-select-option>
@@ -14,8 +14,8 @@
       <div class="right">
         <div class="search-item">
           <span>运行模式</span>
-          <a-select v-model:value="value" style="width: 220px">
-            <a-select-option value="lucy">Lucy</a-select-option>
+          <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>
         </div>
         <div class="search-item">
@@ -38,8 +38,8 @@
         </div>
       </div>
       <div class="container">
-        <videos v-if="systemType == 4" />
-        <device v-else :station-id="selectStation" :system-type="systemType"/>
+        <videos v-if="systemType == 4" :station-id="selectStationId"/>
+        <device v-else :station-id="selectStationId" :system-type="systemType"/>
       </div>
     </div>
   </div>
@@ -62,7 +62,7 @@ export default {
       systemType: 1,
       value: [],
       stations: [],
-      selectStation:'',
+      selectStationId:'',
       systems: [
         {
           name: '储能系统',
@@ -91,27 +91,80 @@ export default {
         // {
         //   name: "储能系统4",
         // }
-      ]
+      ],
+      workMode:'',
+      workModes:[
+        // 0：手动，1：峰谷套利，2：增网配容，3：应急供电，4：并网保电，5：自定时段
+        {
+          value:0,
+          label:'手动'
+        },
+        {
+          value:1,
+          label:'峰谷套利'
+        },
+        {
+          value:2,
+          label:'增网配容'
+        },
+        {
+          value:3,
+          label:'应急供电'
+        },
+        {
+          value:4,
+          label:'并网保电'
+        },
+        {
+          value:5,
+          label:'自定时段'
+        }
+       
+      ],
+      deviceGroup:[]
     }
   },
   mounted() {
     this.getStations()
   },
   methods: {
+    //场站切换
+    getStationChange(val){
+      console.log(val);
+      this.getStationAttr()
+      
+    },
     //查询场站列表
     async getStations() {
       try {
         const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
 
-        console.log(res)
         this.stations = res.data
-        this.selectStation=this.stations[0]['station_id']
+        this.selectStationId=this.stations[0]['station_id']
+        this.getStationAttr()
       } catch (error) {
         this.stations = []
-        this.selectStation=''
+        this.selectStationId=''
         this.$message.error(error.message)
       }
     },
+    // 查询场站的参数
+    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
+      } catch (error) {
+        this.deviceGroup = []
+        this.workMode=''
+        // this.$message.error(error.errmsg)
+      }
+    },
+
     
     chooseStation(system) {
       this.systemType = system.systemType
@@ -166,6 +219,7 @@ export default {
         width: calc(100% - 30px);
         margin: 0 15px 15px 15px;
         border-radius: 12px;
+        min-width: 150px;
 
         display: flex;
         flex-direction: column;
@@ -189,8 +243,9 @@ export default {
       }
     }
     .container {
-      width: 87%;
+      width: 100%;
       display: flex;
+      justify-content: space-between;
     }
   }
 }