<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-select v-model="queryType" @change="queryTypeChange" style="width: 150px">
					<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"
					style="width: 150px"
				>
				</el-date-picker>
				<el-date-picker
					v-if="queryType == '年'"
					v-model="queryDate"
					type="year"
					placeholder="查询年份"
					value-format="YYYY"
					style="width: 150px"
				>
				</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="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div class="chart-scroll">
								<div id="bachart1"></div>
							</div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport('7')"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table
								:data="tableData7"
								id="exportDiv7"
								:height="500"
								:summary-method="getSummaries" 
								show-summary
							>
								<el-table-column type="index" width="50" />
								<el-table-column label="物料名" prop="物料名" min-width="100" 
									:filters="nameFilters7"
                                    :filter-method="filterName7"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="月份" prop="月" v-if="queryType == '年'" width="60" 
									:filters="dateFilters7"
                                    :filter-method="filterDate7"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="周" prop="周" v-else width="60"
									:filters="dateFilters7"
                                    :filter-method="filterDate7"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="型号" prop="型号" 
									:filters="modelFilters7"
                                    :filter-method="filterModel7"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="规格" prop="规格"
									:filters="specsFilters7"
                                    :filter-method="filterSpecs7"
                                    filter-placement="bottom-end">
								</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">
										{{ Math.round(scope.row.合格率) }}%
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div class="chart-scroll">
								<div id="bachart2"></div>
							</div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport('10')"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table
								:data="tableData10"
								id="exportDiv10"
								:height="500"
								:summary-method="getSummaries" 
								show-summary
							>
								<el-table-column type="index" width="50" />
								<el-table-column label="物料名" prop="物料名" min-width="100" 
									:filters="nameFilters"
                                    :filter-method="filterName"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="月份" prop="月" v-if="queryType == '年'" width="60"
									:filters="dateFilters"
                                    :filter-method="filterDate"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="周" prop="周" v-else width="60"
									:filters="dateFilters"
                                    :filter-method="filterDate"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="型号" prop="型号"
									:filters="modelFilters"
                                    :filter-method="filterModel"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="规格" prop="规格"
									:filters="specsFilters"
                                    :filter-method="filterSpecs"
                                    filter-placement="bottom-end">
								</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">
										{{ Math.round(scope.row.合格率) }}%
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<el-card shadow="never" style="margin-bottom: 8px">
				<el-row :gutter="10">
					<el-col :lg="12">
						<el-card shadow="never">
							<div class="chart-scroll">
								<div id="bachart3"></div>
							</div>
						</el-card>
					</el-col>
					<el-col :lg="12">
						<el-card shadow="never" style="position: relative">
							<el-button
								@click="handleExport('6')"
								class="tables"
								type="primary"
								>导出</el-button
							>
							<el-table
								:data="tableData6"
								id="exportDiv6"
								:height="500"
								:summary-method="getSummaries2" 
								show-summary
							>
								<el-table-column type="index" width="50" />
								<el-table-column label="物料名" prop="物料名" min-width="100" 
									:filters="nameFilters6"
                                    :filter-method="filterName6"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="物料系列" prop="物料系列" min-width="100" 
									:filters="xilieFilters6"
                                    :filter-method="filterXilie6"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="月份" prop="月" v-if="queryType == '年'"
									:filters="dateFilters6"
                                    :filter-method="filterDate6"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="周" prop="周" v-else 
									:filters="dateFilters6"
                                    :filter-method="filterDate6"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="型号" prop="型号" 
									:filters="modelFilters6"
                                    :filter-method="filterModel6"
                                    filter-placement="bottom-end">
								</el-table-column>
								<el-table-column label="规格" prop="规格" 
									:filters="specsFilters6"
                                    :filter-method="filterSpecs6"
                                    filter-placement="bottom-end">
								</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">
										{{ Math.round(scope.row.合格率) }}%
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
		</el-main>
	</el-container>
