diff --git a/src/views/statistics/pass_num.vue b/src/views/statistics/pass_num.vue index 34c89c79..b1a066e6 100644 --- a/src/views/statistics/pass_num.vue +++ b/src/views/statistics/pass_num.vue @@ -2,7 +2,7 @@
- + -
+
+
+
@@ -55,7 +57,7 @@ @@ -107,7 +109,9 @@ -
+
+
+
@@ -121,7 +125,7 @@ @@ -173,7 +177,9 @@ -
+
+
+
@@ -187,7 +193,7 @@ @@ -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 = 1; i <= duration; i++) { + for (let i = that.firstWeekNum; i <= that.endWeekNum; 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 indexY = item.周 - that.firstWeekNum; - if(seriesData[indexX][indexY]){ - seriesData[indexX][indexY] += item.合格数; - }else{ - seriesData[indexX][indexY] =0; + 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.周); @@ -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 indexY = item.month - 1; - if(seriesData[indexX][indexY]){ - seriesData[indexX][indexY] += item.合格数; - }else{ - seriesData[indexX][indexY] =0; + 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 = nameList[n]; - obj.stack = "Ad"; + obj.name = dateLabels[n]; 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 = '
' + cat + '
'; + let barIdx = 0; + params.forEach(function (p) { + if (p.seriesType !== "bar") return; + let rate = rates[barIdx]; + let rateStr = (rate !== null && rate !== undefined) ? rate + "%" : "-"; + html += '
' + + '' + + p.seriesName + ': ' + p.value + '    合格率 ' + rateStr + + '
'; + 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 = [], - nameList = []; + let 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.物料名); - indexY = item.周 - that.firstWeekNum; + indexX = 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.物料名); - indexY = item.月 - 1; + indexX = item.月 - 1; + indexY = nameList.indexOf(item.物料名); } - if(seriesData[indexX][indexY]){ - seriesData[indexX][indexY] += item.合格数; - }else{ - seriesData[indexX][indexY] =0; + 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 = nameList[n]; - obj.stack = "Ad"; + obj.name = dateLabels[n]; 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 = '
' + cat + '
'; + let barIdx = 0; + params.forEach(function (p) { + if (p.seriesType !== "bar") return; + let rate = rates[barIdx]; + let rateStr = (rate !== null && rate !== undefined) ? rate + "%" : "-"; + html += '
' + + '' + + p.seriesName + ': ' + p.value + '    合格率 ' + rateStr + + '
'; + 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 = [], - nameList = []; + let 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.物料名); - indexY = item.周 - that.firstWeekNum; + indexX = 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.物料名); - indexY = item.月 - 1; + indexX = item.月 - 1; + indexY = nameList.indexOf(item.物料名); } - if(seriesData[indexX][indexY]){ - seriesData[indexX][indexY] += item.合格数; - }else{ - seriesData[indexX][indexY] =0; + 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 = nameList[n]; - obj.stack = "Ad"; + obj.name = dateLabels[n]; 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 = '
' + cat + '
'; + let barIdx = 0; + params.forEach(function (p) { + if (p.seriesType !== "bar") return; + let rate = rates[barIdx]; + let rateStr = (rate !== null && rate !== undefined) ? rate + "%" : "-"; + html += '
' + + '' + + p.seriesName + ': ' + p.value + '    合格率 ' + rateStr + + '
'; + 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 {