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
     }
   }
 }

web/src/components/monitor/videos.vue

@@ -21,35 +21,26 @@
     </div>
   </div>
   <div class="environment">
-    <div class="item">
-      <div class="title">环境温湿度信息</div>
-      <img src="@/assets/images/titleLine.png" alt="" width="100%" />
-      <div class="content">
-        <div class="header">
-          <div>点位</div>
-          <div>温度</div>
-          <div>湿度</div>
-        </div>
-        <div class="row">
-          <div>#1</div>
-          <div>20 ℃</div>
-          <div>20%</div>
-        </div>
+    <div class="tab-header">
+      <div v-for="item in tabList" :key="item.key" class="tab">
+        <span
+          :class="[activeTab == item.key ? 'actived' : 'uactived']"
+          @click="activeTab = item.key"
+          >{{ item.name }}</span
+        >
       </div>
     </div>
-    <div class="item" style="margin-top: 40px">
-      <div class="title">消防信息</div>
-      <img src="@/assets/images/titleLine.png" alt="" width="100%" />
-      <div class="content">
-        <div class="header">
-          <div>点位</div>
-          <div>烟感状态</div>
-        </div>
-        <div class="row" v-for="value in 6" :key="value">
-          <div>#{{ value }}</div>
-          <div>xxx</div>
-        </div>
-      </div>
+    <div class="table-content">
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+      </ComTable>
     </div>
   </div>
 </template>
@@ -60,7 +51,51 @@ export default {
   components: {},
   props: {},
   data() {
-    return {}
+    return {
+      activeTab: '0',
+      tabList: [
+        {
+          key: '0',
+          name: '环境温湿度信息'
+        },
+        {
+          key: '1',
+          name: '安防信息'
+        },
+        {
+          key: '2',
+          name: '空调信息'
+        },
+        {
+          key: '3',
+          name: '冷机信息'
+        }
+      ],
+      columns: [
+        {
+          title: '点位',
+          dataIndex: 'policyId',
+          key: 'policyId',
+          ellipsis: true
+        },
+        {
+          title: '温度',
+          dataIndex: 'name',
+          key: 'name',
+          ellipsis: true
+        },
+        {
+          title: '湿度',
+          dataIndex: 'type',
+          key: 'type',
+          ellipsis: true
+        }
+      ],
+      tableOption: {
+        select: false,
+        page: false
+      }
+    }
   },
   mounted() {},
   methods: {}
@@ -69,11 +104,11 @@ export default {
 
 <style lang="scss" scoped>
 .videos {
-  width: calc(100% - 240px);
+  width: 60%;
   margin-left: 20px;
   display: grid;
   grid-gap: 20px;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
   overflow-y: auto;
   .video-item {
     // width: 410px;
@@ -95,9 +130,10 @@ export default {
   }
 }
 .environment {
-  width: 220px;
-  margin-left: 10px;
+  width: calc(40% - 20px);
+  margin-left: 20px;
   color: #fff;
+
   .title {
     font-size: 24px;
     font-weight: 700;
@@ -125,5 +161,39 @@ export default {
       }
     }
   }
+  .tab-header {
+    display: flex;
+
+    .tab {
+      & > span {
+        font-size: 14px;
+        margin-right: 15px;
+        display: inline-block;
+        padding: 10px;
+        cursor: pointer;
+        border: 1px solid $tab-border;
+        border-radius: 4px;
+      }
+    }
+    .actived {
+      color: #ffffff;
+
+      background-color: $green;
+    }
+    .uactived {
+      color: #a6b8dd;
+      background-color: $bg2-color;
+    }
+  }
+  .table-content {
+    margin-top: 20px;
+    :deep(.ant-table) {
+      border-radius: 10px 10px 0 0 !important;
+      overflow: hidden; /* 确保圆角生效 */
+    }
+    :deep(.ant-table-body) {
+      border-radius: 0px 0px 10px 10px !important;
+    }
+  }
 }
 </style>