mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
feat(system): 新增峰谷套利策略功能
- 实现了峰谷套利策略的添加、编辑和查看功能 - 添加了自定义时段类型策略 - 优化了策略列表展示和操作 - 调整了表单样式和布局
This commit is contained in:
zhoumengru
BIN
doc/.~充站控系统-HTTP管理接口.docx
Normal file
BIN
doc/.~充站控系统-HTTP管理接口.docx
Normal file
Binary file not shown.
@@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_di79okor5xs.css" />
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_ev88efo2nou.css" />
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<!-- eslint-disable camelcase -->
|
||||
<template>
|
||||
<div class="policyForm">
|
||||
<div class="title">
|
||||
<div>基础信息</div>
|
||||
<div>基础信息{{ formStatus }}</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" />
|
||||
</div>
|
||||
<a-form
|
||||
@@ -9,37 +10,83 @@
|
||||
layout="inline"
|
||||
label-align="left"
|
||||
:label-col="{ style: { width: '85px' } }"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<a-form-item label="名称" class="col2">
|
||||
<a-input v-model:value="formState.name" />
|
||||
<a-form-item label="名称" class="col2" name="name">
|
||||
<a-input v-model:value="formData.name" :disabled="formStatus == 'read'" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="类型" class="col2">
|
||||
<a-select v-model:value="formState.type" placeholder="">
|
||||
<a-form-item label="类型" class="col2" name="type">
|
||||
<a-select
|
||||
v-model:value="formData.type"
|
||||
placeholder=""
|
||||
:disabled="formStatus == 'read'"
|
||||
@change="changePolicy"
|
||||
>
|
||||
<a-select-option v-for="item in policyTypes" :value="item.value">{{
|
||||
item.label
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="低谷电价" class="col4">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
<a-form-item label="低谷电价" class="col4" required>
|
||||
<a-input-number
|
||||
:precision="2"
|
||||
v-model:value="formData.price[0]"
|
||||
suffix="元/kWh"
|
||||
:disabled="formStatus == 'read'"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="平段电价" class="col4">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
<a-form-item label="平段电价" class="col4" required>
|
||||
<a-input-number
|
||||
:precision="2"
|
||||
v-model:value="formData.price[1]"
|
||||
suffix="元/kWh"
|
||||
:disabled="formStatus == 'read'"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="高峰电价" class="col4">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
<a-form-item label="高峰电价" class="col4" required>
|
||||
<a-input-number
|
||||
:precision="2"
|
||||
v-model:value="formData.price[2]"
|
||||
suffix="元/kWh"
|
||||
:disabled="formStatus == 'read'"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="尖峰电价" class="col4">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
<a-form-item label="尖峰电价" class="col4" required>
|
||||
<a-input-number
|
||||
:precision="2"
|
||||
v-model:value="formData.price[3]"
|
||||
suffix="元/kWh"
|
||||
:disabled="formStatus == 'read'"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="时段表" class="col1">
|
||||
<a-table :columns="columns" :data-source="data" size="small">
|
||||
<a-form-item label="时段表" class="col1" v-if="formData.type == '1'">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="formData.period"
|
||||
size="small"
|
||||
:scroll="{ y: 500 }"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<span>
|
||||
<!-- <a-button type="primary" @click="handleAdd" :disabled="formStatus == 'read'">Add</a-button> -->
|
||||
<i
|
||||
class="iconfont icon-add"
|
||||
@click="handleAdd"
|
||||
:disabled="formStatus == 'read'"
|
||||
style="cursor: pointer"
|
||||
></i>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<span>
|
||||
@@ -49,80 +96,141 @@
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form-item>
|
||||
<div v-if="formData.type == 5">
|
||||
<a-form-item label="充放策略" class="col1">
|
||||
<a-radio-group v-model:value="formState.resource">
|
||||
<a-radio value="1">一充一放</a-radio>
|
||||
<a-radio value="2">两充两放</a-radio>
|
||||
<a-radio-group
|
||||
v-model:value="formData.chargePolicy"
|
||||
:disabled="formStatus == 'read'"
|
||||
name="chargePolicy"
|
||||
>
|
||||
<a-radio :value="1">一充一放</a-radio>
|
||||
<a-radio :value="2">两充两放</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="" class="col1">
|
||||
<div class="charge">
|
||||
<div class="box">
|
||||
<span>第一次充放过程</span>
|
||||
<div class="box" v-for="(item, index) in formData.chargePolicy" :key="index">
|
||||
<span>第{{ index == 0 ? '一' : '二' }}次充放过程</span>
|
||||
<a-form
|
||||
:model="formState"
|
||||
:ref="'period' + index"
|
||||
:model="formData.period"
|
||||
layout="inline"
|
||||
label-align="left"
|
||||
:label-col="{ style: { width: '85px' } }"
|
||||
:rules="periodRules"
|
||||
>
|
||||
<a-form-item label="充电时间" class="col2">
|
||||
<a-time-range-picker v-model:value="formState.name" format="HH:mm" />
|
||||
<a-form-item label="充电时间" class="col2" required>
|
||||
<a-time-range-picker
|
||||
v-model:value="formData.period[index]['charge_time']"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
:disabled="formStatus == 'read'"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="放电时间" class="col2">
|
||||
<a-select v-model:value="formState.type" placeholder="">
|
||||
<a-select-option v-for="item in policyTypes" :value="item.value">{{
|
||||
item.label
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
<a-form-item label="放电时间" class="col2" required>
|
||||
<a-time-range-picker
|
||||
v-model:value="formData.period[index]['discharge_time']"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
:disabled="formStatus == 'read'"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="充电功率" class="col2">
|
||||
<a-radio-group v-model:value="formState.resource">
|
||||
<a-radio value="1">自动</a-radio>
|
||||
<a-radio value="2">自定义</a-radio>
|
||||
<a-input style="width: 60px"></a-input>
|
||||
<a-form-item label="充电功率" class="col2" required>
|
||||
<a-radio-group
|
||||
v-model:value="formData.period[index].chargeType"
|
||||
:disabled="formStatus == 'read'"
|
||||
>
|
||||
<a-radio :value="0">自动</a-radio>
|
||||
<a-radio :value="1">自定义</a-radio>
|
||||
<a-input
|
||||
style="width: 60px"
|
||||
v-model:value="formData.period[index]['charge_power']"
|
||||
></a-input>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="放电功率" class="col2">
|
||||
<a-radio-group v-model:value="formState.resource">
|
||||
<a-radio value="1">自动</a-radio>
|
||||
<a-radio value="2">自定义</a-radio>
|
||||
<a-input style="width: 60px"></a-input>
|
||||
<a-form-item label="放电功率" class="col2" required>
|
||||
<a-radio-group
|
||||
v-model:value="formData.period[index].dischargeType"
|
||||
:disabled="formStatus == 'read'"
|
||||
>
|
||||
<a-radio :value="0">自动</a-radio>
|
||||
<a-radio :value="1">自定义</a-radio>
|
||||
<a-input
|
||||
style="width: 60px"
|
||||
v-model:value="formData.period[index]['discharge_power']"
|
||||
></a-input>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="box">222</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<a-form-item label="策略描述" class="col2">
|
||||
<a-textarea v-model:value="formState.desc" />
|
||||
<a-textarea v-model:value="formData.describe" :disabled="formStatus == 'read'" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否启用" class="col2">
|
||||
<a-switch v-model:checked="formState.delivery" />
|
||||
<a-switch v-model:checked="formData['is_open']" :disabled="formStatus == 'read'" />
|
||||
</a-form-item>
|
||||
<a-form-item class="col1">
|
||||
<div style="display: flex; justify-content: center; gap: 20px">
|
||||
<a-button @click="handleCancel">取消</a-button>
|
||||
<a-button @click="handleOk" type="primary">确认</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-modal v-model:open="periodModal" @ok="handlePeriodModalOk">
|
||||
<a-form ref="formRef" :model="periodForm" :label-col="{ style: { width: '85px' } }">
|
||||
<a-form-item ref="name" label="月份" name="month">
|
||||
<a-input v-model:value="periodForm.month" />
|
||||
</a-form-item>
|
||||
<a-form-item label="开始时间" name="time">
|
||||
<a-time-picker v-model:value="periodForm.time" value-format="HH:mm" format="HH:mm" />
|
||||
</a-form-item>
|
||||
<a-form-item label="时段类型" name="type">
|
||||
<a-select ref="select" v-model:value="periodForm.type">
|
||||
<a-select-option value="尖">尖</a-select-option>
|
||||
<a-select-option value="峰">峰</a-select-option>
|
||||
<a-select-option value="平">平</a-select-option>
|
||||
<a-select-option value="谷">谷</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { policyTypes } from '@/utils/config'
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
props: {},
|
||||
props: {
|
||||
formState: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
name: '',
|
||||
type: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
formStatus: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
policyTypes,
|
||||
formState: {
|
||||
name: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formData: {},
|
||||
columns: [
|
||||
{
|
||||
title: '月份',
|
||||
@@ -131,8 +239,8 @@ export default {
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime'
|
||||
dataIndex: 'time',
|
||||
key: 'time'
|
||||
},
|
||||
{
|
||||
title: '时段类型',
|
||||
@@ -144,11 +252,212 @@ export default {
|
||||
dataIndex: 'action',
|
||||
key: 'action'
|
||||
}
|
||||
],
|
||||
periodModal: false,
|
||||
periodForm: {},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择类型', trigger: 'change' }],
|
||||
price: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '请输入电价',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
period: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '请选择时段',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
periodRules: {
|
||||
chargeTime: [{ required: true, trigger: 'change' }],
|
||||
dischargeTime: [{ required: true, trigger: 'change' }],
|
||||
chargeType: [{ required: true, trigger: 'change' }],
|
||||
dischargeType: [{ required: true, trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
formState: {
|
||||
handler(newVal) {
|
||||
if (this.formStatus == 'add') {
|
||||
this.formData = {
|
||||
type: '1',
|
||||
name: '测试',
|
||||
price: [0, 0, 0, 0],
|
||||
period: [],
|
||||
is_open: false,
|
||||
chargePolicy: 1
|
||||
}
|
||||
// this.formData = {
|
||||
// type: '5',
|
||||
// name: '测试',
|
||||
// price: [0, 0, 0, 0],
|
||||
// chargePolicy:1,//1从
|
||||
// period: [{
|
||||
// charge_time: [],
|
||||
// discharge_time: [],
|
||||
// charge_power: '',
|
||||
// discharge_power: '',
|
||||
// chargeType: 1,
|
||||
// dischargeType:1
|
||||
// },
|
||||
// {
|
||||
// charge_time: [],
|
||||
// discharge_time: [],
|
||||
// charge_power: '',
|
||||
// discharge_power: '',
|
||||
// chargeType: 1,
|
||||
// dischargeType:1
|
||||
// }
|
||||
// ],
|
||||
// is_open: false,
|
||||
// chargePolicy:1
|
||||
// }
|
||||
} else {
|
||||
this.getFormData(newVal)
|
||||
}
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
methods: {
|
||||
changePolicy(val) {
|
||||
console.log(val)
|
||||
if (val == 1) {
|
||||
this.formData.period = []
|
||||
} else {
|
||||
this.formData.period = [
|
||||
{
|
||||
charge_time: [],
|
||||
discharge_time: [],
|
||||
charge_power: '',
|
||||
discharge_power: '',
|
||||
powerType: 1
|
||||
},
|
||||
{
|
||||
charge_time: [''],
|
||||
discharge_time: [''],
|
||||
charge_power: '',
|
||||
discharge_power: '',
|
||||
powerType: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
//提交表单
|
||||
handleOk() {
|
||||
const { name, type, price, is_open, period, chargePolicy } = this.formData
|
||||
const newForm = { name, type, is_open }
|
||||
if (type == 1) {
|
||||
newForm.value = JSON.stringify({
|
||||
period: this.getPeriodJson(type, period),
|
||||
price: price.map((item) => Number(item))
|
||||
})
|
||||
} else {
|
||||
newForm.value = JSON.stringify({
|
||||
period: this.getPeriodJson(type, period.slice(0, chargePolicy)),
|
||||
price: price.map((item) => Number(item))
|
||||
})
|
||||
}
|
||||
console.log(newForm, 'this.formData')
|
||||
this.addPolicy(newForm)
|
||||
},
|
||||
handleCancel() {
|
||||
this.$emit('closeModal')
|
||||
},
|
||||
async addPolicy(newForm) {
|
||||
try {
|
||||
const res = await postReq('/insertPolicy', newForm)
|
||||
console.log(res)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
|
||||
//获取编辑的表单
|
||||
getFormData(newVal) {
|
||||
|
||||
const { value, type } = newVal
|
||||
const { price, period } = JSON.parse(value)
|
||||
|
||||
this.formData = {
|
||||
...newVal,
|
||||
is_open: Boolean(newVal['is_open']),
|
||||
price,
|
||||
period: this.getPeriod(type, period)
|
||||
}
|
||||
},
|
||||
handleAdd() {
|
||||
this.periodModal = true
|
||||
this.periodForm = {}
|
||||
},
|
||||
handlePeriodModalOk() {
|
||||
this.formData.period.push(this.periodForm)
|
||||
this.periodModal = false
|
||||
},
|
||||
getPeriod(type, list=[]) {
|
||||
let newValue = []
|
||||
debugger
|
||||
if (type == 1) {
|
||||
list.forEach((arr, index) => {
|
||||
const item = arr[0]
|
||||
newValue.push({
|
||||
month: index + 1,
|
||||
time: item[0]||'',
|
||||
type: item[1]||'',
|
||||
children: []
|
||||
})
|
||||
for (let i = 1; i < arr.length; i++) {
|
||||
const element = arr[i]
|
||||
newValue[index].children.push({
|
||||
time: element[0]||'',
|
||||
type: element[1]||''
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
list.forEach((item, index) => {
|
||||
const ele = {
|
||||
...item,
|
||||
chargeType: item['charge_power'].length == 0 ? 0 : 1,
|
||||
dischargeType: item['discharge_power'].length == 0 ? 0 : 1
|
||||
}
|
||||
newValue.push(ele)
|
||||
})
|
||||
}
|
||||
return newValue
|
||||
},
|
||||
getPeriodJson(type, period) {
|
||||
let newPeriod = []
|
||||
|
||||
if (type == 1) {
|
||||
newPeriod = Array.from({ length: 12 }, () => [])
|
||||
period.forEach((item, index) => {
|
||||
const { month, time, type } = item
|
||||
newPeriod[month - 1].push([time, type])
|
||||
})
|
||||
} else {
|
||||
period.forEach((item, index) => {
|
||||
const ele = {
|
||||
...item
|
||||
}
|
||||
delete ele.chargeType
|
||||
delete ele.dischargeType
|
||||
newPeriod.push(ele)
|
||||
})
|
||||
}
|
||||
return JSON.stringify(newPeriod)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -174,7 +483,9 @@ export default {
|
||||
gap: 10px;
|
||||
.box {
|
||||
border: 1px solid $table-border;
|
||||
margin-left: 10px;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -200,7 +511,8 @@ export default {
|
||||
input,
|
||||
.ant-picker,
|
||||
.ant-select,
|
||||
.ant-input-affix-wrapper {
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-input-number {
|
||||
width: 150px;
|
||||
}
|
||||
textarea {
|
||||
|
||||
@@ -31,7 +31,8 @@ $page-border: #cad2dd;
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-picker
|
||||
.ant-picker,
|
||||
.ant-input-number
|
||||
{
|
||||
background: none !important;
|
||||
border: 1px solid $border-color !important;
|
||||
@@ -50,7 +51,10 @@ $page-border: #cad2dd;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
.ant-radio-wrapper {
|
||||
.ant-radio-wrapper,
|
||||
.ant-input-number .ant-input-number-input,
|
||||
:deep(.ant-input-number-input),
|
||||
:deep(.ant-select-selection-item) {
|
||||
color: #fff;
|
||||
}
|
||||
//表单
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
export const policyTypes = [
|
||||
{
|
||||
value: 1,
|
||||
label: '削峰套利'
|
||||
value: '1',
|
||||
label: '峰谷套利'
|
||||
},
|
||||
|
||||
{
|
||||
value: 2,
|
||||
label: '需求响应'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '自发自用'
|
||||
value: '5',
|
||||
label: '自定时段'
|
||||
}
|
||||
// {
|
||||
// value: '2',
|
||||
// label: '峰谷套利2'
|
||||
// }
|
||||
]
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
|
||||
<script>
|
||||
import predictEcharts from '@/components/predict/predictEcharts.vue';
|
||||
import {getReq,postReq} from '@/request/api.js';
|
||||
export default {
|
||||
name: '',
|
||||
components: {predictEcharts},
|
||||
@@ -248,8 +249,23 @@ export default {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
async getData(){
|
||||
const date={}
|
||||
try {
|
||||
const res=await getReq('/queryPredictionDay',{date:'2025-09-04'})
|
||||
console.log(res);
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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"
|
||||
@@ -13,22 +12,44 @@
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #type="record">
|
||||
<div>{{record.type}}</div>
|
||||
|
||||
<div>{{ getPolicyType(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 #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>
|
||||
@@ -36,13 +57,14 @@
|
||||
<script>
|
||||
import policyForm from '@/components/system/policyForm.vue'
|
||||
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
|
||||
@@ -81,12 +103,12 @@ 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,
|
||||
@@ -102,57 +124,16 @@ 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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}],
|
||||
tableData: [],
|
||||
tableOption: {},
|
||||
pageOption: {
|
||||
page:1,
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
tableH:''
|
||||
tableH: '',
|
||||
formState: {},
|
||||
formStatus:'add',//表单状态辑状态 add:新增 edit:编辑
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -163,31 +144,42 @@ export default {
|
||||
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)
|
||||
operateForm(type, record = {}) {
|
||||
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
case 'add':
|
||||
this.formModal = true
|
||||
break;
|
||||
this.formState = {}
|
||||
break
|
||||
case 'read':
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
break
|
||||
|
||||
default:
|
||||
break;
|
||||
break
|
||||
}
|
||||
|
||||
},
|
||||
closeModal(){
|
||||
this.formModal = false
|
||||
},
|
||||
handlePagesizeChange(data) {
|
||||
console.log(data)
|
||||
|
||||
@@ -18,15 +18,6 @@ module.exports = defineConfig({
|
||||
'^/api': '' // 重写路径，去掉 '/api' 前缀
|
||||
}
|
||||
}
|
||||
},
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://192.168.0.187:19801', // 目标服务器地址
|
||||
changeOrigin: true, // 修改请求头中的host
|
||||
pathRewrite: {
|
||||
'^/api': '' // 重写路径，去掉/api前缀
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
css: {
|
||||
|
||||
Reference in New Issue
Block a user