|
@@ -25,37 +25,69 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="7">
|
|
|
+ <div class="divDescribe">调控策略</div>
|
|
|
+ <div class="divDescribe">调控截止时间:2023-06-01 00:00:00</div>
|
|
|
+ <div class="divDescribe">调控方式:调控值=原始值*系数+数值</div>
|
|
|
+ <div class="divDescribeBtn">
|
|
|
+ <div class="dark-el-input dark-el-button">
|
|
|
+ <el-button type="primary" size="small" style="margin-left: 5px">一键应用</el-button>
|
|
|
+ <el-button type="primary" size="small" style="margin-left: 5px">设为常用</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <el-row :gutter="10" class="mb8">
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- icon="el-icon-plus"
|
|
|
- size="mini"
|
|
|
- @click="handleAdd"
|
|
|
- >新增
|
|
|
- </el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="success"
|
|
|
- plain
|
|
|
- icon="el-icon-edit"
|
|
|
+
|
|
|
+ <div class="divTable">
|
|
|
+ <el-table
|
|
|
+ :data="form"
|
|
|
+ height="550px"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
size="mini"
|
|
|
- @click="handleUpdate"
|
|
|
- >修改
|
|
|
- </el-button>
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ prop="time1"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="时间">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="xs"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="系数">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="sz"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="数值">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="ys"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="原始值">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ prop="tk"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="调控值">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <vxe-input type="number" v-model="scope.row.data1" size="small" style="width:100%" min="0"
|
|
|
+ :max="capacity" placeholder=""></vxe-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
</el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- plain
|
|
|
- icon="el-icon-delete"
|
|
|
- size="mini"
|
|
|
- @click="handleDelete"
|
|
|
- >删除
|
|
|
- </el-button>
|
|
|
+ <el-col :span="17">
|
|
|
+ <div style="float:left;width: 95%;height: 750px" id="tkcharts"></div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
@@ -65,33 +97,245 @@
|
|
|
|
|
|
|
|
|
<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
export default {
|
|
|
name: 'inverterinfo',
|
|
|
data() {
|
|
|
return {
|
|
|
+ hoursArray: [],
|
|
|
+ chart: null,
|
|
|
+ form: [],
|
|
|
dateTime: new Date(new Date().toLocaleDateString()).getTime() + (60 * 60 * 24 * 1000),
|
|
|
stationList: [],
|
|
|
stationCode: '',
|
|
|
-
|
|
|
+ ysDataLine: [],
|
|
|
+ chartOption:{
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ title: {
|
|
|
+ top: 20,
|
|
|
+ text: '短期调控曲线',
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'normal',
|
|
|
+ fontSize: 16,
|
|
|
+ // color: this.lineColor
|
|
|
+ },
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#57617B'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: 20,
|
|
|
+ icon: 'rect',
|
|
|
+ itemWidth: 14,
|
|
|
+ itemHeight: 5,
|
|
|
+ itemGap: 13,
|
|
|
+ data: ['原始值', '调控值', '参考值上限', '参考值下限'],
|
|
|
+ right: '4%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ // color: this.lineColor
|
|
|
+ },
|
|
|
+ selected: {
|
|
|
+ '原始值': true,
|
|
|
+ '调控值': true,
|
|
|
+ '参考值上限': true,
|
|
|
+ '参考值下限': true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ show: true,
|
|
|
+ realtime: true,
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ left: "15%",
|
|
|
+ right: "15%",
|
|
|
+ }, {
|
|
|
+ type: 'inside'
|
|
|
+ }],
|
|
|
+ grid: {
|
|
|
+ top: 100,
|
|
|
+ left: '2%',
|
|
|
+ right: '2%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.hoursArray
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ name: 'MW',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#57617B'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '原始值',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 5,
|
|
|
+ showSymbol: false,
|
|
|
+ connectNulls: true,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgb(219,50,51)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: this.ysDataLine
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '调控值',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 5,
|
|
|
+ showSymbol: false,
|
|
|
+ connectNulls: true,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgb(0,136,212)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '参考值上限',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ connectNulls: true,
|
|
|
+ symbolSize: 5,
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#00FF00',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '参考值下限',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ connectNulls: true,
|
|
|
+ symbolSize: 5,
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgb(167,27,189)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getStationCode()
|
|
|
+
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
+ this.initChart()
|
|
|
},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
+ dataQuery(){
|
|
|
+ let queryParams = {
|
|
|
+ "stationCode": this.stationCode,
|
|
|
+ "time": Math.round(this.dateTime),
|
|
|
+ }
|
|
|
+ this.$axios.get('/dqRegulationController/queryData', {params: queryParams}).then(response => {
|
|
|
+ this.ysDataLine = response.data.ysData
|
|
|
+ this.chart.clear()
|
|
|
+ this.chartOption.series[0].data = this.ysDataLine
|
|
|
+ this.chart.setOption(this.chartOption)
|
|
|
+ })
|
|
|
+ },
|
|
|
getStationCode() {
|
|
|
this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
|
|
|
this.stationList = response.data
|
|
|
if (this.stationList.length > 0) {
|
|
|
this.stationCode = this.stationList[0].value
|
|
|
- this.dataQuery()
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ initChart() {
|
|
|
+ for (let i = 0; i < 24 * 60; i += 15) {
|
|
|
+ let hours = Math.floor(i / 60);
|
|
|
+ let minutes = i % 60;
|
|
|
+ this.hoursArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
|
|
|
+ }
|
|
|
+ this.chartOption.xAxis[0].data = this.hoursArray
|
|
|
+ this.chart = echarts.init(document.getElementById('tkcharts'), 'dark')
|
|
|
+ this.chart.setOption(this.chartOption)
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style>
|
|
|
+.divDescribe {
|
|
|
+ position: relative;
|
|
|
+ top: 20px; /* 向下移动15px */
|
|
|
+ width: 100%;
|
|
|
+ text-align: center
|
|
|
+}
|
|
|
+.divDescribeBtn {
|
|
|
+ position: relative;
|
|
|
+ top: 20px; /* 向下移动15px */
|
|
|
+ width: 100%;
|
|
|
+ text-align: right
|
|
|
+}
|
|
|
+.divTable {
|
|
|
+ position: relative;
|
|
|
+ top: 30px; /* 向下移动15px */
|
|
|
+ width: 100%;
|
|
|
+ text-align: center
|
|
|
+}
|
|
|
+</style>
|