hb_sis_zhfx/src/views/report/ExportExcel.vue

<template>
	<div class="ExportExcel">
		<el-row style="margin-bottom: 15px;padding-bottom: 15px;border-bottom: 2px solid #EEE8D5;">
			<el-col :span="12">
				<button class="btn" :class="templateId == 1?'green':''" @click="typeClick(1)">单机数据模板</button>
				<button class="btn" :class="templateId == 2?'green':''" @click="typeClick(2)">上网电量及功率、测风塔数据模板</button>
			</el-col>
			<el-col :span="12">
				<el-row justify="end">
					<button class="btn green" @click="allExport()">一键导出</button>
				</el-row>
			</el-col>
		</el-row>
		<table class="com-table">
			<thead>
				<tr>
					<th>
						场站
					</th>
					<th>
						<input class='t2' type='checkbox' @click="rqCheck" checked='checked'/>
						日期
					</th>
					<th>
						<input class='t2' type='checkbox' @click="sjCheck" checked='checked'/>
						时间间隔(s)
					</th>
					<th width="120px">
						操作
					</th>
				</tr>
			</thead>
			<el-scrollbar>
				<tbody>
					<tr v-for="(row, index) of tableData" :key="index">
						<td>
							{{row.fdc}}
						</td>
						<td class="excelPickerTd">
							<el-date-picker v-model="value1[index]" type="daterange" @change='value1Change(index)' range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期" class="mr15">
							</el-date-picker>
						</td>
						<td>
							<el-input placeholder="请输入时间间隔" type='number' v-model="inputVal[index]" @change='inputValChange(index)'></el-input>
						</td>
						<td width="120px">
							<el-button type='text' style='cursor: pointer;' @click="thisExport(index)">导出
							</el-button>
						</td>
					</tr>
				</tbody>
			</el-scrollbar>
		</table>
	</div>
</template>