</template>
<script>
import * as echarts from "echarts";
import T from "@/components/scEcharts/echarts-theme-T.js";
echarts.registerTheme("T", T);
import scEcharts from "@/components/scEcharts";
function deepCopy(obj) {
	return JSON.parse(JSON.stringify(obj));
}
export default {
	name: "chart",
	components: {
		scEcharts,
	},
	data() {
		return {
			queryType: "月",
			queryDate: "",
			start_date: "",
			end_date: "",
			currentYear: "",
			currentMonth: "",
			xAxisOrigin: [],
			xAxisData: [],
			typeOptions: ["月", "年"],
			basicOption: {
				backgroundColor: "transparent",
				title: {
					text: "",
				},
				grid: {
					top: "80px",
				},
				tooltip: {
					trigger: "axis",
				},
				legend: {
					top: 30,
				},
				xAxis: {
					type: "category",
					data: [],
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						data: [0, 0, 0, 0, 0, 0, 0],
						type: "bar",
					},
				],
			},
			tableData6: [],
			tableData7: [],
			tableData10: [],
			nameFilters: [],
			dateFilters: [],
			modelFilters: [],
			specsFilters: [],
			nameFilters6: [],
			xilieFilters6: [],
			dateFilters6: [],
			modelFilters6: [],
			specsFilters6: [],
			nameFilters7: [],
			dateFilters7: [],
			modelFilters7: [],
			specsFilters7: [],
			firstWeekNum: 1,
			endWeekNum: 4,
			monthList: [
				"一月",
				"二月",
				"三月",
				"四月",
				"五月",
				"六月",
				"七月",
				"八月",
				"九月",
				"十月",
				"十一月",
				"十二月",
			],
		};
	},
	mounted() {
		let that = this;
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let days = new Date(year, month, 0).getDate();
		that.currentYear = year;
		that.currentMonth = month;
		that.firstWeekNum = that.getWeekOfYear(year,month,1);
		that.endWeekNum = that.getWeekOfYear(year,month,days);
		month = month < 10 ? "0" + month : month;
		that.start_date = year + "-" + month + "-01";
		that.end_date =year + "-" + month + "-" + days;
		that.queryDate = year + "-" + month;
		for (let i = that.firstWeekNum; i <= that.endWeekNum; i++) {
			that.xAxisOrigin.push("第" + i + "周");
		}
		that.xAxisData = that.xAxisOrigin;
		that.getData6();
		that.getData7();
		that.getData10();
	},
	methods: {
		setChart(name, option = null) {
			// 根据name 渲染数据, option需填写，否则option为模拟数据
			var myChart = echarts.getInstanceByDom(
				document.getElementById(name)
			);
			if (myChart == undefined) {
				myChart = echarts.init(document.getElementById(name), "T");
			}
			if (option == null) {
				option = Object.assign({}, this.basicOption);
			}
			setTimeout(() => {
				try {
					myChart.resize();
					myChart.setOption(option);
				} catch (error) {}
			}, 500);
		},
		queryTypeChange(value) {
			console.log(value);
			this.queryDate = "";
		},
		getWeekOfYear(a,b,c) {
            var date1 = new Date(a, parseInt(b) - 1, c), //当前日期  
            date2 = new Date(a, 0, 1), //当年第一天  
            // d是当前日期是今年第多少天  
            d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
            // d + 当前年的第一天的周差距的和在除以7就是本年第几周  
            return Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
        },
		getData6() {
			let that = this;
			let dateList = [],specsList=[],modelList=[],xilieList=[];
			that.nameFilters6 = [];
			that.dateFilters6 = [];
            that.xilieFilters6 = [];
            that.modelFilters6 = [];
            that.specsFilters6 = [];
			let option = deepCopy(that.basicOption);
			option.title.text = "6车间";
			let dateLabels = that.xAxisData;
			let exec = that.queryType == "月" ? "lineWeek" : "lineMonth";
			let obj = {
				query: {
					start_date: that.start_date,
					end_date: that.end_date,
					dept_name: "6车间",
				},
			};
			that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
				let tableData6 = res.data2.ds0 ? res.data2.ds0 : [];
				that.tableData6 = tableData6;
				if (tableData6.length > 0) {
					option.series = [];
					let nameList = [];
					tableData6.forEach((ite) => {
						if (nameList.indexOf(ite.物料名) > -1) {
						}else {
							nameList.push(ite.物料名);
							let obj = {};
                            obj.text = ite.物料名;
                            obj.value = ite.物料名;
                            that.nameFilters6.push(obj);
						}
						if(xilieList.indexOf(ite.物料系列)>-1){}else{
                            xilieList.push(ite.物料系列);
                            let obj2 = {};
                            obj2.text = ite.物料系列;
                            obj2.value = ite.物料系列;
                            that.xilieFilters6.push(obj2);
                        }
						if(specsList.indexOf(ite.规格)>-1){}else{
                            specsList.push(ite.规格);
                            let obj3 = {};
                            obj3.text = ite.规格;
                            obj3.value = ite.规格;
                            that.specsFilters6.push(obj3);
                        }
                        if(modelList.indexOf(ite.型号)>-1){}else{
                            modelList.push(ite.型号);
                            let obj4 = {};
                            obj4.text = ite.型号;
                            obj4.value = ite.型号;
                            that.modelFilters6.push(obj4);
                        }
					});
					let seriesData = [];
					let prodData = [];
					for (let i = 0; i < dateLabels.length; i++) {
						seriesData.push(new Array(nameList.length).fill(0));
						prodData.push(new Array(nameList.length).fill(0));
					}
					if (that.queryType == "月") {
						tableData6.forEach((item) => {
							let indexX = item.周 - that.firstWeekNum;
							let indexY = nameList.indexOf(item.物料名);
							if (indexX >= 0 && indexX < seriesData.length && indexY >= 0) {
								seriesData[indexX][indexY] += item.合格数;
								prodData[indexX][indexY] += Number(item.生产数) || 0;
							}
							if(dateList.indexOf(item.周)>-1){}else{
								dateList.push(item.周);
								let obj = {};
								obj.text = item.周;
								obj.value = item.周;
								that.dateFilters6.push(obj);
							}
						});
					} else {
						that.dateFilters6 = [1,2,3,4,5,6,7,8,9,10,11,12];
						tableData6.forEach((item) => {
							let indexX = item.月 - 1;
							let indexY = nameList.indexOf(item.物料名);
							if (indexX >= 0 && indexX < seriesData.length && indexY >= 0) {
								seriesData[indexX][indexY] += item.合格数;
								prodData[indexX][indexY] += Number(item.生产数) || 0;
							}
						});
					}
					option.xAxis = { type: "category", data: nameList };
					option.yAxis = [
						{ type: "value" },
						{ type: "value", min: -233.33, max: 100, show: false }
					];
					option.legend = { top: 30, data: dateLabels };
					let barWidth = 10;
					let barGap = 0;
					let chartDom = document.getElementById("bachart3");
					if (chartDom) {
						chartDom.style.width = (nameList.length * dateLabels.length * 15) + "px";
					}
					for (let n = 0; n < seriesData.length; n++) {
						let obj = {};
						obj.name = dateLabels[n];
						obj.type = "bar";
						obj.barWidth = barWidth;
						obj.barGap = "0%";
						obj.data = seriesData[n];
						option.series.push(obj);
					}
					let totalSeries = seriesData.length;
					let curveData = [];
					let ratesByMat = [];
					for (let mat = 0; mat < nameList.length; mat++) {
						let rates = [];
						for (let s = 0; s < totalSeries; s++) {
							let pass = seriesData[s][mat];
							let prod = prodData[s][mat];
							rates.push(prod > 0 ? Math.round((pass / prod) * 100) : null);
						}
						curveData.push({ value: [mat].concat(rates) });
						ratesByMat.push(rates);
					}
					option.tooltip = {
						trigger: "axis",
						formatter: function (params) {
							if (!params || params.length === 0) return "";
							let cat = params[0].axisValueLabel;
							let matIdx = params[0].dataIndex;
							let rates = ratesByMat[matIdx] || [];
							let html = '<div style="font-weight:bold">' + cat + '</div>';
							let barIdx = 0;
							params.forEach(function (p) {
								if (p.seriesType !== "bar") return;
								let rate = rates[barIdx];
								let rateStr = (rate !== null && rate !== undefined) ? rate + "%" : "-";
								html += '<div>' +
									'<span style="display:inline-block;width:10px;height:10px;background:' + p.color + ';border-radius:50%;margin-right:5px;vertical-align:middle"></span>' +
									p.seriesName + ': ' + p.value + ' &nbsp;&nbsp; 合格率 ' + rateStr +
									'</div>';
								barIdx++;
							});
							return html;
						}
					};
					option.series.push({
						name: "合格率",
						type: "custom",
						xAxisIndex: 0,
						yAxisIndex: 1,
						silent: true,
						z: 5,
						data: curveData,
						renderItem: function (params, api) {
							let materialIdx = api.value(0);
							let centerX = api.coord([materialIdx, 0])[0];
							let groupWidth = totalSeries * barWidth + (totalSeries - 1) * barGap;
							let halfGroup = groupWidth / 2;
							let slotWidth = barWidth + barGap;
							let pts = [];
							for (let s = 0; s < totalSeries; s++) {
								let rate = api.value(s + 1);
								if (rate === null || rate === undefined) continue;
								let xPx = centerX - halfGroup + barWidth / 2 + s * slotWidth;
								let yPx = api.coord([0, rate])[1];
								pts.push([xPx, yPx]);
							}
							if (pts.length < 2) return null;
							return {
								type: "polyline",
								shape: { points: pts, smooth: 0.3 },
								style: { stroke: "#333", lineWidth: 1.5, fill: "none" }
							};
						}
					});
					that.setChart("bachart3", option);
				} else {
					option.xAxis.data = [];
					let chartDom = document.getElementById("bachart3");
					if (chartDom) chartDom.style.width = "100%";
					that.setChart("bachart3", option);
				}
			});
		},
		getData7() {
			let that = this;
			let dateList = [],specsList=[],modelList=[];
			that.nameFilters7 = [];
			that.dateFilters7 = [];
            that.modelFilters7 = [];
            that.specsFilters7 = [];
			let obj = {
				query: {
					start_date: that.start_date,
					end_date: that.end_date,
					dept_name: "7车间",
				},
			};
			let option = deepCopy(that.basicOption);
			option.title.text = "预制棒（7车间）";
			let dateLabels = that.xAxisData;
			let exec = that.queryType == "月" ? "lineWeek" : "lineMonth";
			that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
				console.log("7生产车间统计:", res);
				let tableData7 = res.data2.ds0 ? res.data2.ds0 : [];
				that.tableData7 = tableData7;
				if (tableData7.length > 0) {
					option.series = [];
					let nameList = [];
					tableData7.forEach((ite) => {
						if (nameList.indexOf(ite.物料名) > -1) {
						} else {
							nameList.push(ite.物料名);
							let obj = {};
                            obj.text = ite.物料名;
                            obj.value = ite.物料名;
                            that.nameFilters7.push(obj);
						}
						if(modelList.indexOf(ite.型号)>-1){}else{
                            modelList.push(ite.型号);
                            let obj2 = {};
                            obj2.text = ite.型号;
                            obj2.value = ite.型号;
                            that.modelFilters7.push(obj2);
                        }
						if(specsList.indexOf(ite.规格)>-1){}else{
                            specsList.push(ite.规格);
                            let obj3 = {};
                            obj3.text = ite.规格;
                            obj3.value = ite.规格;
                            that.specsFilters7.push(obj3);
                        }
					});
					let seriesData = [];
					let prodData = [];
					for (let i = 0; i < dateLabels.length; i++) {
						seriesData.push(new Array(nameList.length).fill(0));
						prodData.push(new Array(nameList.length).fill(0));
					}
					tableData7.forEach((item) => {
						let indexX = 0,
							indexY = 0;
						if (that.queryType == "月") {
							indexX = item.周 - that.firstWeekNum;
							indexY = nameList.indexOf(item.物料名);
							if(dateList.indexOf(item.周)>-1){}else{
								dateList.push(item.周);
								let obj = {};
								obj.text = item.周;
								obj.value = item.周;
								that.dateFilters7.push(obj);
							}
						} else {
							that.dateFilters7 = [1,2,3,4,5,6,7,8,9,10,11,12];
							indexX = item.月 - 1;
							indexY = nameList.indexOf(item.物料名);
						}
						if (indexX >= 0 && indexX < seriesData.length && indexY >= 0) {
							seriesData[indexX][indexY] += item.合格数;
							prodData[indexX][indexY] += Number(item.生产数) || 0;
						}
					});
					option.xAxis = { type: "category", data: nameList };
					option.yAxis = [
						{ type: "value" },
						{ type: "value", min: -233.33, max: 100, show: false }
					];
					option.legend = { top: 30, data: dateLabels };
					let barWidth = 10;
					let barGap = 0;
					let chartDom = document.getElementById("bachart1");
					if (chartDom) {
						chartDom.style.width = (nameList.length * dateLabels.length * 15) + "px";
					}
					for (let n = 0; n < seriesData.length; n++) {
						let obj = {};
						obj.name = dateLabels[n];
						obj.type = "bar";
						obj.barWidth = barWidth;
						obj.barGap = "0%";
						obj.data = seriesData[n];
						option.series.push(obj);
					}
					let totalSeries = seriesData.length;
					let curveData = [];
					let ratesByMat = [];
					for (let mat = 0; mat < nameList.length; mat++) {
						let rates = [];
						for (let s = 0; s < totalSeries; s++) {
							let pass = seriesData[s][mat];
							let prod = prodData[s][mat];
							rates.push(prod > 0 ? Math.round((pass / prod) * 100) : null);
						}
						curveData.push({ value: [mat].concat(rates) });
						ratesByMat.push(rates);
					}
					option.tooltip = {
						trigger: "axis",
						formatter: function (params) {
							if (!params || params.length === 0) return "";
							let cat = params[0].axisValueLabel;
							let matIdx = params[0].dataIndex;
							let rates = ratesByMat[matIdx] || [];
							let html = '<div style="font-weight:bold">' + cat + '</div>';
							let barIdx = 0;
							params.forEach(function (p) {
								if (p.seriesType !== "bar") return;
								let rate = rates[barIdx];
								let rateStr = (rate !== null && rate !== undefined) ? rate + "%" : "-";
								html += '<div>' +
									'<span style="display:inline-block;width:10px;height:10px;background:' + p.color + ';border-radius:50%;margin-right:5px;vertical-align:middle"></span>' +
									p.seriesName + ': ' + p.value + ' &nbsp;&nbsp; 合格率 ' + rateStr +
									'</div>';
								barIdx++;
							});
							return html;
						}
					};
					option.series.push({
						name: "合格率",
						type: "custom",
						xAxisIndex: 0,
						yAxisIndex: 1,
						silent: true,
						z: 5,
						data: curveData,
						renderItem: function (params, api) {
							let materialIdx = api.value(0);
							let centerX = api.coord([materialIdx, 0])[0];
							let groupWidth = totalSeries * barWidth + (totalSeries - 1) * barGap;
							let halfGroup = groupWidth / 2;
							let slotWidth = barWidth + barGap;
							let pts = [];
							for (let s = 0; s < totalSeries; s++) {
								let rate = api.value(s + 1);
								if (rate === null || rate === undefined) continue;
								let xPx = centerX - halfGroup + barWidth / 2 + s * slotWidth;
								let yPx = api.coord([0, rate])[1];
								pts.push([xPx, yPx]);
							}
							if (pts.length < 2) return null;
							return {
								type: "polyline",
								shape: { points: pts, smooth: 0.3 },
								style: { stroke: "#333", lineWidth: 1.5, fill: "none" }
							};
						}
					});
					that.setChart("bachart1", option);
				} else {
					option.xAxis.data = [];
					let chartDom = document.getElementById("bachart1");
					if (chartDom) chartDom.style.width = "100%";
					that.setChart("bachart1", option);
				}
			});
		},
		getData10() {
			let that = this;
			let dateList = [],specsList=[],modelList=[];
			that.nameFilters = [];
			that.dateFilters = [];
            that.modelFilters = [];
            that.specsFilters = [];
			let option = deepCopy(that.basicOption);
			option.title.text = "预制管（10车间）";
			let dateLabels = that.xAxisData;
			let obj = {
				query: {
					start_date: that.start_date,
					end_date: that.end_date,
					dept_name: "10车间",
				},
			};
			let exec = that.queryType == "月" ? "lineWeek" : "lineMonth";
			that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
				let tableData10 = res.data2.ds0 ? res.data2.ds0 : [];
				that.tableData10 = tableData10;
				if (tableData10.length > 0) {
					option.series = [];
					let nameList = [];
					tableData10.forEach((ite) => {
						if (nameList.indexOf(ite.物料名) > -1) {
						} else {
							nameList.push(ite.物料名);
							let obj = {};
                            obj.text = ite.物料名;
                            obj.value = ite.物料名;
                            that.nameFilters.push(obj);
						}
						if(modelList.indexOf(ite.型号)>-1){}else{
                            modelList.push(ite.型号);
                            let obj2 = {};
                            obj2.text = ite.型号;
                            obj2.value = ite.型号;
                            that.modelFilters.push(obj2);
                        }
						if(specsList.indexOf(ite.规格)>-1){}else{
                            specsList.push(ite.规格);
                            let obj3 = {};
                            obj3.text = ite.规格;
                            obj3.value = ite.规格;
                            that.specsFilters.push(obj3);
                        }
					});
					let seriesData = [];
					let prodData = [];
					for (let i = 0; i < dateLabels.length; i++) {
						seriesData.push(new Array(nameList.length).fill(0));
						prodData.push(new Array(nameList.length).fill(0));
					}
					tableData10.forEach((item) => {
						let indexX = 0,
							indexY = 0;
						if (that.queryType == "月") {
							indexX = item.周 - that.firstWeekNum;
							indexY = nameList.indexOf(item.物料名);
							if(dateList.indexOf(item.周)>-1){}else{
								dateList.push(item.周);
								let obj = {};
								obj.text = item.周;
								obj.value = item.周;
								that.dateFilters.push(obj);
							}
						} else {
							that.dateFilters = [1,2,3,4,5,6,7,8,9,10,11,12];
							indexX = item.月 - 1;
							indexY = nameList.indexOf(item.物料名);
						}
						if (indexX >= 0 && indexX < seriesData.length && indexY >= 0) {
							seriesData[indexX][indexY] += item.合格数;
							prodData[indexX][indexY] += Number(item.生产数) || 0;
						}
					});
					option.xAxis = { type: "category", data: nameList };
					option.yAxis = [
						{ type: "value" },
						{ type: "value", min: -233.33, max: 100, show: false }
					];
					option.legend = { top: 30, data: dateLabels };
					let barWidth = 10;
					let barGap = 0;
					let chartDom = document.getElementById("bachart2");
					if (chartDom) {
						chartDom.style.width = (nameList.length * dateLabels.length * 15) + "px";
					}
					for (let n = 0; n < seriesData.length; n++) {
						let obj = {};
						obj.name = dateLabels[n];
						obj.type = "bar";
						obj.barWidth = barWidth;
						obj.barGap = "0%";
						obj.data = seriesData[n];
						option.series.push(obj);
					}
					let totalSeries = seriesData.length;
					let curveData = [];
					let ratesByMat = [];
					for (let mat = 0; mat < nameList.length; mat++) {
						let rates = [];
						for (let s = 0; s < totalSeries; s++) {
							let pass = seriesData[s][mat];
							let prod = prodData[s][mat];
							rates.push(prod > 0 ? Math.round((pass / prod) * 100) : null);
						}
						curveData.push({ value: [mat].concat(rates) });
						ratesByMat.push(rates);
					}
					option.tooltip = {
						trigger: "axis",
						formatter: function (params) {
							if (!params || params.length === 0) return "";
							let cat = params[0].axisValueLabel;
							let matIdx = params[0].dataIndex;
							let rates = ratesByMat[matIdx] || [];
							let html = '<div style="font-weight:bold">' + cat + '</div>';
							let barIdx = 0;
							params.forEach(function (p) {
								if (p.seriesType !== "bar") return;
								let rate = rates[barIdx];
								let rateStr = (rate !== null && rate !== undefined) ? rate + "%" : "-";
								html += '<div>' +
									'<span style="display:inline-block;width:10px;height:10px;background:' + p.color + ';border-radius:50%;margin-right:5px;vertical-align:middle"></span>' +
									p.seriesName + ': ' + p.value + ' &nbsp;&nbsp; 合格率 ' + rateStr +
									'</div>';
								barIdx++;
							});
							return html;
						}
					};
					option.series.push({
						name: "合格率",
						type: "custom",
						xAxisIndex: 0,
						yAxisIndex: 1,
						silent: true,
						z: 5,
						data: curveData,
						renderItem: function (params, api) {
							let materialIdx = api.value(0);
							let centerX = api.coord([materialIdx, 0])[0];
							let groupWidth = totalSeries * barWidth + (totalSeries - 1) * barGap;
							let halfGroup = groupWidth / 2;
							let slotWidth = barWidth + barGap;
							let pts = [];
							for (let s = 0; s < totalSeries; s++) {
								let rate = api.value(s + 1);
								if (rate === null || rate === undefined) continue;
								let xPx = centerX - halfGroup + barWidth / 2 + s * slotWidth;
								let yPx = api.coord([0, rate])[1];
								pts.push([xPx, yPx]);
							}
							if (pts.length < 2) return null;
							return {
								type: "polyline",
								shape: { points: pts, smooth: 0.3 },
								style: { stroke: "#333", lineWidth: 1.5, fill: "none" }
							};
						}
					});
					that.setChart("bachart2", option);
				} else {
					option.xAxis.data = [];
					let chartDom = document.getElementById("bachart2");
					if (chartDom) chartDom.style.width = "100%";
					that.setChart("bachart2", option);
				}
			});
		},
		getSummaries({ columns, data }) {
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计";
					return;
				}
				if (index == 5||index == 6||index == 7||index == 8) {
					const values = data.map((item) =>
						Number(item[column.property])
					);
					if (!values.every((value) => Number.isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr); //Number转换为数值
							let sum = Number(
								Number(prev) + Number(curr)
							).toFixed(2); //toFixed(2)数据项保留两位小数
							if (!isNaN(value)) {
								return sum;
							} else {
								return prev;
							}
						}, 0);
					} 
				}
			});
			return sums;
		},
		getSummaries2({ columns, data }) {
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计";
					return;
				}
				if (index == 6||index == 7||index == 8||index == 9) {
					const values = data.map((item) =>
						Number(item[column.property])
					);
					if (!values.every((value) => Number.isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr); //Number转换为数值
							let sum = Number(
								Number(prev) + Number(curr)
							).toFixed(2); //toFixed(2)数据项保留两位小数
							if (!isNaN(value)) {
								return sum;
							} else {
								return prev;
							}
						}, 0);
					} 
				}
			});
			return sums;
		},
		handleQuery() {
			let that = this;
			if (that.queryType == "月") {
				if (that.queryDate !== "" && that.queryDate !== null) {
					let arr = that.queryDate.split("-");
					let year = arr[0];
                    let month = arr[1];
					let days = new Date(year, month, 0).getDate();
					that.start_date = that.queryDate + "-01";
					that.end_date =that.queryDate +"-" +days;
					that.firstWeekNum = that.getWeekOfYear(year,month,1);
					that.endWeekNum = that.getWeekOfYear(year,month,days);
					let xAxisData = [];
					for (let i = that.firstWeekNum; i <= that.endWeekNum; i++) {
						xAxisData.push("第" + i + "周");
					}
					that.xAxisData = xAxisData;
				} else {
					that.start_date =that.currentYear + "-" + that.currentMonth + "-01";
					that.end_date =that.currentYear +"-" +that.currentMonth +"-" +new Date(that.currentYear,that.currentMonth,0).getDate();
					that.firstWeekNum = that.getWeekOfYear(that.currentYear,that.currentMonth,1);;
					that.xAxisData = that.xAxisOrigin;
				}
			} else {
				if (that.queryDate !== "" && that.queryDate !== null) {
					that.start_date = that.queryDate + "-01-01";
					that.end_date = that.queryDate + "-12-31";
				} else {
					that.start_date = that.currentYear + "-01-01";
					that.end_date = that.currentYear + "-12-31";
				}
				that.xAxisData = that.monthList;
			}
			that.getData6();
			that.getData7();
			that.getData10();
			// that.getDataDAVG();
		},
		//6
		filterName6(value, row) {
            return row.物料名 === value;
        },
        filterXilie6(value, row) {
            return row.物料系列 === value;
        },
        filterDate6(value, row) {
			if (this.queryType == "月") {
				return row.周 === value;
			}else{
				return row.月 === value;
			}
        },
        filterSpecs6(value, row) {
            return row.规格 === value;
        },
        filterModel6(value, row) {
             return row.型号 === value;
        },
		//7
		filterName7(value, row) {
            return row.物料名 === value;
        },
        filterDate7(value, row) {
			if (this.queryType == "月") {
				return row.周 === value;
			}else{
				return row.月 === value;
			}
        },
        filterSpecs7(value, row) {
            return row.规格 === value;
        },
        filterModel7(value, row) {
             return row.型号 === value;
        },
		//10
		filterName(value, row) {
            return row.物料名 === value;
        },
        filterDate(value, row) {
			if (this.queryType == "月") {
				return row.周 === value;
			}else{
				return row.月 === value;
			}
        },
        filterSpecs(value, row) {
            return row.规格 === value;
        },
        filterModel(value, row) {
             return row.型号 === value;
        },
		handleExport(val) {
			this.exportLoading = true;
			let id = "#exportDiv" + val;
			let name =
				val == "AVG" ? val + "合格数统计" : val + "车间合格数统计";
			this.$XLSX(id, name);
			this.exportLoading = false;
		},
	},
};
</script>

<style scoped>
.chart-scroll {
	width: 100%;
	overflow-x: auto;
}
#bachart1,
#bachart2,
#bachart3,
#bachart4 {
	width: 100%;
	min-width: 100%;
	height: 500px;
}
.tables {
	position: absolute;
	top: 6px;
	left: 4px;
	z-index: 10;
}
</style>
