energy_storage/web/src/views/system/policy.vue

<template>
  <div class="policy">
    <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 policyForm from '@/components/system/policyForm.vue'
import {getReq} from '@/request/api'
export default {
  name: '',
  components: { policyForm },
  props: {},
  data() {
    return {
      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: {
    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)
      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;
  .content-table {
  width: 100%;
  height: calc(100% - 92px );
}
}
</style>