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

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

web/src/components/monitor/device.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="device">
-    <div class="device-item" v-for="item in 8" :key="item">
+    <div class="device-item" v-for="item in deviceList" :key="item">
       <div class="item-header">
-        <div style="display: flex;width: 50%;">
+        <div style="display: flex; width: 50%">
           <div class="icon-bg"></div>
           <div class="title">
             <span class="number">521245786665412</span>
@@ -29,12 +29,18 @@
       <div class="item-content">
         <div v-for="info in chunengInfo" :key="info.key">
           <span class="text">{{ info.label }}：</span>
-          <a-button v-if="info.key === 'realTimeData'" type="primary" size="small" @click="openModal">查看</a-button>
-          <span v-else class="value" >{{ info.value }}</span>
+          <a-button
+            v-if="info.key === 'realTimeData'"
+            type="primary"
+            size="small"
+            @click="openModal"
+            >查看</a-button
+          >
+          <span v-else class="value">{{ info.value }}</span>
         </div>
       </div>
     </div>
-     <a-modal v-model:open="modalOpen"  @ok="handleOk" width="800px">
+    <a-modal v-model:open="modalOpen" @ok="handleOk" width="800px">
       <!-- <p>Some contents...</p>
       <p>Some contents...</p>
       <p>Some contents...</p> -->
@@ -43,16 +49,27 @@
 </template>
 
 <script>
+import { postReq, getReq } from '@/request/api'
 export default {
   name: '',
   components: {},
-  props: {},
+  props: {
+    stationId: {
+      type: String,
+      default: ''
+    },
+    systemType: {
+      type: Number,
+      default: 1
+    }
+  },
   data() {
     return {
-      modalOpen:false,
+      modalOpen: false,
+      deviceList: [],
       chunengInfo: [
-        {label:'运行模式',key:'operationMode',value:'并网运行'},
-        {label:'电池储能容量',key:'batteryCapacity',value:'100kWh'},
+        { label: '运行模式', key: 'operationMode', value: '并网运行' },
+        { label: '电池储能容量', key: 'batteryCapacity', value: '100kWh' },
         { label: '实时电压', key: 'voltage', value: '232.5V' },
         { label: '功率因数', key: 'powerFactor', value: '0.95' },
         { label: '实时电流', key: 'current', value: '0.01A' },
@@ -62,26 +79,48 @@ export default {
         { label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
         { label: '额定功率', key: 'ratedPower', value: '0.01kW' },
         { label: '冷却方式', key: 'coolingMethod', value: '风冷' }
-    
-      ],
-    //   guangfuInfo: [
-    //     { label: '实时电压', key: 'voltage', value: '232.5V' },
-    //     { label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
-    //     { label: '实时电流', key: 'current', value: '0.01A' },
-    //     { label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
-    //     { label: '实时功率', key: 'power', value: '0.01kW' },
-    //     { label: '额定功率', key: 'ratedPower', value: '0.01kW' },
-    //     { label: '实时数据', key: 'realTimeData', value: '0.01kWh' }
-    //   ]
+      ]
     }
   },
-  mounted() {},
-  methods: {
-    openModal(){
-      this.modalOpen=true;
+  watch: {
+    // 监听父组件数据变化
+    stationId(newVal) {
+      if (newVal) {
+        this.getDeviceList()
+      }
     },
-    handleOk(){
-      this.modalOpen=false;
+    systemType(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.getDeviceList()
+      }
+    }
+  },
+  mounted() {
+    this.getDeviceList()
+  },
+  methods: {
+    async getDeviceList() {
+      const data = {
+        category: this.systemType,
+        'station_id': this.stationId,
+        page: 0,
+        'page_size': 1000
+      }
+      try {
+        const res = await getReq('/queryDeviceList', data)
+
+        console.log(res)
+        this.deviceList = res.data
+        // this.selectStation=this.stations[0]['station_id']
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    openModal() {
+      this.modalOpen = true
+    },
+    handleOk() {
+      this.modalOpen = false
     }
   }
 }