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

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

web/src/views/system/policy.vue

@@ -1,46 +1,209 @@
 <template>
   <div class="policy">
-<searchBox :btn-option-list="btnOptionList" @onSearch="onSearch" @operateForm="operateForm"/>
+    <searchBox :btn-option-list="btnOptionList" @onSearch="onSearch" @operateForm="operateForm" />
+    <div class="content-table">
+       
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+      <template #type="record"> 
+        <div>{{record.type}}</div>
+       
+      </template>
+      <template #action >
+        <a-button  type="primary" size="small" @click="operateForm('edit')" style="margin-left: 10px">查看</a-button>
+        <a-button type="primary" size="small" @click="operateForm('edit')" class="btn-edit" style="margin-left: 10px">修改</a-button>
+        <a-button  type="primary" size="small" @click="operateForm('edit')" class="btn-del" style="margin-left: 10px">删除</a-button>
+
+        
+    </template>
+    </ComTable>
+    </div>
+  </div>
+  <div>
+    <a-modal v-model:open="formModal"  @ok="handleOk" width="70%">
+      <policyForm/>
+    </a-modal>
   </div>
 </template>
 
 <script>
-import searchBox from '@/components/SearchBox.vue'
+import policyForm from '@/components/system/policyForm.vue'
+import {getReq} from '@/request/api'
 export default {
   name: '',
-  components:{searchBox
-  },
-  props: {
-
-  },
-  data() { 
+  components: { policyForm },
+  props: {},
+  data() {
     return {
-      btnOptionList:[
-        {label:'新增',icon:'icon-tianjia',type:'add'},
-        {label:'删除',icon:'icon-tianjia',type:'del'}
-
-      ]
+      formModal:true,
+      btnOptionList: [
+        { label: '新增', icon: 'icon-tianjia', type: 'add' },
+        { label: '删除', icon: 'icon-tianjia', type: 'del' }
+      ],
+      columns: [
+        {
+          title: '策略ID',
+          dataIndex: 'policyId',
+          key: 'policyId',
+          width: 120,
+          ellipsis: true
+        },
+        {
+          title: '策略名称',
+          dataIndex: 'name',
+          key: 'name',
+          width: 120,
+          ellipsis: true
+        },
+        {
+          title: '策略类型',
+          dataIndex: 'type',//策略类型：1：削峰套利；2：需求响应；3：自发自用
+          key: 'type',
+          width: 120,
+          ellipsis: true,
+          scopedSlots: { customRender: 'type' }
+        },
+        {
+          title: '策略描述',
+          dataIndex: 'describe',
+          key: 'describe',
+          width: 120,
+          ellipsis: true
+        },
+        {
+          title: '策略参数',
+          dataIndex: 'value',
+          key: 'value',
+          width: 120,
+          ellipsis: true
+        },
+        {
+          title: '是否启用',
+          dataIndex: 'isOpen',
+          key: 'isOpen',
+          width: 120,
+          ellipsis: true,
+          scopedSlots: { customRender: 'isOpen' }
+        },
+    
+        {
+          title: '操作',
+          dataIndex: 'action',
+          key: 'action',
+          width: 150,
+          ellipsis: true,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      tableData:[{
+        policyId: 'P001',
+        name: '峰谷套利策略',
+        type: 1, // 削峰套利
+        describe: '利用峰谷电价差进行储能充放电优化',
+        value: '峰时段: 08:00-22:00, 谷时段: 22:00-08:00',
+        isOpen: true,
+        action: 'edit|delete'
+      },
+      {
+        policyId: 'P002',
+        name: '需求响应策略',
+        type: 2, // 需求响应
+        describe: '参与电网调峰的需求侧响应方案',
+        value: '响应阈值: 80%, 持续时间: 2小时',
+        isOpen: false,
+        action: 'edit|delete'
+      },
+      {
+        policyId: 'P003',
+        name: '光伏自发自用',
+        type: 3, // 自发自用
+        describe: '优先使用光伏发电，余电上网',
+        value: '自用比例: 90%, 上网比例: 10%',
+        isOpen: true,
+        action: 'edit|delete'
+      },
+      {
+        policyId: 'P004',
+        name: '工业削峰策略',
+        type: 1, // 削峰套利
+        describe: '通过储能系统平抑工业用电高峰',
+        value: '削峰容量: 500kWh, 持续时间: 4小时',
+        isOpen: true,
+        action: 'edit|delete'
+      },
+      {
+        policyId: 'P005',
+        name: '商业综合体响应',
+        type: 2, // 需求响应
+        describe: '商业建筑参与电网需求响应',
+        value: '可中断负荷: 200kW, 响应次数: 3次/月',
+        isOpen: false,
+        action: 'edit|delete'
+      }],
+      tableOption:{},
+      pageOption:{
+        page:1,
+        pageSize:10,
+      },
+      tableH:''
     }
   },
   mounted() {
-
+    this.getTableList()
   },
-  methods:{
-    onSearch(data){
+  methods: {
+    async getTableList(){
+      try {
+        const res = await getReq('/queryPolicyList', {
+          page: this.pageOption.page,
+          'page_size': this.pageOption.pageSize
+        })
+      } catch (error) {
+        console.log(error);
+        
+        
+      }
+    },
+    handleOk(){
+      this.formModal=false
+    },
+    onSearch(data) {
       console.log(data)
     },
-    operateForm(type){
-      console.log(type  )
-
+    operateForm(type) {
+      console.log(type)
+      switch (type){
+      case 'add':
+        this.formModal= true
+        break;
+      
+      default:
+        break;
+      }
+      
     },
+    handlePagesizeChange(data) {
+      console.log(data)
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.policy{
-    width: 100%;
-    height: 100%;
-    padding: 0 15px;
+.policy {
+  width: 100%;
+  height: 100%;
+  padding: 0 15px;
+  .content-table {
+  width: 100%;
+  height: calc(100% - 92px );
 }
-</style>
+}
+</style>