|
@@ -0,0 +1,352 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="dlTable">
|
|
|
|
+ <div class="query mg-b-8">
|
|
|
|
+ <div class="query-items">
|
|
|
|
+ <div class="query-item">
|
|
|
|
+ <div class="lable">选择日期:</div>
|
|
|
|
+ <div class="search-input">
|
|
|
|
+ <el-date-picker v-model="month" type="month" value-format="YYYY-MM" placeholder="选择日期"
|
|
|
|
+ popper-class="date-select">
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <panel :title="monthTitle + '发电量预测'" :showLine="false">
|
|
|
|
+ <el-table :data="tableData" height="85vh" style="width: 100%" show-summary :summary-method="getSummaries"
|
|
|
|
+ :span-method="yhmxdbMethod">
|
|
|
|
+ <el-table-column fixed prop="region" label="名称" width="120" />
|
|
|
|
+ <el-table-column fixed prop="speed" label="" width="50" />
|
|
|
|
+ <el-table-column label="日期">
|
|
|
|
+ <el-table-column v-for="(item, index) in dateS" :key="index" :prop="item.prop" :label="item.label"
|
|
|
|
+ width="70" align="center" />
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column fixed="right" prop="hj" label="平均风速/合计" width="100" align="center" />
|
|
|
|
+ <el-table-column fixed="right" prop="dqhj" label="地区合并" width="100" align="center" />
|
|
|
|
+ </el-table>
|
|
|
|
+ </panel>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import $ from "jquery";
|
|
|
|
+ import Panel from "@/components/coms/panel/panel.vue";
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ Panel,
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ month: new Date().formatDate("yyyy-MM"),
|
|
|
|
+ monthTitle: "",
|
|
|
|
+ spanArr: [],
|
|
|
|
+ pos: 0,
|
|
|
|
+ spanArrHj: [],
|
|
|
|
+ dateS: [{
|
|
|
|
+ prop: "01",
|
|
|
|
+ label: 1,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ prop: "02",
|
|
|
|
+ label: 2,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ tableData: [{
|
|
|
|
+ region: "Tom",
|
|
|
|
+ speed: "白天",
|
|
|
|
+ hj: 3,
|
|
|
|
+ dqhj: 6,
|
|
|
|
+ "01": 55,
|
|
|
|
+ wpid: "NSS_FDC",
|
|
|
|
+ }, ],
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.list(new Date(this.month).valueOf());
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ $(".el-table__fixed-footer-wrapper tbody td:last-child").remove();
|
|
|
|
+ $(".el-table__fixed-footer-wrapper tbody td:last-child").attr("colspan", "2");
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ list(month) {
|
|
|
|
+ let that = this;
|
|
|
|
+ this.API.requestData({
|
|
|
|
+ showLoading: true,
|
|
|
|
+ method: "GET",
|
|
|
|
+ baseURL: "http://10.155.32.4:8082/",
|
|
|
|
+ subUrl: "decision/ycfsdlxz/" + month,
|
|
|
|
+ success(res) {
|
|
|
|
+ let tableData = [],
|
|
|
|
+ windpowerstationid = [],
|
|
|
|
+ dateS = [],
|
|
|
|
+ recodedata = [],
|
|
|
|
+ average = [];
|
|
|
|
+ res.data.Weatherfd.forEach((ele) => {
|
|
|
|
+ let dd = new Date(ele.recodedata).formatDate("dd");
|
|
|
|
+ recodedata.push(dd);
|
|
|
|
+ if (windpowerstationid.indexOf(ele.windpowerstationid) === -1) {//判断有木有id,若没有,则加进去,并新增一条tableData的白天和夜间
|
|
|
|
+ windpowerstationid.push(ele.windpowerstationid);
|
|
|
|
+ tableData.push({
|
|
|
|
+ region: ele.region,
|
|
|
|
+ speed: "白天",
|
|
|
|
+ [dd]: ele.speed1,
|
|
|
|
+ wpid: ele.windpowerstationid,
|
|
|
|
+ dqhj: "",
|
|
|
|
+ });
|
|
|
|
+ tableData.push({
|
|
|
|
+ region: ele.region,
|
|
|
|
+ speed: "夜间",
|
|
|
|
+ [dd]: ele.speed2,
|
|
|
|
+ wpid: ele.windpowerstationid,
|
|
|
|
+ dqhj: "",
|
|
|
|
+ });
|
|
|
|
+ average.push(ele.speed1, ele.speed2);
|
|
|
|
+ } else {//匹配tableData的id,并分别传到夜间和白天data中
|
|
|
|
+ tableData.forEach((ele2, index2) => {
|
|
|
|
+ if (ele2.wpid === ele.windpowerstationid) {
|
|
|
|
+ if (ele2.speed === "白天") {
|
|
|
|
+ tableData[index2][dd] = ele.speed1;
|
|
|
|
+ average[index2] = average[index2] + ele.speed1;
|
|
|
|
+ } else {
|
|
|
|
+ tableData[index2][dd] = ele.speed2;
|
|
|
|
+ average[index2] = average[index2] + ele.speed2;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ Object.values(Array.from(new Set(recodedata))).forEach((ele) => {
|
|
|
|
+ dateS.push({
|
|
|
|
+ prop: ele,
|
|
|
|
+ label: ele,
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ average.forEach((ele, index) => {//合计里的平均风速
|
|
|
|
+ tableData[index]["hj"] = (ele / dateS.length).toFixed(2);
|
|
|
|
+ });
|
|
|
|
+ that.dateS = dateS;
|
|
|
|
+ that.Forecastwindspeed(res.data.Forecastwindspeed, tableData);
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ Forecastwindspeed(data, Weatherfd) {
|
|
|
|
+ let that = this,
|
|
|
|
+ tableData = [],
|
|
|
|
+ pjid = [],
|
|
|
|
+ wpid = [],
|
|
|
|
+ dqhj = {};
|
|
|
|
+ data.forEach((ele) => {
|
|
|
|
+ let dd = new Date(ele.recodedate).formatDate("dd");
|
|
|
|
+ let wpidName = ele.pjid.split("_")[0].match(/^[a-z|A-Z]+/gi)[0];
|
|
|
|
+ let power = ele.daypower + ele.nightpower;
|
|
|
|
+ if (pjid.indexOf(ele.pjid) === -1) {//判断有木有id,若没有,则加进去,并新增一条tableData的白天和夜间
|
|
|
|
+ pjid.push(ele.pjid);
|
|
|
|
+ tableData.push({
|
|
|
|
+ region: ele.pjname,
|
|
|
|
+ speed: "白天",
|
|
|
|
+ [dd]: ele.daypower,
|
|
|
|
+ wpid: ele.wpid,
|
|
|
|
+ pjid: ele.pjid,
|
|
|
|
+ hj: power,
|
|
|
|
+ dqhj: 1,
|
|
|
|
+ });
|
|
|
|
+ tableData.push({
|
|
|
|
+ region: ele.pjname,
|
|
|
|
+ speed: "夜间",
|
|
|
|
+ [dd]: ele.nightpower,
|
|
|
|
+ wpid: ele.wpid,
|
|
|
|
+ pjid: ele.pjid,
|
|
|
|
+ });
|
|
|
|
+ tableData.push({
|
|
|
|
+ region: ele.pjname,
|
|
|
|
+ speed: "合计",
|
|
|
|
+ [dd]: power,
|
|
|
|
+ wpid: ele.wpid,
|
|
|
|
+ pjid: ele.pjid,
|
|
|
|
+ });
|
|
|
|
+ dqhj[wpidName] != undefined ?
|
|
|
|
+ (dqhj[wpidName] += power) :
|
|
|
|
+ (dqhj[wpidName] = power);
|
|
|
|
+ } else {//匹配tableData的id,并分别传到夜间和白天data中
|
|
|
|
+ tableData.forEach((ele2, index2) => {
|
|
|
|
+ if (ele2.pjid === ele.pjid) {
|
|
|
|
+ if (ele2.speed === "白天") {
|
|
|
|
+ tableData[index2][dd] = ele.daypower;
|
|
|
|
+ tableData[index2].hj += power;
|
|
|
|
+ } else if (ele2.speed === "夜间") {
|
|
|
|
+ tableData[index2][dd] = ele.nightpower;
|
|
|
|
+ } else {
|
|
|
|
+ tableData[index2][dd] = power;
|
|
|
|
+ dqhj[wpidName] += power;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ tableData.find((ele) => {//地区合并
|
|
|
|
+ if (ele.dqhj == 1) {
|
|
|
|
+ ele.dqhj = dqhj[ele.wpid.split("_")[0]];
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ let arr = [];
|
|
|
|
+ Weatherfd.forEach((ele, index) => {
|
|
|
|
+ arr.push(ele);
|
|
|
|
+ tableData.forEach((ele2, index2) => {
|
|
|
|
+ if (ele.wpid === ele2.wpid && ele.speed === "夜间") {
|
|
|
|
+ arr.push(ele2);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ that.getSpanArr(arr);
|
|
|
|
+ that.tableData = arr;
|
|
|
|
+ },
|
|
|
|
+ yhmxdbMethod({row,column,rowIndex,columnIndex}) {
|
|
|
|
+ if (columnIndex === 0) {
|
|
|
|
+ let _row = this.spanArr[rowIndex];
|
|
|
|
+ const _col = _row > 0 ? 1 : 0;
|
|
|
|
+ return [_row, _col];
|
|
|
|
+ } else if (columnIndex === this.dateS.length + 2) {//合计列
|
|
|
|
+ let _row = this.spanArr[rowIndex];
|
|
|
|
+ if (_row < 3) {
|
|
|
|
+ _row = 1;
|
|
|
|
+ }
|
|
|
|
+ const _col = _row > 0 ? 1 : 0;
|
|
|
|
+ return [_row, _col];
|
|
|
|
+ } else if (columnIndex === this.dateS.length + 3) {//地区合并列
|
|
|
|
+ let _row = this.spanArrHj[rowIndex];
|
|
|
|
+ const _col = _row > 0 ? 1 : 0;
|
|
|
|
+ return [_row, _col];
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ getSpanArr(data) {
|
|
|
|
+ this.spanArr = [];
|
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
|
+ if (i === 0) {
|
|
|
|
+ this.spanArr.push(1);
|
|
|
|
+ this.pos = 0;
|
|
|
|
+ } else {// 判断当前元素与上一个元素是否相同
|
|
|
|
+ if (data[i].region === data[i - 1].region) {
|
|
|
|
+ this.spanArr[this.pos] += 1;
|
|
|
|
+ this.spanArr.push(0);
|
|
|
|
+ } else {
|
|
|
|
+ this.spanArr.push(1);
|
|
|
|
+ this.pos = i;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ let spanArrIndex = [], //下标为2时,获取spanArr所对应的下标
|
|
|
|
+ idx = [];
|
|
|
|
+ this.spanArr.forEach((ele, index) => {
|
|
|
|
+ if (ele === 2) {
|
|
|
|
+ idx.push(index + 2);
|
|
|
|
+ spanArrIndex.push(1);
|
|
|
|
+ } else if (this.spanArr[index - 1] === 2) {
|
|
|
|
+ spanArrIndex.push(1);
|
|
|
|
+ } else {
|
|
|
|
+ spanArrIndex.push(0);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ idx.push(this.spanArr.length + 2);
|
|
|
|
+ idx.forEach((ele, index) => {
|
|
|
|
+ if (idx[index + 1]) {
|
|
|
|
+ spanArrIndex[ele] = idx[index + 1] - (ele + 2);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ this.spanArrHj = spanArrIndex;
|
|
|
|
+ },
|
|
|
|
+ getSummaries(param) {
|
|
|
|
+ const {columns,data} = param;
|
|
|
|
+ const sums = [];
|
|
|
|
+ columns.forEach((column, index) => {
|
|
|
|
+ if (index === 0) {
|
|
|
|
+ sums[index] = "合计";
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ const values = data.map((item) => {
|
|
|
|
+ if (item.pjid && item.speed === "白天") {
|
|
|
|
+ return Number(item[column.property]);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ if (!values.every((value) => isNaN(value))) {
|
|
|
|
+ sums[index] = values.reduce((prev, curr) => {
|
|
|
|
+ const value = Number(curr);
|
|
|
|
+ if (!isNaN(value)) {
|
|
|
|
+ return prev + curr;
|
|
|
|
+ } else {
|
|
|
|
+ return prev;
|
|
|
|
+ }
|
|
|
|
+ }, 0);
|
|
|
|
+ } else {
|
|
|
|
+ sums[index] = "";
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ sums[sums.length - 1] = "";
|
|
|
|
+ return sums;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ month(e) {
|
|
|
|
+ this.list(new Date(e).valueOf());
|
|
|
|
+ let tit = e.split("-");
|
|
|
|
+ if (tit[1].indexOf(0) != -1) {
|
|
|
|
+ tit[1] = tit[1].split("0")[1];
|
|
|
|
+ }
|
|
|
|
+ this.monthTitle = tit[0] + "年" + tit[1] + "月";
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ };
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less">
|
|
|
|
+ .main-body {
|
|
|
|
+ .dlTable {
|
|
|
|
+ .el-table thead.is-group th.el-table__cell {
|
|
|
|
+ background-color: rgb(30, 37, 36);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-table__expanded-cell {
|
|
|
|
+ background: #141e1e;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-table__body {
|
|
|
|
+ tr.hover-row>td {
|
|
|
|
+ background-color: rgb(4, 12, 11);
|
|
|
|
+ color: #b3bdc0 !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ td {
|
|
|
|
+ background-color: rgb(4, 12, 11);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ td[rowspan="2"],
|
|
|
|
+ td[rowspan="3"],
|
|
|
|
+ td[rowspan="6"],
|
|
|
|
+ td[rowspan="9"],
|
|
|
|
+ td[rowspan="12"],
|
|
|
|
+ tr.hover-row>td[rowspan="2"],
|
|
|
|
+ tr.hover-row>td[rowspan="3"],
|
|
|
|
+ tr:hover td {
|
|
|
|
+ background-color: #141e1e !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-table__fixed-footer-wrapper tbody td.el-table__cell {
|
|
|
|
+ color: #b3bdc0;
|
|
|
|
+ background-color: rgb(30, 37, 36) !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-table__footer-wrapper tbody td.el-table__cell,
|
|
|
|
+ .el-table__header-wrapper tbody td.el-table__cell {
|
|
|
|
+ color: white;
|
|
|
|
+ background-color: rgb(4, 12, 11);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-table__cell.is-hidden>* {
|
|
|
|
+ visibility: inherit;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|