diff --git a/src/views/home/accountsReceivable/accountsReceivable.vue b/src/views/home/accountsReceivable/accountsReceivable.vue index 36d30d05..f31bb11c 100644 --- a/src/views/home/accountsReceivable/accountsReceivable.vue +++ b/src/views/home/accountsReceivable/accountsReceivable.vue @@ -128,10 +128,6 @@ export default { this.dateData = this.$route.query.dateData ? this.$route.query.dateData : undefined }, methods: { - // sortChange(value) { - // this.sort = value - // this.getData() - // }, getData() { getAccountsReceivableData({ startTime: this.dateData.startTime, @@ -140,15 +136,8 @@ export default { index: undefined, factory: undefined }).then((res) => { - console.log('res==============================',res); this.monthData= res.data.month this.ytdData = res.data.ytd - - // this.saleData = res.data.SaleData - // this.premiumProduct = res.data.premiumProduct - // this.salesTrendMap = res.data.salesTrendMap - // this.grossMarginTrendMap = res.data.grossMarginTrendMap - // this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {} }) }, handleTimeChange(obj) { @@ -198,28 +187,7 @@ export default { return false; } screenfull.toggle(this.$refs.dayReportB); - }, - // 导出 - // exportPDF() { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } + } }, }; diff --git a/src/views/home/accountsReceivableComponents/dataTrend.vue b/src/views/home/accountsReceivableComponents/dataTrend.vue deleted file mode 100644 index d5252997..00000000 --- a/src/views/home/accountsReceivableComponents/dataTrend.vue +++ /dev/null @@ -1,298 +0,0 @@ - - - - - - - diff --git a/src/views/home/accountsReceivableComponents/dataTrendBar.vue b/src/views/home/accountsReceivableComponents/dataTrendBar.vue deleted file mode 100644 index cb869cb0..00000000 --- a/src/views/home/accountsReceivableComponents/dataTrendBar.vue +++ /dev/null @@ -1,477 +0,0 @@ - - - - - diff --git a/src/views/home/accountsReceivableComponents/monthlyOverview.vue b/src/views/home/accountsReceivableComponents/monthlyOverview.vue deleted file mode 100644 index 892bc82b..00000000 --- a/src/views/home/accountsReceivableComponents/monthlyOverview.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - - diff --git a/src/views/home/accountsReceivableComponents/monthlyRelatedMetrics.vue b/src/views/home/accountsReceivableComponents/monthlyRelatedMetrics.vue deleted file mode 100644 index 2477de1a..00000000 --- a/src/views/home/accountsReceivableComponents/monthlyRelatedMetrics.vue +++ /dev/null @@ -1,221 +0,0 @@ - - - - - diff --git a/src/views/home/accountsReceivableComponents/operatingBar.vue b/src/views/home/accountsReceivableComponents/operatingBar.vue index 8429afc9..3414b76f 100644 --- a/src/views/home/accountsReceivableComponents/operatingBar.vue +++ b/src/views/home/accountsReceivableComponents/operatingBar.vue @@ -174,69 +174,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14, - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14, - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14, - } - } + show: false }, itemStyle: { color: (params) => { @@ -264,6 +202,78 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { + show: false + }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14, + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14, + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14, + } + } + } + })) } ] }; diff --git a/src/views/home/accountsReceivableComponents/operatingLineChart.vue b/src/views/home/accountsReceivableComponents/operatingLineChart.vue index c4337c48..4958acd6 100644 --- a/src/views/home/accountsReceivableComponents/operatingLineChart.vue +++ b/src/views/home/accountsReceivableComponents/operatingLineChart.vue @@ -32,7 +32,6 @@ width: 1220px; background-color: rgba(249, 252, 255, 1); "> - @@ -88,23 +87,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - // if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData */ @@ -118,7 +100,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate >= 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -139,7 +121,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate >= 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/accountsReceivableComponents/operatingLineChartCumulative.vue b/src/views/home/accountsReceivableComponents/operatingLineChartCumulative.vue index c3bbdda9..48d8c135 100644 --- a/src/views/home/accountsReceivableComponents/operatingLineChartCumulative.vue +++ b/src/views/home/accountsReceivableComponents/operatingLineChartCumulative.vue @@ -32,7 +32,6 @@ width: 1220px; background-color: rgba(249, 252, 255, 1); "> - @@ -83,23 +82,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - // if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData @@ -114,7 +96,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate >= 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -135,7 +117,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate >= 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/accountsReceivableComponents/operatingSingleBar.vue b/src/views/home/accountsReceivableComponents/operatingSingleBar.vue deleted file mode 100644 index 3cc111f7..00000000 --- a/src/views/home/accountsReceivableComponents/operatingSingleBar.vue +++ /dev/null @@ -1,245 +0,0 @@ - - - - - diff --git a/src/views/home/accountsReceivableComponents/totalOverview.vue b/src/views/home/accountsReceivableComponents/totalOverview.vue deleted file mode 100644 index acc15d77..00000000 --- a/src/views/home/accountsReceivableComponents/totalOverview.vue +++ /dev/null @@ -1,202 +0,0 @@ - - - - - - diff --git a/src/views/home/accountsReceivableComponents/verticalBarChart.vue b/src/views/home/accountsReceivableComponents/verticalBarChart.vue deleted file mode 100644 index ec9643f0..00000000 --- a/src/views/home/accountsReceivableComponents/verticalBarChart.vue +++ /dev/null @@ -1,226 +0,0 @@ - - diff --git a/src/views/home/accountsReceivableComponents/yearRelatedMetrics.vue b/src/views/home/accountsReceivableComponents/yearRelatedMetrics.vue deleted file mode 100644 index eb71709c..00000000 --- a/src/views/home/accountsReceivableComponents/yearRelatedMetrics.vue +++ /dev/null @@ -1,217 +0,0 @@ - - - - - diff --git a/src/views/home/depreciationAnalysis/depreciationAnalysis.vue b/src/views/home/depreciationAnalysis/depreciationAnalysis.vue index dca9f825..d5dd8bc7 100644 --- a/src/views/home/depreciationAnalysis/depreciationAnalysis.vue +++ b/src/views/home/depreciationAnalysis/depreciationAnalysis.vue @@ -128,10 +128,6 @@ export default { this.dateData = this.$route.query.dateData ? this.$route.query.dateData : undefined }, methods: { - // sortChange(value) { - // this.sort = value - // this.getData() - // }, getData() { getDepreciationAnalysisData({ startTime: this.dateData.startTime, @@ -144,12 +140,6 @@ export default { console.log(res); this.monthData= res.data.month this.ytdData = res.data.ytd - - // this.saleData = res.data.SaleData - // this.premiumProduct = res.data.premiumProduct - // this.salesTrendMap = res.data.salesTrendMap - // this.grossMarginTrendMap = res.data.grossMarginTrendMap - // this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {} }) }, handleTimeChange(obj) { @@ -199,28 +189,7 @@ export default { return false; } screenfull.toggle(this.$refs.dayReportB); - }, - // 导出 - // exportPDF() { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } + } }, }; diff --git a/src/views/home/depreciationAnalysisComponents/dataTrend.vue b/src/views/home/depreciationAnalysisComponents/dataTrend.vue deleted file mode 100644 index d5252997..00000000 --- a/src/views/home/depreciationAnalysisComponents/dataTrend.vue +++ /dev/null @@ -1,298 +0,0 @@ - - - - - - - diff --git a/src/views/home/depreciationAnalysisComponents/dataTrendBar.vue b/src/views/home/depreciationAnalysisComponents/dataTrendBar.vue deleted file mode 100644 index cb869cb0..00000000 --- a/src/views/home/depreciationAnalysisComponents/dataTrendBar.vue +++ /dev/null @@ -1,477 +0,0 @@ - - - - - diff --git a/src/views/home/depreciationAnalysisComponents/monthlyOverview.vue b/src/views/home/depreciationAnalysisComponents/monthlyOverview.vue deleted file mode 100644 index 892bc82b..00000000 --- a/src/views/home/depreciationAnalysisComponents/monthlyOverview.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - - diff --git a/src/views/home/depreciationAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/depreciationAnalysisComponents/monthlyRelatedMetrics.vue deleted file mode 100644 index 2477de1a..00000000 --- a/src/views/home/depreciationAnalysisComponents/monthlyRelatedMetrics.vue +++ /dev/null @@ -1,221 +0,0 @@ - - - - - diff --git a/src/views/home/depreciationAnalysisComponents/operatingBar.vue b/src/views/home/depreciationAnalysisComponents/operatingBar.vue index 8429afc9..3414b76f 100644 --- a/src/views/home/depreciationAnalysisComponents/operatingBar.vue +++ b/src/views/home/depreciationAnalysisComponents/operatingBar.vue @@ -174,69 +174,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14, - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14, - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14, - } - } + show: false }, itemStyle: { color: (params) => { @@ -264,6 +202,78 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { + show: false + }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14, + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14, + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14, + } + } + } + })) } ] }; diff --git a/src/views/home/depreciationAnalysisComponents/operatingLineChart.vue b/src/views/home/depreciationAnalysisComponents/operatingLineChart.vue index c4337c48..ac7c7060 100644 --- a/src/views/home/depreciationAnalysisComponents/operatingLineChart.vue +++ b/src/views/home/depreciationAnalysisComponents/operatingLineChart.vue @@ -32,7 +32,6 @@ width: 1220px; background-color: rgba(249, 252, 255, 1); "> - @@ -88,23 +87,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - // if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData */ @@ -118,7 +100,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate]; console.log('集团数据数组：', { groupTarget, @@ -139,7 +121,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate >= 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/depreciationAnalysisComponents/totalOverview.vue b/src/views/home/depreciationAnalysisComponents/totalOverview.vue deleted file mode 100644 index acc15d77..00000000 --- a/src/views/home/depreciationAnalysisComponents/totalOverview.vue +++ /dev/null @@ -1,202 +0,0 @@ - - - - - - diff --git a/src/views/home/depreciationAnalysisComponents/verticalBarChart.vue b/src/views/home/depreciationAnalysisComponents/verticalBarChart.vue deleted file mode 100644 index ec9643f0..00000000 --- a/src/views/home/depreciationAnalysisComponents/verticalBarChart.vue +++ /dev/null @@ -1,226 +0,0 @@ - - diff --git a/src/views/home/depreciationAnalysisComponents/yearRelatedMetrics.vue b/src/views/home/depreciationAnalysisComponents/yearRelatedMetrics.vue deleted file mode 100644 index eb71709c..00000000 --- a/src/views/home/depreciationAnalysisComponents/yearRelatedMetrics.vue +++ /dev/null @@ -1,217 +0,0 @@ - - - - - diff --git a/src/views/home/electricityCostAnalysis/electricityCostAnalysis.vue b/src/views/home/electricityCostAnalysis/electricityCostAnalysis.vue index 48706fa5..2db4ad29 100644 --- a/src/views/home/electricityCostAnalysis/electricityCostAnalysis.vue +++ b/src/views/home/electricityCostAnalysis/electricityCostAnalysis.vue @@ -128,10 +128,6 @@ export default { this.dateData = this.$route.query.dateData ? this.$route.query.dateData : undefined }, methods: { - // sortChange(value) { - // this.sort = value - // this.getData() - // }, getData() { getElectricityCostAnalysisData({ startTime: this.dateData.startTime, @@ -191,27 +187,6 @@ export default { } screenfull.toggle(this.$refs.dayReportB); }, - // 导出 - // exportPDF() { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } }, }; diff --git a/src/views/home/electricityCostAnalysis/electricityCostAnalysisBase.vue b/src/views/home/electricityCostAnalysis/electricityCostAnalysisBase.vue index d6e50d39..0c1b4ea7 100644 --- a/src/views/home/electricityCostAnalysis/electricityCostAnalysisBase.vue +++ b/src/views/home/electricityCostAnalysis/electricityCostAnalysisBase.vue @@ -52,14 +52,6 @@ - diff --git a/src/views/home/electricityCostAnalysisComponents/dataTrend.vue b/src/views/home/electricityCostAnalysisComponents/dataTrend.vue index ed3a4a95..592ef445 100644 --- a/src/views/home/electricityCostAnalysisComponents/dataTrend.vue +++ b/src/views/home/electricityCostAnalysisComponents/dataTrend.vue @@ -30,11 +30,8 @@ export default { }, }, data() { - return { - // 移除：原 chartData 定义，改为计算属性 - }; + return {}; }, - // 移除：原 watch 监听配置，计算属性自动响应 trendData 变化 computed: { /** * chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组 @@ -58,7 +55,7 @@ export default { diffValueArr.push(item.diff ?? 0); targetValueArr.push(item.budget ?? 0); proportionArr.push(item.rate ?? 0); - completedArr.push(item.rate && item.rate>=100 ? 1 : 0); + completedArr.push(item.rate>=100 ? 1 : 0); }); // 组装并返回格式化后的数据（结构与原一致） diff --git a/src/views/home/electricityCostAnalysisComponents/dataTrendBar.vue b/src/views/home/electricityCostAnalysisComponents/dataTrendBar.vue index 18cacf2d..43c09ace 100644 --- a/src/views/home/electricityCostAnalysisComponents/dataTrendBar.vue +++ b/src/views/home/electricityCostAnalysisComponents/dataTrendBar.vue @@ -143,74 +143,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -239,6 +172,81 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { + show: false + }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/electricityCostAnalysisComponents/monthlyOverview.vue b/src/views/home/electricityCostAnalysisComponents/monthlyOverview.vue index 38f19e49..e4381387 100644 --- a/src/views/home/electricityCostAnalysisComponents/monthlyOverview.vue +++ b/src/views/home/electricityCostAnalysisComponents/monthlyOverview.vue @@ -17,9 +17,6 @@ 下降 -
@@ -84,12 +81,7 @@ export default { return 0; } return value; - }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ + } } } diff --git a/src/views/home/electricityCostAnalysisComponents/operatingBar.vue b/src/views/home/electricityCostAnalysisComponents/operatingBar.vue index 5a9e3438..ba6e325f 100644 --- a/src/views/home/electricityCostAnalysisComponents/operatingBar.vue +++ b/src/views/home/electricityCostAnalysisComponents/operatingBar.vue @@ -175,69 +175,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } + show: false }, itemStyle: { color: (params) => { @@ -265,6 +203,78 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { + show: false + }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/electricityCostAnalysisComponents/operatingLineChart.vue b/src/views/home/electricityCostAnalysisComponents/operatingLineChart.vue index e38aff26..f034abc7 100644 --- a/src/views/home/electricityCostAnalysisComponents/operatingLineChart.vue +++ b/src/views/home/electricityCostAnalysisComponents/operatingLineChart.vue @@ -101,21 +101,6 @@ export default { }, }, methods: { - /** - * 核心方法：按levelId匹配地名生成locations - */ - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - // if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, processChartData() { // 初始化空数据结构 const initTopBarData = { @@ -132,7 +117,7 @@ export default { topBarData.targets.push(level1Data.target || 0); topBarData.reals.push(level1Data.real || 0); topBarData.rate.push(level1Data.rate || 0); - topBarData.flags.push(this.getRateFlag(level1Data.rate, level1Data.real, level1Data.target)); + topBarData.flags.push(level1Data.rate >= 100 ? 1 : 0); // 2. 处理levelId≠1的整合数据（核心：levelId匹配地名） const barData = { ...initBarData }; // 筛选有效数据：levelId≠1 且 levelId在baseIndexToNameMap中 @@ -145,7 +130,7 @@ export default { barData.targets.push(item.target || 0); barData.reals.push(item.real || 0); barData.rate.push(item.rate || 0); - barData.flags.push(this.getRateFlag(item.rate, item.real, item.target)); + barData.flags.push(item.rate >= 100 ? 1 : 0); }); // 3. 更新chartData diff --git a/src/views/home/electricityCostAnalysisComponents/operatingLineChartCumulative.vue b/src/views/home/electricityCostAnalysisComponents/operatingLineChartCumulative.vue index 52f6edac..1ea86e78 100644 --- a/src/views/home/electricityCostAnalysisComponents/operatingLineChartCumulative.vue +++ b/src/views/home/electricityCostAnalysisComponents/operatingLineChartCumulative.vue @@ -101,21 +101,6 @@ export default { }, }, methods: { - /** - * 核心方法：按levelId匹配地名生成locations - */ - getRateFlag(rate, real, budget) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - // if (rate === 0 && budget === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, processChartData() { // 初始化空数据结构 const initTopBarData = { @@ -132,7 +117,7 @@ export default { topBarData.targets.push(level1Data.target || 0); topBarData.reals.push(level1Data.real || 0); topBarData.rate.push(level1Data.rate || 0); - topBarData.flags.push(this.getRateFlag(level1Data.rate, level1Data.real, level1Data.target)); + topBarData.flags.push(level1Data.rate >= 100 ? 1 : 0); // 2. 处理levelId≠1的整合数据（核心：levelId匹配地名） const barData = { ...initBarData }; @@ -146,7 +131,7 @@ export default { barData.targets.push(item.budget || 0); barData.reals.push(item.real || 0); barData.rate.push(item.rate || 0); - barData.flags.push(this.getRateFlag(item.rate, item.real, item.budget)); + barData.flags.push(item.rate >= 100 ? 1 : 0); }); // 3. 更新chartData diff --git a/src/views/home/electricityCostAnalysisComponents/relatedIndicatorsAnalysis.vue b/src/views/home/electricityCostAnalysisComponents/relatedIndicatorsAnalysis.vue index 07999cfd..c6c21384 100644 --- a/src/views/home/electricityCostAnalysisComponents/relatedIndicatorsAnalysis.vue +++ b/src/views/home/electricityCostAnalysisComponents/relatedIndicatorsAnalysis.vue @@ -28,9 +28,6 @@ import Container from '../components/container.vue' import operatingSingleBar from './operatingSingleBar.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, operatingSingleBar }, diff --git a/src/views/home/electricityCostAnalysisComponents/totalOverview.vue b/src/views/home/electricityCostAnalysisComponents/totalOverview.vue index 7e9d0a61..2c3260e2 100644 --- a/src/views/home/electricityCostAnalysisComponents/totalOverview.vue +++ b/src/views/home/electricityCostAnalysisComponents/totalOverview.vue @@ -19,9 +19,6 @@ 下降
-
@@ -37,9 +34,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -87,12 +81,7 @@ export default { return 0; } return value; - }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ + } } } diff --git a/src/views/home/expenseAnalysis/expenseAnalysis.vue b/src/views/home/expenseAnalysis/expenseAnalysis.vue index c5f5a1ee..ec65bafa 100644 --- a/src/views/home/expenseAnalysis/expenseAnalysis.vue +++ b/src/views/home/expenseAnalysis/expenseAnalysis.vue @@ -26,39 +26,26 @@ grid-template-columns: 1624px; "> -
- diff --git a/src/views/home/expenseAnalysis/expenseAnalysisBase.vue b/src/views/home/expenseAnalysis/expenseAnalysisBase.vue index 01dc44be..69c2b51f 100644 --- a/src/views/home/expenseAnalysis/expenseAnalysisBase.vue +++ b/src/views/home/expenseAnalysis/expenseAnalysisBase.vue @@ -52,14 +52,6 @@ - diff --git a/src/views/home/expenseAnalysisComponents/dataTrend.vue b/src/views/home/expenseAnalysisComponents/dataTrend.vue index 7d16937d..d9a429d1 100644 --- a/src/views/home/expenseAnalysisComponents/dataTrend.vue +++ b/src/views/home/expenseAnalysisComponents/dataTrend.vue @@ -26,20 +26,7 @@ export default { trend: { type: Array, // 默认值与实际数据结构一致（12个月） - default: () => [ - // { title: "2025年01月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年02月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年03月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年04月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年05月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年06月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年07月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年08月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年09月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年10月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年11月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年12月", budget: 0, real: 0, rate: 0, diff: 0 } - ] + default: () => [] }, }, data() { @@ -98,7 +85,7 @@ export default { const diff = Number(item.diff) || 0; // 计算达标标识（≥100 → 1，<100 → 0） - const flag = this.getRateFlag(rate, real, budget); + const flag = item.rate >= 100 ? 1 : 0; // 填充数组 months.push(month); @@ -121,24 +108,6 @@ export default { console.log('处理后的趋势数据：', this.chartData); }, - - /** - * 计算达标标识 - * @param {Number} rate - 完成率（原始值，如1.2 → 120%） - * @returns {Number} 1: 达标（≥100%），0: 未达标（<100%） - */ - getRateFlag(rate, real, target) { - // 先处理无效值的情况 - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 实际值和目标值都为0时，算作达标 - if (real === 0 && target === 0 && rate === 0) { - return 1; // 达标 - } - - // 其他情况：rate >= 100 或 rate === 0 时达标 - return (rate >= 100) ? 1 : 0; - } }, }; diff --git a/src/views/home/expenseAnalysisComponents/dataTrendBar.vue b/src/views/home/expenseAnalysisComponents/dataTrendBar.vue index 5dbbdc97..8a39814f 100644 --- a/src/views/home/expenseAnalysisComponents/dataTrendBar.vue +++ b/src/views/home/expenseAnalysisComponents/dataTrendBar.vue @@ -145,86 +145,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: function (params) { - const diff = data.diffs || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - // const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强 - // { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px） - // { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散） - { offset: 0.2, color: '#ffffff' }, // 主体白色 - { offset: 1, color: '#ffffff' } - ] - }, - // 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5) - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - // 圆角：4px - borderRadius: 4, - // 移除边框 - borderColor: '#BFCBD577', - borderWidth: 0, - // 文字垂直居中（针对富文本） - lineHeight: 20, - rich: { - text: { - // 缩小宽度和内边距，适配68px容器 - width: 'auto', // 自动宽度，替代固定40px - padding: [5, 10, 5, 0], // 缩小内边距 - align: 'center', - color: '#464646', // 文字灰色 - fontSize: 11, // 缩小字体，适配小尺寸 - lineHeight: 20 // 垂直居中 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { // 达标状态：1=达标（绿色），0=未达标（橙色） @@ -252,6 +173,82 @@ export default { borderWidth: 0 }, data: data.reals // 实际销量（万元） + }, + // 实际柱状图的标签层（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffs || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/expenseAnalysisComponents/monthlyOverview.vue b/src/views/home/expenseAnalysisComponents/monthlyOverview.vue index 38017803..928f2e73 100644 --- a/src/views/home/expenseAnalysisComponents/monthlyOverview.vue +++ b/src/views/home/expenseAnalysisComponents/monthlyOverview.vue @@ -19,9 +19,6 @@ -
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -65,29 +59,6 @@ export default { } }, - watch: { - // itemData: { - // handler(newValue, oldValue) { - // // this.updateChart() - // }, - // deep: true // 若对象内属性变化需触发，需加 deep: true - // } - }, - // computed: { - // // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列 - // sortedItemData() { - // // 过滤出包含“总成本”的项（不区分大小写） - // const totalCostItems = this.itemData.filter(item => - // item.name && item.name.includes('总成本') - // ); - // // 过滤出不包含“总成本”的项 - // const otherItems = this.itemData.filter(item => - // !item.name || !item.name.includes('总成本') - // ); - // // 合并：总成本项在前，其他项在后 - // return [...totalCostItems, ...otherItems]; - // } - // }, mounted() { // 初始化图表（若需展示图表，需在模板中添加对应 DOM） // this.$nextTick(() => this.updateChart()) diff --git a/src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue index b2230e4a..7ce7ce36 100644 --- a/src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue +++ b/src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue @@ -69,7 +69,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag(data.rate, data.real, data.budget), + flag: data.rate>=100?1:0 } return { ...def, @@ -100,18 +100,6 @@ export default { deep: true, immediate: true // 初始化立即执行 } - }, - mounted() {}, - methods: { - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - // 其他情况 => 未达标 - return 0; - } } } diff --git a/src/views/home/expenseAnalysisComponents/operatingBar.vue b/src/views/home/expenseAnalysisComponents/operatingBar.vue index d1666bd1..a92d778d 100644 --- a/src/views/home/expenseAnalysisComponents/operatingBar.vue +++ b/src/views/home/expenseAnalysisComponents/operatingBar.vue @@ -173,71 +173,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 40, - label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - // const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { const safeFlag = data.flags || []; @@ -264,6 +200,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 实际柱状图的标签层（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/expenseAnalysisComponents/operatingLineChart.vue b/src/views/home/expenseAnalysisComponents/operatingLineChart.vue index bb9d334a..c444c94f 100644 --- a/src/views/home/expenseAnalysisComponents/operatingLineChart.vue +++ b/src/views/home/expenseAnalysisComponents/operatingLineChart.vue @@ -86,23 +86,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (real <= target) return 1; - - // 其他情况 => 未达标 - return 0; - }, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData */ @@ -116,7 +99,7 @@ export default { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate >= 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -137,7 +120,7 @@ export default { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate >= 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue b/src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue index 7fe1510b..1690ccee 100644 --- a/src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue +++ b/src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue @@ -81,23 +81,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (real <= target) return 1; - - // 其他情况 => 未达标 - return 0; - }, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData */ @@ -111,7 +94,7 @@ export default { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate > 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, groupDiff, @@ -131,7 +114,7 @@ export default { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate > 100 ? 1 : 0); console.log('factoryFlags', factoryFlags); // 3. 组装最终的chartData（供子组件使用） diff --git a/src/views/home/expenseAnalysisComponents/totalOverview.vue b/src/views/home/expenseAnalysisComponents/totalOverview.vue index bd420828..bfb03fcf 100644 --- a/src/views/home/expenseAnalysisComponents/totalOverview.vue +++ b/src/views/home/expenseAnalysisComponents/totalOverview.vue @@ -19,9 +19,6 @@
-
@@ -38,13 +35,9 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, - // mixins: [resize], props: { ytdData: { // 接收父组件传递的设备数据数组 type: Object, @@ -73,21 +66,6 @@ export default { deep: true // 若对象内属性变化需触发，需加 deep: true } }, - // computed: { - // // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列 - // sortedItemData() { - // // 过滤出包含“总成本”的项（不区分大小写） - // const totalCostItems = this.itemData.filter(item => - // item.name && item.name.includes('总成本') - // ); - // // 过滤出不包含“总成本”的项 - // const otherItems = this.itemData.filter(item => - // !item.name || !item.name.includes('总成本') - // ); - // // 合并：总成本项在前，其他项在后 - // return [...totalCostItems, ...otherItems]; - // } - // }, mounted() { // 初始化图表（若需展示图表，需在模板中添加对应 DOM） // this.$nextTick(() => this.updateChart()) diff --git a/src/views/home/expenseAnalysisComponents/verticalBarChart.vue b/src/views/home/expenseAnalysisComponents/verticalBarChart.vue index 9d0b95dd..646027bc 100644 --- a/src/views/home/expenseAnalysisComponents/verticalBarChart.vue +++ b/src/views/home/expenseAnalysisComponents/verticalBarChart.vue @@ -50,18 +50,6 @@ export default { } }, methods: { - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, updateChart() { const chartDom = this.$refs[this.refName]; if (!chartDom) { @@ -76,7 +64,7 @@ export default { this.myChart = echarts.init(chartDom); const diff = this.detailData.diff || 0 const rate = this.detailData.rate || 0 - const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0 + const flagValue = this.detailData.rate >= 100 ? 1 : 0 this.flag = flagValue const option = { @@ -87,17 +75,7 @@ export default { label: { backgroundColor: '#6a7985' } - }, - // formatter: (params) => { - // let html = `${params[0].axisValue}
`; - // params.forEach(item => { - // const unit = item.seriesName === '完成率' ? '%' : ( - // ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元' - // ); - // html += `${item.marker} ${item.seriesName}: ${item.value}${unit}
`; - // }); - // return html; - // } + } }, grid: { top: 40, @@ -110,9 +88,6 @@ export default { xAxis: { // 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值 type: 'value', - // offset: 0, - // boundaryGap: true , - // boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白 axisTick: { show: false }, min: 0, // diff --git a/src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue b/src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue index daa861e3..753bbb57 100644 --- a/src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue +++ b/src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue @@ -74,7 +74,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag(data.rate, data.real, data.budget), + flag: data.rate>=100?1:0 } return { ...def, @@ -105,18 +105,6 @@ export default { deep: true, immediate: true // 初始化立即执行 } - }, - mounted() {}, - methods: { - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - // 其他情况 => 未达标 - return 0; - } } } diff --git a/src/views/home/fullCostAnalysis/fullCostAnalysis.vue b/src/views/home/fullCostAnalysis/fullCostAnalysis.vue index a98e607e..caaf6da2 100644 --- a/src/views/home/fullCostAnalysis/fullCostAnalysis.vue +++ b/src/views/home/fullCostAnalysis/fullCostAnalysis.vue @@ -25,26 +25,15 @@ grid-template-columns: 1624px; "> -
- diff --git a/src/views/home/fullCostAnalysis/fullCostAnalysisBase.vue b/src/views/home/fullCostAnalysis/fullCostAnalysisBase.vue index 58030ff3..4ef049bb 100644 --- a/src/views/home/fullCostAnalysis/fullCostAnalysisBase.vue +++ b/src/views/home/fullCostAnalysis/fullCostAnalysisBase.vue @@ -52,14 +52,6 @@ - diff --git a/src/views/home/fullCostAnalysisComponents/dataTrendBar.vue b/src/views/home/fullCostAnalysisComponents/dataTrendBar.vue index 2e299190..123a91db 100644 --- a/src/views/home/fullCostAnalysisComponents/dataTrendBar.vue +++ b/src/views/home/fullCostAnalysisComponents/dataTrendBar.vue @@ -110,9 +110,7 @@ export default { reals.push(monthData.real || 0); targets.push(monthData.target || 0); diffs.push(monthData.diff || 0); - - // 生成达标状态（复用 getRateFlag 逻辑） - flags.push(this.getRateFlag(completeRate, monthData.real, monthData.target)); + flags.push(completeRate>=100?1:0); }); return { @@ -191,84 +189,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: function (params) { - const diff = diffs || []; - // const flags = flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - console.log('currentFlag', flags, params.dataIndex); - - // const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强 - // { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px） - // { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散） - { offset: 0.2, color: '#ffffff' }, // 主体白色 - { offset: 1, color: '#ffffff' } - ] - }, - // 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5) - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - // 圆角：4px - borderRadius: 4, - // 移除边框 - borderColor: '#BFCBD577', - borderWidth: 0, - // 文字垂直居中（针对富文本） - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -295,6 +216,82 @@ export default { borderWidth: 0 }, data: reals, // 动态实际值 + }, + // 4. 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { + show: false + }, + data: (reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = diffs[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; @@ -309,19 +306,6 @@ export default { this.unit = item.unit; this.isDropdownShow = false; }, - // 复用达标状态判断方法 -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, } }; diff --git a/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue b/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue index dc22c9b0..3f31c11d 100644 --- a/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue +++ b/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue @@ -17,10 +17,6 @@ 下降 - - - -
@@ -87,7 +83,7 @@ export default { target: 0, thb: 0, ...rawData, - flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段 + flag: rawData.completeRate >= 100 ? 1 : 0 }; } }, @@ -101,23 +97,6 @@ export default { } return value; }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, } } diff --git a/src/views/home/fullCostAnalysisComponents/operatingBar.vue b/src/views/home/fullCostAnalysisComponents/operatingBar.vue index f07170e7..80ea8279 100644 --- a/src/views/home/fullCostAnalysisComponents/operatingBar.vue +++ b/src/views/home/fullCostAnalysisComponents/operatingBar.vue @@ -175,69 +175,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - // const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } + show: false }, itemStyle: { color: (params) => { @@ -265,6 +203,78 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { + show: false + }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/fullCostAnalysisComponents/operatingLineChart.vue b/src/views/home/fullCostAnalysisComponents/operatingLineChart.vue index 626ec779..e710326a 100644 --- a/src/views/home/fullCostAnalysisComponents/operatingLineChart.vue +++ b/src/views/home/fullCostAnalysisComponents/operatingLineChart.vue @@ -80,24 +80,6 @@ export default { this.$emit('sort-change', value); }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如80代表80%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 实际小于等于目标) => 达标 - if (real <= target) return 1; - - // 其他情况 => 未达标 - return 0; -}, - /** * 核心处理函数：解析thisMonData，组装集团和工厂数据 */ @@ -116,7 +98,7 @@ getRateFlag(rate, real, target) { diff: [ksxnData.diff], reals: [ksxnData.real], rate: [ksxnData.completeRate], - flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)], + flags: [ksxnData.completeRate >= 100 ? 1 : 0], thb: [ksxnData.thb] // 新增thb字段（如果子组件需要） }; @@ -131,7 +113,7 @@ getRateFlag(rate, real, target) { diff: factoryDataList.map(item => item.diff || 0), // 差值 reals: factoryDataList.map(item => item.real || 0), // 实际值 rates: factoryDataList.map(item => item.completeRate || 0), // 完成率 - flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识 + flags: factoryDataList.map(item => item.completeRate >= 100 ? 1 : 0), // 完成率标识 thb: factoryDataList.map(item => item.thb || 0) // thb字段 }; diff --git a/src/views/home/fullCostAnalysisComponents/operatingLineChartCumulative.vue b/src/views/home/fullCostAnalysisComponents/operatingLineChartCumulative.vue index 3109bec6..2b5e1fff 100644 --- a/src/views/home/fullCostAnalysisComponents/operatingLineChartCumulative.vue +++ b/src/views/home/fullCostAnalysisComponents/operatingLineChartCumulative.vue @@ -80,23 +80,6 @@ export default { this.$emit('sort-change', value); }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如80代表80%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：解析thisMonData，组装集团和工厂数据 @@ -116,7 +99,7 @@ getRateFlag(rate, real, target) { diff: [ksxnData.diff], reals: [ksxnData.real], rate: [ksxnData.completeRate], - flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)], + flags: [ksxnData.completeRate>=100?1:0], thb: [ksxnData.thb] // 新增thb字段（如果子组件需要） }; @@ -131,7 +114,7 @@ getRateFlag(rate, real, target) { diff: factoryDataList.map(item => item.diff || 0), // 差值 reals: factoryDataList.map(item => item.real || 0), // 实际值 rates: factoryDataList.map(item => item.completeRate || 0), // 完成率 - flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识 + flags: factoryDataList.map(item => item.completeRate>=100?1:0), // 完成率标识 thb: factoryDataList.map(item => item.thb || 0) // thb字段 }; diff --git a/src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue b/src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue index 8c38b837..6e38b81d 100644 --- a/src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue +++ b/src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue @@ -28,9 +28,6 @@ import Container from '../components/container.vue' import operatingSingleBar from './operatingSingleBar.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, operatingSingleBar }, @@ -100,7 +97,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target), + flag:data.completeRate > 100 ? 1 : 0, } return { ...def, @@ -158,18 +155,6 @@ export default { } }) }, - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, handleChange(value) { console.log('value', value, this.relatedData); this.currentTab = value; diff --git a/src/views/home/fullCostAnalysisComponents/totalOverview.vue b/src/views/home/fullCostAnalysisComponents/totalOverview.vue index abf29ecc..0e8c77af 100644 --- a/src/views/home/fullCostAnalysisComponents/totalOverview.vue +++ b/src/views/home/fullCostAnalysisComponents/totalOverview.vue @@ -19,9 +19,6 @@
-
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -90,7 +84,7 @@ export default { target: 0, thb: 0, ...rawData, - flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段 + flag: rawData.completeRate >= 100 ? 1 : 0 // 根据完成率计算flag }; } }, @@ -104,23 +98,6 @@ export default { } return value; }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, } } diff --git a/src/views/home/grossMargin/grossMargin.vue b/src/views/home/grossMargin/grossMargin.vue index e6ed9bf5..f7fa00ee 100644 --- a/src/views/home/grossMargin/grossMargin.vue +++ b/src/views/home/grossMargin/grossMargin.vue @@ -26,39 +26,26 @@ grid-template-columns: 1624px; "> -
- diff --git a/src/views/home/grossMargin/grossMarginBase.vue b/src/views/home/grossMargin/grossMarginBase.vue index 9e6eb2cb..cf2e5a2a 100644 --- a/src/views/home/grossMargin/grossMarginBase.vue +++ b/src/views/home/grossMargin/grossMarginBase.vue @@ -53,14 +53,6 @@ - diff --git a/src/views/home/grossMarginComponents/dataTrend.vue b/src/views/home/grossMarginComponents/dataTrend.vue index d5252997..28c5595b 100644 --- a/src/views/home/grossMarginComponents/dataTrend.vue +++ b/src/views/home/grossMarginComponents/dataTrend.vue @@ -27,18 +27,6 @@ export default { type: Array, // 默认值与实际数据结构一致（12个月） default: () => [ - // { title: "2025年01月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年02月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年03月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年04月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年05月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年06月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年07月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年08月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年09月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年10月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年11月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年12月", budget: 0, real: 0, rate: 0, diff: 0 } ] }, }, @@ -98,7 +86,7 @@ export default { const diff = Number(item.diff) || 0; // 计算达标标识（≥100 → 1，<100 → 0） - const flag = this.getRateFlag(rate, real, budget); + const flag = item.rate >= 100 ? 1 : 0; // 填充数组 months.push(month); @@ -120,25 +108,7 @@ export default { }; console.log('处理后的趋势数据：', this.chartData); - }, - - /** - * 计算达标标识 - * @param {Number} rate - 完成率（原始值，如1.2 → 120%） - * @returns {Number} 1: 达标（≥100%），0: 未达标（<100%） - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, + } }, }; diff --git a/src/views/home/grossMarginComponents/dataTrendBar.vue b/src/views/home/grossMarginComponents/dataTrendBar.vue index 087fd943..b6d61c34 100644 --- a/src/views/home/grossMarginComponents/dataTrendBar.vue +++ b/src/views/home/grossMarginComponents/dataTrendBar.vue @@ -146,76 +146,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffs || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { // 达标状态：1=达标（绿色），0=未达标（橙色） @@ -243,6 +174,79 @@ export default { borderWidth: 0 }, data: data.reals // 实际销量（万元） + }, + // 实际柱状图的标签层（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffs || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/grossMarginComponents/monthlyOverview.vue b/src/views/home/grossMarginComponents/monthlyOverview.vue index 4d4d3f3b..12612150 100644 --- a/src/views/home/grossMarginComponents/monthlyOverview.vue +++ b/src/views/home/grossMarginComponents/monthlyOverview.vue @@ -19,9 +19,6 @@ -
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -74,21 +68,6 @@ export default { deep: true // 若对象内属性变化需触发，需加 deep: true } }, - // computed: { - // // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列 - // sortedItemData() { - // // 过滤出包含“总成本”的项（不区分大小写） - // const totalCostItems = this.itemData.filter(item => - // item.name && item.name.includes('总成本') - // ); - // // 过滤出不包含“总成本”的项 - // const otherItems = this.itemData.filter(item => - // !item.name || !item.name.includes('总成本') - // ); - // // 合并：总成本项在前，其他项在后 - // return [...totalCostItems, ...otherItems]; - // } - // }, mounted() { // 初始化图表（若需展示图表，需在模板中添加对应 DOM） // this.$nextTick(() => this.updateChart()) diff --git a/src/views/home/grossMarginComponents/monthlyRelatedMetrics.vue b/src/views/home/grossMarginComponents/monthlyRelatedMetrics.vue index 28a0b9b1..61cf71b5 100644 --- a/src/views/home/grossMarginComponents/monthlyRelatedMetrics.vue +++ b/src/views/home/grossMarginComponents/monthlyRelatedMetrics.vue @@ -96,18 +96,6 @@ export default { } }) }, -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, updateChart(data) { // 修复核心：正确获取默认值（调用 factory 函数） @@ -124,12 +112,12 @@ getRateFlag(rate, real, target) { // 整合flag字段 this.ytdIncomeData = { ...incomeItem, - flag: this.getRateFlag(incomeItem.rate, incomeItem.real, incomeItem.budget) + flag: incomeItem.rate > 100 ? 1 : 0 }; this.ytdCostData = { ...costItem, - flag: this.getRateFlag(costItem.rate, costItem.real, costItem.budget) + flag: costItem.rate > 100 ? 1 : 0 }; console.log('累计收入数据：', this.ytdIncomeData); diff --git a/src/views/home/grossMarginComponents/operatingBar.vue b/src/views/home/grossMarginComponents/operatingBar.vue index 5b2adf89..bca25df1 100644 --- a/src/views/home/grossMarginComponents/operatingBar.vue +++ b/src/views/home/grossMarginComponents/operatingBar.vue @@ -174,71 +174,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 40, - label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { const safeFlag = data.flags || []; @@ -265,6 +201,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 实际柱状图的标签层（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/grossMarginComponents/operatingLineBarSaleGroup.vue b/src/views/home/grossMarginComponents/operatingLineBarSaleGroup.vue index ad093103..50100634 100644 --- a/src/views/home/grossMarginComponents/operatingLineBarSaleGroup.vue +++ b/src/views/home/grossMarginComponents/operatingLineBarSaleGroup.vue @@ -17,10 +17,6 @@ export default { type: Object, default: () => ({ }), - // 校验数据格式 - // validator: (value) => { - // return Array.isArray(value.series) && Array.isArray(value.allPlaceNames); - // } } }, mounted() { @@ -72,16 +68,6 @@ export default { backgroundColor: '#6a7985' } }, - // formatter: (params) => { - // let html = `${params[0].axisValue}
`; - // params.forEach(item => { - // const unit = item.seriesName === '完成率' ? '%' : ( - // ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元' - // ); - // html += `${item.marker} ${item.seriesName}: ${item.value}${unit}
`; - // }); - // return html; - // } }, grid: { top: 30, diff --git a/src/views/home/grossMarginComponents/operatingLineChart.vue b/src/views/home/grossMarginComponents/operatingLineChart.vue index caccba37..6a09efce 100644 --- a/src/views/home/grossMarginComponents/operatingLineChart.vue +++ b/src/views/home/grossMarginComponents/operatingLineChart.vue @@ -118,7 +118,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate >=100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -139,7 +139,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate >=100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/grossMarginComponents/operatingLineChartCumulative.vue b/src/views/home/grossMarginComponents/operatingLineChartCumulative.vue index a41bcad2..08d5ff29 100644 --- a/src/views/home/grossMarginComponents/operatingLineChartCumulative.vue +++ b/src/views/home/grossMarginComponents/operatingLineChartCumulative.vue @@ -81,24 +81,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ - -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData @@ -113,7 +95,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate > 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -134,7 +116,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.rate, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate > 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/grossMarginComponents/operatingTopBar.vue b/src/views/home/grossMarginComponents/operatingTopBar.vue index 018895ef..a288548f 100644 --- a/src/views/home/grossMarginComponents/operatingTopBar.vue +++ b/src/views/home/grossMarginComponents/operatingTopBar.vue @@ -40,33 +40,6 @@ export default { const salesData = { allPlaceNames: this.locations, series: [ - // 1. 完成率（折线图） - // { - // name: '完成率', - // type: 'line', - // yAxisIndex: 1, // 绑定右侧Y轴（需在子组件启用配置） - // lineStyle: { - // color: 'rgba(40, 138, 255, .5)', - // width: 2 - // }, - // itemStyle: { - // color: 'rgba(40, 138, 255, 1)', - // borderColor: 'rgba(40, 138, 255, 1)', - // borderWidth: 2, - // radius: 4 - // }, - // areaStyle: { - // opacity: 0.2, - // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { offset: 0, color: 'rgba(40, 138, 255, .9)' }, - // { offset: 1, color: 'rgba(40, 138, 255, 0)' } - // ]) - // }, - // data: data.rates, // 完成率（%） - // symbol: 'circle', - // symbolSize: 6 - // }, - // 2. 目标（柱状图） { name: '预算', type: 'bar', diff --git a/src/views/home/grossMarginComponents/totalOverview.vue b/src/views/home/grossMarginComponents/totalOverview.vue index bd420828..874bce18 100644 --- a/src/views/home/grossMarginComponents/totalOverview.vue +++ b/src/views/home/grossMarginComponents/totalOverview.vue @@ -19,9 +19,6 @@
-
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -73,21 +67,6 @@ export default { deep: true // 若对象内属性变化需触发，需加 deep: true } }, - // computed: { - // // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列 - // sortedItemData() { - // // 过滤出包含“总成本”的项（不区分大小写） - // const totalCostItems = this.itemData.filter(item => - // item.name && item.name.includes('总成本') - // ); - // // 过滤出不包含“总成本”的项 - // const otherItems = this.itemData.filter(item => - // !item.name || !item.name.includes('总成本') - // ); - // // 合并：总成本项在前，其他项在后 - // return [...totalCostItems, ...otherItems]; - // } - // }, mounted() { // 初始化图表（若需展示图表，需在模板中添加对应 DOM） // this.$nextTick(() => this.updateChart()) diff --git a/src/views/home/grossMarginComponents/verticalBarChart.vue b/src/views/home/grossMarginComponents/verticalBarChart.vue index e711e946..4b4ec861 100644 --- a/src/views/home/grossMarginComponents/verticalBarChart.vue +++ b/src/views/home/grossMarginComponents/verticalBarChart.vue @@ -50,18 +50,6 @@ export default { } }, methods: { - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, updateChart() { const chartDom = this.$refs[this.refName]; if (!chartDom) { @@ -76,7 +64,7 @@ export default { this.myChart = echarts.init(chartDom); const diff = this.detailData.diff || 0 const rate = this.detailData.rate || 0 - const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0 + const flagValue = this.detailData.rate>=100?1:0 this.flag = flagValue const option = { @@ -88,16 +76,6 @@ export default { backgroundColor: '#6a7985' } }, - // formatter: (params) => { - // let html = `${params[0].axisValue}
`; - // params.forEach(item => { - // const unit = item.seriesName === '完成率' ? '%' : ( - // ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元' - // ); - // html += `${item.marker} ${item.seriesName}: ${item.value}${unit}
`; - // }); - // return html; - // } }, grid: { top: 40, @@ -110,9 +88,6 @@ export default { xAxis: { // 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值 type: 'value', - // offset: 0, - // boundaryGap: true , - // boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白 axisTick: { show: false }, min: 0, // diff --git a/src/views/home/grossMarginComponents/yearRelatedMetrics.vue b/src/views/home/grossMarginComponents/yearRelatedMetrics.vue index e724a0ee..7bf973b3 100644 --- a/src/views/home/grossMarginComponents/yearRelatedMetrics.vue +++ b/src/views/home/grossMarginComponents/yearRelatedMetrics.vue @@ -101,19 +101,6 @@ export default { } }) }, - // 保留原flag判断逻辑（≥100返回1，<100返回0） - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, updateChart(data) { // 数据兜底：确保是数组且长度≥2 @@ -128,12 +115,12 @@ export default { // 整合flag字段到收入/全成本数据中 this.incomeData = { ...incomeItem, - flag: this.getRateFlag(incomeItem.rate, incomeItem.real, incomeItem.budget) + flag: incomeItem.rate >= 100 ? 1 : 0 }; this.totalCostData = { ...totalCostItem, - flag: this.getRateFlag(totalCostItem.rate, totalCostItem.real, totalCostItem.budget) + flag: totalCostItem.rate >= 100 ? 1 : 0 }; // 调试：确认数据赋值正确 diff --git a/src/views/home/inputOutputRatio/inputOutputRatio.vue b/src/views/home/inputOutputRatio/inputOutputRatio.vue index 30d4a523..9f5814b2 100644 --- a/src/views/home/inputOutputRatio/inputOutputRatio.vue +++ b/src/views/home/inputOutputRatio/inputOutputRatio.vue @@ -26,39 +26,26 @@ grid-template-columns: 1624px; "> -
- diff --git a/src/views/home/inputOutputRatio/inputOutputRatioBase.vue b/src/views/home/inputOutputRatio/inputOutputRatioBase.vue index b552998e..c1815289 100644 --- a/src/views/home/inputOutputRatio/inputOutputRatioBase.vue +++ b/src/views/home/inputOutputRatio/inputOutputRatioBase.vue @@ -52,14 +52,6 @@ - diff --git a/src/views/home/inputOutputRatioComponents/dataTrend.vue b/src/views/home/inputOutputRatioComponents/dataTrend.vue index b6c2db19..e5de7afe 100644 --- a/src/views/home/inputOutputRatioComponents/dataTrend.vue +++ b/src/views/home/inputOutputRatioComponents/dataTrend.vue @@ -26,20 +26,7 @@ export default { trend: { type: Array, // 默认值与实际数据结构一致（12个月） - default: () => [ - // { title: "2025年01月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年02月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年03月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年04月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年05月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年06月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年07月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年08月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年09月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年10月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年11月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年12月", budget: 0, real: 0, rate: 0, diff: 0 } - ] + default: () => [] }, }, data() { @@ -96,9 +83,7 @@ export default { const real = Number(item.real) || 0; const rate = Number(item.rate) || 0; const diff = Number(item.diff) || 0; - - // 计算达标标识（≥100 → 1，<100 → 0） - const flag = this.getRateFlag(rate,real,budget); + const flag = item.rate>=100 ? 1 : 0; // 填充数组 months.push(month); @@ -120,25 +105,7 @@ export default { }; console.log('处理后的趋势数据：', this.chartData); - }, - - /** - * 计算达标标识 - * @param {Number} rate - 完成率（原始值，如1.2 → 120%） - * @returns {Number} 1: 达标（≥100%），0: 未达标（<100%） - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, + } }, }; diff --git a/src/views/home/inputOutputRatioComponents/dataTrendBar.vue b/src/views/home/inputOutputRatioComponents/dataTrendBar.vue index 8691f2a6..cbb96119 100644 --- a/src/views/home/inputOutputRatioComponents/dataTrendBar.vue +++ b/src/views/home/inputOutputRatioComponents/dataTrendBar.vue @@ -145,76 +145,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffs || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { // 达标状态：1=达标（绿色），0=未达标（橙色） @@ -242,6 +173,79 @@ export default { borderWidth: 0 }, data: data.reals // 实际销量（万元） + }, + // 实际柱状图的标签层（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffs || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/inputOutputRatioComponents/monthlyOverview.vue b/src/views/home/inputOutputRatioComponents/monthlyOverview.vue index 38017803..418187c2 100644 --- a/src/views/home/inputOutputRatioComponents/monthlyOverview.vue +++ b/src/views/home/inputOutputRatioComponents/monthlyOverview.vue @@ -19,9 +19,6 @@ -
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -64,35 +58,6 @@ export default { chart: null, } - }, - watch: { - // itemData: { - // handler(newValue, oldValue) { - // // this.updateChart() - // }, - // deep: true // 若对象内属性变化需触发，需加 deep: true - // } - }, - // computed: { - // // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列 - // sortedItemData() { - // // 过滤出包含“总成本”的项（不区分大小写） - // const totalCostItems = this.itemData.filter(item => - // item.name && item.name.includes('总成本') - // ); - // // 过滤出不包含“总成本”的项 - // const otherItems = this.itemData.filter(item => - // !item.name || !item.name.includes('总成本') - // ); - // // 合并：总成本项在前，其他项在后 - // return [...totalCostItems, ...otherItems]; - // } - // }, - mounted() { - // 初始化图表（若需展示图表，需在模板中添加对应 DOM） - // this.$nextTick(() => this.updateChart()) - }, - methods: { } } diff --git a/src/views/home/inputOutputRatioComponents/monthlyRelatedMetrics.vue b/src/views/home/inputOutputRatioComponents/monthlyRelatedMetrics.vue index e8bb2cca..9f2cfd22 100644 --- a/src/views/home/inputOutputRatioComponents/monthlyRelatedMetrics.vue +++ b/src/views/home/inputOutputRatioComponents/monthlyRelatedMetrics.vue @@ -69,7 +69,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag(data.rate, data.real, data.budget), + flag: data.rate > 100 ? 1 : 0, } return { ...def, @@ -101,22 +101,6 @@ export default { deep: true, immediate: true // 初始化立即执行 } - }, - mounted() {}, - methods: { - // 达标标识判断（≥100返回1，<100返回0） -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -} } } diff --git a/src/views/home/inputOutputRatioComponents/operatingBar.vue b/src/views/home/inputOutputRatioComponents/operatingBar.vue index 5b2adf89..bca25df1 100644 --- a/src/views/home/inputOutputRatioComponents/operatingBar.vue +++ b/src/views/home/inputOutputRatioComponents/operatingBar.vue @@ -174,71 +174,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 40, - label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { const safeFlag = data.flags || []; @@ -265,6 +201,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 实际柱状图的标签层（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/inputOutputRatioComponents/operatingLineChart.vue b/src/views/home/inputOutputRatioComponents/operatingLineChart.vue index 5e9516e4..8b7c5bc7 100644 --- a/src/views/home/inputOutputRatioComponents/operatingLineChart.vue +++ b/src/views/home/inputOutputRatioComponents/operatingLineChart.vue @@ -87,23 +87,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData @@ -118,7 +101,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate > 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -139,7 +122,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate,item.real,item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate > 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/inputOutputRatioComponents/operatingSingleBar.vue b/src/views/home/inputOutputRatioComponents/operatingSingleBar.vue index e38ae37e..e2415710 100644 --- a/src/views/home/inputOutputRatioComponents/operatingSingleBar.vue +++ b/src/views/home/inputOutputRatioComponents/operatingSingleBar.vue @@ -6,7 +6,6 @@ diff --git a/src/views/home/inputOutputRatioComponents/verticalBarChart.vue b/src/views/home/inputOutputRatioComponents/verticalBarChart.vue index d5272acf..0708659e 100644 --- a/src/views/home/inputOutputRatioComponents/verticalBarChart.vue +++ b/src/views/home/inputOutputRatioComponents/verticalBarChart.vue @@ -76,7 +76,7 @@ getRateFlag(rate, real, target) { this.myChart = echarts.init(chartDom); const diff = this.detailData.diff || 0 const rate = this.detailData.rate || 0 - const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0 + const flagValue = this.detailData.rate >=100?1:0 this.flag = flagValue const option = { tooltip: { @@ -87,16 +87,6 @@ getRateFlag(rate, real, target) { backgroundColor: '#6a7985' } }, - // formatter: (params) => { - // let html = `${params[0].axisValue}
`; - // params.forEach(item => { - // const unit = item.seriesName === '完成率' ? '%' : ( - // ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元' - // ); - // html += `${item.marker} ${item.seriesName}: ${item.value}${unit}
`; - // }); - // return html; - // } }, grid: { top: 40, @@ -109,9 +99,6 @@ getRateFlag(rate, real, target) { xAxis: { // 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值 type: 'value', - // offset: 0, - // boundaryGap: true , - // boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白 axisTick: { show: false }, min: 0, // diff --git a/src/views/home/inputOutputRatioComponents/yearRelatedMetrics.vue b/src/views/home/inputOutputRatioComponents/yearRelatedMetrics.vue index b3c1c8d5..eb36e4cb 100644 --- a/src/views/home/inputOutputRatioComponents/yearRelatedMetrics.vue +++ b/src/views/home/inputOutputRatioComponents/yearRelatedMetrics.vue @@ -69,7 +69,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag(data.rate, data.real, data.budget), + flag: data.rate > 100 ? 1 : 0, } return { ...def, @@ -101,22 +101,6 @@ export default { deep: true, immediate: true // 初始化立即执行 } - }, - mounted() {}, - methods: { - // 达标标识判断（≥100返回1，<100返回0） -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -} } } diff --git a/src/views/home/inventoryAnalysis/inventoryAnalysis.vue b/src/views/home/inventoryAnalysis/inventoryAnalysis.vue index d4fdf1f5..c2e4159b 100644 --- a/src/views/home/inventoryAnalysis/inventoryAnalysis.vue +++ b/src/views/home/inventoryAnalysis/inventoryAnalysis.vue @@ -128,10 +128,6 @@ export default { this.dateData = this.$route.query.dateData ? this.$route.query.dateData : undefined }, methods: { - // sortChange(value) { - // this.sort = value - // this.getData() - // }, getData() { getInventoryData({ startTime: this.dateData.startTime, @@ -144,12 +140,6 @@ export default { console.log(res); this.monthData= res.data.month this.ytdData = res.data.ytd - - // this.saleData = res.data.SaleData - // this.premiumProduct = res.data.premiumProduct - // this.salesTrendMap = res.data.salesTrendMap - // this.grossMarginTrendMap = res.data.grossMarginTrendMap - // this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {} }) }, handleTimeChange(obj) { @@ -199,28 +189,7 @@ export default { return false; } screenfull.toggle(this.$refs.dayReportB); - }, - // 导出 - // exportPDF() { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } + } }, }; diff --git a/src/views/home/inventoryAnalysisComponents/dataTrend.vue b/src/views/home/inventoryAnalysisComponents/dataTrend.vue deleted file mode 100644 index d5252997..00000000 --- a/src/views/home/inventoryAnalysisComponents/dataTrend.vue +++ /dev/null @@ -1,298 +0,0 @@ - - - - - - - diff --git a/src/views/home/inventoryAnalysisComponents/dataTrendBar.vue b/src/views/home/inventoryAnalysisComponents/dataTrendBar.vue deleted file mode 100644 index cb869cb0..00000000 --- a/src/views/home/inventoryAnalysisComponents/dataTrendBar.vue +++ /dev/null @@ -1,477 +0,0 @@ - - - - - diff --git a/src/views/home/inventoryAnalysisComponents/monthlyOverview.vue b/src/views/home/inventoryAnalysisComponents/monthlyOverview.vue deleted file mode 100644 index 892bc82b..00000000 --- a/src/views/home/inventoryAnalysisComponents/monthlyOverview.vue +++ /dev/null @@ -1,204 +0,0 @@ - - - - - - diff --git a/src/views/home/inventoryAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/inventoryAnalysisComponents/monthlyRelatedMetrics.vue deleted file mode 100644 index 2477de1a..00000000 --- a/src/views/home/inventoryAnalysisComponents/monthlyRelatedMetrics.vue +++ /dev/null @@ -1,221 +0,0 @@ - - - - - diff --git a/src/views/home/inventoryAnalysisComponents/operatingBar.vue b/src/views/home/inventoryAnalysisComponents/operatingBar.vue index 8429afc9..3414b76f 100644 --- a/src/views/home/inventoryAnalysisComponents/operatingBar.vue +++ b/src/views/home/inventoryAnalysisComponents/operatingBar.vue @@ -174,69 +174,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14, - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14, - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14, - } - } + show: false }, itemStyle: { color: (params) => { @@ -264,6 +202,78 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { + show: false + }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14, + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14, + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14, + } + } + } + })) } ] }; diff --git a/src/views/home/inventoryAnalysisComponents/operatingLineChart.vue b/src/views/home/inventoryAnalysisComponents/operatingLineChart.vue index c4337c48..4958acd6 100644 --- a/src/views/home/inventoryAnalysisComponents/operatingLineChart.vue +++ b/src/views/home/inventoryAnalysisComponents/operatingLineChart.vue @@ -32,7 +32,6 @@ width: 1220px; background-color: rgba(249, 252, 255, 1); "> -
@@ -88,23 +87,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - // if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData */ @@ -118,7 +100,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate >= 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -139,7 +121,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate >= 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/inventoryAnalysisComponents/totalOverview.vue b/src/views/home/inventoryAnalysisComponents/totalOverview.vue deleted file mode 100644 index acc15d77..00000000 --- a/src/views/home/inventoryAnalysisComponents/totalOverview.vue +++ /dev/null @@ -1,202 +0,0 @@ - - - - - - diff --git a/src/views/home/inventoryAnalysisComponents/verticalBarChart.vue b/src/views/home/inventoryAnalysisComponents/verticalBarChart.vue deleted file mode 100644 index ec9643f0..00000000 --- a/src/views/home/inventoryAnalysisComponents/verticalBarChart.vue +++ /dev/null @@ -1,226 +0,0 @@ - - diff --git a/src/views/home/inventoryAnalysisComponents/yearRelatedMetrics.vue b/src/views/home/inventoryAnalysisComponents/yearRelatedMetrics.vue deleted file mode 100644 index eb71709c..00000000 --- a/src/views/home/inventoryAnalysisComponents/yearRelatedMetrics.vue +++ /dev/null @@ -1,217 +0,0 @@ - - - - - diff --git a/src/views/home/netPriceAnalysis/netPriceAnalysis.vue b/src/views/home/netPriceAnalysis/netPriceAnalysis.vue index 41a84125..b81ad7fe 100644 --- a/src/views/home/netPriceAnalysis/netPriceAnalysis.vue +++ b/src/views/home/netPriceAnalysis/netPriceAnalysis.vue @@ -26,39 +26,26 @@ grid-template-columns: 1624px; "> - - diff --git a/src/views/home/netPriceAnalysis/netPriceAnalysisBase.vue b/src/views/home/netPriceAnalysis/netPriceAnalysisBase.vue index 538bfd4a..2a7ff90b 100644 --- a/src/views/home/netPriceAnalysis/netPriceAnalysisBase.vue +++ b/src/views/home/netPriceAnalysis/netPriceAnalysisBase.vue @@ -52,14 +52,6 @@ - diff --git a/src/views/home/netPriceAnalysisComponents/dataTrend.vue b/src/views/home/netPriceAnalysisComponents/dataTrend.vue index f70b1671..62ea1132 100644 --- a/src/views/home/netPriceAnalysisComponents/dataTrend.vue +++ b/src/views/home/netPriceAnalysisComponents/dataTrend.vue @@ -97,24 +97,11 @@ export default { rates.push(data.completeRate || 0); reals.push(data.real || 0); targets.push(data.target || 0); - // 复用 getRateFlag 逻辑 - flags.push(this.getRateFlag(data.completeRate, data.real, data.target)); + flags.push(data.completeRate>=100?1:0); }); return { rates, reals, targets, flags }; }, -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, } }; diff --git a/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue b/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue index b49823a5..77c94f3d 100644 --- a/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue +++ b/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue @@ -101,7 +101,7 @@ export default { targets.push(monthData.target || 0); diffs.push(monthData.diff || 0); // 生成达标状态（复用 getRateFlag 逻辑） - flags.push(this.getRateFlag(completeRate, monthData.real, monthData.target)); + flags.push(completeRate>=100?1:0); }); return { @@ -176,77 +176,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - - // const flags = flags || []; - const currentDiff = diffs[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - console.log('flags[params.dataIndex]', flags); - - const prefix = currentFlag === 1 ? '+' : ''; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { const currentFlag = flags[params.dataIndex] || 0; @@ -272,6 +202,77 @@ export default { borderWidth: 0 }, data: reals, // 动态实际值 + }, + // 实际柱状图的标签层（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = diffs[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; @@ -284,19 +285,6 @@ export default { selectProfit(item) { this.selectedProfit = item; this.isDropdownShow = false; - }, - // 复用达标状态判断方法 - getRateFlag(rate, real, target) { - // 先处理无效值的情况 - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 实际值和目标值都为0时，算作达标 - if (real === 0 && target === 0 && rate === 0) { - return 1; // 达标 - } - - // 其他情况：rate >= 100 或 rate === 0 时达标 - return (rate >= 100) ? 1 : 0; } } }; diff --git a/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue b/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue index 2b045b61..93c26fe5 100644 --- a/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue +++ b/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue @@ -17,9 +17,6 @@ 下降 -
@@ -86,7 +83,7 @@ export default { target: 0, thb: 0, ...rawData, - flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段 + flag: rawData.completeRate >= 100 ? 1 : 0 // 根据完成率计算flag }; } }, @@ -100,23 +97,6 @@ export default { } return value; }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, } } diff --git a/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue index 81544f94..e1cfc029 100644 --- a/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue +++ b/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue @@ -29,9 +29,6 @@ import Container from './container.vue' import operatingSingleBar from './operatingSingleBar.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, operatingSingleBar }, @@ -92,7 +89,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target), + flag: data.completeRate >= 100 ? 1 : 0, } return { ...def, @@ -140,23 +137,6 @@ export default { } }) }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 图表更新方法：可在这里补充全局的图表刷新逻辑 @@ -164,10 +144,6 @@ getRateFlag(rate, real, target) { */ updateChart() { console.log('数据更新，当前relatedMon:', this.relatedMon) - // 打印各维度的flag值，方便调试 - // console.log('销量flag:', this.getRateFlag(this.relatedMon.销量.completeRate)) - // console.log('成本flag:', this.getRateFlag(this.relatedMon.成本.completeRate)) - // console.log('运费flag:', this.getRateFlag(this.relatedMon.运费.completeRate)) } } } diff --git a/src/views/home/netPriceAnalysisComponents/operatingBar.vue b/src/views/home/netPriceAnalysisComponents/operatingBar.vue index fcf36efa..3d8d3ae3 100644 --- a/src/views/home/netPriceAnalysisComponents/operatingBar.vue +++ b/src/views/home/netPriceAnalysisComponents/operatingBar.vue @@ -173,71 +173,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 40, - label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : ''; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { const safeFlag = data.flags || []; @@ -264,6 +200,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 实际柱状图的标签层（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/netPriceAnalysisComponents/operatingLineChart.vue b/src/views/home/netPriceAnalysisComponents/operatingLineChart.vue index 940d5073..c8e18e3b 100644 --- a/src/views/home/netPriceAnalysisComponents/operatingLineChart.vue +++ b/src/views/home/netPriceAnalysisComponents/operatingLineChart.vue @@ -80,24 +80,6 @@ export default { this.$emit('sort-change', value); }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如80代表80%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, - /** * 核心处理函数：解析thisMonData，组装集团和工厂数据 */ @@ -116,7 +98,7 @@ getRateFlag(rate, real, target) { diff: [ksxnData.diff], reals: [ksxnData.real], rate: [ksxnData.completeRate], - flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)], + flags: [ksxnData.completeRate >= 100 ? 1 : 0], thb: [ksxnData.thb] // 新增thb字段（如果子组件需要） }; @@ -131,7 +113,7 @@ getRateFlag(rate, real, target) { diff: factoryDataList.map(item => item.diff || 0), // 差值 reals: factoryDataList.map(item => item.real || 0), // 实际值 rates: factoryDataList.map(item => item.completeRate || 0), // 完成率 - flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识 + flags: factoryDataList.map(item => item.completeRate>=100?1:0), // 完成率标识 thb: factoryDataList.map(item => item.thb || 0) // thb字段 }; diff --git a/src/views/home/netPriceAnalysisComponents/operatingLineChartCumulative.vue b/src/views/home/netPriceAnalysisComponents/operatingLineChartCumulative.vue index 3109bec6..2baaabca 100644 --- a/src/views/home/netPriceAnalysisComponents/operatingLineChartCumulative.vue +++ b/src/views/home/netPriceAnalysisComponents/operatingLineChartCumulative.vue @@ -79,25 +79,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如80代表80%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, - /** * 核心处理函数：解析thisMonData，组装集团和工厂数据 */ @@ -116,7 +97,7 @@ getRateFlag(rate, real, target) { diff: [ksxnData.diff], reals: [ksxnData.real], rate: [ksxnData.completeRate], - flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)], + flags: [ksxnData.completeRate >= 100 ? 1 : 0], thb: [ksxnData.thb] // 新增thb字段（如果子组件需要） }; @@ -131,7 +112,7 @@ getRateFlag(rate, real, target) { diff: factoryDataList.map(item => item.diff || 0), // 差值 reals: factoryDataList.map(item => item.real || 0), // 实际值 rates: factoryDataList.map(item => item.completeRate || 0), // 完成率 - flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识 + flags: factoryDataList.map(item => item.completeRate >= 100 ? 1 : 0), // 完成率标识 thb: factoryDataList.map(item => item.thb || 0) // thb字段 }; diff --git a/src/views/home/netPriceAnalysisComponents/totalOverview.vue b/src/views/home/netPriceAnalysisComponents/totalOverview.vue index abf29ecc..af79e9bd 100644 --- a/src/views/home/netPriceAnalysisComponents/totalOverview.vue +++ b/src/views/home/netPriceAnalysisComponents/totalOverview.vue @@ -19,9 +19,6 @@
-
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -90,7 +84,7 @@ export default { target: 0, thb: 0, ...rawData, - flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段 + flag: rawData.completeRate >= 100 ? 1 : 0 // 根据完成率计算flag }; } }, @@ -103,24 +97,7 @@ export default { return 0; } return value; - }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, + } } } diff --git a/src/views/home/netPriceAnalysisComponents/yearRelatedMetrics.vue b/src/views/home/netPriceAnalysisComponents/yearRelatedMetrics.vue index 0dcf5739..bd950269 100644 --- a/src/views/home/netPriceAnalysisComponents/yearRelatedMetrics.vue +++ b/src/views/home/netPriceAnalysisComponents/yearRelatedMetrics.vue @@ -29,9 +29,6 @@ import Container from './container.vue' import operatingSingleBar from './operatingSingleBar.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, operatingSingleBar }, @@ -92,7 +89,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target), + flag: data.completeRate >= 100 ? 1 : 0, } return { ...def, @@ -140,24 +137,6 @@ export default { } }) }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, - /** * 图表更新方法：可在这里补充全局的图表刷新逻辑 * 若子组件内部已监听 chartData 变化，此方法可留空或补充额外逻辑 diff --git a/src/views/home/operatingComponents/dataTrend.vue b/src/views/home/operatingComponents/dataTrend.vue index d5252997..4b3a7b55 100644 --- a/src/views/home/operatingComponents/dataTrend.vue +++ b/src/views/home/operatingComponents/dataTrend.vue @@ -26,20 +26,7 @@ export default { trend: { type: Array, // 默认值与实际数据结构一致（12个月） - default: () => [ - // { title: "2025年01月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年02月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年03月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年04月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年05月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年06月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年07月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年08月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年09月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年10月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年11月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年12月", budget: 0, real: 0, rate: 0, diff: 0 } - ] + default: () => [] }, }, data() { @@ -98,7 +85,7 @@ export default { const diff = Number(item.diff) || 0; // 计算达标标识（≥100 → 1，<100 → 0） - const flag = this.getRateFlag(rate, real, budget); + const flag = item.rate>=100?1:0 // 填充数组 months.push(month); @@ -121,24 +108,6 @@ export default { console.log('处理后的趋势数据：', this.chartData); }, - - /** - * 计算达标标识 - * @param {Number} rate - 完成率（原始值，如1.2 → 120%） - * @returns {Number} 1: 达标（≥100%），0: 未达标（<100%） - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, }, }; diff --git a/src/views/home/operatingComponents/dataTrendBar.vue b/src/views/home/operatingComponents/dataTrendBar.vue index 0c3fa94a..94cab769 100644 --- a/src/views/home/operatingComponents/dataTrendBar.vue +++ b/src/views/home/operatingComponents/dataTrendBar.vue @@ -142,76 +142,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffs || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { // 达标状态：1=达标（绿色），0=未达标（橙色） @@ -239,6 +170,79 @@ export default { borderWidth: 0 }, data: data.reals // 实际销量（万元） + }, + // 实际柱状图的标签层（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffs || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/operatingComponents/monthlyRelatedMetrics.vue b/src/views/home/operatingComponents/monthlyRelatedMetrics.vue index faf0a696..efcd9441 100644 --- a/src/views/home/operatingComponents/monthlyRelatedMetrics.vue +++ b/src/views/home/operatingComponents/monthlyRelatedMetrics.vue @@ -101,19 +101,6 @@ export default { } }) }, - // 判断flag的核心方法 - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, updateChart(data) { // 数据兜底 @@ -123,12 +110,12 @@ export default { // 核心修改：将flag整合到数据对象中，无需单独定义salesFlag/unitPriceFlag this.salesData = { ...salesItem, // 合并原有字段 - flag: this.getRateFlag(salesItem.rate, salesItem.real, salesItem.budget) // 新增flag字段 + flag: salesItem.rate>=100?1:0 }; this.unitPriceData = { ...unitPriceItem, // 合并原有字段 - flag: this.getRateFlag(unitPriceItem.rate, unitPriceItem.real, unitPriceItem.budget) // 新增flag字段 + flag: unitPriceItem.rate>=100?1:0 }; // 调试：确认整合后的数据 diff --git a/src/views/home/operatingComponents/operatingBar.vue b/src/views/home/operatingComponents/operatingBar.vue index 4d8412f5..e37e8867 100644 --- a/src/views/home/operatingComponents/operatingBar.vue +++ b/src/views/home/operatingComponents/operatingBar.vue @@ -175,69 +175,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14, - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14, - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14, - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -265,6 +203,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/operatingComponents/operatingLineChart.vue b/src/views/home/operatingComponents/operatingLineChart.vue index d58d92bd..28c780ee 100644 --- a/src/views/home/operatingComponents/operatingLineChart.vue +++ b/src/views/home/operatingComponents/operatingLineChart.vue @@ -88,23 +88,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData */ @@ -118,7 +101,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate >= 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -139,7 +122,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate >= 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/operatingComponents/operatingLineChartCumulative.vue b/src/views/home/operatingComponents/operatingLineChartCumulative.vue index 24ef22d0..abb75a74 100644 --- a/src/views/home/operatingComponents/operatingLineChartCumulative.vue +++ b/src/views/home/operatingComponents/operatingLineChartCumulative.vue @@ -114,7 +114,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate >= 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -135,7 +135,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate >= 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/operatingComponents/verticalBarChart.vue b/src/views/home/operatingComponents/verticalBarChart.vue index 3ff08777..4cc864d6 100644 --- a/src/views/home/operatingComponents/verticalBarChart.vue +++ b/src/views/home/operatingComponents/verticalBarChart.vue @@ -49,18 +49,6 @@ export default { } }, methods: { - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, updateChart() { const chartDom = this.$refs[this.refName]; if (!chartDom) { @@ -76,7 +64,7 @@ export default { this.myChart = echarts.init(chartDom); const diff = this.detailData.diff || 0 const rate = this.detailData.rate || 0 - const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0 + const flagValue = (this.detailData.rate>=100?1:0) || 0 const option = { tooltip: { diff --git a/src/views/home/operatingComponents/yearRelatedMetrics.vue b/src/views/home/operatingComponents/yearRelatedMetrics.vue index 62cfd5a0..87bf63d9 100644 --- a/src/views/home/operatingComponents/yearRelatedMetrics.vue +++ b/src/views/home/operatingComponents/yearRelatedMetrics.vue @@ -97,20 +97,6 @@ export default { } }) }, - // 判断flag的核心方法 -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, - updateChart(data) { // 数据兜底 const salesItem = Array.isArray(data) && data[0] ? data[0] : { title: "销量", budget: 0, real: 0, rate: 0, diff: 0 }; @@ -119,12 +105,12 @@ getRateFlag(rate, real, target) { // 核心修改：将flag整合到数据对象中，无需单独定义salesFlag/unitPriceFlag this.salesData = { ...salesItem, // 合并原有字段 - flag: this.getRateFlag(salesItem.rate, salesItem.real, salesItem.budget) // 新增flag字段 + flag: salesItem.rate >= 100 ? 1 : 0 // 新增flag字段 }; this.unitPriceData = { ...unitPriceItem, // 合并原有字段 - flag: this.getRateFlag(unitPriceItem.rate, unitPriceItem.real, unitPriceItem.budget) // 新增flag字段 + flag: unitPriceItem.rate>=100?1:0 }; // 调试：确认整合后的数据 diff --git a/src/views/home/operatingProfit/operatingProfit.vue b/src/views/home/operatingProfit/operatingProfit.vue index 4feba112..0ccb38fc 100644 --- a/src/views/home/operatingProfit/operatingProfit.vue +++ b/src/views/home/operatingProfit/operatingProfit.vue @@ -26,39 +26,26 @@ grid-template-columns: 1624px; "> -
- diff --git a/src/views/home/operatingProfit/operatingProfitBase.vue b/src/views/home/operatingProfit/operatingProfitBase.vue index 070d4466..4cdded91 100644 --- a/src/views/home/operatingProfit/operatingProfitBase.vue +++ b/src/views/home/operatingProfit/operatingProfitBase.vue @@ -51,14 +51,6 @@ - diff --git a/src/views/home/operatingProfitComponents/dataTrendBar.vue b/src/views/home/operatingProfitComponents/dataTrendBar.vue index d0e75d0e..8e54f52b 100644 --- a/src/views/home/operatingProfitComponents/dataTrendBar.vue +++ b/src/views/home/operatingProfitComponents/dataTrendBar.vue @@ -144,74 +144,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -240,6 +173,53 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, shadowOffsetX: 0, shadowOffsetY: 2, + borderRadius: 4, borderColor: '#BFCBD577', borderWidth: 0, + lineHeight: 20, + rich: { + text: { width: 'auto', padding: [5, 10, 5, 0], align: 'center', color: '#464646', fontSize: 11, lineHeight: 20 }, + achieved: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#76DABE', fontSize: 11, lineHeight: 20 }, + unachieved: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#F9A44A', fontSize: 11, lineHeight: 20 } + } + } + })) } ] }; diff --git a/src/views/home/operatingProfitComponents/monthlyOverview.vue b/src/views/home/operatingProfitComponents/monthlyOverview.vue index 6dd8a9ea..1cccdcd3 100644 --- a/src/views/home/operatingProfitComponents/monthlyOverview.vue +++ b/src/views/home/operatingProfitComponents/monthlyOverview.vue @@ -17,9 +17,6 @@ 下降 -
@@ -70,7 +67,6 @@ export default { real: this.monData.value, target: this.monData.targetValue, thb: this.monData.thb, - // ...rawData, flag: this.monData.completed // 新增flag字段 }; } diff --git a/src/views/home/operatingProfitComponents/operatingBar.vue b/src/views/home/operatingProfitComponents/operatingBar.vue index 8f781897..7cd2cf97 100644 --- a/src/views/home/operatingProfitComponents/operatingBar.vue +++ b/src/views/home/operatingProfitComponents/operatingBar.vue @@ -175,69 +175,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -265,6 +203,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/operatingProfitComponents/totalOverview.vue b/src/views/home/operatingProfitComponents/totalOverview.vue index 998752cd..b9b3e368 100644 --- a/src/views/home/operatingProfitComponents/totalOverview.vue +++ b/src/views/home/operatingProfitComponents/totalOverview.vue @@ -19,9 +19,6 @@ 下降
-
@@ -37,9 +34,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, diff --git a/src/views/home/operatingRevenue/operatingRevenueBase.vue b/src/views/home/operatingRevenue/operatingRevenueBase.vue index d66738b6..0daeeead 100644 --- a/src/views/home/operatingRevenue/operatingRevenueBase.vue +++ b/src/views/home/operatingRevenue/operatingRevenueBase.vue @@ -53,14 +53,6 @@
- diff --git a/src/views/home/procurementGainAnalysis/procurementGainAnalysis.vue b/src/views/home/procurementGainAnalysis/procurementGainAnalysis.vue index caac53c5..a42e6c1c 100644 --- a/src/views/home/procurementGainAnalysis/procurementGainAnalysis.vue +++ b/src/views/home/procurementGainAnalysis/procurementGainAnalysis.vue @@ -26,26 +26,15 @@ grid-template-columns: 1624px; "> - - diff --git a/src/views/home/procurementGainAnalysis/procurementGainAnalysisBase.vue b/src/views/home/procurementGainAnalysis/procurementGainAnalysisBase.vue index 7362cd32..abbcf8fc 100644 --- a/src/views/home/procurementGainAnalysis/procurementGainAnalysisBase.vue +++ b/src/views/home/procurementGainAnalysis/procurementGainAnalysisBase.vue @@ -51,14 +51,6 @@ - diff --git a/src/views/home/procurementGainAnalysisComponents/dataTrendBar.vue b/src/views/home/procurementGainAnalysisComponents/dataTrendBar.vue index 908a8fdb..9cdb14e6 100644 --- a/src/views/home/procurementGainAnalysisComponents/dataTrendBar.vue +++ b/src/views/home/procurementGainAnalysisComponents/dataTrendBar.vue @@ -103,8 +103,7 @@ export default { reals.push(monthData.real || 0); targets.push(monthData.target || 0); diffs.push(monthData.diff || 0); - // 生成达标状态（复用 getRateFlag 逻辑） - flags.push(this.getRateFlag(completeRate)); + flags.push(completeRate >= 100 ? 1 : 0); }); return { @@ -116,9 +115,6 @@ export default { diffs }; }, - // locations() { - // return this.activeButton === 0 ? this.chartData?.salesLocations : this.chartData?.grossMarginLocations; - // }, // 重构 chartD：替换硬编码数据为动态解析数据 chartD() { // 获取动态解析的趋势数据 @@ -180,74 +176,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - // const diff = data.diff || []; - // const flags = data.flags || []; - const currentDiff = diffs[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -274,6 +203,79 @@ export default { borderWidth: 0 }, data: reals, // 动态实际值 + }, + // 4. 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { + show: false + }, + data: (reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = diffs[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; @@ -287,11 +289,6 @@ export default { this.selectedProfit = item; this.isDropdownShow = false; }, - // 复用达标状态判断方法 - getRateFlag(rate) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - return (rate >= 100 || rate === 0) ? 1 : 0; - } } }; diff --git a/src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue b/src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue index d7012fe4..116012bc 100644 --- a/src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue +++ b/src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue @@ -17,10 +17,6 @@ 下降 - - - -
@@ -87,7 +83,7 @@ export default { target: 0, thb: 0, ...rawData, - flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段 + flag: rawData.completeRate >= 100 ? 1 : 0 // 根据完成率计算flag }; } }, @@ -101,23 +97,6 @@ export default { } return value; }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, } } diff --git a/src/views/home/procurementGainAnalysisComponents/operatingBar.vue b/src/views/home/procurementGainAnalysisComponents/operatingBar.vue index 43c2b5f1..12fcc2dd 100644 --- a/src/views/home/procurementGainAnalysisComponents/operatingBar.vue +++ b/src/views/home/procurementGainAnalysisComponents/operatingBar.vue @@ -174,69 +174,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -264,6 +202,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/procurementGainAnalysisComponents/operatingLineChart.vue b/src/views/home/procurementGainAnalysisComponents/operatingLineChart.vue index 940d5073..e6db2791 100644 --- a/src/views/home/procurementGainAnalysisComponents/operatingLineChart.vue +++ b/src/views/home/procurementGainAnalysisComponents/operatingLineChart.vue @@ -80,24 +80,6 @@ export default { this.$emit('sort-change', value); }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如80代表80%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, - /** * 核心处理函数：解析thisMonData，组装集团和工厂数据 */ @@ -116,7 +98,7 @@ getRateFlag(rate, real, target) { diff: [ksxnData.diff], reals: [ksxnData.real], rate: [ksxnData.completeRate], - flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)], + flags: [ksxnData.completeRate >= 100 ? 1 : 0], thb: [ksxnData.thb] // 新增thb字段（如果子组件需要） }; @@ -131,7 +113,7 @@ getRateFlag(rate, real, target) { diff: factoryDataList.map(item => item.diff || 0), // 差值 reals: factoryDataList.map(item => item.real || 0), // 实际值 rates: factoryDataList.map(item => item.completeRate || 0), // 完成率 - flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识 + flags: factoryDataList.map(item => item.completeRate >= 100 ? 1 : 0), // 完成率标识 thb: factoryDataList.map(item => item.thb || 0) // thb字段 }; diff --git a/src/views/home/procurementGainAnalysisComponents/operatingLineChartCumulative.vue b/src/views/home/procurementGainAnalysisComponents/operatingLineChartCumulative.vue index 3109bec6..3700553d 100644 --- a/src/views/home/procurementGainAnalysisComponents/operatingLineChartCumulative.vue +++ b/src/views/home/procurementGainAnalysisComponents/operatingLineChartCumulative.vue @@ -80,24 +80,6 @@ export default { this.$emit('sort-change', value); }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如80代表80%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, - /** * 核心处理函数：解析thisMonData，组装集团和工厂数据 */ @@ -116,7 +98,7 @@ getRateFlag(rate, real, target) { diff: [ksxnData.diff], reals: [ksxnData.real], rate: [ksxnData.completeRate], - flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)], + flags: [ksxnData.completeRate >= 100 ? 1 : 0], thb: [ksxnData.thb] // 新增thb字段（如果子组件需要） }; @@ -131,7 +113,7 @@ getRateFlag(rate, real, target) { diff: factoryDataList.map(item => item.diff || 0), // 差值 reals: factoryDataList.map(item => item.real || 0), // 实际值 rates: factoryDataList.map(item => item.completeRate || 0), // 完成率 - flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识 + flags: factoryDataList.map(item => item.completeRate >= 100 ? 1 : 0), // 完成率标识 thb: factoryDataList.map(item => item.thb || 0) // thb字段 }; diff --git a/src/views/home/procurementGainAnalysisComponents/relatedIndicatorsAnalysis.vue b/src/views/home/procurementGainAnalysisComponents/relatedIndicatorsAnalysis.vue index 675148ef..e5af6f9d 100644 --- a/src/views/home/procurementGainAnalysisComponents/relatedIndicatorsAnalysis.vue +++ b/src/views/home/procurementGainAnalysisComponents/relatedIndicatorsAnalysis.vue @@ -93,7 +93,7 @@ export default { const data = list.find(item => item && item.title.includes(def.name.slice(0, -1))) || fallback const detailData = { ...data, - flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target), + flag: data.completeRate > 100 ? 1 : 0, } return { ...def, @@ -147,18 +147,6 @@ export default { path: path }) }, - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, handleChange(value) { console.log('value', value, this.relatedData); this.currentTab = value; diff --git a/src/views/home/procurementGainAnalysisComponents/totalOverview.vue b/src/views/home/procurementGainAnalysisComponents/totalOverview.vue index abf29ecc..0e8c77af 100644 --- a/src/views/home/procurementGainAnalysisComponents/totalOverview.vue +++ b/src/views/home/procurementGainAnalysisComponents/totalOverview.vue @@ -19,9 +19,6 @@
-
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -90,7 +84,7 @@ export default { target: 0, thb: 0, ...rawData, - flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段 + flag: rawData.completeRate >= 100 ? 1 : 0 // 根据完成率计算flag }; } }, @@ -104,23 +98,6 @@ export default { } return value; }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, } } diff --git a/src/views/home/productionCostAnalysis/combustible.vue b/src/views/home/productionCostAnalysis/combustible.vue index 4bc1e55a..a698deb2 100644 --- a/src/views/home/productionCostAnalysis/combustible.vue +++ b/src/views/home/productionCostAnalysis/combustible.vue @@ -36,7 +36,6 @@ gap: 12px; grid-template-columns: 1624px; "> - @@ -52,14 +51,6 @@
- diff --git a/src/views/home/productionCostAnalysis/compositeClarifyingAgentCostAnalysis.vue b/src/views/home/productionCostAnalysis/compositeClarifyingAgentCostAnalysis.vue index 96fdc819..8d63491e 100644 --- a/src/views/home/productionCostAnalysis/compositeClarifyingAgentCostAnalysis.vue +++ b/src/views/home/productionCostAnalysis/compositeClarifyingAgentCostAnalysis.vue @@ -77,7 +77,6 @@ export default { monthlyRelatedMetrics, yearRelatedMetrics, dataTrend - // psiLineChart }, data() { return { @@ -261,8 +260,6 @@ export default { }, changeDate(val) { this.date = val; - // this.weekDay = this.weekArr[moment(this.date).format('e')] - // this.getData() if (this.date === moment().format("yyyy-MM-DD")) { this.loopTime(); } else { diff --git a/src/views/home/productionCostAnalysis/fuelCostAnalysis.vue b/src/views/home/productionCostAnalysis/fuelCostAnalysis.vue index 5aa538c3..8a3d75e3 100644 --- a/src/views/home/productionCostAnalysis/fuelCostAnalysis.vue +++ b/src/views/home/productionCostAnalysis/fuelCostAnalysis.vue @@ -36,7 +36,6 @@ gap: 6px; grid-template-columns: 1624px; "> - @@ -51,14 +50,6 @@ - diff --git a/src/views/home/productionCostAnalysis/mfgOverheadSingleCostAnalysis.vue b/src/views/home/productionCostAnalysis/mfgOverheadSingleCostAnalysis.vue index 3cd3fd84..f9303f48 100644 --- a/src/views/home/productionCostAnalysis/mfgOverheadSingleCostAnalysis.vue +++ b/src/views/home/productionCostAnalysis/mfgOverheadSingleCostAnalysis.vue @@ -65,7 +65,6 @@ export default { Sidebar, totalOverview, dataTrend - // psiLineChart }, data() { return { @@ -180,13 +179,9 @@ export default { const requestParams = { startTime: this.dateData.startTime, endTime: this.dateData.endTime, - // index: this.index, - // sort: 1, trendName: this.trendName, analysisObject: [this.overheadName + '成本'], - // paramList: ['制造成本', '财务费用', '销售费用', '管理费用', '运费'], levelId: this.factory, - // baseId: Number(this.factory), }; // 调用接口 getSingleMaterialCostAnalysis(requestParams).then((res) => { @@ -276,8 +271,6 @@ export default { }, changeDate(val) { this.date = val; - // this.weekDay = this.weekArr[moment(this.date).format('e')] - // this.getData() if (this.date === moment().format("yyyy-MM-DD")) { this.loopTime(); } else { diff --git a/src/views/home/productionCostAnalysis/originalSheetCost.vue b/src/views/home/productionCostAnalysis/originalSheetCost.vue index 6ea260e9..0450f3ba 100644 --- a/src/views/home/productionCostAnalysis/originalSheetCost.vue +++ b/src/views/home/productionCostAnalysis/originalSheetCost.vue @@ -27,39 +27,26 @@ "> - - diff --git a/src/views/home/productionCostAnalysis/originalSheetCostBase.vue b/src/views/home/productionCostAnalysis/originalSheetCostBase.vue index 07d42398..6880af16 100644 --- a/src/views/home/productionCostAnalysis/originalSheetCostBase.vue +++ b/src/views/home/productionCostAnalysis/originalSheetCostBase.vue @@ -36,7 +36,6 @@ gap: 12px; grid-template-columns: 1624px; "> - @@ -52,14 +51,6 @@ - diff --git a/src/views/home/productionCostAnalysis/originalSheetLabor.vue b/src/views/home/productionCostAnalysis/originalSheetLabor.vue index 208da361..8c3bf3d6 100644 --- a/src/views/home/productionCostAnalysis/originalSheetLabor.vue +++ b/src/views/home/productionCostAnalysis/originalSheetLabor.vue @@ -41,14 +41,6 @@ - diff --git a/src/views/home/productionCostAnalysis/osElectricityCostAnalysis.vue b/src/views/home/productionCostAnalysis/osElectricityCostAnalysis.vue index b1501d05..b09b9bf9 100644 --- a/src/views/home/productionCostAnalysis/osElectricityCostAnalysis.vue +++ b/src/views/home/productionCostAnalysis/osElectricityCostAnalysis.vue @@ -36,7 +36,6 @@ gap: 12px; grid-template-columns: 1624px; "> - @@ -90,8 +89,6 @@ export default { trend: [], relatedData: {}, trendName: '原片电成本', - // monthRelatedData: [], - // totalRelatedData: [], }; }, @@ -183,15 +180,11 @@ export default { const requestParams = { startTime: this.dateData.startTime, endTime: this.dateData.endTime, - // index: this.index, - // sort: 1, trendName: this.trendName, analysisObject: [ "原片电成本", ], - // paramList: ['制造成本 ', '财务费用', '销售费用', '管理费用', '运费'], levelId: this.factory, - // baseId: Number(this.factory), }; // 调用接口 getCostAnalysisData(requestParams).then((res) => { @@ -281,35 +274,12 @@ export default { }, changeDate(val) { this.date = val; - // this.weekDay = this.weekArr[moment(this.date).format('e')] - // this.getData() if (this.date === moment().format("yyyy-MM-DD")) { this.loopTime(); } else { clearInterval(this.timer); } - }, - // 导出 - // () { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } + } }, }; diff --git a/src/views/home/productionCostAnalysis/procAuxMatCost.vue b/src/views/home/productionCostAnalysis/procAuxMatCost.vue index 05d83c28..da2f138a 100644 --- a/src/views/home/productionCostAnalysis/procAuxMatCost.vue +++ b/src/views/home/productionCostAnalysis/procAuxMatCost.vue @@ -73,7 +73,6 @@ export default { totalOverview, relateFuCostAnalysis, dataTrend - // psiLineChart }, data() { return { @@ -128,7 +127,6 @@ export default { return { transform: `scale(${v})`, transformOrigin: "left top", - // overflow: hidden; }; }, }, @@ -184,15 +182,11 @@ export default { const requestParams = { startTime: this.dateData.startTime, endTime: this.dateData.endTime, - // index: this.index, - // sort: 1, trendName: this.trendName, analysisObject: [ "加工辅料成本", ], - // paramList: ['制造成本', '财务费用', '销售费用', '管理费用', '运费'], levelId: this.factory, - // baseId: Number(this.factory), }; // 调用接口 getCostAnalysisData(requestParams).then((res) => { @@ -219,8 +213,7 @@ export default { this.month = obj.targetMonth this.dateData = { startTime: obj.startTime, - endTime: obj.endTime, - // mode: obj.mode, + endTime: obj.endTime } this.getData() @@ -277,35 +270,12 @@ export default { }, changeDate(val) { this.date = val; - // this.weekDay = this.weekArr[moment(this.date).format('e')] - // this.getData() if (this.date === moment().format("yyyy-MM-DD")) { this.loopTime(); } else { clearInterval(this.timer); } - }, - // 导出 - // () { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } + } }, }; diff --git a/src/views/home/productionCostAnalysis/procMfgOverheadCost.vue b/src/views/home/productionCostAnalysis/procMfgOverheadCost.vue index 325812d7..822c8fd4 100644 --- a/src/views/home/productionCostAnalysis/procMfgOverheadCost.vue +++ b/src/views/home/productionCostAnalysis/procMfgOverheadCost.vue @@ -51,14 +51,6 @@ - diff --git a/src/views/home/productionCostAnalysis/procPackMatCost.vue b/src/views/home/productionCostAnalysis/procPackMatCost.vue index dd5a3ade..d5549aea 100644 --- a/src/views/home/productionCostAnalysis/procPackMatCost.vue +++ b/src/views/home/productionCostAnalysis/procPackMatCost.vue @@ -41,14 +41,6 @@ - diff --git a/src/views/home/productionCostAnalysis/processingCostAnalysis.vue b/src/views/home/productionCostAnalysis/processingCostAnalysis.vue index b2a48349..e2565352 100644 --- a/src/views/home/productionCostAnalysis/processingCostAnalysis.vue +++ b/src/views/home/productionCostAnalysis/processingCostAnalysis.vue @@ -27,39 +27,26 @@ "> - - diff --git a/src/views/home/productionCostAnalysis/processingCostAnalysisBase.vue b/src/views/home/productionCostAnalysis/processingCostAnalysisBase.vue index 1da1d061..92b3880c 100644 --- a/src/views/home/productionCostAnalysis/processingCostAnalysisBase.vue +++ b/src/views/home/productionCostAnalysis/processingCostAnalysisBase.vue @@ -36,7 +36,6 @@ gap: 12px; grid-template-columns: 1624px; "> - @@ -52,14 +51,6 @@ - diff --git a/src/views/home/productionCostAnalysis/processingFuel.vue b/src/views/home/productionCostAnalysis/processingFuel.vue index 86900f85..91f42ff8 100644 --- a/src/views/home/productionCostAnalysis/processingFuel.vue +++ b/src/views/home/productionCostAnalysis/processingFuel.vue @@ -51,14 +51,6 @@ - diff --git a/src/views/home/productionCostAnalysis/processingLabor.vue b/src/views/home/productionCostAnalysis/processingLabor.vue index 9f901452..6f2c7c50 100644 --- a/src/views/home/productionCostAnalysis/processingLabor.vue +++ b/src/views/home/productionCostAnalysis/processingLabor.vue @@ -41,14 +41,6 @@ - diff --git a/src/views/home/productionCostAnalysis/productionCostAnalysis.vue b/src/views/home/productionCostAnalysis/productionCostAnalysis.vue index a7e616a3..5daabaf2 100644 --- a/src/views/home/productionCostAnalysis/productionCostAnalysis.vue +++ b/src/views/home/productionCostAnalysis/productionCostAnalysis.vue @@ -26,32 +26,19 @@ grid-template-columns: 1624px; "> - - diff --git a/src/views/home/productionCostAnalysis/productionCostAnalysisBase.vue b/src/views/home/productionCostAnalysis/productionCostAnalysisBase.vue index 27997e6e..d87bc3a1 100644 --- a/src/views/home/productionCostAnalysis/productionCostAnalysisBase.vue +++ b/src/views/home/productionCostAnalysis/productionCostAnalysisBase.vue @@ -53,14 +53,6 @@ - diff --git a/src/views/home/productionCostAnalysis/singleProcAuxMatCost.vue b/src/views/home/productionCostAnalysis/singleProcAuxMatCost.vue index 35a51891..85010bee 100644 --- a/src/views/home/productionCostAnalysis/singleProcAuxMatCost.vue +++ b/src/views/home/productionCostAnalysis/singleProcAuxMatCost.vue @@ -137,8 +137,7 @@ export default { const v = Math.floor(this.value * this.beilv * 100) / 10000; return { transform: `scale(${v})`, - transformOrigin: "left top", - // overflow: hidden; + transformOrigin: "left top" }; }, }, @@ -191,13 +190,9 @@ export default { const requestParams = { startTime: this.dateData.startTime, endTime: this.dateData.endTime, - // index: this.index, - // sort: 1, trendName: this.auxMatName + '成本' + this.trendName, analysisObject: [this.auxMatName + '成本'], - // paramList: ['制造成本', '财务费用', '销售费用', '管理费用', '运费'], levelId: this.factory, - // baseId: Number(this.factory), }; // 调用接口 getSingleMaterialAnalysis(requestParams).then((res) => { @@ -287,35 +282,12 @@ export default { }, changeDate(val) { this.date = val; - // this.weekDay = this.weekArr[moment(this.date).format('e')] - // this.getData() if (this.date === moment().format("yyyy-MM-DD")) { this.loopTime(); } else { clearInterval(this.timer); } - }, - // 导出 - // () { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } + } }, }; diff --git a/src/views/home/productionCostAnalysis/singleProcMfgOverheadCost.vue b/src/views/home/productionCostAnalysis/singleProcMfgOverheadCost.vue index 5f81bc22..ea37875a 100644 --- a/src/views/home/productionCostAnalysis/singleProcMfgOverheadCost.vue +++ b/src/views/home/productionCostAnalysis/singleProcMfgOverheadCost.vue @@ -43,14 +43,6 @@ - diff --git a/src/views/home/productionCostAnalysis/singleProcessingFuel.vue b/src/views/home/productionCostAnalysis/singleProcessingFuel.vue index de0a2b93..516f77de 100644 --- a/src/views/home/productionCostAnalysis/singleProcessingFuel.vue +++ b/src/views/home/productionCostAnalysis/singleProcessingFuel.vue @@ -38,7 +38,6 @@ gap: 12px; grid-template-columns: 1624px; "> - @@ -189,13 +188,9 @@ export default { const requestParams = { startTime: this.dateData.startTime, endTime: this.dateData.endTime, - // index: this.index, - // sort: 1, trendName: this.trendName, analysisObject: [this.fuelName], - // paramList: ['制造成本', '财务费用', '销售费用', '管理费用', '运费'], levelId: this.factory, - // baseId: Number(this.factory), }; // 调用接口 getSingleMaterialAnalysis(requestParams).then((res) => { @@ -305,35 +300,12 @@ export default { }, changeDate(val) { this.date = val; - // this.weekDay = this.weekArr[moment(this.date).format('e')] - // this.getData() if (this.date === moment().format("yyyy-MM-DD")) { this.loopTime(); } else { clearInterval(this.timer); } - }, - // 导出 - // () { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } + } }, }; diff --git a/src/views/home/productionCostAnalysisComponents/containerPackMatCost.vue b/src/views/home/productionCostAnalysisComponents/containerPackMatCost.vue index 15c189b5..3d4f46b5 100644 --- a/src/views/home/productionCostAnalysisComponents/containerPackMatCost.vue +++ b/src/views/home/productionCostAnalysisComponents/containerPackMatCost.vue @@ -65,34 +65,16 @@ export default { activeTab: 'month', // 初始化激活的Tab（支持父组件传默认值 }; }, - mounted() { - // 初始化定位 - // this.positionChangeText(); - // // 监听窗口大小变化，重新定位 - // window.addEventListener('resize', this.positionChangeText); - }, - // updated() { - // // 数据更新后重新定位（如标题文字变化） - // this.positionChangeText(); - // }, - beforeDestroy() { - // 移除监听 - // window.removeEventListener('resize', this.positionChangeText); - }, methods: { handleLeftClick() { this.isLeftTransparent = true; this.isRightTransparent = false; this.$emit('switchTab', '指标分析'); - // 切换后重新定位 - // this.$nextTick(() => this.positionChangeText()); }, handleRightClick() { this.isLeftTransparent = false; this.isRightTransparent = true; this.$emit('switchTab', '数据趋势'); - // 切换后重新定位 - // this.$nextTick(() => this.positionChangeText()); }, /** * Tab点击事件：切换状态 + 向父组件传值 diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBar.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBar.vue index 0552515a..e156b485 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBar.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBar.vue @@ -145,74 +145,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -241,6 +174,53 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, shadowOffsetX: 0, shadowOffsetY: 2, + borderRadius: 4, borderColor: '#BFCBD577', borderWidth: 0, + lineHeight: 20, + rich: { + text: { width: 'auto', padding: [5, 10, 5, 0], align: 'center', color: '#464646', fontSize: 11, lineHeight: 20 }, + achieved: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#76DABE', fontSize: 11, lineHeight: 20 }, + unachieved: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#F9A44A', fontSize: 11, lineHeight: 20 } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarCCA.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarCCA.vue index 6597f749..8aa6fda2 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarCCA.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarCCA.vue @@ -143,74 +143,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -239,6 +172,80 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarCombustible.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarCombustible.vue index 435fe8b3..9e3d22d7 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarCombustible.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarCombustible.vue @@ -142,74 +142,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -238,6 +171,80 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarFactoryBurden.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarFactoryBurden.vue index aed2db00..8f0a70ba 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarFactoryBurden.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarFactoryBurden.vue @@ -141,74 +141,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -237,6 +170,79 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarFuel.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarFuel.vue index d178aa6e..f5e71116 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarFuel.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarFuel.vue @@ -145,74 +145,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -241,6 +174,80 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarPro.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarPro.vue index 2bfd7457..39354a68 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarPro.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarPro.vue @@ -143,74 +143,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -239,6 +172,79 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcAuxMat.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcAuxMat.vue index ae7fbb18..3cdc1874 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcAuxMat.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcAuxMat.vue @@ -72,9 +72,6 @@ export default { }; }, computed: { - // profitOptions() { - // return this.categoryData.map(item => item.name) || []; - // }, currentDataSource() { return this.chartData }, @@ -145,74 +142,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -241,6 +171,79 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcess.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcess.vue index c6310faf..02a2fb37 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcess.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcess.vue @@ -72,9 +72,6 @@ export default { }; }, computed: { - // profitOptions() { - // return this.categoryData.map(item => item.name) || []; - // }, currentDataSource() { return this.chartData }, @@ -145,74 +142,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -241,6 +171,79 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingFuel.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingFuel.vue index a90da38d..8931edde 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingFuel.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingFuel.vue @@ -69,9 +69,6 @@ export default { }; }, computed: { - // profitOptions() { - // return this.categoryData.map(item => item.name) || []; - // }, currentDataSource() { return this.chartData }, @@ -142,74 +139,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -238,6 +168,79 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingLabor.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingLabor.vue index bc955eb0..acfa2140 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingLabor.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingLabor.vue @@ -23,23 +23,6 @@ 实际·未达标 - @@ -62,20 +45,9 @@ export default { activeButton: 0, isDropdownShow: false, selectedProfit: null, // 选中的名称，初始为null - // profitOptions: [ - // '原片成本', - // '原料成本', - // '燃料成本', - // '电成本', - // '人工成本', - // '制造成本', - // ] }; }, computed: { - // profitOptions() { - // return this.categoryData.map(item => item.name) || []; - // }, currentDataSource() { return this.chartData }, @@ -146,74 +118,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -242,6 +147,80 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarProduct.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarProduct.vue index 4377d587..04c5c303 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarProduct.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarProduct.vue @@ -69,9 +69,6 @@ export default { }; }, computed: { - // profitOptions() { - // return this.categoryData.map(item => item.name) || []; - // }, currentDataSource() { return this.chartData }, @@ -142,74 +139,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false }, itemStyle: { color: (params) => { @@ -238,6 +168,80 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 实际柱状图标签（scatter系列，确保标签在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffValue || []; + const flags = data.completed || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleCombustible.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleCombustible.vue index ea2fb029..6faa6851 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleCombustible.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleCombustible.vue @@ -164,76 +164,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { // 达标状态：1=达标（绿色），0=未达标（橙色） @@ -261,6 +192,76 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 差值标签（散点图，独立层级） + { + name: '__实际差值标签', + type: 'scatter', + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = (data.diffValue || [])[index] || 0; + const currentFlag = (data.completed || [])[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuel.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuel.vue index 3ae8d2fb..835e49a7 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuel.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuel.vue @@ -141,76 +141,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { // 达标状态：1=达标（绿色），0=未达标（橙色） @@ -238,6 +169,76 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 差值标签（散点图，独立层级） + { + name: '__实际差值标签', + type: 'scatter', + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = (data.diffValue || [])[index] || 0; + const currentFlag = (data.completed || [])[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelDian.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelDian.vue index bfc1ebc3..0a653ac6 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelDian.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelDian.vue @@ -162,76 +162,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { // 达标状态：1=达标（绿色），0=未达标（橙色） @@ -259,6 +190,76 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 差值标签（散点图，独立层级） + { + name: '__实际差值标签', + type: 'scatter', + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = (data.diffValue || [])[index] || 0; + const currentFlag = (data.completed || [])[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelF.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelF.vue index 59ec2b52..132259b0 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelF.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelF.vue @@ -140,76 +140,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { // 达标状态：1=达标（绿色），0=未达标（橙色） @@ -237,6 +168,76 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 差值标签（散点图，独立层级） + { + name: '__实际差值标签', + type: 'scatter', + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = (data.diffValue || [])[index] || 0; + const currentFlag = (data.completed || [])[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelYL.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelYL.vue index 3ae8d2fb..835e49a7 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelYL.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuelYL.vue @@ -141,76 +141,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffValue || []; - const flags = data.completed || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { // 达标状态：1=达标（绿色），0=未达标（橙色） @@ -238,6 +169,76 @@ export default { borderWidth: 0 }, data: data.value || [] // 实际销量（万元） + }, + // 4. 差值标签（散点图，独立层级） + { + name: '__实际差值标签', + type: 'scatter', + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.value || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = (data.diffValue || [])[index] || 0; + const currentFlag = (data.completed || [])[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendProcessingFuel.vue b/src/views/home/productionCostAnalysisComponents/dataTrendProcessingFuel.vue index cc4109d3..8b4d1534 100644 --- a/src/views/home/productionCostAnalysisComponents/dataTrendProcessingFuel.vue +++ b/src/views/home/productionCostAnalysisComponents/dataTrendProcessingFuel.vue @@ -9,7 +9,6 @@ width: 1595px; background-color: rgba(249, 252, 255, 1); "> - diff --git a/src/views/home/productionCostAnalysisComponents/operatingBar.vue b/src/views/home/productionCostAnalysisComponents/operatingBar.vue index 6bac350d..d86a8b36 100644 --- a/src/views/home/productionCostAnalysisComponents/operatingBar.vue +++ b/src/views/home/productionCostAnalysisComponents/operatingBar.vue @@ -175,69 +175,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -265,6 +203,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/productionCostAnalysisComponents/operatingLineBarSaleGroup.vue b/src/views/home/productionCostAnalysisComponents/operatingLineBarSaleGroup.vue index a4f67693..86aeda5b 100644 --- a/src/views/home/productionCostAnalysisComponents/operatingLineBarSaleGroup.vue +++ b/src/views/home/productionCostAnalysisComponents/operatingLineBarSaleGroup.vue @@ -76,22 +76,12 @@ export default { backgroundColor: '#6a7985' } }, - // formatter: (params) => { - // let html = `${params[0].axisValue}
`; - // params.forEach(item => { - // const unit = item.seriesName === '完成率' ? '%' : ( - // ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元' - // ); - // html += `${item.marker} ${item.seriesName}: ${item.value}${unit}
`; - // }); - // return html; - // } }, grid: { top: 30, bottom: 20, right: 10, - left: 25, + left: 30, containLabel: true }, xAxis: [ diff --git a/src/views/home/rawSheetYield/rawSheetYield.vue b/src/views/home/rawSheetYield/rawSheetYield.vue index 5c5582f3..dd996183 100644 --- a/src/views/home/rawSheetYield/rawSheetYield.vue +++ b/src/views/home/rawSheetYield/rawSheetYield.vue @@ -26,26 +26,15 @@ grid-template-columns: 1624px; "> - - diff --git a/src/views/home/rawSheetYield/rawSheetYieldBase.vue b/src/views/home/rawSheetYield/rawSheetYieldBase.vue index e74d76b0..573b1176 100644 --- a/src/views/home/rawSheetYield/rawSheetYieldBase.vue +++ b/src/views/home/rawSheetYield/rawSheetYieldBase.vue @@ -52,14 +52,6 @@ - diff --git a/src/views/home/rawSheetYieldComponents/dataTrend.vue b/src/views/home/rawSheetYieldComponents/dataTrend.vue index 67f8b226..e1ce5247 100644 --- a/src/views/home/rawSheetYieldComponents/dataTrend.vue +++ b/src/views/home/rawSheetYieldComponents/dataTrend.vue @@ -26,20 +26,7 @@ export default { trend: { type: Array, // 默认值与实际数据结构一致（12个月） - default: () => [ - // { title: "2025年01月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年02月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年03月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年04月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年05月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年06月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年07月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年08月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年09月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年10月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年11月", budget: 0, real: 0, rate: 0, diff: 0 }, - // { title: "2025年12月", budget: 0, real: 0, rate: 0, diff: 0 } - ] + default: () => [] }, }, data() { @@ -98,7 +85,7 @@ export default { const diff = Number(item.diff) || 0; // 计算达标标识（≥100 → 1，<100 → 0） - const flag = this.getRateFlag(rate, real, budget); + const flag = item.rate >= 100 ? 1 : 0; // 填充数组 months.push(month); @@ -120,25 +107,7 @@ export default { }; console.log('处理后的趋势数据：', this.chartData); - }, - - /** - * 计算达标标识 - * @param {Number} rate - 完成率（原始值，如1.2 → 120%） - * @returns {Number} 1: 达标（≥100%），0: 未达标（<100%） - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, + } }, }; diff --git a/src/views/home/rawSheetYieldComponents/dataTrendBar.vue b/src/views/home/rawSheetYieldComponents/dataTrendBar.vue index 9482c3d8..2758a7eb 100644 --- a/src/views/home/rawSheetYieldComponents/dataTrendBar.vue +++ b/src/views/home/rawSheetYieldComponents/dataTrendBar.vue @@ -148,74 +148,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - const diff = data.diffs || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -244,6 +177,53 @@ export default { borderWidth: 0 }, data: data.reals // 实际销量（万元） + }, + // 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const diff = data.diffs || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, shadowOffsetX: 0, shadowOffsetY: 2, + borderRadius: 4, borderColor: '#BFCBD577', borderWidth: 0, + lineHeight: 20, + rich: { + text: { width: 'auto', padding: [5, 10, 5, 0], align: 'center', color: '#464646', fontSize: 11, lineHeight: 20 }, + achieved: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#76DABE', fontSize: 11, lineHeight: 20 }, + unachieved: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#F9A44A', fontSize: 11, lineHeight: 20 } + } + } + })) } ] }; diff --git a/src/views/home/rawSheetYieldComponents/monthlyOverview.vue b/src/views/home/rawSheetYieldComponents/monthlyOverview.vue index 81af74d2..a88ee36c 100644 --- a/src/views/home/rawSheetYieldComponents/monthlyOverview.vue +++ b/src/views/home/rawSheetYieldComponents/monthlyOverview.vue @@ -19,9 +19,6 @@ -
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -65,29 +59,6 @@ export default { } }, - watch: { - // itemData: { - // handler(newValue, oldValue) { - // // this.updateChart() - // }, - // deep: true // 若对象内属性变化需触发，需加 deep: true - // } - }, - // computed: { - // // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列 - // sortedItemData() { - // // 过滤出包含“总成本”的项（不区分大小写） - // const totalCostItems = this.itemData.filter(item => - // item.name && item.name.includes('总成本') - // ); - // // 过滤出不包含“总成本”的项 - // const otherItems = this.itemData.filter(item => - // !item.name || !item.name.includes('总成本') - // ); - // // 合并：总成本项在前，其他项在后 - // return [...totalCostItems, ...otherItems]; - // } - // }, mounted() { // 初始化图表（若需展示图表，需在模板中添加对应 DOM） // this.$nextTick(() => this.updateChart()) diff --git a/src/views/home/rawSheetYieldComponents/operatingBar.vue b/src/views/home/rawSheetYieldComponents/operatingBar.vue index 5b2adf89..db6ff7ba 100644 --- a/src/views/home/rawSheetYieldComponents/operatingBar.vue +++ b/src/views/home/rawSheetYieldComponents/operatingBar.vue @@ -175,69 +175,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -265,6 +203,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/rawSheetYieldComponents/operatingLineChart.vue b/src/views/home/rawSheetYieldComponents/operatingLineChart.vue index caccba37..1c86f8ad 100644 --- a/src/views/home/rawSheetYieldComponents/operatingLineChart.vue +++ b/src/views/home/rawSheetYieldComponents/operatingLineChart.vue @@ -87,23 +87,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData @@ -118,7 +101,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate > 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -139,7 +122,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate > 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/rawSheetYieldComponents/operatingLineChartCumulative.vue b/src/views/home/rawSheetYieldComponents/operatingLineChartCumulative.vue index 94daa24a..e254048e 100644 --- a/src/views/home/rawSheetYieldComponents/operatingLineChartCumulative.vue +++ b/src/views/home/rawSheetYieldComponents/operatingLineChartCumulative.vue @@ -81,23 +81,6 @@ export default { sortChange(value) { this.$emit('sort-change', value); }, - /** - * 判断rate对应的flag值（<1为0，>1为1） - * @param {number} rate 处理后的rate值（已*100） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData @@ -112,7 +95,7 @@ getRateFlag(rate, real, target) { const groupReal = [this.groupData.real]; // 实际值数组 const groupRate = [this.groupData.rate]; // 完成率数组 // 新增：集团rate对应的flag - const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])]; + const groupFlag = [this.groupData.rate > 100 ? 1 : 0]; console.log('集团数据数组：', { groupTarget, @@ -133,7 +116,7 @@ getRateFlag(rate, real, target) { const factoryRate = this.factoryData.map(item => item.rate || 0); const factoryDiff = this.factoryData.map(item => item.diff || 0); // 新增：每个工厂rate对应的flag数组 - const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget)); + const factoryFlags = this.factoryData.map(item => item.rate > 100 ? 1 : 0); // 3. 组装最终的chartData（供子组件使用） this.chartData = { diff --git a/src/views/home/rawSheetYieldComponents/relatedIndicatorsAnalysis.vue b/src/views/home/rawSheetYieldComponents/relatedIndicatorsAnalysis.vue index 265f3e37..6d65a8d9 100644 --- a/src/views/home/rawSheetYieldComponents/relatedIndicatorsAnalysis.vue +++ b/src/views/home/rawSheetYieldComponents/relatedIndicatorsAnalysis.vue @@ -14,7 +14,7 @@
完成率:{{item.data.rate}}% - 差值:{{item.data.diff}} + 差值:{{item.data.diff}}
@@ -27,9 +27,6 @@ import Container from '../components/container.vue' import operatingSingleBar from './operatingSingleBar.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, operatingSingleBar }, diff --git a/src/views/home/rawSheetYieldComponents/totalOverview.vue b/src/views/home/rawSheetYieldComponents/totalOverview.vue index 60c8167e..7432aa9a 100644 --- a/src/views/home/rawSheetYieldComponents/totalOverview.vue +++ b/src/views/home/rawSheetYieldComponents/totalOverview.vue @@ -19,9 +19,6 @@ -
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -73,25 +67,6 @@ export default { deep: true // 若对象内属性变化需触发，需加 deep: true } }, - // computed: { - // // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列 - // sortedItemData() { - // // 过滤出包含“总成本”的项（不区分大小写） - // const totalCostItems = this.itemData.filter(item => - // item.name && item.name.includes('总成本') - // ); - // // 过滤出不包含“总成本”的项 - // const otherItems = this.itemData.filter(item => - // !item.name || !item.name.includes('总成本') - // ); - // // 合并：总成本项在前，其他项在后 - // return [...totalCostItems, ...otherItems]; - // } - // }, - mounted() { - // 初始化图表（若需展示图表，需在模板中添加对应 DOM） - // this.$nextTick(() => this.updateChart()) - }, methods: { } } diff --git a/src/views/home/rawSheetYieldComponents/verticalBarChart.vue b/src/views/home/rawSheetYieldComponents/verticalBarChart.vue index d5272acf..a42b2379 100644 --- a/src/views/home/rawSheetYieldComponents/verticalBarChart.vue +++ b/src/views/home/rawSheetYieldComponents/verticalBarChart.vue @@ -50,18 +50,6 @@ export default { } }, methods: { -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, updateChart() { const chartDom = this.$refs[this.refName]; if (!chartDom) { @@ -76,7 +64,7 @@ getRateFlag(rate, real, target) { this.myChart = echarts.init(chartDom); const diff = this.detailData.diff || 0 const rate = this.detailData.rate || 0 - const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0 + const flagValue = this.detailData.rate && this.detailData.rate >= 100 ? 1 : 0 this.flag = flagValue const option = { tooltip: { @@ -87,16 +75,6 @@ getRateFlag(rate, real, target) { backgroundColor: '#6a7985' } }, - // formatter: (params) => { - // let html = `${params[0].axisValue}
`; - // params.forEach(item => { - // const unit = item.seriesName === '完成率' ? '%' : ( - // ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元' - // ); - // html += `${item.marker} ${item.seriesName}: ${item.value}${unit}
`; - // }); - // return html; - // } }, grid: { top: 40, @@ -109,9 +87,6 @@ getRateFlag(rate, real, target) { xAxis: { // 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值 type: 'value', - // offset: 0, - // boundaryGap: true , - // boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白 axisTick: { show: false }, min: 0, // diff --git a/src/views/home/salesVolumeAnalysis/doublePlatedBase.vue b/src/views/home/salesVolumeAnalysis/doublePlatedBase.vue index eab921fb..7b307456 100644 --- a/src/views/home/salesVolumeAnalysis/doublePlatedBase.vue +++ b/src/views/home/salesVolumeAnalysis/doublePlatedBase.vue @@ -78,7 +78,6 @@ export default { dataTrend, monthlyRelatedMetrics, yearRelatedMetrics - // psiLineChart }, data() { return { @@ -192,23 +191,7 @@ export default { this.totalData = res.data.totalData this.relatedMon = res.data.relatedMon this.relatedTotal = res.data.relatedTotal - - // this.relatedData = { - // relatedTotal: res.data.relatedTotal, - // relatedMon: res.data.relatedMon, - // } this.trend = res.data.trend - // this.relatedTotal = res.data.relatedTotal - // this.cusProData = { - // customerPriceMon: res.data.customerPriceMon, - // customerPriceTotal: res.data.customerPriceTotal, - // customerSaleMon: res.data.customerSaleMon, - // customerSaleTotal: res.data.customerSaleTotal, - // productMonSale: res.data.productMonSale, - // productPriceMon: res.data.productPriceMon, - // productPriceTotal: res.data.productPriceTotal, - // productTotalSale: res.data.productTotalSale, - // } }); }, @@ -275,35 +258,12 @@ export default { }, changeDate(val) { this.date = val; - // this.weekDay = this.weekArr[moment(this.date).format('e')] - // this.getData() if (this.date === moment().format("yyyy-MM-DD")) { this.loopTime(); } else { clearInterval(this.timer); } - }, - // 导出 - // () { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } + } }, }; diff --git a/src/views/home/salesVolumeAnalysis/productionSalesBase.vue b/src/views/home/salesVolumeAnalysis/productionSalesBase.vue index 562ad321..75060848 100644 --- a/src/views/home/salesVolumeAnalysis/productionSalesBase.vue +++ b/src/views/home/salesVolumeAnalysis/productionSalesBase.vue @@ -189,22 +189,10 @@ export default { getUnitPriceAnalysisBaseData(requestParams).then((res) => { this.monData = res.data.monData this.totalData = res.data.totalData - // this.relatedMon = res.data.relatedMon this.relatedMon = res.data.relatedMon this.relatedTotal = res.data.relatedTotal this.trend = res.data.trend - // this.relatedTotal = res.data.relatedTotal - // this.cusProData = { - // customerPriceMon: res.data.customerPriceMon, - // customerPriceTotal: res.data.customerPriceTotal, - // customerSaleMon: res.data.customerSaleMon, - // customerSaleTotal: res.data.customerSaleTotal, - // productMonSale: res.data.productMonSale, - // productPriceMon: res.data.productPriceMon, - // productPriceTotal: res.data.productPriceTotal, - // productTotalSale: res.data.productTotalSale, - // } }); }, @@ -271,35 +259,12 @@ export default { }, changeDate(val) { this.date = val; - // this.weekDay = this.weekArr[moment(this.date).format('e')] - // this.getData() if (this.date === moment().format("yyyy-MM-DD")) { this.loopTime(); } else { clearInterval(this.timer); } - }, - // 导出 - // () { - // this.$message.success('正在导出，请稍等！') - // const element = document.getElementById('dayRepDom') - // element.style.display = 'block' - // const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf' - // html2canvas(element, { - // dpi: 300, // Set to 300 DPI - // scale: 3 // Adjusts your resolution - // }).then(function(canvas) { - // const imgWidth = 595.28 - // const imgHeight = 841.89 - // const pageData = canvas.toDataURL('image/jpeg', 1.0) - // const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight]) - // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) - // setTimeout(() => { - // PDF.save(fileName) // 导出文件名 - // }, 1000) - // }) - // element.style.display = 'none' - // } + } }, }; diff --git a/src/views/home/salesVolumeAnalysis/salesVolumeAnalysis.vue b/src/views/home/salesVolumeAnalysis/salesVolumeAnalysis.vue index 9b7ba078..b2580476 100644 --- a/src/views/home/salesVolumeAnalysis/salesVolumeAnalysis.vue +++ b/src/views/home/salesVolumeAnalysis/salesVolumeAnalysis.vue @@ -26,26 +26,15 @@ grid-template-columns: 1624px; "> -
- diff --git a/src/views/home/salesVolumeAnalysisComponents/dataTrendBar.vue b/src/views/home/salesVolumeAnalysisComponents/dataTrendBar.vue index cff95b7b..022e4bbc 100644 --- a/src/views/home/salesVolumeAnalysisComponents/dataTrendBar.vue +++ b/src/views/home/salesVolumeAnalysisComponents/dataTrendBar.vue @@ -113,8 +113,7 @@ export default { reals.push(monthData.real || 0); targets.push(monthData.target || 0); diffs.push(monthData.diff || 0); - // 生成达标状态（复用 getRateFlag 逻辑） - flags.push(this.getRateFlag(completeRate,monthData.real, monthData.target)); + flags.push(completeRate >= 100 ? 1 : 0); }); return { @@ -191,76 +190,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - // const diff = data.diff || []; - // const flags = data.flags || []; - const currentDiff = diffs[params.dataIndex] || 0; - console.log(diffs,flags,[1111]); - - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : ''; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -287,6 +217,56 @@ export default { borderWidth: 0 }, data: reals, // 动态实际值 + }, + // 4. 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: reals.map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = diffs[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { width: 'auto', padding: [5, 10, 5, 0], align: 'center', color: '#464646', fontSize: 11, lineHeight: 20 }, + achieved: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#76DABE', fontSize: 11, lineHeight: 20 }, + unachieved: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#F9A44A', fontSize: 11, lineHeight: 20 } + } + } + })) } ] }; @@ -301,19 +281,6 @@ export default { this.isDropdownShow = false; this.unit = item.unit; }, - // 复用达标状态判断方法 - getRateFlag(rate, real, target) { - // 先处理无效值的情况 - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 实际值和目标值都为0时，算作达标 - if (real === 0 && target === 0 && rate === 0) { - return 1; // 达标 - } - - // 其他情况：rate >= 100 或 rate === 0 时达标 - return (rate >= 100) ? 1 : 0; - } } }; diff --git a/src/views/home/salesVolumeAnalysisComponents/dataTrendBarDouble.vue b/src/views/home/salesVolumeAnalysisComponents/dataTrendBarDouble.vue index 5269fd5a..26c43b55 100644 --- a/src/views/home/salesVolumeAnalysisComponents/dataTrendBarDouble.vue +++ b/src/views/home/salesVolumeAnalysisComponents/dataTrendBarDouble.vue @@ -189,74 +189,7 @@ export default { yAxisIndex: 0, barWidth: 14, label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - // const diff = data.diff || []; - // const flags = data.flags || []; - const currentDiff = diffs[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -283,6 +216,77 @@ export default { borderWidth: 0 }, data: reals, // 动态实际值 + }, + // 4. 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, // 最高层级，确保 label 在折线和柱状图之上 + symbolSize: 0, // 不显示散点 + tooltip: { show: false }, // 不在 tooltip 中显示 + data: reals.map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = diffs[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/salesVolumeAnalysisComponents/dataTrendBarProduct.vue b/src/views/home/salesVolumeAnalysisComponents/dataTrendBarProduct.vue index d8e77cf4..ee225476 100644 --- a/src/views/home/salesVolumeAnalysisComponents/dataTrendBarProduct.vue +++ b/src/views/home/salesVolumeAnalysisComponents/dataTrendBarProduct.vue @@ -108,10 +108,7 @@ export default { reals.push(monthData.real || 0); targets.push(monthData.target || 0); diffs.push(monthData.diff || 0); - - - // 生成达标状态（复用 getRateFlag 逻辑） - flags.push(this.getRateFlag(completeRate)); + flags.push(completeRate >= 100 ? 1 : 0); }); return { @@ -123,9 +120,6 @@ export default { diffs }; }, - // locations() { - // return this.activeButton === 0 ? this.chartData?.salesLocations : this.chartData?.grossMarginLocations; - // }, // 重构 chartD：替换硬编码数据为动态解析数据 chartD() { // 获取动态解析的趋势数据 @@ -187,76 +181,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [0, 0], - // 固定label尺寸：68px×20px - width: 68, - height: 20, - // 关键：去掉换行，让文字在一行显示，适配小尺寸 - formatter: (params) => { - // const diff = data.diff || []; - // const flags = data.flags || []; - const currentDiff = diffs[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, + label: { show: false }, itemStyle: { color: (params) => { const currentFlag = flags[params.dataIndex] || 0; @@ -282,6 +207,76 @@ export default { borderWidth: 0 }, data: reals, // 动态实际值 + }, + // 4. 差值标签（散点图，独立层级） + { + name: '__实际差值标签', + type: 'scatter', + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [0, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = (diffs || [])[index] || 0; + const currentFlag = (flags || [])[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; @@ -296,11 +291,6 @@ export default { this.isDropdownShow = false; this.unit = item.unit; }, - // 复用达标状态判断方法 - getRateFlag(rate) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - return (rate >= 100 || rate === 0) ? 1 : 0; - } } }; diff --git a/src/views/home/salesVolumeAnalysisComponents/monthlyOverview.vue b/src/views/home/salesVolumeAnalysisComponents/monthlyOverview.vue index a14896c4..93c26fe5 100644 --- a/src/views/home/salesVolumeAnalysisComponents/monthlyOverview.vue +++ b/src/views/home/salesVolumeAnalysisComponents/monthlyOverview.vue @@ -17,10 +17,6 @@ 下降 - - - -
@@ -87,7 +83,7 @@ export default { target: 0, thb: 0, ...rawData, - flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段 + flag: rawData.completeRate >= 100 ? 1 : 0 // 根据完成率计算flag }; } }, @@ -101,23 +97,6 @@ export default { } return value; }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, } } diff --git a/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue index 15068101..d0130c46 100644 --- a/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue +++ b/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue @@ -26,9 +26,6 @@ import Container from './container.vue' import operatingSingleBar from './operatingSingleBar.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, operatingSingleBar }, @@ -81,7 +78,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target), + flag: data.completeRate >= 100 ? 1 : 0 } return { ...def, @@ -120,23 +117,6 @@ export default { this.$nextTick(() => this.updateChart()) }, methods: { - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 图表更新方法：可在这里补充全局的图表刷新逻辑 @@ -144,10 +124,6 @@ getRateFlag(rate, real, target) { */ updateChart() { console.log('数据更新，当前relatedMon:', this.relatedMon) - // 打印各维度的flag值，方便调试 - // console.log('销量flag:', this.getRateFlag(this.relatedMon.销量.completeRate)) - // console.log('成本flag:', this.getRateFlag(this.relatedMon.成本.completeRate)) - // console.log('运费flag:', this.getRateFlag(this.relatedMon.运费.completeRate)) } } } diff --git a/src/views/home/salesVolumeAnalysisComponents/monthlyThreeRelatedMetrics.vue b/src/views/home/salesVolumeAnalysisComponents/monthlyThreeRelatedMetrics.vue index 9de4d48c..e0ede11b 100644 --- a/src/views/home/salesVolumeAnalysisComponents/monthlyThreeRelatedMetrics.vue +++ b/src/views/home/salesVolumeAnalysisComponents/monthlyThreeRelatedMetrics.vue @@ -25,8 +25,6 @@ diff --git a/src/views/home/salesVolumeAnalysisComponents/yearRelatedMetrics.vue b/src/views/home/salesVolumeAnalysisComponents/yearRelatedMetrics.vue index ba4f1bd3..b8022f4e 100644 --- a/src/views/home/salesVolumeAnalysisComponents/yearRelatedMetrics.vue +++ b/src/views/home/salesVolumeAnalysisComponents/yearRelatedMetrics.vue @@ -26,9 +26,6 @@ import Container from './container.vue' import operatingSingleBar from './operatingSingleBar.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, operatingSingleBar }, @@ -82,7 +79,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target), + flag: data.completeRate >= 100 ? 1 : 0, } return { ...def, @@ -121,23 +118,6 @@ export default { this.$nextTick(() => this.updateChart()) }, methods: { - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 图表更新方法：可在这里补充全局的图表刷新逻辑 diff --git a/src/views/home/salesVolumeAnalysisComponents/yearThreeRelatedMetrics.vue b/src/views/home/salesVolumeAnalysisComponents/yearThreeRelatedMetrics.vue index 397d26b0..a8e1c468 100644 --- a/src/views/home/salesVolumeAnalysisComponents/yearThreeRelatedMetrics.vue +++ b/src/views/home/salesVolumeAnalysisComponents/yearThreeRelatedMetrics.vue @@ -26,10 +26,6 @@ diff --git a/src/views/home/totalProfit/totalProfitBase.vue b/src/views/home/totalProfit/totalProfitBase.vue index 98d9b2b0..b43b457a 100644 --- a/src/views/home/totalProfit/totalProfitBase.vue +++ b/src/views/home/totalProfit/totalProfitBase.vue @@ -52,14 +52,6 @@
- diff --git a/src/views/home/unitPriceAnalysis/unitPriceAnalysisBase.vue b/src/views/home/unitPriceAnalysis/unitPriceAnalysisBase.vue index 8e21c2ea..1e63c38e 100644 --- a/src/views/home/unitPriceAnalysis/unitPriceAnalysisBase.vue +++ b/src/views/home/unitPriceAnalysis/unitPriceAnalysisBase.vue @@ -54,14 +54,6 @@ - diff --git a/src/views/home/unitPriceAnalysisComponents/financeCosts.vue b/src/views/home/unitPriceAnalysisComponents/financeCosts.vue index 01b203fe..3c11841e 100644 --- a/src/views/home/unitPriceAnalysisComponents/financeCosts.vue +++ b/src/views/home/unitPriceAnalysisComponents/financeCosts.vue @@ -112,30 +112,10 @@ export default { diff: rawData[key].diff || 0, value: rawData[key].value || 0, target: rawData[key].target || 0, - flag: this.getRateFlag(rawData[key].completeRate || 0, rawData[key].value || 0, rawData[key].target || 0), + flag: rawData[key].completeRate >= 100 ? 1 : 0, rate: rawData[key].completeRate || 0, })) }, - // 3. 当前销量数据（趋势图备用） - // currentSaleData() { - // const { activeTab, bottomType, cusProData } = this - // const dataMap = { - // cus: { - // month: cusProData.customerSaleMon, - // total: cusProData.customerSaleTotal - // }, - // pro: { - // month: cusProData.productMonSale, - // total: cusProData.productTotalSale - // } - // } - // const rawData = dataMap[activeTab][bottomType] || {} - // return Object.keys(rawData).map(key => ({ - // name: key, - // value: rawData[key].value || 0, - // rate: rawData[key].rate || 0 - // })) - // } }, watch: { // ========== 监听状态变化 - 可选：做额外逻辑 ========== @@ -158,18 +138,6 @@ export default { } }, methods: { - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, // 处理月度/累计切换 handleTabChange(tabType) { this.bottomType = tabType diff --git a/src/views/home/unitPriceAnalysisComponents/monthlyOverview.vue b/src/views/home/unitPriceAnalysisComponents/monthlyOverview.vue index d9fce6e0..0186b7c1 100644 --- a/src/views/home/unitPriceAnalysisComponents/monthlyOverview.vue +++ b/src/views/home/unitPriceAnalysisComponents/monthlyOverview.vue @@ -17,9 +17,6 @@ 下降 -
@@ -86,7 +83,7 @@ export default { target: 0, thb: 0, ...rawData, - flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段 + flag: rawData.completeRate>=100?1:0 }; } }, @@ -100,23 +97,6 @@ export default { } return value; }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, } } diff --git a/src/views/home/unitPriceAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/unitPriceAnalysisComponents/monthlyRelatedMetrics.vue index bb13ebcf..a47a4238 100644 --- a/src/views/home/unitPriceAnalysisComponents/monthlyRelatedMetrics.vue +++ b/src/views/home/unitPriceAnalysisComponents/monthlyRelatedMetrics.vue @@ -89,7 +89,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target), + flag: data.completeRate >= 100 ? 1 : 0, } return { ...def, @@ -136,35 +136,6 @@ export default { dateData: this.dateData } }) - }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, - - /** - * 图表更新方法：可在这里补充全局的图表刷新逻辑 - * 若子组件内部已监听 chartData 变化，此方法可留空或补充额外逻辑 - */ - updateChart() { - // console.log('数据更新，当前relatedMon:', this.relatedMon) - // // 打印各维度的flag值，方便调试 - // console.log('销量flag:', this.getRateFlag(this.relatedMon.销量.completeRate)) - // console.log('成本flag:', this.getRateFlag(this.relatedMon.成本.completeRate)) - // console.log('运费flag:', this.getRateFlag(this.relatedMon.运费.completeRate)) } } } diff --git a/src/views/home/unitPriceAnalysisComponents/operatingBar.vue b/src/views/home/unitPriceAnalysisComponents/operatingBar.vue index 43c2b5f1..12fcc2dd 100644 --- a/src/views/home/unitPriceAnalysisComponents/operatingBar.vue +++ b/src/views/home/unitPriceAnalysisComponents/operatingBar.vue @@ -174,69 +174,7 @@ export default { yAxisIndex: 0, barWidth: 40, label: { - show: true, - position: 'top', - offset: [32, 0], - width: 100, - height: 22, - formatter: (params) => { - const diff = data.diff || []; - const flags = data.flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 26, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 14 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 14 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 14 - } - } + show: false // 关闭原有 label，由独立 scatter 系列承载 }, itemStyle: { color: (params) => { @@ -264,6 +202,76 @@ export default { borderWidth: 0 }, data: data.reals || [] + }, + // 独立 Label 系列（scatter，zlevel 最高，确保 label 在最上层） + { + name: '__实际差值标签', + type: 'scatter', + yAxisIndex: 0, + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (data.reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [32, 0], + width: 100, + height: 22, + formatter: () => { + const diff = data.diff || []; + const flags = data.flags || []; + const currentDiff = diff[index] || 0; + const currentFlag = flags[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 26, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 14 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 14 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 14 + } + } + } + })) } ] }; diff --git a/src/views/home/unitPriceAnalysisComponents/operatingLineChart.vue b/src/views/home/unitPriceAnalysisComponents/operatingLineChart.vue index 940d5073..caf1e1f6 100644 --- a/src/views/home/unitPriceAnalysisComponents/operatingLineChart.vue +++ b/src/views/home/unitPriceAnalysisComponents/operatingLineChart.vue @@ -80,24 +80,6 @@ export default { this.$emit('sort-change', value); }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如80代表80%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, - /** * 核心处理函数：解析thisMonData，组装集团和工厂数据 */ @@ -116,7 +98,7 @@ getRateFlag(rate, real, target) { diff: [ksxnData.diff], reals: [ksxnData.real], rate: [ksxnData.completeRate], - flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)], + flags: [ksxnData.completeRate>=100?1:0], thb: [ksxnData.thb] // 新增thb字段（如果子组件需要） }; @@ -131,7 +113,7 @@ getRateFlag(rate, real, target) { diff: factoryDataList.map(item => item.diff || 0), // 差值 reals: factoryDataList.map(item => item.real || 0), // 实际值 rates: factoryDataList.map(item => item.completeRate || 0), // 完成率 - flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识 + flags: factoryDataList.map(item => item.completeRate >= 100 ? 1 : 0), // 完成率标识 thb: factoryDataList.map(item => item.thb || 0) // thb字段 }; diff --git a/src/views/home/unitPriceAnalysisComponents/operatingLineChartCumulative.vue b/src/views/home/unitPriceAnalysisComponents/operatingLineChartCumulative.vue index 3109bec6..8a34509b 100644 --- a/src/views/home/unitPriceAnalysisComponents/operatingLineChartCumulative.vue +++ b/src/views/home/unitPriceAnalysisComponents/operatingLineChartCumulative.vue @@ -80,24 +80,6 @@ export default { this.$emit('sort-change', value); }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如80代表80%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, - /** * 核心处理函数：解析thisMonData，组装集团和工厂数据 */ @@ -116,7 +98,7 @@ getRateFlag(rate, real, target) { diff: [ksxnData.diff], reals: [ksxnData.real], rate: [ksxnData.completeRate], - flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)], + flags: [ksxnData.completeRate>=100?1:0], thb: [ksxnData.thb] // 新增thb字段（如果子组件需要） }; @@ -131,7 +113,7 @@ getRateFlag(rate, real, target) { diff: factoryDataList.map(item => item.diff || 0), // 差值 reals: factoryDataList.map(item => item.real || 0), // 实际值 rates: factoryDataList.map(item => item.completeRate || 0), // 完成率 - flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识 + flags: factoryDataList.map(item => item.completeRate>=100?1:0), // 完成率标识 thb: factoryDataList.map(item => item.thb || 0) // thb字段 }; diff --git a/src/views/home/unitPriceAnalysisComponents/proDataTrendBar.vue b/src/views/home/unitPriceAnalysisComponents/proDataTrendBar.vue index 518b172f..de01138f 100644 --- a/src/views/home/unitPriceAnalysisComponents/proDataTrendBar.vue +++ b/src/views/home/unitPriceAnalysisComponents/proDataTrendBar.vue @@ -141,86 +141,7 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - label: { - show: true, - position: 'top', - offset: [30, 0], - width: 68, - height: 20, - formatter: (params) => { - const diff = diffs || []; - const flags = flags || []; - const currentDiff = diff[params.dataIndex] || 0; - const currentFlag = flags[params.dataIndex] || 0; - - const prefix = currentFlag === 1 ? '+' : '-'; - - // 根据标志位选择不同的样式类 - if (currentFlag === 1) { - // 达标 - 使用 rate-achieved 样式 - return `{achieved|${currentDiff}}{text|差值}`; - } else { - // 未达标 - 使用 rate-unachieved 样式 - return `{unachieved|${currentDiff}}{text|差值}`; - } - }, - backgroundColor: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, - { offset: 0.2, color: '#ffffff' }, - { offset: 1, color: '#ffffff' } - ] - }, - shadowColor: 'rgba(191,203,215,0.5)', - shadowBlur: 2, - shadowOffsetX: 0, - shadowOffsetY: 2, - borderRadius: 4, - borderColor: '#BFCBD577', - borderWidth: 0, - lineHeight: 20, - rich: { - text: { - width: 'auto', - padding: [5, 10, 5, 0], - align: 'center', - color: '#464646', - fontSize: 11, - lineHeight: 20 - }, - achieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#76DABE', // 与达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - }, - // 未达标样式 - unachieved: { - width: 'auto', - padding: [5, 0, 5, 10], - align: 'center', - color: '#F9A44A', // 与未达标的 offset: 1 颜色一致 - fontSize: 11, - lineHeight: 20 - } - } - }, - // itemStyle: { - // color: { - // type: 'linear', - // x: 0, y: 0, x2: 0, y2: 1, - // colorStops: [ - // { offset: 0, color: 'rgba(174, 239, 224, 1)' }, - // { offset: 1, color: 'rgba(118, 218, 190, 1)' } - // ] - // }, - // borderRadius: [4, 4, 0, 0], - // borderWidth: 0 - // }, + label: { show: false }, itemStyle: { color: (params) => { const safeFlag = flags || []; @@ -247,6 +168,76 @@ export default { borderWidth: 0 }, data: reals || [] + }, + // 差值标签（散点图，独立层级） + { + name: '__实际差值标签', + type: 'scatter', + zlevel: 1, + symbolSize: 0, + tooltip: { show: false }, + data: (reals || []).map((value, index) => ({ + value: value, + label: { + show: true, + position: 'top', + offset: [30, 0], + width: 68, + height: 20, + formatter: () => { + const currentDiff = (diffs || [])[index] || 0; + const currentFlag = (flags || [])[index] || 0; + if (currentFlag === 1) { + return `{achieved|${currentDiff}}{text|差值}`; + } else { + return `{unachieved|${currentDiff}}{text|差值}`; + } + }, + backgroundColor: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, + { offset: 0.2, color: '#ffffff' }, + { offset: 1, color: '#ffffff' } + ] + }, + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + borderRadius: 4, + borderColor: '#BFCBD577', + borderWidth: 0, + lineHeight: 20, + rich: { + text: { + width: 'auto', + padding: [5, 10, 5, 0], + align: 'center', + color: '#464646', + fontSize: 11, + lineHeight: 20 + }, + achieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#76DABE', + fontSize: 11, + lineHeight: 20 + }, + unachieved: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#F9A44A', + fontSize: 11, + lineHeight: 20 + } + } + } + })) } ] }; diff --git a/src/views/home/unitPriceAnalysisComponents/totalOverview.vue b/src/views/home/unitPriceAnalysisComponents/totalOverview.vue index 90388855..af79e9bd 100644 --- a/src/views/home/unitPriceAnalysisComponents/totalOverview.vue +++ b/src/views/home/unitPriceAnalysisComponents/totalOverview.vue @@ -19,9 +19,6 @@
-
@@ -38,9 +35,6 @@ import Container from './container.vue' import electricityGauge from './electricityGauge.vue' import verticalBarChart from './verticalBarChart.vue' -// import * as echarts from 'echarts' -// import rawItem from './raw-Item.vue' - export default { name: 'ProductionStatus', components: { Container, electricityGauge, verticalBarChart }, @@ -90,7 +84,7 @@ export default { target: 0, thb: 0, ...rawData, - flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段 + flag: rawData.completeRate >= 100 ? 1 : 0 // 根据完成率计算flag }; } }, @@ -103,24 +97,7 @@ export default { return 0; } return value; - }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ - getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; - }, + } } } diff --git a/src/views/home/unitPriceAnalysisComponents/yearRelatedMetrics.vue b/src/views/home/unitPriceAnalysisComponents/yearRelatedMetrics.vue index 52b1402c..f47e389a 100644 --- a/src/views/home/unitPriceAnalysisComponents/yearRelatedMetrics.vue +++ b/src/views/home/unitPriceAnalysisComponents/yearRelatedMetrics.vue @@ -90,7 +90,7 @@ export default { const data = list.find(item => item && item.title === def.name) || fallback const detailData = { ...data, - flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target), + flag:data.completeRate >= 100 ? 1 : 0, } return { ...def, @@ -138,23 +138,6 @@ export default { } }) }, - /** - * 判断完成率对应的flag值（<100为0，≥100为1） - * @param {number} rate 完成率（原始值，如89代表89%） - * @returns {0|1} flag值 - */ -getRateFlag(rate, real, target) { - if (isNaN(rate) || rate === null || rate === undefined) return 0; - - // 1. 完成率 >= 100 => 达标 - if (rate >= 100) return 1; - - // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标 - if (rate === 0 && target === 0) return 1; - - // 其他情况 => 未达标 - return 0; -}, /** * 图表更新方法：可在这里补充全局的图表刷新逻辑