<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-select v-model="queryType" @change="queryTypeChange">
					<el-option
						v-for="item in typeOptions"
						:key="item"
						:label="item"
						:value="item"
					>
					</el-option>
				</el-select>
				<el-date-picker
					v-if="queryType == '月'"
					v-model="queryDate"
					type="month"
					placeholder="查询月期"
					value-format="YYYY-MM"
				>
				</el-date-picker>
				<el-date-picker
					v-if="queryType == '年'"
					v-model="queryDate"
					type="year"
					placeholder="查询年份"
					value-format="YYYY"
				>
				</el-date-picker>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main>
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="15">
					<el-col :lg="8">
						<scEcharts height="300px" :option="option1"></scEcharts>
					</el-col>
					<el-col :lg="16" style="position: relative">
						<el-button
							@click="handleExport('7')"
							class="tables"
							type="primary"
							>导出</el-button
						>
						<el-table
							:data="tableData7"
							id="exportDiv7"
							:height="300"
						>
							<el-table-column
								label="年"
								prop="年"
								v-if="queryType == '年'"
								width="60"
							>
							</el-table-column>
							<el-table-column
								label="月"
								prop="月"
								v-else
								width="60"
							>
							</el-table-column>
							<el-table-column label="物料名" prop="物料名">
							</el-table-column>
							<el-table-column label="型号" prop="型号">
							</el-table-column>
							<el-table-column label="规格" prop="规格">
							</el-table-column>
							<el-table-column label="出料数" prop="出料数">
							</el-table-column>
							<el-table-column label="合格数" prop="合格数">
							</el-table-column>
							<el-table-column label="合格率" prop="合格率">
								<template #default="scope">
									<span
										>{{
											Math.round(scope.row.合格率)
										}}%</span
									>
								</template>
							</el-table-column>
							<el-table-column
								label="不合格原因及数量"
								align="center"
							>
								<el-table-column label="炸纹" prop="炸纹">
								</el-table-column>
								<el-table-column label="条纹" prop="条纹">
								</el-table-column>
								<el-table-column label="气泡" prop="气泡">
								</el-table-column>
								<el-table-column label="弯曲" prop="弯曲">
								</el-table-column>
								<el-table-column label="其他" prop="其他">
								</el-table-column>
								<el-table-column label="合计" prop="不合格数">
								</el-table-column>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-card>
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="15">
					<el-col :lg="8">
						<scEcharts height="300px" :option="option2"></scEcharts>
					</el-col>
					<el-col :lg="16" style="position: relative">
						<el-button
							@click="handleExport('10')"
							class="tables"
							type="primary"
							>导出</el-button
						>
						<el-table
							:data="tableData10"
							id="exportDiv10"
							:height="300"
						>
							<el-table-column
								label="年"
								prop="年"
								v-if="queryType == '年'"
								width="60"
							>
							</el-table-column>
							<el-table-column
								label="月"
								prop="月"
								v-else
								width="60"
							>
							</el-table-column>
							<el-table-column label="物料名" prop="物料名">
							</el-table-column>
							<el-table-column label="型号" prop="型号">
							</el-table-column>
							<el-table-column label="规格" prop="规格">
							</el-table-column>
							<el-table-column label="出料数" prop="生产数">
							</el-table-column>
							<el-table-column label="合格数" prop="合格数">
							</el-table-column>
							<el-table-column label="合格率">
								<template #default="scope">
									<span
										>{{
											Math.round(scope.row.合格率)
										}}%</span
									>
								</template>
							</el-table-column>
							<el-table-column
								label="不合格原因及数量"
								align="center"
							>
								<el-table-column label="椭圆/弯曲" prop="弯曲">
								</el-table-column>
								<el-table-column label="条纹" prop="条纹">
								</el-table-column>
								<el-table-column label="断裂" prop="断裂">
								</el-table-column>
								<el-table-column label="偏壁" prop="偏壁">
								</el-table-column>
								<el-table-column label="大小头" prop="大小头">
								</el-table-column>
								<el-table-column label="结石" prop="结石">
								</el-table-column>
								<el-table-column label="气线" prop="气线">
								</el-table-column>
								<el-table-column label="合计" prop="不合格数">
								</el-table-column>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-card>
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="15">
					<el-col :lg="8">
						<scEcharts height="300px" :option="option3"></scEcharts>
					</el-col>
					<el-col :lg="16" style="position: relative">
						<el-button
							@click="handleExport('8')"
							class="tables"
							type="primary"
							>导出</el-button
						>
						<el-table
							:data="tableData8"
							id="exportDiv8"
							:height="300"
						>
							<el-table-column
								label="年"
								prop="年"
								v-if="queryType == '年'"
								width="60"
							>
							</el-table-column>
							<el-table-column
								label="月"
								prop="月"
								v-else
								width="60"
							>
							</el-table-column>
							<el-table-column label="物料名" prop="物料名">
							</el-table-column>
							<el-table-column label="型号" prop="型号">
							</el-table-column>
							<el-table-column label="规格" prop="规格">
							</el-table-column>
							<el-table-column label="出料数" prop="	生产数">
							</el-table-column>
							<el-table-column label="合格数" prop="合格数">
							</el-table-column>
							<el-table-column label="合格率">
								<template #default="scope">
									<span
										>{{
											Math.round(scope.row.合格率)
										}}%</span
									>
								</template>
							</el-table-column>
							<el-table-column
								label="不合格原因及数量"
								align="center"
							>
								<el-table-column label="椭圆/弯曲" prop="弯曲">
								</el-table-column>
								<el-table-column label="条纹" prop="条纹">
								</el-table-column>
								<el-table-column label="断裂" prop="断裂">
								</el-table-column>
								<el-table-column label="偏壁" prop="偏壁">
								</el-table-column>
								<el-table-column label="大小头" prop="大小头">
								</el-table-column>
								<el-table-column label="结石" prop="结石">
								</el-table-column>
								<el-table-column label="气线" prop="气线">
								</el-table-column>
								<el-table-column label="相中破" prop="相中破">
								</el-table-column>
								<el-table-column label="合计" prop="不合格数">
								</el-table-column>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-card>
		</el-main>
	</el-container>
