<!-- 全厂电量统计 -->
<template>
	<div class="app-container">
		<el-header>
			<div class="left-panel">
				<el-date-picker
					v-model="search_date"
					type="date"
					value-format="YYYY-MM-DD"
					format="YYYY-MM-DD"
					placeholder="天"
					style="margin-right: 6px"
					@change="dateChange"
				/>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="dateChange"
				></el-button>
				<el-button
					type="primary"
					@click="exportExcel()"
					:loading="exportLoading"
					>导出xlsx
				</el-button>
				<el-button type="primary" @click="handlePrint">打印 </el-button>
			</div>
		</el-header>
		<el-card style="margin-top: 5px">
			<div class="printWrap">
				<div ref="print" id="myReport" class="printContainer">
					<table
						border="1"
						width="2700"
						cellspacing="0"
						:key="timeStamp"
						id="myTable"
						class="myTable"
					>
						<thead class="myTableHead">
							<tr>
								<th colspan="28">电量消耗小时报表</th>
							</tr>
							<tr>
								<th>工段</th>
								<th>设备</th>
								<th>单位</th>
								<th v-for="item in 24" :key="item">
									{{ item - 1 }}时
								</th>
								<th>本日合计</th>
							</tr>
						</thead>
						<tr v-for="(item, index) in tableDatas" :key="index">
							<td class="numCell" v-if="index == 0" rowspan="4">
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 4"
								rowspan="5"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 9"
								rowspan="5"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 14"
								rowspan="4"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 18"
								rowspan="3"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="index == 21"
								rowspan="5"
							>
								{{ item[0] }}
							</td>
							<td
								class="numCell"
								v-else-if="
									index == 26 || index == 27 || index == 28
								"
							>
								{{ item[0] }}
							</td>
							<td class="numCell">{{ item[1] }}</td>
							<td class="numCell">{{ item[2] }}</td>

							<td
								class="numCell"
								v-for="hour_item in hours"
								:key="hour_item"
								@click="itemClick(item, index)"
							>
								{{ item[2 + hour_item] }}
							</td>
							<td class="numCell">{{ item[27] }}</td>
						</tr>
					</table>
				</div>
			</div>
		</el-card>
		<el-dialog v-model="itemVisible" :title="itemChartTitle">
			<scEcharts
				height="400px"
				width="1033px"
				:option="option"
			></scEcharts>
			<template #footer>
				<slot name="footer"></slot>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import scEcharts from "@/components/scEcharts";
