预测风速点量，合并单元格完成，总合计有问题

src/views/report/nhycfsdl.vue

@@ -12,7 +12,9 @@
 			</div>
 		</div>
 		<panel :title="month+'发电量预测'" :showLine="false">
-			<el-table :data="tableData" height="80vh" class="hj-table" style="width: 100%" :span-method="yhmxdbMethod">
+			<!-- :summary-method="getSummaries" -->
+			<el-table :data="tableData" height="80vh" class="hj-table" 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="日期">
@@ -35,6 +37,7 @@
 				monthData: '',
 				spanArr: [],
 				pos: 0,
+				spanArrHj: [],
 				dateS: [{
 					prop: '01',
 					label: 1
@@ -53,7 +56,6 @@
 			}
 		},
 		created() {
-			console.log(this.res)
 			this.list(this.res.data);
 		},
 		methods: {
@@ -114,9 +116,12 @@
 				let that = this,
 					tableData = [],
 					pjid = [],
-					add = [];
+					wpid = [],
+					dqhj = {};
 				data.Forecastwindspeed.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({
@@ -124,7 +129,9 @@
 							speed: '白天',
 							[dd]: ele.daypower,
 							wpid: ele.wpid,
-							pjid: ele.pjid
+							pjid: ele.pjid,
+							hj: power,
+							dqhj: 1
 						})
 						tableData.push({
 							region: ele.pjname,
@@ -136,27 +143,33 @@
 						tableData.push({
 							region: ele.pjname,
 							speed: '合计',
-							[dd]: ele.daypower + ele.nightpower,
+							[dd]: power,
 							wpid: ele.wpid,
-							pjid: ele.pjid
+							pjid: ele.pjid,
 						})
-						add.push(ele.daypower, ele.nightpower);
+						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;
-									// add[index2] = add[index2] + ele.daypower;
+									tableData[index2].hj += power;
 								} else if (ele2.speed === '夜间') {
 									tableData[index2][dd] = ele.nightpower;
-									// add[index2] = add[index2] + ele.nightpower;
 								} else {
-									tableData[index2][dd] = ele.daypower + ele.nightpower
+									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)
@@ -176,22 +189,27 @@
 				columnIndex
 			}) {
 				if (columnIndex === 0) {
-					const _row = this.spanArr[rowIndex];
+					let _row = this.spanArr[rowIndex];
 					const _col = _row > 0 ? 1 : 0;
-					return {
-						rowspan: _row,
-						colspan: _col
+					return [_row, _col]
+				} else if (columnIndex === (this.dateS.length + 2)) { //合计列
+					let _row = this.spanArr[rowIndex];
+					if (_row < 3) {
+						_row = 1
 					}
-				}else if(columnIndex === 5){
-					// 这里
+					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) {
-				console.log(data)
 				for (var i = 0; i < data.length; i++) {
-					if (i === 0) { 
+					if (i === 0) {
 						this.spanArr.push(1);
-						this.pos = 0
+						this.pos = 0;
 					} else {
 						// 判断当前元素与上一个元素是否相同
 						if (data[i].region === data[i - 1].region) {
@@ -201,18 +219,56 @@
 							this.spanArr.push(1);
 							this.pos = i;
 						}
-						if(data[i].pjid){
-							if (data[i].pjid === data[i - 1].pjid) {
-							console.log(this.pos)
-								// this.spanArr[that.dateS.length + 4] += 1;
-								// this.spanArr.push();
-							}
-						}
-						
 					}
 				}
-				// console.log(this.spanArr)
+
+				let spanArrIndex = [], //下标为2时，获取spanArr所对应的下标
+					idx = [];
+				this.spanArr.forEach((ele, index) => {
+					if (ele === 2) {
+						idx.push(index + 2);
+					}
+					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] = '';
+					}
+				});
+				return sums;
+			}
 		},
 		watch: {
 			month(e) {
@@ -229,12 +285,13 @@
 		}
 
 		.el-table__body {
+
 			tr.hover-row.current-row>td,
 			tr.hover-row.el-table__row--striped.current-row>td,
 			tr.hover-row.el-table__row--striped>td,
 			tr.hover-row>td {
 				background-color: rgb(4, 12, 11);
-				color: none;
+				color: #B3BDC0;
 			}
 
 			td {
@@ -248,5 +305,20 @@
 				background-color: #141E1E;
 			}
 		}
+
+		.el-table__fixed-footer-wrapper tbody td.el-table__cell {
+			color: #B3BDC0;
+			background-color: rgb(30, 37, 36);
+		}
+
+		.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>