<script>
	import JsZip from 'jszip';
	import {
		export_blob,
		export_more_blob
	} from "@tools/excel/Export2Excel.js";
	import BASE from "@tools/basicTool.js";
	export default {
		components: {
			JsZip
		},
		data() {
			const that = this;
			return {
				single:false,//单击导出状态【点击后，用于判断其状态，为true时，loading显示】
				rqChecked:true,//日期单击checkbox状态【为true时，下方任意日期选择与当前选择同步】
				sjChecked:true,//时间间隔checkbox状态【为true时，下方任意时间选择与当前选择同步】
				tableData: [],//表格数据
				value1: [],//日期数组，默认一个月的，当用户改变某一个时，找到对应下标去改数据
				inputVal: [],//时间同上
				startTs: [],//起始时间，通过下标去找对应的时间
				endTs: [],//结束时间
				muBan: {
					type1: ['数据时间', 'scada风速（m/s）', 'scada功率（kW）', '是否故障（故障=1，不故障=0）', '是否限电（限电=1，不限电=0）'],
					type2: [
						['数据时间', '日报上网电量（mWh）'],
						['数据时间', '上网功率（kW）'],
						['数据时间', '轮毂高度平均风速（m/s）', '轮毂高度平均风向（°）', '温度（℃）', '压强（hPa）', '湿度（%）']
					],
				},
				templateId: 1,//模板默认为1
				stations: [],//场站名
				paths: [],//excel的所有数据，最终给zip传
				pathName: [],//excel的名字
				zipNames: [],
				tempArrayS: [],//模板2时，遍历里面的数据
			}
		},
		created() {
			this.tableVal();
		},
		methods: {
			value1Change(index){//日期数组，默认一个月的，当用户改变某一个时，找到对应下标去改数据
				if(this.rqChecked){
					var date = this.value1[index];
					this.value1 = [];
					this.tableData.forEach((ele, index) => {
						this.value1.push(date);
						this.time(index, date);
					})
				}
			},
			inputValChange(index){
				if(this.sjChecked){
					var sj = this.inputVal[index];
					this.inputVal = [];
					this.tableData.forEach((ele, index) => {
						this.inputVal.push(sj);
					})
				}
			},
			rqCheck(){
				this.rqChecked=event.target.checked
			},
			sjCheck(){
				this.sjChecked=event.target.checked
			},
			typeClick(a){//模板切换，改变按钮颜色
				this.templateId = a;
			},
			thisExport(index) {//当前导出，index为下标
				let that = this;
				that.single = true;
				// 下面的是通过下标找到对应的数据,请求ajax
				that.time(index, that.value1[index]);
				that.stations[index] = that.tableData[index].value;
				that.allExportF(0, index);
			},
			tableVal() {
				let that = this;
				that.API.requestData({
					method: "GET",
					subUrl: "export/databases",
					success(res) {
						if (res.code === 200) {
							const arr3 = [];
							const arr4 = [];
							var data = []; //项目列表
							res.data.forEach((item,index) => {
								const value = Object.keys(item)[0];
								arr3.push(value);
								arr4.push(item[value]);
								data.push({
									fdc: item[value],
									value: value,
								});
								that.inputVal.push(1800);
							})
							that.stations = arr3;
							that.zipNames = arr4;
							that.tableData = data;
							that.defaultValue1();
						}
					},
				});
			},
			defaultValue1() { //默认时间区间
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				/////////////
				var nowDate = new Date();
				var year = nowDate.getFullYear();
				var month = nowDate.getMonth();
				var day = nowDate.getDate();

				this.tableData.forEach((ele, index) => {
					this.value1.push([start, end]);
					this.time(index, [start, end]);
				})
			},
			formatJson(filterVal, jsonData) {//模板1时，转数据格式
				return jsonData.map(v => filterVal.map(j => v[j]));
			},
			allExport() {//一键导出
				this.allExportF(0);
			},
			allExportF(_index, thisIndex) {//_index递归递增，thisIndex单击导出【下标】
				BASE.showLoading({text:'正在导出，请耐心等待...'});
				const that = this;
				if (that.stations[_index]) {
					that.API.requestData({
						method: "GET",
						subUrl: "export/history/all",
						data: {
							templateId: that.templateId,
							startTs: thisIndex!=undefined ? that.startTs[thisIndex] : that.startTs[_index],
							endTs: thisIndex!=undefined ? that.endTs[thisIndex] + 86400000 : that.endTs[_index] + 86400000,
							interval: thisIndex!=undefined ? that.inputVal[thisIndex] : that.inputVal[_index],
							station: thisIndex!=undefined ? that.stations[thisIndex] : that.stations[_index]
						},
						success(res) {
							if (res.code == 200) {
								if (thisIndex!=undefined) {//单击导出
									if (that.templateId == 1) {//模板1
										that.export(res.data, 0, that.zipNames[thisIndex]);
									} else if (that.templateId == 2) {//模板2
										that.exportMuban2(res.data, 0, that.zipNames[thisIndex]);
									}
								} else {//一键导出
									if (that.templateId == 1) {
										that.export(res.data, 0, that.zipNames[_index], ++_index);
									} else if (that.templateId == 2) {
										that.exportMuban2(res.data, 0, that.zipNames[_index], ++_index);
									}
								}
							}
						}
					});
				}
			},
			export (data, _index, zipName, deepIndex) {
				// deepIndex判断单击或一键
				const that = this;
				let tHeader = that.muBan['type' + that.templateId];
				var dataKey = Object.keys(data);
				var key = dataKey[_index];
				if (key) {
					let tempObject = {};
					let tempArray = [];
					const dataLength = data[key].length;

					let filterVal = [];
					data[key][0].forEach((pEle, pIndex) => {
						for (let i = 0; i < dataLength; i++) {
							tempObject[String(i)] = data[key][i][pIndex];
						}
						tempArray.push(tempObject)
						tempObject = {};
					})

					data[key][0].forEach((ele, index) => {
						filterVal.push(index);
					});
					that.paths.push(export_blob(tHeader, that.formatJson(filterVal, tempArray))); //传blob
					var str = key.split('_');
					that.pathName.push(str[0].substring(0,2)+str[1]); //excel的名字
					_index++;
					
					if (deepIndex!=undefined) {
						setTimeout(() => {
							that.export(data, _index, zipName, deepIndex);
						}, 500);
						if (dataKey.length == _index) { //当长度一致时，向zip塞值
							var thisPath = that.paths,
								thisPathName = that.pathName;
							that.paths = [];
							that.pathName = [];
							that.zipOut(thisPath, thisPathName, zipName, deepIndex)
						}
					} else {
						setTimeout(() => {
							that.export(data, _index, zipName);
						}, 500);
						if (dataKey.length == _index) { //当长度一致时，向zip塞值
							var thisPath = that.paths,
								thisPathName = that.pathName;
							that.paths = [];
							that.pathName = [];
							that.zipOut(thisPath, thisPathName, zipName)
						}
					}
				}
			},
			exportMuban2(data, _index, excelName, deepIndex) {
				const that = this;
				var dataKey = Object.keys(data);
				let tHeader = that.muBan['type' + that.templateId];
				var key = dataKey[_index];
				if (key) {
					let tempObject = {};
					let tempArray = [];
					const dataLength = data[key].length;
					data[key][0].forEach((pEle, pIndex) => {
						for (let i = 0; i < dataLength; i++) {
							tempObject[String(i)] = data[key][i][pIndex];
						}
						tempArray.push(tempObject)
						tempObject = {};
					})

					that.tempArrayS.push(tempArray);
					_index++;
					if (dataKey.length == that.tempArrayS.length) {
						let obj = [];
						that.tempArrayS.forEach((ele, index) => {
							obj[index] = [];
							ele.forEach((ele2, index2) => {
								var key = Object.keys(ele2)
								var arr = [];
								key.forEach((ele3, index3) => {
									arr.push(ele2[ele3])
								})
								obj[index][index2] = arr;
								arr = [];
							})
						})
						if (deepIndex!=undefined) {
							that.paths.push(export_more_blob(tHeader, obj)); //传blob
							that.pathName.push(excelName); //excel的名字
							that.tempArrayS = [];
							that.allExportF(deepIndex);
						} else {
							that.paths.push(export_more_blob(tHeader, obj, excelName)); //只渲染一个excel
							BASE.closeLoading();
						}
					}
					if (deepIndex!=undefined) {
						that.exportMuban2(data, _index, excelName, deepIndex);
						if (that.stations.length == deepIndex && _index == 1) { //当长度一致时，向zip塞值，_index只让执行第一次
							var thisPath = that.paths,
								thisPathName = that.pathName;
							that.tempArrayS = [];
							that.paths = [];
							that.pathName = [];
							that.zipOut(thisPath, thisPathName, '风电场_上网电量&功率&测风塔数据')
							BASE.closeLoading();
						}
					}else{
						that.exportMuban2(data, _index, excelName);
						if (that.stations.length && _index == 1) { //当长度一致时，向zip塞值，_index只让执行第一次
							var thisPath = that.paths,
								thisPathName = that.pathName;
							that.tempArrayS = [];
							that.paths = [];
							that.pathName = [];
							BASE.closeLoading();
						}
					}
				}
			},
			zipOut(paths, pathName, zipName, deepIndex) {
				// paths 所有blob
				// pathName 所有excel文件名
				// zipName zip的包名
				// deepIndex 执行ajax下标，当zipOut方法执行完后，再执行allExportF
				const that = this;
				var zip = new JsZip();
				paths.forEach((item, index) => {
					const arr_name = item // 下载文件, 并存成ArrayBuffer对象
					const file_name = pathName[index] + '.xlsx' // 获取文件名
					zip.file(file_name, arr_name, {
						binary: true
					}) // 逐个添加文件
				})
				zip.generateAsync({
						type: 'blob',
					})
					.then(function(content) {
						// 下载的文件名
						var filename = zipName + '.zip'
						// 创建隐藏的可下载链接
						var eleLink = document.createElement('a')
						eleLink.download = filename
						eleLink.style.display = 'none'
						// 下载内容转变成blob地址
						eleLink.href = URL.createObjectURL(content)
						// 触发点击
						document.body.appendChild(eleLink)
						eleLink.click()
						// 然后移除
						document.body.removeChild(eleLink)
						if (deepIndex) {
							that.allExportF(deepIndex); //递归，去执行ajax
							if(that.stations.length == deepIndex){
								BASE.closeLoading();
							}
						}else if(that.single){
							BASE.closeLoading();
							that.single = false;
						}
					})
			},
			time(index, val) {//时间转时间戳
				this.startTs[index] = Date.parse(new Date(val[0]));
				this.endTs[index] = Date.parse(new Date(val[1]) + 86400000);
			},
		},
	}
</script>

<style lang="less">
	.excelPickerTd input {
		flex: 1;
	}
	.el-date-editor--daterange.mr15{
		    border: 1px solid rgba(96, 103, 105, 0.2);
		    height: 33px;
		    padding: 0 8px;
		    width: 369px;
			input{
				background-color: transparent;
				color: white;
			}
			.el-range-separator{
				color: white;
			}
	}
	.com-table td{
		color: white !important;
	}
	.t2{top: 2px;position: relative !important;}
</style>