feat:禅道426

src/views/statistics/pass_num.vue

@@ -2,7 +2,7 @@
 	<el-container>
 		<el-header>
 			<div class="right-panel">
-				<el-select v-model="queryType" @change="queryTypeChange">
+				<el-select v-model="queryType" @change="queryTypeChange" style="width: 150px">
 					<el-option
 						v-for="item in typeOptions"
 						:key="item"
@@ -17,7 +17,7 @@
 					type="month"
 					placeholder="查询月期"
 					value-format="YYYY-MM"
-					style="width: 100%"
+					style="width: 150px"
 				>
 				</el-date-picker>
 				<el-date-picker
@@ -26,7 +26,7 @@
 					type="year"
 					placeholder="查询年份"
 					value-format="YYYY"
-					style="width: 100%"
+					style="width: 150px"
 				>
 				</el-date-picker>
 				<el-button
@@ -41,7 +41,9 @@
 				<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">
@@ -55,7 +57,7 @@
 							<el-table
 								:data="tableData7"
 								id="exportDiv7"
-								:height="300"
+								:height="500"
 								:summary-method="getSummaries" 
 								show-summary
 							>
@@ -107,7 +109,9 @@
 				<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">
@@ -121,7 +125,7 @@
 							<el-table
 								:data="tableData10"
 								id="exportDiv10"
-								:height="300"
+								:height="500"
 								:summary-method="getSummaries" 
 								show-summary
 							>
@@ -173,7 +177,9 @@
 				<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">
@@ -187,7 +193,7 @@
 							<el-table
 								:data="tableData6"
 								id="exportDiv6"
-								:height="300"
+								:height="500"
 								:summary-method="getSummaries2" 
 								show-summary
 							>
