|
|
@@ -0,0 +1,389 @@
|
|
|
+<template>
|
|
|
+ <div class="detailedRules" :class="!theme ? 'themeDark' : ''">
|
|
|
+ <div class="detailedRulesSeach">
|
|
|
+ <div class="seach_top">
|
|
|
+ <div class="exceed">
|
|
|
+ <span class="exceedName" style="x`">时间：</span>
|
|
|
+ <el-date-picker v-model="pickerTime" @change="changeTime" format="YYYY-MM-DD" type="date"
|
|
|
+ placeholder="选择时间" />
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" @click="seachData">计 算</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row class="detailedRulesMain" v-loading="loading">
|
|
|
+ <!-- warn-table -->
|
|
|
+ <el-col :span="it.span" class="detailedRulesitem " v-for="(it, index) in stateData" :key="index">
|
|
|
+ <div class="leftContent">
|
|
|
+ <span>{{ it.name }}</span>
|
|
|
+ </div>
|
|
|
+ <el-table :data="it.datas" border style="width: 100%" element-loading-background="rgba(0,0,0,.5)"
|
|
|
+ :header-cell-style="{
|
|
|
+ padding: '4px',
|
|
|
+ fontSize: '11px',
|
|
|
+ fontWeight: bold,
|
|
|
+ border: '0.5px solid rgba(0,0,0,.5) !important',
|
|
|
+ }" :cell-style="{
|
|
|
+ height: '40px',
|
|
|
+ padding: '3px',
|
|
|
+ fontSize: '11px',
|
|
|
+ 'border-top': '0px solid rgba(0,0,0,.5)',
|
|
|
+ 'border-bottom': '1px solid rgba(0,0,0,.5)',
|
|
|
+ 'border-right': '1px solid rgba(0,0,0,.5)',
|
|
|
+ }">
|
|
|
+ <el-table-column :prop="item.code" :label="item.name" :width="item.width?item.width:''"
|
|
|
+ align="center" v-for="(item, index) in it.column" :key="index">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div :id="it.nameEn" style="width:100%;height:50vh;margin-top:20px"></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ apiGetallStationPower
|
|
|
+ } from "../../api/api";
|
|
|
+
|
|
|
+ import jsonData from "./component/detailedRules.json";
|
|
|
+ import dayjs from "dayjs";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ pickerTime: "",
|
|
|
+ titelMonth: "",
|
|
|
+ stateData: [{
|
|
|
+ name: "短期预测",
|
|
|
+ nameEn: "shortTerm",
|
|
|
+ span: 7,
|
|
|
+ column: [{
|
|
|
+ name: "场站名称",
|
|
|
+ code: "stationName"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "重点时段准确率(%)",
|
|
|
+ code: "code1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "非重点时段准确率(%)",
|
|
|
+ code: "code2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "考核扣分",
|
|
|
+ code: "code3",
|
|
|
+ width: 80
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ datas: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "超短期预测",
|
|
|
+ nameEn: "ultraShortTerm",
|
|
|
+ span: 9,
|
|
|
+ column: [{
|
|
|
+ name: "场站名称",
|
|
|
+ code: "stationName"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "1小时准确率(%)",
|
|
|
+ code: "code1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "2小时准确率(%)",
|
|
|
+ code: "code2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "3小时准确率(%)",
|
|
|
+ code: "code3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "4小时准确率(%)",
|
|
|
+ code: "code4"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "考核扣分",
|
|
|
+ code: "code5",
|
|
|
+ width: 80
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ datas: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "可用电量",
|
|
|
+ nameEn: "availablePower",
|
|
|
+ span: 8,
|
|
|
+ column: [{
|
|
|
+ name: "场站名称",
|
|
|
+ code: "stationName"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "实际电量(Mwh)",
|
|
|
+ code: "code1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "可用电量(Mwh)",
|
|
|
+ code: "code2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "准确率(%)",
|
|
|
+ code: "code3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "考核扣分",
|
|
|
+ code: "code4",
|
|
|
+ width: 80
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ datas: []
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ echartsTheme: "",
|
|
|
+ theme: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "$store.state.theme": {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
+ this.theme = newVal;
|
|
|
+ this.echartsTheme = !newVal ? "dark" : "";
|
|
|
+ // this.getStationData();
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.pickerTime = dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
+ this.titelMonth =
|
|
|
+ this.pickerTime.split("-")[0] +
|
|
|
+ "年" +
|
|
|
+ this.pickerTime.split("-")[1] +
|
|
|
+ "月" +
|
|
|
+ this.pickerTime.split("-")[2] +
|
|
|
+ "日";
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getStationData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getStationData() {
|
|
|
+ let that = this;
|
|
|
+ // that.loading = true;
|
|
|
+ // let params = {
|
|
|
+ // date: that.pickerTime,
|
|
|
+ // };
|
|
|
+ // apiGetallStationPower(params).then((res) => {
|
|
|
+ // that.loading = false;
|
|
|
+ // })
|
|
|
+ this.getshortTermdata(jsonData.data.stationData1)
|
|
|
+ this.getultraShortTermdata(jsonData.data.stationData2)
|
|
|
+ this.getavailablePowerdata(jsonData.data.stationData3)
|
|
|
+ },
|
|
|
+ getshortTermdata(datas) {
|
|
|
+ this.stateData[0].datas = datas
|
|
|
+ let xAxis = []
|
|
|
+ let shortPeak = []
|
|
|
+ let shortNonPeak = []
|
|
|
+ datas.forEach(it => {
|
|
|
+ xAxis.push(it.stationName)
|
|
|
+ shortPeak.push(it.code1)
|
|
|
+ shortNonPeak.push(it.code2)
|
|
|
+ });
|
|
|
+ let series = [{
|
|
|
+ name: "重点时段准确率(%)",
|
|
|
+ data: shortPeak,
|
|
|
+ type: 'bar'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "非重点时段准确率(%)",
|
|
|
+ data: shortNonPeak,
|
|
|
+ type: 'bar'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.getPowerLine("shortTerm", xAxis, series, "(%)")
|
|
|
+ },
|
|
|
+ getultraShortTermdata(datas) {
|
|
|
+ this.stateData[1].datas = datas
|
|
|
+ let xAxis = ["1小时", "2小时", "小时", "4小时"]
|
|
|
+ let series = []
|
|
|
+ datas.forEach(it => {
|
|
|
+ let seriesObj = {
|
|
|
+ name: it.stationName,
|
|
|
+ type: "line",
|
|
|
+ data: [it.code1, it.code2, it.code3, it.code4],
|
|
|
+ symbol: "none",
|
|
|
+ };
|
|
|
+ series.push(seriesObj);
|
|
|
+ });
|
|
|
+ this.getPowerLine("ultraShortTerm", xAxis, series)
|
|
|
+ },
|
|
|
+ getavailablePowerdata(datas) {
|
|
|
+ this.stateData[2].datas = datas
|
|
|
+ let xAxis = []
|
|
|
+ let active = []
|
|
|
+ let available = []
|
|
|
+ datas.forEach(it => {
|
|
|
+ xAxis.push(it.stationName)
|
|
|
+ active.push(it.code1)
|
|
|
+ available.push(it.code2)
|
|
|
+ });
|
|
|
+ let series = [{
|
|
|
+ name: "实际电量(Mwh)",
|
|
|
+ data: active,
|
|
|
+ type: 'bar'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "可用电量(Mwh)",
|
|
|
+ data: available,
|
|
|
+ type: 'bar'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.getPowerLine("availablePower", xAxis, series, "(Mwh)")
|
|
|
+ },
|
|
|
+ getPowerLine(name, xAxis, series, unit) {
|
|
|
+ let option = {
|
|
|
+ legend: {},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: xAxis,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ name: unit,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: this.theme ? "#000" : "#ccc",
|
|
|
+ type: "dashed", // 修改为虚线
|
|
|
+ opacity: 0.2,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: series,
|
|
|
+ };
|
|
|
+ if (!this.theme) {
|
|
|
+ option.backgroundColor = "";
|
|
|
+ }
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let dom = document.getElementById(name);
|
|
|
+ dom.removeAttribute("_echarts_instance_") ?
|
|
|
+ dom.removeAttribute("_echarts_instance_") :
|
|
|
+ "";
|
|
|
+ let myChart = this.$echarts.init(dom, this.echartsTheme);
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function () {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ seachData() {
|
|
|
+ let str = dayjs(this.pickerTime).format("YYYY-MM");
|
|
|
+ this.titelMonth = str.split("-")[0] + "年" + str.split("-")[1] + "月";
|
|
|
+ this.getStationData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .detailedRules {
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+
|
|
|
+ .detailedRulesSeach {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .seach_top {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .exceed {
|
|
|
+ .exceedName {
|
|
|
+ margin-top: 7px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ .el-select,
|
|
|
+ .el-select__wrapper {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-date-editor {
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ .el-input__icon,
|
|
|
+ .el-range-separator {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-trigger {
|
|
|
+ .el-input {
|
|
|
+ .el-input__wrapper {
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__suffix {
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ height: 30px;
|
|
|
+ padding: 0 20px;
|
|
|
+ line-height: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailedRulesMain {
|
|
|
+ .detailedRulesitem {
|
|
|
+ padding: 20px 0;
|
|
|
+
|
|
|
+ .leftContent {
|
|
|
+ width: 242px;
|
|
|
+ height: 41px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: url("~@/assets/imgs/title_left_bg.png") no-repeat;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #05bb4c;
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .themeDark {
|
|
|
+ background-image: none;
|
|
|
+
|
|
|
+ .detailedRulesSeach {
|
|
|
+ .exceedName {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .themeLight {
|
|
|
+ .detailedRulesSeach {
|
|
|
+ .exceedName {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
