<template>
	<div class="app-container">
		<el-header>
			<div class="left-panel">
				<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="1035"
						cellspacing="0"
						:key="timeStamp"
						id="myTable"
						class="myTable"
					>
						<thead class="myTableHead">
							<tr>
								<th colspan="5">主要设备单位产品电耗数据表</th>
							</tr>
							<tr>
								<th>设备名称</th>
								<th>单位</th>
								<th>上个小时</th>
								<th>昨日</th>
								<th>本月</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in tableDatas" :key="item">
								<template
									v-for="(item1, ind) in item"
									:key="item1"
								>
									<td
										v-if="ind == 0 || ind == 1"
										class="numCell"
									>
										{{ item1 }}
									</td>
									<td
										v-if="ind == 2"
										class="numCell"
										@click="itemClick('hour_s', item)"
									>
										{{ item1 }}
									</td>
									<td
										v-if="ind == 3"
										class="numCell"
										@click="itemClick('day_s', item)"
									>
										{{ item1 }}
									</td>
									<td
										v-if="ind == 4"
										class="numCell"
										@click="itemClick('month_s', item)"
									>
										{{ item1 }}
									</td>
								</template>
							</tr>
						</tbody>
					</table>
					<div class="radioWrap">
						<el-radio-group
							v-model="typeRadio"
							@change="typeRadioChange"
						>
							<el-radio-button label="day">本日</el-radio-button>
							<el-radio-button label="month"
								>本月</el-radio-button
							>
							<el-radio-button label="year">本年</el-radio-button>
						</el-radio-group>
						<div style="position: absolute; right: 20px">
							<el-date-picker
								v-model="searchDate"
								type="date"
								value-format="YYYY-MM-DD"
								formatter="YYYY-MM-DD"
								placeholder="选择日期"
								v-if="typeRadio == 'day'"
								@change="dateChange"
							></el-date-picker>
							<el-date-picker
								v-model="searchDate"
								type="month"
								value-format="YYYY-MM"
								formatter="YYYY-MM"
								placeholder="选择月"
								v-if="typeRadio == 'month'"
								@change="dateChange"
							></el-date-picker>
							<el-date-picker
								v-if="typeRadio == 'year'"
								v-model="searchDate"
								type="year"
								value-format="YYYY"
								formatter="YYYY"
								placeholder="选择年"
								@change="dateChange"
							></el-date-picker>
						</div>
					</div>
					<div class="chartWrap" v-show="typeRadio == 'day'">
						<div class="chartTitle">小时生产参数统计图</div>
						<scEcharts
							height="400px"
							width="1033px"
							:option="optionHour"
						></scEcharts>
					</div>
					<div class="chartWrap" v-show="typeRadio == 'month'">
						<div class="chartTitle">本月生产参数统计图</div>
						<scEcharts
							height="400px"
							width="1033px"
							:option="optionDay"
						></scEcharts>
					</div>
					<div class="chartWrap" v-show="typeRadio == 'year'">
						<div class="chartTitle">本年生产参数统计图</div>
						<scEcharts
							height="400px"
							width="1033px"
							:option="optionMonth"
						></scEcharts>
					</div>
				</div>
			</div>
			<charts
				v-if="asynDialog"
				:type="type"
				:title="title"
				:cate="cate"
				:apiObj="apiObj"
				:mpoint="mpoint"
				:modelValue="modelValue"
				:showClose="showClose"
				:echartType="echartType"
				@closed="asynDialog = false"
			></charts>
		</el-card>
	</div>
