feat(web): 新增预测管理和策略表单功能

- 添加预测管理页面和相关组件
- 实现策略表单组件，支持创建和编辑策略
- 优化表格组件，增加分页和数据加载功能
- 调整视频监控组件布局
- 修复部分组件样式问题

web/src/views/monitor.vue

@@ -4,36 +4,43 @@
       <div class="left">
         <div class="search-item">
           <span>场站切换</span>
-          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+          <a-select v-model:value="selectStation" style="width: 220px">
+            <a-select-option v-for="station in stations" :value="station['station_id']"
+              >{{ station.name }}
+            </a-select-option>
+          </a-select>
         </div>
       </div>
       <div class="right">
         <div class="search-item">
           <span>运行模式</span>
-          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+          <a-select v-model:value="value" style="width: 220px">
+            <a-select-option value="lucy">Lucy</a-select-option>
+          </a-select>
         </div>
         <div class="search-item">
-          <span>策略名称</span>
-          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
-        </div>
-        <div class="search-item">
-          <a-button type="primary">调控</a-button>
+          <a-button type="primary">下发</a-button>
         </div>
       </div>
     </div>
     <div class="content">
       <div class="stations">
-        <div class="station-item" v-for="station in stations" :key="station.name" @click="()=>currentKey=station.name" :class="currentKey==station.name?'active':''">
-          <span class="name">{{ station.name }}</span>
-          <span class="des">总功率：{{ station.power }} W</span>
-          <span class="des">数量：{{ station.num }}</span>
+        <div
+          class="station-item"
+          v-for="system in systems"
+          :key="system.name"
+          @click="chooseStation(system)"
+          :class="systemType == system.systemType ? 'active' : ''"
+        >
+          <span class="name">{{ system.name }}</span>
+          <span class="des">边缘网关：{{ system.power }} W</span>
+          <span class="des">总有功功率(台区)：{{ system.num }}</span>
         </div>
       </div>
       <div class="container">
-        <device v-if="stationType" />
-        <videos v-else />
+        <videos v-if="systemType == 4" />
+        <device v-else :station-id="selectStation" :system-type="systemType"/>
       </div>
-      
     </div>
   </div>
 </template>
@@ -41,6 +48,7 @@
 <script>
 import device from '@/components/monitor/device.vue'
 import videos from '@/components/monitor/videos.vue'
+import { postReq, getReq } from '@/request/api'
 
 export default {
   name: 'MonitorView',
@@ -50,63 +58,64 @@ export default {
   },
   data() {
     return {
-      currentKey:'储能系统1',
-      stationType: 1,
+      // currentKey: '储能系统',
+      systemType: 1,
       value: [],
-      options: [
+      stations: [],
+      selectStation:'',
+      systems: [
         {
-          value: 'zhejiang',
-          label: 'Zhejiang',
-          children: [
-            {
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [
-                {
-                  value: 'xihu',
-                  label: 'West Lake'
-                }
-              ]
-            }
-          ]
+          name: '储能系统',
+          power: 60,
+          num: 62,
+          systemType: 1
         },
         {
-          value: 'jiangsu',
-          label: 'Jiangsu',
-          children: [
-            {
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [
-                {
-                  value: 'zhonghuamen'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      stations: [
-        {
-          name: '储能系统1',
+          name: '充电系统',
           power: 60,
-          num: 62
+          num: 62,
+          systemType: 2
         },
         {
-          name: '储能系统2',
+          name: '光伏系统',
           power: 60,
-          num: 62
+          num: 62,
+          systemType: 3
+        },
+        {
+          name: '安防系统',
+          power: 60,
+          num: 62,
+          systemType: 4
         }
         // {
-        //   name: "储能系统3",
-        //   power: 60,
-        //   num: 62
-        // },
-        // {
         //   name: "储能系统4",
         // }
       ]
     }
+  },
+  mounted() {
+    this.getStations()
+  },
+  methods: {
+    //查询场站列表
+    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']
+      } catch (error) {
+        this.stations = []
+        this.selectStation=''
+        this.$message.error(error.message)
+      }
+    },
+    
+    chooseStation(system) {
+      this.systemType = system.systemType
+    }
   }
 }
 </script>
@@ -157,12 +166,12 @@ export default {
         width: calc(100% - 30px);
         margin: 0 15px 15px 15px;
         border-radius: 12px;
-        
+
         display: flex;
         flex-direction: column;
         color: #fff;
         padding: 10px 15px;
-          cursor: pointer;
+        cursor: pointer;
 
         .name {
           font-size: 20px;
@@ -175,13 +184,13 @@ export default {
           line-height: 40px;
         }
       }
-      .active{
+      .active {
         background: $bg3-color;
       }
     }
     .container {
-        width: 87%;
-        display: flex;
+      width: 87%;
+      display: flex;
     }
   }
 }