mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
feat(web): 新增预测管理和策略表单功能
- 添加预测管理页面和相关组件 - 实现策略表单组件，支持创建和编辑策略 - 优化表格组件，增加分页和数据加载功能 - 调整视频监控组件布局 - 修复部分组件样式问题
This commit is contained in:
zhoumengru
@@ -39,13 +39,13 @@
|
||||
:data-source="record.currentLimitList"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record_ }">
|
||||
<!-- <template #bodyCell="{ column, record_ }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<span>
|
||||
{{ getType(record_.type) }}
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</template> -->
|
||||
</a-table>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
|
||||
<div class="top" v-if="searchOptions.length">
|
||||
<div class="top-left">
|
||||
<template v-for="item in searchOptions" :key="item.key">
|
||||
@@ -9,9 +8,10 @@
|
||||
<span class="label"> {{ item.label }}</span>
|
||||
<div class="select" v-if="item.type == 'select'">
|
||||
<a-select
|
||||
:dropdown-match-select-width="false" v-model:value="formData[item.key]"
|
||||
:dropdown-match-select-width="false"
|
||||
v-model:value="formData[item.key]"
|
||||
allow-clear
|
||||
:max-tag-count='2'
|
||||
:max-tag-count="2"
|
||||
:placeholder="item.label"
|
||||
:mode="item.mode ? item.mode : 'combobox'"
|
||||
>
|
||||
@@ -70,12 +70,11 @@
|
||||
<div style="display: flex" v-if="btnOptionList.length">
|
||||
<div v-for="(item, i) in btnOptionList" :key="i" class="button">
|
||||
<a-button
|
||||
:class="'btn-' + item.type"
|
||||
:class="'btn-' + item.type"
|
||||
type="primary"
|
||||
@click="handelClick(item.type)"
|
||||
:disabled="item.disabled ? item.disabled : false"
|
||||
>
|
||||
|
||||
{{ item.label }}
|
||||
</a-button>
|
||||
</div>
|
||||
@@ -188,7 +187,7 @@ input:-internal-autofill-selected {
|
||||
color: var(--theme-text-default) !important;
|
||||
}
|
||||
.search {
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@@ -232,12 +231,12 @@ input:-internal-autofill-selected {
|
||||
.date-picker {
|
||||
width: 360px;
|
||||
|
||||
.ant-picker{
|
||||
background: transparent;
|
||||
border: 1px solid #00B9D0;
|
||||
.ant-picker-input >input{
|
||||
color: #fff!important;
|
||||
}
|
||||
.ant-picker {
|
||||
background: transparent;
|
||||
border: 1px solid #00b9d0;
|
||||
.ant-picker-input > input {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -323,19 +322,13 @@ input:-internal-autofill-selected {
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.button{
|
||||
.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="device">
|
||||
<div class="device-item" v-for="item in 8" :key="item">
|
||||
<div class="device-item" v-for="item in deviceList" :key="item">
|
||||
<div class="item-header">
|
||||
<div style="display: flex;width: 50%;">
|
||||
<div style="display: flex; width: 50%">
|
||||
<div class="icon-bg"></div>
|
||||
<div class="title">
|
||||
<span class="number">521245786665412</span>
|
||||
@@ -29,12 +29,18 @@
|
||||
<div class="item-content">
|
||||
<div v-for="info in chunengInfo" :key="info.key">
|
||||
<span class="text">{{ info.label }}：</span>
|
||||
<a-button v-if="info.key === 'realTimeData'" type="primary" size="small" @click="openModal">查看</a-button>
|
||||
<span v-else class="value" >{{ info.value }}</span>
|
||||
<a-button
|
||||
v-if="info.key === 'realTimeData'"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openModal"
|
||||
>查看</a-button
|
||||
>
|
||||
<span v-else class="value">{{ info.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal v-model:open="modalOpen" @ok="handleOk" width="800px">
|
||||
<a-modal v-model:open="modalOpen" @ok="handleOk" width="800px">
|
||||
<!-- <p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p> -->
|
||||
@@ -43,16 +49,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
props: {},
|
||||
props: {
|
||||
stationId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
systemType: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modalOpen:false,
|
||||
modalOpen: false,
|
||||
deviceList: [],
|
||||
chunengInfo: [
|
||||
{label:'运行模式',key:'operationMode',value:'并网运行'},
|
||||
{label:'电池储能容量',key:'batteryCapacity',value:'100kWh'},
|
||||
{ label: '运行模式', key: 'operationMode', value: '并网运行' },
|
||||
{ label: '电池储能容量', key: 'batteryCapacity', value: '100kWh' },
|
||||
{ label: '实时电压', key: 'voltage', value: '232.5V' },
|
||||
{ label: '功率因数', key: 'powerFactor', value: '0.95' },
|
||||
{ label: '实时电流', key: 'current', value: '0.01A' },
|
||||
@@ -62,26 +79,48 @@ export default {
|
||||
{ label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
|
||||
{ label: '额定功率', key: 'ratedPower', value: '0.01kW' },
|
||||
{ label: '冷却方式', key: 'coolingMethod', value: '风冷' }
|
||||
|
||||
],
|
||||
// guangfuInfo: [
|
||||
// { label: '实时电压', key: 'voltage', value: '232.5V' },
|
||||
// { label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
|
||||
// { label: '实时电流', key: 'current', value: '0.01A' },
|
||||
// { label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
|
||||
// { label: '实时功率', key: 'power', value: '0.01kW' },
|
||||
// { label: '额定功率', key: 'ratedPower', value: '0.01kW' },
|
||||
// { label: '实时数据', key: 'realTimeData', value: '0.01kWh' }
|
||||
// ]
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
openModal(){
|
||||
this.modalOpen=true;
|
||||
watch: {
|
||||
// 监听父组件数据变化
|
||||
stationId(newVal) {
|
||||
if (newVal) {
|
||||
this.getDeviceList()
|
||||
}
|
||||
},
|
||||
handleOk(){
|
||||
this.modalOpen=false;
|
||||
systemType(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.getDeviceList()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDeviceList()
|
||||
},
|
||||
methods: {
|
||||
async getDeviceList() {
|
||||
const data = {
|
||||
category: this.systemType,
|
||||
'station_id': this.stationId,
|
||||
page: 0,
|
||||
'page_size': 1000
|
||||
}
|
||||
try {
|
||||
const res = await getReq('/queryDeviceList', data)
|
||||
|
||||
console.log(res)
|
||||
this.deviceList = res.data
|
||||
// this.selectStation=this.stations[0]['station_id']
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
openModal() {
|
||||
this.modalOpen = true
|
||||
},
|
||||
handleOk() {
|
||||
this.modalOpen = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,35 +21,26 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="environment">
|
||||
<div class="item">
|
||||
<div class="title">环境温湿度信息</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" width="100%" />
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div>点位</div>
|
||||
<div>温度</div>
|
||||
<div>湿度</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>#1</div>
|
||||
<div>20 ℃</div>
|
||||
<div>20%</div>
|
||||
</div>
|
||||
<div class="tab-header">
|
||||
<div v-for="item in tabList" :key="item.key" class="tab">
|
||||
<span
|
||||
:class="[activeTab == item.key ? 'actived' : 'uactived']"
|
||||
@click="activeTab = item.key"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" style="margin-top: 40px">
|
||||
<div class="title">消防信息</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" width="100%" />
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div>点位</div>
|
||||
<div>烟感状态</div>
|
||||
</div>
|
||||
<div class="row" v-for="value in 6" :key="value">
|
||||
<div>#{{ value }}</div>
|
||||
<div>xxx</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<ComTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
</ComTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -60,7 +51,51 @@ export default {
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
activeTab: '0',
|
||||
tabList: [
|
||||
{
|
||||
key: '0',
|
||||
name: '环境温湿度信息'
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
name: '安防信息'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '空调信息'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '冷机信息'
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '点位',
|
||||
dataIndex: 'policyId',
|
||||
key: 'policyId',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '温度',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '湿度',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
ellipsis: true
|
||||
}
|
||||
],
|
||||
tableOption: {
|
||||
select: false,
|
||||
page: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
@@ -69,11 +104,11 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.videos {
|
||||
width: calc(100% - 240px);
|
||||
width: 60%;
|
||||
margin-left: 20px;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
overflow-y: auto;
|
||||
.video-item {
|
||||
// width: 410px;
|
||||
@@ -95,9 +130,10 @@ export default {
|
||||
}
|
||||
}
|
||||
.environment {
|
||||
width: 220px;
|
||||
margin-left: 10px;
|
||||
width: calc(40% - 20px);
|
||||
margin-left: 20px;
|
||||
color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
@@ -125,5 +161,39 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-header {
|
||||
display: flex;
|
||||
|
||||
.tab {
|
||||
& > span {
|
||||
font-size: 14px;
|
||||
margin-right: 15px;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid $tab-border;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.actived {
|
||||
color: #ffffff;
|
||||
|
||||
background-color: $green;
|
||||
}
|
||||
.uactived {
|
||||
color: #a6b8dd;
|
||||
background-color: $bg2-color;
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
margin-top: 20px;
|
||||
:deep(.ant-table) {
|
||||
border-radius: 10px 10px 0 0 !important;
|
||||
overflow: hidden; /* 确保圆角生效 */
|
||||
}
|
||||
:deep(.ant-table-body) {
|
||||
border-radius: 0px 0px 10px 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
187
web/src/components/predict/predictEcharts.vue
Normal file
187
web/src/components/predict/predictEcharts.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="echarts">
|
||||
<div class="chart-container">
|
||||
<div class="content-header">
|
||||
<div class="verline"></div>
|
||||
<span>{{ chartOptions.title }}</span>
|
||||
</div>
|
||||
<div ref="chartContainer" class="echarts-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { postReq } from '@/request/api'
|
||||
export default {
|
||||
name: 'PredictEcharts',
|
||||
props: {
|
||||
chartOptions: {
|
||||
type: Object,
|
||||
default: () => {}, // 默认空对象
|
||||
required: false // 非必须
|
||||
},
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => ([]), // 默认空对象
|
||||
required: false // 非必须
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartInstances: [] // 存储 ECharts 实例
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 确保 DOM 完全渲染
|
||||
this.initCharts()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
this.chartInstances.forEach((chart) => chart && chart.dispose())
|
||||
},
|
||||
methods: {
|
||||
initCharts() {
|
||||
// this.chartOptions.forEach((option, index) => {
|
||||
const {title,infoKeys,dataKey,type,smooth}=this.chartOptions
|
||||
|
||||
const dom = this.$refs.chartContainer
|
||||
if (!dom) return
|
||||
|
||||
const chart = this.$echarts.init(dom)
|
||||
this.chartInstances.push(chart) // 存储实例
|
||||
|
||||
// 设置图表配置
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
data: infoKeys.map((info) => info.label)
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.chartData.map((item) => item.date),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff' // x轴线颜色
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#fff' // x 轴刻度线颜色
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff' // y轴线颜色
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#A6B8DD', // 网格线颜色,
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: infoKeys.map((info, i) => {
|
||||
return {
|
||||
name: info.label,
|
||||
smooth: smooth || false,
|
||||
type: type,
|
||||
data: this.chartData.map((item) => item[info.key]),
|
||||
...info.seriesOptions,
|
||||
}
|
||||
})
|
||||
})
|
||||
// })
|
||||
},
|
||||
|
||||
handleResize() {
|
||||
this.chartInstances.forEach((chart) => chart && chart.resize())
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.echarts {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
& > div {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
|
||||
.content-header {
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 3%;
|
||||
.verline {
|
||||
margin-right: 10px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 230, 172, 1) 0%,
|
||||
rgba(0, 210, 255, 1) 98.78%,
|
||||
rgba(0, 210, 255, 1) 100%
|
||||
),
|
||||
rgba(1, 223, 239, 1);
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.echarts-content{
|
||||
height: calc(100% - 20px);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
156
web/src/components/system/policyForm copy.vue
Normal file
156
web/src/components/system/policyForm copy.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<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="right"
|
||||
:label-col="{ style: { width: '100px' } }"
|
||||
>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="名称" :label-col="{ span: 3 }" :wrapper-col="{ span: 18}">
|
||||
<a-input v-model:value="formState.name" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
|
||||
<a-select v-model:value="formState.region" placeholder="please select your zone">
|
||||
<a-select-option value="shanghai">Zone one</a-select-option>
|
||||
<a-select-option value="beijing">Zone two</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="6">
|
||||
<a-form-item label="低谷电价" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="平段电价" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="高峰电价" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="尖峰电价" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
|
||||
<a-input v-model:value="formState.name" suffix="元/kWh" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- <a-row :gutter="24">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="时段表">
|
||||
<a-radio-group v-model:value="formState.resource">
|
||||
<a-radio value="1">Sponsor</a-radio>
|
||||
<a-radio value="2">Venue</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="充放策略">
|
||||
<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-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="充放策略"> 休息休息休息休息、 </a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="策略描述">
|
||||
<a-textarea v-model:value="formState.desc" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="是否启用">
|
||||
<a-switch v-model:checked="formState.delivery" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row> -->
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { styleProviderProps } from 'ant-design-vue/es/_util/cssinjs/StyleContext'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
formState: {
|
||||
name: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
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 {
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
margin-inline-end: 0 !important;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.ant-form {
|
||||
.ant-form-item-label > label {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.ant-row) {
|
||||
width: 100%;
|
||||
}
|
||||
.ant-input,
|
||||
.ant-select,
|
||||
.ant-input-affix-wrapper {
|
||||
// max-width: 240px;
|
||||
// min-width: 120px;
|
||||
}
|
||||
textarea{
|
||||
.ant-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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