export default {
	components: {
		scEcharts,
	},
	data() {
		return {
			day: "",
			year: "",
			month: "",
			search_date: "",
			tableDatas1: [
				["石灰石破碎", "破碎机", "kw.h"], //0
				["石灰石破碎", "堆取料机", "kw.h"],
				["石灰石破碎", "低压变压器柜", "kw.h"],
				["石灰石破碎", "石灰石破碎合计", "kw.h"],
				["原料磨", "循环风机", "kw.h"],
				["原料磨", "辊压机", "kw.h"],
				["原料磨", "调配变压器", "kw.h"],
				["原料磨", "低压变压器柜器", "kw.h"],
				["原料磨", "原料磨系统合计", "kw.h"],
				["回转窑", "尾排风机", "kw.h"],
				["回转窑", "高温风机", "kw.h"],
				["回转窑", "头排风机", "kw.h"],
				["回转窑", "低压变压器柜", "kw.h"],
				["回转窑", "回转窑烧成系统合计", "kw.h"],
				["煤磨", "煤磨主电机", "kw.h"],
				["煤磨", "煤磨排风机", "kw.h"],
				["煤磨", "低压变压器柜", "kw.h"],
				["煤磨", "煤磨系统合计", "kw.h"],
				["余热发电", "余热发电量", "kw.h"],
				["余热发电", "余热发电自用电量", "kw.h"],
				["余热发电", "余热供电量", "kw.h"],
				["空压机", "1#空压机", "kw.h"],
				["空压机", "2#空压机", "kw.h"],
				["空压机", "3#空压机", "kw.h"],
				["空压机", "4#空压机", "kw.h"],
				["空压机", "空压机合计", "kw.h"],
				["富氧燃烧系统", "富氧燃烧耗电设备", "kw.h"],
				["生产总耗电量", "生产部分总耗电", "kw.h"],
				["全厂进线", "全厂耗电量", "kw.h"],
			],
			mpointList: [],
			tableDatas: [],
			hours: [
				1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
				19, 20, 21, 22, 23, 24,
			],
			mgroupList: [
				"石灰石破碎",
				"原料磨",
				"回转窑",
				"煤磨",
				"余热发电",
				"空压机",
				"富氧燃烧系统",
				"生产总耗电量",
				"全厂进线",
			],
			mgroup: "石灰石破碎",
			itemChartTitle: "",
			itemChartData: [],
			itemChartXData: [],
			itemChartYData: [],
			itemChartLegend: [],
			itemChartSeries: [],
			timeStamp: null,
			itemVisible: false,
			exportLoading: false,
			tableName: "全厂电量小时统计",
			sourceData: {},
			option: {
				title: {
					text: "全厂电量小时统计",
					x: "center",
				},
				grid: {
					top: "20%",
					left: "3%",
					right: "10%",
					bottom: "5%",
					containLabel: true,
				},
				legend: {
					orient: "horizontal",
					x: "right",
					y: "10",
					data: [],
				},
				xAxis: {
					type: "category",
					data: [],
					name: "时间",

					nameTextStyle: {
						fontWeight: 600,
						fontSize: 14,
					},
					axisLine: {
						lineStyle: {
							color: "#3366CC",
						},
					},
					axisLabel: {
						rotate: 45,
						interval: 0,
					},
					boundaryGap: false,
				},
				yAxis: {
					type: "value",
					name: "对象值",
					nameTextStyle: {
						fontWeight: 500,
						fontSize: 14,
					},
					axisLine: {
						lineStyle: {
							color: "#3366CC",
						},
					},
				},
				tooltip: {
					show: true,
					trigger: "axis",
					axisPointer: {
						type: "cross",
						axis: "auto",
						snap: true,
					},
					showContent: true,
				},
				series: [
					{
						name: "",
						data: [],
						type: "line",
						symbolSize: 8,
						symbol: "circle",
						smooth: 0.5,
						itemStyle: {
							normal: {
								label: {
									show: true,
								},
								lineStyle: {
									width: 1,
									type: "dotted",
									color: "#3366CC",
								},
							},
						},
					},
				],
			},
			xAxisData: [],
		};
	},
	mounted() {
		let that = this;
		var nowDate = new Date();
		let year = nowDate.getFullYear();
		let month = nowDate.getMonth() + 1;
		let day = nowDate.getDate();
		that.timeStamp = nowDate.getTime();
		let month_s = month > 9 ? month : "0" + month;
		let day_s = day > 9 ? day : "0" + day;
		that.day = day;
		that.year = year;
		that.month = month;
		that.search_date = year + "-" + month_s + "-" + day_s;
		for (let i = 0; i < that.tableDatas.length; i++) {
			for (let j = 0; j < 24; j++) {
				let k = 3 + j;
				that.tableDatas[i][k] = 0;
				this.$forceUpdate();
			}
		}
		for (let n = 0; n < 24; n++) {
			that.xAxisData.push(n + "时");
		}
		this.getMPoints();
	},
	methods: {
		dateChange(e) {
			let that = this;
			that.tableDatas = [];
			let arr = that.search_date.split("-");
			that.year = Number(arr[0]);
			that.month = Number(arr[1]);
			that.day = Number(arr[2]);
			// for (let i = 0; i < that.tableDatas.length; i++) {
			// 	for (let j = 0; j < 25; j++) {
			// 		let k = 3 + j;
			// 		that.tableDatas[i][k] = 0;
			// 		this.$forceUpdate();
			// 	}
			// }
			let nowDate = new Date();
			that.timeStamp = nowDate.getTime();
			that.getLengthData();
			that.dataLoop();
		},
		getMPoints() {
			let that = this;
			that.$API.enm.mpoint.list
				.req({
					page: 0,
					enabled: 1,
					need_display: 1,
					ordering: "report_sortstr",
					material__code__in: "elec,elec_0",
					query: "{ id, name, nickname, mgroup_name, unit }",
				})
				.then((res) => {
					// let data = res.slice(3);
					that.mpointList = res;
					that.dataLoop();
				});
		},
		getLengthData() {
			let that = this;
			let arrs = [];
			that.mpointList.forEach((item, index) => {
				if (arrs.indexOf(item.mgroup_name) == -1) {
					arrs.push(item.mgroup_name);
				}
			});
		},
		dataLoop() {
			let that = this;
			that.tableDatas = [];
			that.mpointList.forEach((item, index) => {
				let arr = [];
				arr[0] =
					item.mgroup_name != null ? item.mgroup_name : item.name;
				arr[1] = item.nickname != null ? item.nickname : item.name;
				arr[2] = item.unit;
				for (let i = 0; i < 24; i++) {
					arr[i + 3] = 0;
				}
				that.tableDatas.push(arr);
				that.getData(item.id, index);
			});
		},
		getData(id, index) {
			let that = this;
			let obj = {};
			obj.type = "hour";
			obj.year = that.year;
			obj.month = that.month;
			obj.day = that.day;
			obj.mpoint = id;
			obj.page = 0;
			this.$API.enm.mpoint.stat.req(obj).then((res) => {
				console.log(res);
				let sum = 0;
				res.forEach((item) => {
					let ind = item.hour + 3;
					that.tableDatas[index][ind] = item.val;
					sum += Number(item.val);
				});
				sum = sum * 100;
				sum = Math.round(sum);
				sum = sum / 100;
				that.tableDatas[index][27] = sum.toFixed(2);
				that.$forceUpdate();
			});
		},
		getHourData() {
			let that = this;
			let m = 0;
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hour = date.getHours();
			let minute = date.getMinutes();
			let second = date.getSeconds();
		},
		getTableData() {
			for (let i = 0; i < this.tableDatas.length; i++) {
				let k = 0;
				if (i == 0 || i == 2 || i == 9 || i == 23 || i == 27) {
					k = 3;
				} else if (i == 49) {
					k = 1;
				} else {
					k = 2;
				}
				for (let j = k; j < this.tableDatas[i].length; j++) {
					this.tableDatas[i][j] = 0;
				}
			}
		},
		itemClick(item, index) {
			let that = this;
			let lineData = that.tableDatas[index].slice(3, that.headerLength);
			that.option.xAxis.data = that.xAxisData;
			that.option.series[0].data = lineData;
			this.itemVisible = true;
		},
		exportExcel() {
			this.exportLoading = true;
			this.$XLSX("#myTable", this.tableName);
			this.exportLoading = false;
		},
		handlePrint() {
			this.$PRINT("#myReport");
		},
	},
};
</script>
<style scoped>
.printWrap {
	width: 100%;
	overflow-x: scroll;
}
</style>
