mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-28 03:09:24 +08:00
feat(web): 新增预测管理和策略表单功能
- 添加预测管理页面和相关组件 - 实现策略表单组件，支持创建和编辑策略 - 优化表格组件，增加分页和数据加载功能 - 调整视频监控组件布局 - 修复部分组件样式问题
This commit is contained in:
zhoumengru
227
web/src/components/system/policyForm.vue
Normal file
227
web/src/components/system/policyForm.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="policyForm">
|
||||
<div class="title">
|
||||
<div>基础信息</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" />
|
||||
</div>
|
||||
<a-form
|
||||
:model="formState"
|
||||
layout="inline"
|
||||
label-align="left"
|
||||
:label-col="{ style: { width: '85px' } }"
|
||||
>
|
||||
<a-form-item label="名称" class="col2">
|
||||
<a-input v-model:value="formState.name" />
|
||||
</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>
|
||||
|
||||
<a-form-item label="低谷电价" class="col4">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="平段电价" class="col4">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="高峰电价" class="col4">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="尖峰电价" class="col4">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="时段表" class="col1">
|
||||
<a-table :columns="columns" :data-source="data" size="small">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<span>
|
||||
<a @click="edit(record.key)">操作</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form-item>
|
||||
<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>
|
||||
</a-form-item>
|
||||
<a-form-item label="" class="col1">
|
||||
<div class="charge">
|
||||
<div class="box">
|
||||
<span>第一次充放过程</span>
|
||||
<a-form
|
||||
:model="formState"
|
||||
layout="inline"
|
||||
label-align="left"
|
||||
:label-col="{ style: { width: '85px' } }"
|
||||
>
|
||||
<a-form-item label="充电时间" class="col2">
|
||||
<a-time-range-picker v-model:value="formState.name" format="HH:mm" />
|
||||
</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>
|
||||
|
||||
<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-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-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="box">222</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="策略描述" class="col2">
|
||||
<a-textarea v-model:value="formState.desc" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否启用" class="col2">
|
||||
<a-switch v-model:checked="formState.delivery" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { policyTypes } from '@/utils/config'
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
policyTypes,
|
||||
formState: {
|
||||
name: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '月份',
|
||||
dataIndex: 'month',
|
||||
key: 'month'
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime'
|
||||
},
|
||||
{
|
||||
title: '时段类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.policyForm {
|
||||
color: #fff;
|
||||
.title {
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
width: 232px;
|
||||
height: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
.charge {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
.box {
|
||||
border: 1px solid $table-border;
|
||||
margin-left: 10px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-inline-end: 0 !important;
|
||||
margin-top: 15px;
|
||||
:deep(.ant-form-item-label) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
.ant-form-item-label {
|
||||
> label {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-row) {
|
||||
width: 100%;
|
||||
}
|
||||
input,
|
||||
.ant-picker,
|
||||
.ant-select,
|
||||
.ant-input-affix-wrapper {
|
||||
width: 150px;
|
||||
}
|
||||
textarea {
|
||||
.ant-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.col2 {
|
||||
width: 50%;
|
||||
}
|
||||
.col4 {
|
||||
width: 25%;
|
||||
}
|
||||
.col1 {
|
||||
width: 100%;
|
||||
:deep(textarea.ant-input) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ant-form-item-row){
|
||||
// border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user