</template>
<script>
const colors = [
	"rgb(64,158,255)",
	"#FAFAD2",
	"#EEE9BF",
	"#EEDC82",
	"#EED5B7",
	"#EEC591",
	"#EEAD0E",
	"#EE9A00",
	"#EE9572",
	"#F08080",
];
import scEcharts from "@/components/scEcharts";
export default {
	name: "chart",
	components: {
		scEcharts,
	},
	data() {
		return {
			queryType: "月",
			queryDate: "",
			start_date: "",
			end_date: "",
			currentYear: "",
			currentMonth: "",
			typeOptions: ["月", "年"],
			option1: {
				color: colors,
				title: {
					text: "7车间",
					// subtext: '',
				},
				tooltip: {
					trigger: "item",
				},
				series: {
					name: "7车间预制棒",
					type: "pie",
					radius: ["40%", "70%"],
					center: ["50%", "60%"],
					label: {
						show: true,
						position: "outside",
						formatter: "{b} : {c} ({d}%)",
					},
					data: [
						{ value: 0, name: "合格数" },
						{ value: 0, name: "炸纹" },
						{ value: 0, name: "条纹" },
						{ value: 0, name: "气泡" },
						{ value: 0, name: "弯曲" },
						{ value: 0, name: "其他" },
					],
				},
			},
			option2: {
				color: colors,
				title: {
					text: "10车间",
					// subtext: '',
				},
				tooltip: {
					trigger: "item",
				},
				series: {
					name: "10车间预制管",
					type: "pie",
					radius: ["40%", "70%"],
					center: ["50%", "60%"],
					label: {
						show: true,
						position: "outside",
						formatter: "{b} : {c} ({d}%)",
					},
					data: [
						{ value: 0, name: "合格数" },
						{ value: 0, name: "条纹" },
						{ value: 0, name: "断裂" },
						{ value: 0, name: "偏壁" },
						{ value: 0, name: "大小头" },
						{ value: 0, name: "结石" },
						{ value: 0, name: "气线" },
					],
				},
			},
			option3: {
				color: colors,
				title: {
					text: "退火",
					// subtext: '',
				},
				tooltip: {
					trigger: "item",
				},
				series: {
					name: "退火预制管",
					type: "pie",
					radius: ["40%", "70%"],
					center: ["50%", "60%"],
					label: {
						show: true,
						position: "outside",
						formatter: "{b} : {c} ({d}%)",
					},
					data: [
						{ value: 0, name: "合格数" },
						{ value: 0, name: "椭圆/弯曲" },
						{ value: 0, name: "条纹" },
						{ value: 0, name: "断裂" },
						{ value: 0, name: "偏壁" },
						{ value: 0, name: "大小头" },
						{ value: 0, name: "结石" },
						{ value: 0, name: "气线" },
						{ value: 0, name: "箱中破" },
					],
				},
			},
			tableData7: [],
			tableData10: [],
			tableData8: [],
		};
	},
	mounted() {
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let days = new Date(year, month, 0).getDate();
		this.currentYear = year;
		this.currentMonth = month;
		month = month < 10 ? "0" + month : month;
		this.queryDate = year + "-" + month;
		this.start_date = year + "-" + month + "-01";
		this.end_date =
			year + "-" + month + "-" + new Date(year, month, 0).getDate();
		this.getData();
		this.getData7();
		this.getData10();
	},
	methods: {
		queryTypeChange(value) {
			console.log(value);
			this.queryDate = "";
		},
		getData() {
			let that = this;
			that.tableData8 = [];
			let exec = that.queryType == "月" ? "lineMonth" : "lineYear";
			let obj = {
				query: {
					start_date: this.start_date,
					end_date: this.end_date,
					mgroup_name: "管料退火",
					is_count_utask: -1,
				},
			};
			that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
				console.log("退火车间统计:", res);
				if (res.data2.ds0) {
					let data = res.data2.ds0;
					that.tableData8 = data;
				} else {
					that.tableData8 = [];
				}
			});
			//获取echarts数据
			let obj2 = {
				query: {
					start_date: this.start_date,
					end_date: this.end_date,
					mgroup_name: "管料退火",
					group_bys_material: "",
					order_bys_material: "",
					select_cols_material: "",
					is_count_utask: -1,
				},
			};
			that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => {
				console.log("退火车间统计:", res2);
				if (res2.data2.ds0) {
					let data = res2.data2.ds0;
					if (data.length > 0) {
						data.forEach((item) => {
							that.option3.series.data[0].value += item.合格数;
							that.option3.series.data[1].value += item.弯曲;
							that.option3.series.data[2].value += item.条纹;
							that.option3.series.data[3].value += item.断裂;
							that.option3.series.data[4].value += item.偏壁;
							that.option3.series.data[5].value += item.大小头;
							that.option3.series.data[6].value += item.结石;
							that.option3.series.data[7].value += item.气线;
							that.option3.series.data[8].value += item.箱中破;
						});
					}
				}
			});
		},
		getData7() {
			let that = this;
			that.tableData7 = [];
			let obj = {
				query: {
					start_date: this.start_date,
					end_date: this.end_date,
					dept_name: "7车间",
				},
			};
			let exec = that.queryType == "月" ? "lineMonth" : "lineYear";
			that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
				console.log("7生产车间统计:", res);
				if (res.data2.ds0) {
					let data = res.data2.ds0;
					that.tableData7 = data;
				} else {
					that.tableData7 = [];
				}
			});
			//获取echarts数据
			let obj2 = {
				query: {
					start_date: this.start_date,
					end_date: this.end_date,
					dept_name: "7车间",
					group_bys_material: "",
					order_bys_material: "",
					select_cols_material: "",
				},
			};
			that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => {
				console.log("7生产车间统计:", res2);
				if (res2.data2.ds0) {
					let data = res2.data2.ds0;
					if (data.length > 0) {
						data.forEach((item) => {
							that.option1.series.data[0].value += item.合格数;
							that.option1.series.data[1].value += item.炸纹;
							that.option1.series.data[2].value += item.条纹;
							that.option1.series.data[3].value += item.气泡;
							that.option1.series.data[4].value += item.弯曲;
							that.option1.series.data[5].value += item.其他;
						});
					}
				}
			});
		},
		getData10() {
			let that = this;
			that.tableData10 = [];
			let obj = {
				query: {
					start_date: this.start_date,
					end_date: this.end_date,
					dept_name: "10车间",
				},
			};
			let exec = that.queryType == "月" ? "lineMonth" : "lineYear";
			that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
				console.log("10生产车间统计:", res);
				if (res.data2.ds0) {
					let data = res.data2.ds0;
					that.tableData10 = data;
				} else {
					that.tableData10 = [];
				}
			});
			//获取echarts数据
			let obj2 = {
				query: {
					start_date: this.start_date,
					end_date: this.end_date,
					dept_name: "10车间",
					group_bys_material: "",
					order_bys_material: "",
					select_cols_material: "",
				},
			};
			that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => {
				console.log("10生产车间统计:", res2);
				if (res2.data2.ds0) {
					let data = res2.data2.ds0;
					if (data.length > 0) {
						data.forEach((item) => {
							that.option2.series.data[0].value += item.合格数;
							that.option2.series.data[1].value += item.断裂;
							that.option2.series.data[2].value += item.条纹;
							that.option2.series.data[3].value += item.偏壁;
							that.option2.series.data[4].value += item.大小头;
							that.option2.series.data[5].value += item.结石;
							that.option2.series.data[6].value += item.气线;
						});
					}
				}
			});
		},
		handleQuery() {
			let that = this;
			if (this.queryType == "月") {
				if (this.queryDate !== "" && this.queryDate !== null) {
					this.start_date = this.queryDate + "-01";
					let arr = this.queryDate.split("-");
					this.end_date =
						this.queryDate +
						"-" +
						new Date(arr[0], arr[1], 0).getDate();
				} else {
					this.start_date =
						this.currentYear + "-" + this.currentMonth + "-01";
					this.end_date =
						this.currentYear +
						"-" +
						this.currentMonth +
						"-" +
						new Date(
							this.currentYear,
							this.currentMonth,
							0
						).getDate();
				}
			} else {
				if (this.queryDate !== "" && this.queryDate !== null) {
					this.start_date = this.queryDate + "-01-01";
					this.end_date = this.queryDate + "-12-31";
				} else {
					this.start_date = this.currentYear + "-01-01";
					this.end_date = this.currentYear + "-12-31";
				}
			}
			this.getData();
			this.getData7();
			this.getData10();
		},
		handleExport(val) {
			this.exportLoading = true;
			let id = "#exportDiv" + val;
			let name =
				val == "8" ? "退火生产检验统计" : val + "车间生产检验统计";
			this.$XLSX(id, name);
			this.exportLoading = false;
		},
	},
};
</script>
<style scoped>
.tables {
	position: absolute;
	top: 4px;
	right: 14px;
	z-index: 10;
}
</style>
