sis_zhfx/src/views/report/dlyc.vue

<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 class="query-actions">
				  <button class="btn" @click="exportExcel()">导出</button>
				</div>
			</div>
		</div>
		<panel :title="monthTitle + '发电量预测'" :showLine="false">
			<el-table :data="tableData" height="85vh" style="width: 100%;" class="" 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>
			<el-table :data="tableDataExport" height="85vh" style="width: 100%;display: none;" id="out-table" :span-method="yhmxdbMethod">
				<el-table-column prop="region" label="名称" width="120" />
				<el-table-column 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 prop="hj" label="平均风速/合计" width="100" align="center" />
				<el-table-column prop="dqhj" label="地区合并" width="100" align="center" />
			</el-table>
		</panel>
	</div>
</template>

<script>
	import $ from "jquery";
	import Panel from "@/components/coms/panel/panel.vue";
	import FileSaver from "file-saver";
	    import XLSX from "xlsx";
	export default {
		components: {
			Panel,
			FileSaver,
			XLSX
		},
		data() {
			return {
				month: new Date().formatDate("yyyy-MM"),
				monthTitle: "",
				spanArr: [],
				pos: 0,
				spanArrHj: [],
				SUM:[],
				dateS: [{
						prop: "01",
						label: 1,
					},
					{
						prop: "02",
						label: 2,
					},
				],
				tableData: [{
					region: "Tom",
					speed: "白天",
					hj: 3,
					dqhj: 6,
					"01": 55,
					wpid: "NSS_FDC",
				}],
				tableDataExport:[]
			};
		},
		created() {
			this.monthTit(this.month);
			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/ycfsdl/" + 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,port) {
				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 if (data[i].region === '合计') {
							this.spanArr.push(1);
							this.pos = i;
						} 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 || ele === 1) {
						spanArrIndex.push(1);
					}else {
						spanArrIndex.push(0);
					}
				});
				
				if(port){
					idx.push(this.spanArr.length + 1);
				}else{
					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] = "";
				this.SUM = sums;
				return sums;
			},
			tableDataE(tableData,SUM){
				let tableDataExport = [...tableData],
					sums = {},
					dateS = [];
				this.dateS.forEach(ele=>{
					dateS.push(ele.prop)
				})
				SUM.forEach((ele,index)=>{
					if(index === 0){
						sums['region'] = ele;
					}else if(index < SUM.length - 2 && index > 1){
						sums[dateS[index - 2]] = ele;
					}else if(index === SUM.length - 2){
						sums['dqhj'] = ele
					}else if(index === SUM.length - 1){
						sums['hj'] = ele
					}
				})
				tableDataExport.push(sums);
				this.getSpanArr(tableDataExport,true);
				this.tableDataExport = tableDataExport;
				/* 从表生成工作簿对象 */
				setTimeout(()=>{
					let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
					/* 获取二进制字符串作为输出 */
					var wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: true,type: 'array'})
					try {
					    FileSaver.saveAs(
					    new Blob([wbout], { type: 'application/octet-stream' }),this.monthTitle + '发电量预测.xlsx')
					} catch (e) {
					    if (typeof console !== 'undefined') console.log(e, wbout)
					}
					return wbout
				},1500)
			},
			exportExcel() {
				this.tableDataE(this.tableData,this.SUM)
			},
			monthTit(e){
				let tit = e.split("-");
				if (tit[1].indexOf(0) != -1) {
					tit[1] = tit[1].split("0")[1];
				}
				this.monthTitle = tit[0] + "年" + tit[1] + "月";
			}
		},
		watch: {
			month(e) {
				this.list(new Date(e).valueOf());
				this.monthTit(e);
			},
		},
	};
</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"],
				tr.hover-row>td[rowspan="2"],
				tr.hover-row>td[rowspan="3"],
				tr td:last-of-type,
				tr td:nth-last-of-type(2),
				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>