@@ -278,6 +284,9 @@ export default {
 				tooltip: {
 					trigger: "axis",
 				},
+				legend: {
+					top: 30,
+				},
 				xAxis: {
 					type: "category",
 					data: [],
@@ -285,13 +294,10 @@ export default {
 				yAxis: {
 					type: "value",
 				},
-				lenged: [],
 				series: [
 					{
 						data: [0, 0, 0, 0, 0, 0, 0],
-						stack: "Ad",
 						type: "bar",
-						barWidth: "15px",
 					},
 				],
 			},
@@ -343,8 +349,7 @@ export default {
 		that.start_date = year + "-" + month + "-01";
 		that.end_date =year + "-" + month + "-" + days;
 		that.queryDate = year + "-" + month;
-		let duration = that.endWeekNum - that.firstWeekNum + 1;
+		for (let i = that.firstWeekNum; i <= that.endWeekNum; i++) {
-		for (let i = 1; i <= duration; i++) {
 			that.xAxisOrigin.push("第" + i + "周");
 		}
 		that.xAxisData = that.xAxisOrigin;
@@ -366,6 +371,7 @@ export default {
 			}
 			setTimeout(() => {
 				try {
+					myChart.resize();
 					myChart.setOption(option);
 				} catch (error) {}
 			}, 500);
@@ -391,8 +397,8 @@ export default {
             that.modelFilters6 = [];
             that.specsFilters6 = [];
 			let option = deepCopy(that.basicOption);
-			option.xAxis.data = that.xAxisData;
 			option.title.text = "6车间";
+			let dateLabels = that.xAxisData;
 			let exec = that.queryType == "月" ? "lineWeek" : "lineMonth";
 			let obj = {
 				query: {
@@ -406,12 +412,11 @@ export default {
 				that.tableData6 = tableData6;
 				if (tableData6.length > 0) {
 					option.series = [];
-					let seriesData = [],nameList = [];
+					let nameList = [];
 					tableData6.forEach((ite) => {
 						if (nameList.indexOf(ite.物料名) > -1) {
 						}else {
 							nameList.push(ite.物料名);
-							seriesData.push([]);
 							let obj = {};
                             obj.text = ite.物料名;
                             obj.value = ite.物料名;
@@ -439,15 +444,19 @@ export default {
                             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 = nameList.indexOf(item.物料名);
+							let indexX = item.周 - that.firstWeekNum;
-							let indexY = item.周 - that.firstWeekNum;
+							let indexY = nameList.indexOf(item.物料名);
-							if(seriesData[indexX][indexY]){
+							if (indexX >= 0 && indexX < seriesData.length && indexY >= 0) {
-								seriesData[indexX][indexY] += item.合格数;
-							}else{
-								seriesData[indexX][indexY] =0;
 								seriesData[indexX][indexY] += item.合格数;
+								prodData[indexX][indexY] += Number(item.生产数) || 0;
 							}
 							if(dateList.indexOf(item.周)>-1){}else{
 								dateList.push(item.周);
@@ -460,27 +469,105 @@ export default {
 					} else {
 						that.dateFilters6 = [1,2,3,4,5,6,7,8,9,10,11,12];
 						tableData6.forEach((item) => {
-							let indexX = nameList.indexOf(item.物料名);
+							let indexX = item.月 - 1;
-							let indexY = item.month - 1;
+							let indexY = nameList.indexOf(item.物料名);
-							if(seriesData[indexX][indexY]){
+							if (indexX >= 0 && indexX < seriesData.length && indexY >= 0) {
-								seriesData[indexX][indexY] += item.合格数;
-							}else{
-								seriesData[indexX][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 = nameList[n];
+						obj.name = dateLabels[n];
-						obj.stack = "Ad";
 						obj.type = "bar";
-						obj.barWidth = "15px";
+						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);
 				}
 			});
@@ -500,8 +587,8 @@ export default {
 				},
 			};
 			let option = deepCopy(that.basicOption);
-			option.xAxis.data = that.xAxisData;
 			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);
@@ -509,13 +596,11 @@ export default {
 				that.tableData7 = tableData7;
 				if (tableData7.length > 0) {
 					option.series = [];
-					let seriesData = [],
+					let nameList = [];
-						nameList = [];
 					tableData7.forEach((ite) => {
 						if (nameList.indexOf(ite.物料名) > -1) {
 						} else {
 							nameList.push(ite.物料名);
-							seriesData.push([]);
 							let obj = {};
                             obj.text = ite.物料名;
                             obj.value = ite.物料名;
@@ -536,12 +621,18 @@ export default {
                             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 = nameList.indexOf(item.物料名);
+							indexX = item.周 - that.firstWeekNum;
-							indexY = item.周 - that.firstWeekNum;
+							indexY = nameList.indexOf(item.物料名);
 							if(dateList.indexOf(item.周)>-1){}else{
 								dateList.push(item.周);
 								let obj = {};
@@ -551,27 +642,105 @@ export default {
 							}
 						} else {
 							that.dateFilters7 = [1,2,3,4,5,6,7,8,9,10,11,12];
-							indexX = nameList.indexOf(item.物料名);
+							indexX = item.月 - 1;
-							indexY = item.月 - 1;
+							indexY = nameList.indexOf(item.物料名);
 						}
-						if(seriesData[indexX][indexY]){
+						if (indexX >= 0 && indexX < seriesData.length && indexY >= 0) {
-							seriesData[indexX][indexY] += item.合格数;
-						}else{
-							seriesData[indexX][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 = nameList[n];
+						obj.name = dateLabels[n];
-						obj.stack = "Ad";
 						obj.type = "bar";
-						obj.barWidth = "15px";
+						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);
 				}
 			});
@@ -584,8 +753,8 @@ export default {
             that.modelFilters = [];
             that.specsFilters = [];
 			let option = deepCopy(that.basicOption);
-			option.xAxis.data = that.xAxisData;
 			option.title.text = "预制管（10车间）";
+			let dateLabels = that.xAxisData;
 			let obj = {
 				query: {
 					start_date: that.start_date,
@@ -599,13 +768,11 @@ export default {
 				that.tableData10 = tableData10;
 				if (tableData10.length > 0) {
 					option.series = [];
-					let seriesData = [],
+					let nameList = [];
-						nameList = [];
 					tableData10.forEach((ite) => {
 						if (nameList.indexOf(ite.物料名) > -1) {
 						} else {
 							nameList.push(ite.物料名);
-							seriesData.push([]);
 							let obj = {};
                             obj.text = ite.物料名;
                             obj.value = ite.物料名;
@@ -626,12 +793,18 @@ export default {
                             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 = nameList.indexOf(item.物料名);
+							indexX = item.周 - that.firstWeekNum;
-							indexY = item.周 - that.firstWeekNum;
+							indexY = nameList.indexOf(item.物料名);
 							if(dateList.indexOf(item.周)>-1){}else{
 								dateList.push(item.周);
 								let obj = {};
@@ -641,27 +814,105 @@ export default {
 							}
 						} else {
 							that.dateFilters = [1,2,3,4,5,6,7,8,9,10,11,12];
-							indexX = nameList.indexOf(item.物料名);
+							indexX = item.月 - 1;
-							indexY = item.月 - 1;
+							indexY = nameList.indexOf(item.物料名);
 						}
-						if(seriesData[indexX][indexY]){
+						if (indexX >= 0 && indexX < seriesData.length && indexY >= 0) {
-							seriesData[indexX][indexY] += item.合格数;
-						}else{
-							seriesData[indexX][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 = nameList[n];
+						obj.name = dateLabels[n];
-						obj.stack = "Ad";
 						obj.type = "bar";
-						obj.barWidth = "15px";
+						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);
 				}
 			});
@@ -734,9 +985,8 @@ export default {
 					that.end_date =that.queryDate +"-" +days;
 					that.firstWeekNum = that.getWeekOfYear(year,month,1);
 					that.endWeekNum = that.getWeekOfYear(year,month,days);
-					let duration = that.endWeekNum - that.firstWeekNum + 1;
 					let xAxisData = [];
-					for (let i = 1; i <= duration; i++) {
+					for (let i = that.firstWeekNum; i <= that.endWeekNum; i++) {
 						xAxisData.push("第" + i + "周");
 					}
 					that.xAxisData = xAxisData;
@@ -828,12 +1078,17 @@ export default {
 </script>
 
 <style scoped>
+.chart-scroll {
+	width: 100%;
+	overflow-x: auto;
+}
 #bachart1,
 #bachart2,
 #bachart3,
 #bachart4 {
 	width: 100%;
-	height: 300px;
+	min-width: 100%;
+	height: 500px;
 }
 .tables {
 	position: absolute;