</template>
<script>
const colors = ["#647bfe", "#8698fe", "#a9b6fe", "#cbd3fe", "#91CC75"];
let tooltip = {
	show: true,
	trigger: "axis",
	axisPointer: {
		type: "cross",
	},
	confine: false,
	showContent: true,
	triggerOn: "mousemove",
};
let grid = {
	right: "3%",
	left: "7%",
	top: "15%",
};
let toolbox = {
	right: "5%",
	feature: {
		dataView: { show: true, readOnly: false },
		saveAsImage: { show: true },
	},
};
let legend = {
	top: "2%",
	data: [],
};
let yAxis = {
	type: "value",
	name: "分布电耗(KW.h/t)",
	alignTicks: true,
	axisLine: {
		show: true,
		lineStyle: {
			color: colors[3],
		},
	},
	axisLabel: {
		formatter: "{value}",
	},
};
import scEcharts from "@/components/scEcharts";
import { defineAsyncComponent } from "vue";
export default {
	components: {
		scEcharts,
		charts: defineAsyncComponent(() =>
			import("@/components/scEnm/lineChartsdialog.vue")
		),
	},
	data() {
		return {
			typeRadio: "day",
			exportLoading: false,
			chartShow: false,
			myOption: null,
			timeStamp: null,
			optionHour: {},
			optionDay: {},
			optionMonth: {},
			year: 2024,
			month: 5,
			days: 13,
			hours: 1,
			query: {
				mgroup: "",
			},
			mpoint: "",
			searchDate: "",
			tableName: "主要设备单位产品电耗数据表",
			tableDatas: [
				// ["辊压机", "KW·h/t", "", "", ""],
				// ["循环风机", "KW·h/t", "", "", ""],
			],
			modelValue: true,
			type: "hour_s",
			title: "原料磨工段",
			cate: "",
			apiObj: this.$API.enm.mpoint.stat,
			showClose: true,
			echartType: "line",
			asynDialog: false,
			allValHour: 0,
			allValDays: 0,
			allValMonth: 0,
			option1: {
				color: colors,
				tooltip: tooltip,
				grid: grid,
				toolbox: toolbox,
				legend: legend,
				xAxis: {
					axisTick: {
						show: true,
						length: 5,
						inside: true,
					},
					data: [],
				},
				yAxis: yAxis,
				series: [],
			},
			option2: {
				color: colors,
				tooltip: tooltip,
				grid: grid,
				toolbox: toolbox,
				legend: legend,
				xAxis: {
					axisTick: {
						show: true,
						length: 5,
						inside: true,
					},
					data: [],
				},
				yAxis: yAxis,
				series: [],
			},
			option3: {
				color: colors,
				tooltip: tooltip,
				grid: grid,
				toolbox: toolbox,
				legend: legend,
				xAxis: {
					axisTick: {
						show: true,
						length: 5,
						inside: true,
					},
					data: [],
				},
				yAxis: yAxis,
				series: [],
			},
			mpoints: [],
		};
	},
	mounted() {
		let that = this;
		var myDate = new Date();
		that.year = myDate.getFullYear();
		that.month = myDate.getMonth() + 1;
		that.days = myDate.getDate();
		that.hours = myDate.getHours();
		that.getMpoints();
		that.getTableHourData();
		that.getHourData(that.year, that.month, that.days);
		that.getDayData(that.year, that.month);
		that.getMonthData(that.year);
	},
	methods: {
		getMpoints() {
			let that = this;
			let obj = {};
			obj.mgroup__name = "原料磨";
			obj.page = 0;
			obj.enabled = 1;
			obj.need_display = 1;
			obj.ordering = "report_sortstr";
			obj.material__code__in = "elec,elec_0";
			this.$API.enm.mpoint.list.req(obj).then((res) => {
				console.log("mpoints", res);
				let arr = [];
				res.forEach((item) => {
					arr.push(item.nickname);
				});
				console.log("arr", arr);
				that.mpoints = arr;
			});
		},
		typeRadioChange() {
			this.searchDate = "";
		},
		dateChange(val) {
			console.log(val);
			if (this.typeRadio == "day") {
				let year = val.split("-")[0];
				let month = val.split("-")[1];
				let days = val.split("-")[2];
				this.getHourData(year, month, days);
			} else if (this.typeRadio == "month") {
				let year = val.split("-")[0];
				let month = val.split("-")[1];
				this.getDayData(year, month);
			} else {
				this.getMonthData(val);
			}
		},
		getTableHourData() {
			let that = this;
			that.tableDatas = [];
			let timeDate = new Date().getTime();
			let hourTime = timeDate - 3600000;
			let hourDate = new Date(hourTime);
			let year_h = hourDate.getFullYear();
			let month_h = hourDate.getMonth() + 1;
			let days_h = hourDate.getDate();
			let hours_h = hourDate.getHours();
			let minutes = hourDate.getMinutes();
			month_h = month_h > 9 ? month_h : "0" + month_h;
			days_h = days_h > 9 ? days_h : "0" + days_h;
			if (hours_h > 5) {
				hours_h = hours_h > 9 ? hours_h : "0" + hours_h;
			} else {
				hours_h = hours_h - 1;
				hours_h = hours_h > 9 ? hours_h : "0" + hours_h;
			}
			let obj = {};
			obj.type = "hour_s";
			obj.year = year_h;
			obj.month = month_h;
			obj.day = days_h;
			obj.hour = hours_h;
			obj.mgroup__name = "原料磨";
			obj.mpoint__material__code__in = "elec,elec_0";
			obj.mpoint__need_display = 1;
			obj.page = 0;
			this.$API.enm.mpoint.stat.req(obj).then((res) => {
				res.forEach((item) => {
					let index = that.mpoints.indexOf(item.mpoint_nickname);
					let obj = [];
					obj[0] = item.mpoint_nickname;
					obj[1] = "KW·h/t";
					obj[2] = item.elec_consume_unit;
					obj[3] = 0;
					obj[4] = 0;
					obj[5] = item.mpoint;
					that.tableDatas[index] = obj;
				});
				let yetTime = timeDate - 3600000 * 24;
				let ystDate = new Date(yetTime);
				let year_d = ystDate.getFullYear();
				let month_d = ystDate.getMonth() + 1;
				let days_d = ystDate.getDate();
				month_d = month_d > 9 ? month_d : "0" + month_d;
				days_d = days_d > 9 ? days_d : "0" + days_d;
				let obj_d = {};
				obj_d.type = "day_s";
				obj_d.year_s = year_d;
				obj_d.month_s = month_d;
				obj_d.day_s = days_d;
				obj_d.mgroup__name = "原料磨";
				obj_d.mpoint__material__code__in = "elec,elec_0";
				obj_d.mpoint__need_display = 1;
				obj_d.page = 0;
				this.$API.enm.mpoint.stat.req(obj_d).then((res) => {
					res.forEach((item) => {
						let index_d = that.mpoints.indexOf(
							item.mpoint_nickname
						);
						if (that.tableDatas[index_d]) {
							that.tableDatas[index_d][3] =
								item.elec_consume_unit;
						} else {
							let obj = [];
							obj[0] = item.mpoint_nickname;
							obj[1] = "KW·h/t";
							obj[3] = item.elec_consume_unit;
							obj[5] = item.mpoint;
							that.tableDatas[index_d] = obj;
						}
					});
				});
				let obj_m = {};
				obj_m.type = "month_s";
				obj_m.year_s = that.year;
				obj_m.month_s = that.month;
				obj_m.mgroup__name = "原料磨";
				obj_m.mpoint__material__code__in = "elec,elec_0";
				obj_m.mpoint__need_display = 1;
				obj_m.page = 0;
				this.$API.enm.mpoint.stat.req(obj_m).then((res) => {
					res.forEach((item) => {
						let index_m = that.mpoints.indexOf(
							item.mpoint_nickname
						);
						if (that.tableDatas[index_m]) {
							that.tableDatas[index_m][4] =
								item.elec_consume_unit;
						} else {
							let obj = [];
							obj[0] = item.mpoint_nickname;
							obj[1] = "KW·h/t";
							obj[4] = item.elec_consume_unit;
							obj[5] = item.mpoint;
							that.tableDatas[index_m] = obj;
						}
					});
				});
			});
		},
		//获取小时数据
		getHourData(year, month, days) {
			let that = this;
			let obj = {};
			obj.type = "hour_s";
			obj.year_s = year;
			obj.month_s = month;
			obj.day_s = days;
			obj.mgroup__name = "原料磨";
			obj.mpoint__material__code__in = "elec,elec_0";
			obj.mpoint__ep_monitored__isnull = 0;
			obj.mpoint__need_display = 1;
			obj.page = 0;
			this.$API.enm.mpoint.stat.req(obj).then((response) => {
				let seriesData = [];
				for (let i = 0; i < that.mpoints.length; i++) {
					seriesData.push([]);
				}
				response.forEach((item) => {
					let index = that.mpoints.indexOf(item.mpoint_nickname); //第几个mpoint
					let ind = item.hour; //xAxis
					seriesData[index][ind] = item.elec_consume_unit;
				});
				let options = { ...that.option1 };
				for (let j = 0; j < that.mpoints.length; j++) {
					let chartItem = {};
					chartItem.name = that.mpoints[j];
					chartItem.type = "bar";
					chartItem.data = seriesData[j];
					options.series.push(chartItem);
				}
				options.legend.data = that.mpoints;
				let hourXAxis = [];
				for (let i = 0; i < 24; i++) {
					let item = i + "时";
					hourXAxis.push(item);
				}
				options.xAxis.data = hourXAxis;
				console.log("options", options);
				that.optionHour = options;
			});
		},
		//获取天数据
		getDayData(year, month) {
			let that = this;
			let obj = {};
			obj.type = "day_s";
			obj.year_s = year;
			obj.month_s = month;
			obj.mgroup__name = "原料磨";
			obj.mpoint__material__code__in = "elec,elec_0";
			obj.mpoint__ep_monitored__isnull = 0;
			obj.mpoint__need_display = 1;
			obj.page = 0;
			this.$API.enm.mpoint.stat.req(obj).then((response) => {
				let seriesData = [];
				for (let i = 0; i < that.mpoints.length; i++) {
					seriesData.push([]);
				}
				let data = response;
				data.forEach((item) => {
					let index = that.mpoints.indexOf(item.mpoint_nickname); //第几个mpoint
					let ind = item.day_s - 1;
					seriesData[index][ind] = item.elec_consume_unit;
				});
				let options = { ...that.option2 };
				for (let j = 0; j < that.mpoints.length; j++) {
					let chartItem = {};
					chartItem.name = that.mpoints[j];
					chartItem.type = "bar";
					chartItem.data = seriesData[j];
					options.series.push(chartItem);
				}
				options.legend.data = that.mpoints;
				let dayXAxis = [];
				let dayss = new Date(year, month, 0).getDate();
				for (let i = 1; i <= dayss; i++) {
					let item = i + "日";
					dayXAxis.push(item);
				}
				options.xAxis.data = dayXAxis;
				that.optionDay = options;
			});
		},
		//获取月数据
		getMonthData(year) {
			let that = this;
			let obj = {};
			obj.type = "month_s";
			obj.year_s = year;
			obj.mgroup__name = "原料磨";
			obj.mpoint__material__code__in = "elec,elec_0";
			obj.mpoint__ep_monitored__isnull = 0;
			obj.mpoint__need_display = 1;
			obj.page = 0;
			this.$API.enm.mpoint.stat.req(obj).then((response) => {
				let seriesData = [];
				for (let i = 0; i < that.mpoints.length; i++) {
					seriesData.push([]);
				}
				let data = response;
				data.forEach((item) => {
					let ind = item.month_s - 1;
					let index = that.mpoints.indexOf(item.mpoint_nickname); //第几个mpoint
					seriesData[index][ind] = item.elec_consume_unit;
				});
				let options = { ...that.option3 };
				for (let j = 0; j < that.mpoints.length; j++) {
					let chartItem = {};
					chartItem.name = that.mpoints[j];
					chartItem.type = "bar";
					chartItem.data = seriesData[j];
					options.series.push(chartItem);
				}
				options.legend.data = that.mpoints;
				let monthXAxis = [];
				for (let i = 1; i < 13; i++) {
					let item = i + "月";
					monthXAxis.push(item);
				}
				options.xAxis.data = monthXAxis;
				that.optionMonth = options;
			});
		},
		itemClick(type, item) {
			this.type = type;
			this.cate = item[0];
			this.mpoint = item[5];
			this.asynDialog = true;
		},
		handlePrint() {
			this.$PRINT("#myReport");
		},
		exportExcel() {
			this.exportLoading = true;
			this.$XLSX("#myTable", this.tableName);
			this.exportLoading = false;
		},
	},
};
</script>
<style scoped>
.printContainer {
	padding-left: 20px;
}
.radioWrap {
	display: flex;
	justify-content: center;
	padding-top: 10px;
	position: relative;
}
</style>
