feat(system): 新增峰谷套利策略功能

- 实现了峰谷套利策略的添加、编辑和查看功能
- 添加了自定义时段类型策略
- 优化了策略列表展示和操作
- 调整了表单样式和布局

web/src/views/system/policy.vue

@@ -2,7 +2,6 @@
   <div class="policy">
     <searchBox :btn-option-list="btnOptionList" @onSearch="onSearch" @operateForm="operateForm" />
     <div class="content-table">
-       
       <ComTable
         :columns="columns"
         :table-data="tableData"
@@ -12,37 +11,60 @@
         :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>
+        <template #type="record">
+          <div>{{ getPolicyType(record.type) }}</div>
+        </template>
+        <template #isOpen="record">
+          <a-tag :color="record.is_open == 1 ? '#2db7f5' : '#f50'">{{
+            record.is_open == 1 ? '启用' : '禁用'
+          }}</a-tag>
+        </template>
+        <template #action="record">
+          <a-button
+            type="primary"
+            size="small"
+            @click="operateForm('read', record)"
+            style="margin-left: 10px"
+            >查看</a-button
+          >
+          <a-button
+            type="primary"
+            size="small"
+            @click="operateForm('edit', record)"
+            class="btn-edit"
+            style="margin-left: 10px"
+            >修改</a-button
+          >
+          <a-button
+            type="primary"
+            size="small"
+            @click="operateForm('del', record)"
+            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 v-model:open="formModal"  width="70%" style="top: 20px" :footer="null">
+      <policyForm :form-state="formState" :form-status="formStatus" @closeModal="closeModal"/>
     </a-modal>
   </div>
 </template>
 
 <script>
 import policyForm from '@/components/system/policyForm.vue'
-import {getReq} from '@/request/api'
+import { getReq } from '@/request/api'
+import { policyTypes } from '@/utils/config'
 export default {
   name: '',
   components: { policyForm },
   props: {},
   data() {
     return {
-      formModal:true,
+      formModal: false,
       btnOptionList: [
         { label: '新增', icon: 'icon-tianjia', type: 'add' },
         { label: '删除', icon: 'icon-tianjia', type: 'del' }
@@ -50,7 +72,7 @@ export default {
       columns: [
         {
           title: '策略ID',
-          dataIndex: 'policyId',
+          dataIndex: 'policy_id',
           key: 'policyId',
           width: 120,
           ellipsis: true
@@ -64,7 +86,7 @@ export default {
         },
         {
           title: '策略类型',
-          dataIndex: 'type',//策略类型：1：削峰套利；2：需求响应；3：自发自用
+          dataIndex: 'type', //策略类型：1：削峰套利；2：需求响应；3：自发自用
           key: 'type',
           width: 120,
           ellipsis: true,
@@ -81,18 +103,18 @@ export default {
           title: '策略参数',
           dataIndex: 'value',
           key: 'value',
-          width: 120,
+          width: 200,
           ellipsis: true
         },
         {
           title: '是否启用',
-          dataIndex: 'isOpen',
+          dataIndex: 'is_open',
           key: 'isOpen',
           width: 120,
           ellipsis: true,
           scopedSlots: { customRender: 'isOpen' }
         },
-    
+
         {
           title: '操作',
           dataIndex: 'action',
@@ -102,92 +124,62 @@ export default {
           scopedSlots: { customRender: 'action' }
         }
       ],
-      tableData:[{
-        policyId: 'P001',
-        name: '峰谷套利策略',
-        type: 1, // 削峰套利
-        describe: '利用峰谷电价差进行储能充放电优化',
-        value: '峰时段: 08:00-22:00, 谷时段: 22:00-08:00',
-        isOpen: true,
-        action: 'edit|delete'
+      tableData: [],
+      tableOption: {},
+      pageOption: {
+        page: 0,
+        pageSize: 10,
+        total: 0
       },
-      {
-        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:''
+      tableH: '',
+      formState: {},
+      formStatus:'add',//表单状态辑状态 add:新增 edit:编辑
     }
   },
   mounted() {
     this.getTableList()
   },
   methods: {
-    async getTableList(){
+    async getTableList() {
       try {
         const res = await getReq('/queryPolicyList', {
           page: this.pageOption.page,
-          'page_size': this.pageOption.pageSize
+          page_size: this.pageOption.pageSize
         })
+        console.log(res)
+        this.tableData = res.data
+        this.total = res.count
       } catch (error) {
-        console.log(error);
-        
-        
+        console.log(error)
       }
     },
-    handleOk(){
-      this.formModal=false
+    getPolicyType(type) {
+      
+      return policyTypes.find((item) => item.value == type)?.label || ''
     },
+
     onSearch(data) {
       console.log(data)
     },
-    operateForm(type) {
-      console.log(type)
-      switch (type){
+    operateForm(type, record = {}) {
+      
+      this.formStatus = type
+      switch (type) {
       case 'add':
-        this.formModal= true
-        break;
-      
+        this.formModal = true
+        this.formState = {}
+        break
+      case 'read':
+        this.formModal = true
+        this.formState = record
+        break
+
       default:
-        break;
+        break
       }
-      
+    },
+    closeModal(){
+      this.formModal = false
     },
     handlePagesizeChange(data) {
       console.log(data)
@@ -202,8 +194,8 @@ export default {
   height: 100%;
   padding: 0 15px;
   .content-table {
-  width: 100%;
-  height: calc(100% - 92px );
-}
+    width: 100%;
+    height: calc(100% - 92px);
+  }
 }
 </style>