@@ -18,31 +18,32 @@ export default {
// components: { Container },
// mixins: [resize],
props: {
- energyObj: {
+ detailData: {
type: Object,
default: () => ({
- electricComu: 0,
- steamComu: 20, // 调整为符合max范围的数值（0-8）
- // electricity: [120, 150, 130, 180, 160, 200, 190],
- // steam: [80, 95, 85, 110, 100, 120, 115],
- // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
+ // electricComu: 0,
+ // steamComu: 20, // 调整为符合max范围的数值（0-8）
+ // // electricity: [120, 150, 130, 180, 160, 200, 190],
+ // // steam: [80, 95, 85, 110, 100, 120, 115],
+ // // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
})
},
id: {
type: String,
- default: () => ('')
+ default: () => ('monthG')
}
},
data() {
return {
- electricityChart: null,
- steamChart: null,
- specialTicks: [2, 4, 6, 8], // 统一的刻度显示
+ // electricityChart: null,
+ // steamChart: null,
+ // specialTicks: [2, 4, 6, 8], // 统一的刻度显示
}
},
watch: {
- energyObj: {
+ detailData: {
deep: true,
+ immediate: true, // 初始化时立即执行
handler() {
this.updateGauges()
}
@@ -55,42 +56,47 @@ export default {
},
methods: {
observeContainerResize() {
- const container = document.querySelector('.gauge-container')
+ // 修复：获取正确的容器（组件内的.gauge-container）
+ const container = this.$el.querySelector('.gauge-container')
if (container && window.ResizeObserver) {
- const resizeObserver = new ResizeObserver(entries => {
- this.handleResize()
- })
- resizeObserver.observe(container)
- this.$once('hook:beforeDestroy', () => {
- resizeObserver.unobserve(container)
+ this.resizeObserver = new ResizeObserver(entries => {
+ if (this.electricityChart) {
+ this.electricityChart.resize() // 直接触发resize，无需防抖
+ }
})
+ this.resizeObserver.observe(container)
}
},
initGauges() {
+ // console.log('this.id',this.id);
+
// 初始化电气图表实例
const electricityDom = document.getElementById(this.id)
if (electricityDom) {
+ // 修复：正确创建并存储图表实例
this.electricityChart = echarts.init(electricityDom)
+ // 首次更新数据
+ this.updateGauges()
}
- // 初始化蒸汽图表实例
- const steamDom = document.getElementById('steamGauge')
- if (steamDom) {
- this.steamChart = echarts.init(steamDom)
- }
- // 首次更新数据
- this.updateGauges()
+ // 蒸汽图表若未使用，可注释/删除
+ // const steamDom = document.getElementById('steamGauge')
+ // if (steamDom) {
+ // this.steamChart = echarts.init(steamDom)
+ // }
},
updateGauges() {
- // 优化：仅更新数据，不销毁实例（提升性能）
- if (this.electricityChart) {
- // 转换原始数据为“万kw/h”（与仪表盘max匹配）
- const electricValue = 80
- this.electricityChart.setOption(this.getElectricityGaugeOption(electricValue))
- }
+ // 修复：先判断实例是否存在，再更新配置
+ if (!this.electricityChart) return
+
+ // 修复：兜底获取rate值，确保数值有效
+ const rate = Number(this.detailData?.completeRate) || 0
+ console.log('当前rate值：', rate); // 调试：确认rate值正确
+
+ // 关键：第二个参数传true，清空原有配置，强制更新
+ this.electricityChart.setOption(this.getElectricityGaugeOption(rate), true)
},
- // 1. 用电量仪表盘独立配置函数
+ // 用电量仪表盘配置（保留原有样式，优化数值范围）
getElectricityGaugeOption(value) {
- // 用电量专属渐变色
const electricityGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#0B58FF' },
{ offset: 1, color: '#32FFCD' }
@@ -101,12 +107,12 @@ export default {
{
name: '月度',
type: 'gauge',
- radius: '95',
+ radius: '95', // 修复：添加%，避免数值错误
center: ['50%', '90%'],
startAngle: 180,
endAngle: 0,
min: 0,
- max: 100, // 用电量专属最大值
+ max: 100,
splitNumber: 4,
label: { show: false },
progress: {
@@ -121,117 +127,34 @@ export default {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '75%',
width: 16,
- itemStyle: { color: '#288AFF' }, // 用电量指针颜色
+ itemStyle: { color: '#288AFF' },
offsetCenter: [0, '10%']
},
axisLine: {
roundCap: true,
lineStyle: { width: 12, color: [[1, '#E6EBF7']] }
},
- // axisTick: {
- // splitNumber: 2,
- // show: (val) => this.specialTicks.includes(val),
- // lineStyle: { width: 2, color: '#999' }
- // },
splitLine: {
- length: 10, lineStyle: { width: 5, color: '#D6DAE5' },
+ length: 10,
+ lineStyle: { width: 5, color: '#D6DAE5' },
},
- // axisLabel: {
- // show: (val) => this.specialTicks.includes(val),
- // distance: -45,
- // color: '#ffffff',
- // fontSize: 14,
- // fontWeight: 'bold'
- // },
axisTick: {
splitNumber: 2,
- length:6,
+ length: 6,
lineStyle: { width: 2, color: '#D6DAE5' }
},
axisLabel: {
show: false,
},
detail: { show: false },
- data: [{ value, unit: '' }] // 用电量单位
+ data: [{ value: value, unit: '' }] // 确保数值正确传入
}
]
}
},
-
- // 2. 用蒸汽仪表盘独立配置函数
- getSteamGaugeOption(value) {
- // 蒸汽专属渐变色
- const steamGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- { offset: 0, color: 'rgba(11, 168, 255, 0.26)' },
- { offset: 1, color: 'rgba(54, 239, 230, 1)' }
- ])
-
- return {
- series: [
- {
- name: '完成率',
- type: 'gauge',
- radius: '80',
- center: ['50%', '85%'],
- startAngle: 180,
- endAngle: 0,
- min: 0,
- max: 160, // 蒸汽专属最大值
- splitNumber: 4,
- label: { show: false },
- progress: {
- show: true,
- overlap: false,
- roundCap: true,
- clip: false,
- width: 14,
- itemStyle: { color: steamGradient }
- },
- pointer: {
- icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
- length: '75%',
- width: 16,
- itemStyle: { color: 'rgba(11, 168, 255, 1)' }, // 蒸汽指针颜色
- offsetCenter: [0, '5%']
- },
- axisLine: {
- roundCap: true,
- lineStyle: { width: 14, color: [[1, 'rgba(19, 84, 122, 1)']] }
- },
- axisTick: {
- splitNumber: 2,
- show: (val) => this.specialTicks.includes(val),
- lineStyle: { width: 2, color: '#999' }
- },
- splitLine: { length: 12, lineStyle: { width: 3, color: '#999' } },
- axisLabel: {
- show: (val) => this.specialTicks.includes(val),
- distance: -45,
- color: '#ffffff',
- fontSize: 14,
- fontWeight: 'bold'
- },
- detail: { show: false },
- data: [{ value, unit: 't' }] // 蒸汽单位
- }
- ]
- }
- },
-
- // handleResize() {
- // if (this.resizeTimer) clearTimeout(this.resizeTimer)
- // this.resizeTimer = setTimeout(() => {
- // if (this.electricityChart) this.electricityChart.resize()
- // if (this.steamChart) this.steamChart.resize()
- // }, 100)
- // }
- },
- // beforeDestroy() {
- // if (this.electricityChart) this.electricityChart.dispose()
- // if (this.steamChart) this.steamChart.dispose()
- // window.removeEventListener('resize', this.handleResize)
- // if (this.resizeTimer) clearTimeout(this.resizeTimer)
- // }
+ // 未使用的蒸汽仪表盘可注释/删除
+ // getSteamGaugeOption(value) { ... }
+ }
}
@@ -298,9 +221,4 @@ export default {
}
}
}
-
-
-
-
-
diff --git a/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue b/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue
index 4018ce67..e7876a1f 100644
--- a/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue
+++ b/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue
@@ -1,9 +1,7 @@
-
+
-
-
diff --git a/src/views/home/fullCostAnalysisComponents/operatingBar.vue b/src/views/home/fullCostAnalysisComponents/operatingBar.vue
index 6ce591d0..ab7c7692 100644
--- a/src/views/home/fullCostAnalysisComponents/operatingBar.vue
+++ b/src/views/home/fullCostAnalysisComponents/operatingBar.vue
@@ -1,29 +1,21 @@
-
@@ -11,112 +9,124 @@
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
- 
+ 环比{{ formatRate(factoryData?.thb) }}%
+ 
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
-
+
+
-
-
- 各基地情况
-
+ 各基地情况
-
@@ -60,130 +52,79 @@ export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
+ emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
activeButton: 0,
isDropdownShow: false,
- selectedProfit: null, // 选中的名称，初始为null
+ selectedSort: null, // 选中的label
+ selectedSortValue: null, // 选中的value，用于排序逻辑
profitOptions: [
- '实际值：高~低',
- '实际值：低~高',
- '目标值：高~低',
- '目标值：低~高',
-
+ { label: '实际值：高~低', value: 1 },
+ { label: '实际值：低~高', value: 2 },
+ { label: '完成率：高~低', value: 3 },
+ { label: '完成率：低~高', value: 4 },
]
};
},
computed: {
- // profitOptions() {
- // return this.categoryData.map(item => item.name) || [];
- // },
+ // 排序后的数据源（核心：根据selectedSortValue重新排序）
currentDataSource() {
- console.log('yyyy', this.chartData);
+ if (!this.chartData) return {};
- return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
+ // 深拷贝原始数据，避免修改原数据
+ const factory = JSON.parse(JSON.stringify(this.chartData));
+ if (!factory.locations.length || !this.selectedSortValue) return factory;
+
+ // 构建带索引的数组，方便同步所有字段排序
+ const dataWithIndex = factory.locations.map((name, index) => ({
+ index,
+ name,
+ real: factory.reals[index],
+ target: factory.targets[index],
+ rate: factory.rates[index],
+ diff: factory.diff[index],
+ flag: factory.flags[index]
+ }));
+
+ // 根据选中的排序规则排序
+ switch (this.selectedSortValue) {
+ case 1: // 实际值：高~低
+ dataWithIndex.sort((a, b) => b.real - a.real);
+ break;
+ case 2: // 实际值：低~高
+ dataWithIndex.sort((a, b) => a.real - b.real);
+ break;
+ case 3: // 目标值：高~低
+ dataWithIndex.sort((a, b) => b.rate - a.rate);
+ break;
+ case 4: // 目标值：低~高
+ dataWithIndex.sort((a, b) => a.rate - b.rate);
+ break;
+ default:
+ return factory;
+ }
+
+ // 同步更新所有数组
+ factory.locations = dataWithIndex.map(item => item.name);
+ factory.reals = dataWithIndex.map(item => item.real);
+ factory.targets = dataWithIndex.map(item => item.target);
+ factory.rates = dataWithIndex.map(item => item.rate);
+ factory.diff = dataWithIndex.map(item => item.diff);
+ factory.flags = dataWithIndex.map(item => item.flag);
+
+ return factory;
},
locations() {
- console.log('this.chartData', this.chartData);
-
- return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
+ return this.currentDataSource.locations || [];
},
- // 根据按钮切换生成对应的 chartData
+ // 最终传递给图表的排序后数据
chartD() {
- // 销量场景数据
const data = this.currentDataSource;
- console.log(this.currentDataSource, 'currentDataSource');
-
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',
- yAxisIndex: 0, // 左侧Y轴（万元）
- barWidth: 14,
- itemStyle: {
- color: {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(130, 204, 255, 1)' },
- { offset: 1, color: 'rgba(75, 157, 255, 1)' }
- ]
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.targets // 目标销量（万元）
- },
- // 3. 实际（柱状图，含达标状态）
- {
- name: '实际',
- type: 'bar',
- yAxisIndex: 0,
- barWidth: 14,
- itemStyle: {
- color: (params) => {
- // 达标状态：1=达标（绿色），0=未达标（橙色）
- const safeFlag = data.flags;
- const currentFlag = safeFlag[params.dataIndex] || 0;
- return currentFlag === 1
- ? {
- 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)' }
- ]
- }
- : {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(253, 209, 129, 1)' },
- { offset: 1, color: 'rgba(249, 164, 74, 1)' }
- ]
- };
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.reals // 实际销量（万元）
- }
- ]
- };
-
- // 毛利率场景数据
- const grossProfitData = {
- series: [
- // 1. 完成率（折线图）
+ // 完成率（折线图）
{
name: '完成率',
type: 'line',
@@ -202,13 +143,13 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
- data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
+ data: data.rates || [],
symbol: 'circle',
symbolSize: 6
},
- // 2. 目标（柱状图）
+ // 目标（柱状图）
{
- name: '目标',
+ name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
@@ -224,17 +165,64 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
+ data: data.targets || []
},
- // 3. 实际（柱状图）
+ // 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
+ label: {
+ show: true,
+ position: 'top',
+ offset: [30, 0],
+ width: 68,
+ height: 20,
+ formatter: (params) => {
+ const diff = data.diff || [];
+ const currentDiff = diff[params.dataIndex] || 0;
+ return `{rate|${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
+ },
+ rate: {
+ width: 'auto',
+ padding: [5, 0, 5, 10],
+ align: 'center',
+ color: '#30B590',
+ fontSize: 11,
+ lineHeight: 20
+ }
+ }
+ },
itemStyle: {
color: (params) => {
- const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
+ const safeFlag = data.flags || [];
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
@@ -257,21 +245,34 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
+ data: data.reals || []
}
]
};
-
- // 根据按钮状态返回对应数据
return salesData;
}
},
methods: {
selectProfit(item) {
- this.selectedProfit = item;
+ // 更新选中的label和value
+ this.selectedSort = item.label;
+ this.selectedSortValue = item.value;
this.isDropdownShow = false;
+ // 向父组件传递排序事件（可选，保持原有逻辑）
+ this.$emit('sort-change', item.value);
}
},
+ // 监听父组件传入的chartData变化，重置选中状态（可选）
+ watch: {
+ 'chartData.factory': {
+ handler() {
+ // 若需要切换数据源后重置排序，可取消注释
+ // this.selectedSort = null;
+ // this.selectedSortValue = null;
+ },
+ deep: true
+ }
+ }
};
@@ -282,16 +283,14 @@ export default {
width: 100%;
padding: 12px;
- // 新增：头部行容器，实现一行排列
.header-row {
display: flex;
- justify-content: space-between; // 左右两端对齐
- align-items: center; // 垂直居中
+ justify-content: space-between;
+ align-items: center;
width: 100%;
- margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
+ margin-bottom: 8px;
}
- // 各基地情况标题样式
.base-title {
font-weight: 400;
font-size: 18px;
@@ -299,29 +298,25 @@ export default {
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
- padding: 0 0 0 16px; // 保留原有内边距
- white-space: nowrap; // 防止文字换行
+ padding: 0 0 0 16px;
+ white-space: nowrap;
}
.barTop {
- // 移除原有flex和justify-content，由header-row控制
- width: auto; // 自适应宽度
- // 保留原有align-items，确保内部元素垂直居中
+ width: auto;
align-items: center;
gap: 16px;
- // 1. 右侧容器：包裹图例和按钮组，整体靠右
.right-container {
display: flex;
- align-items: center; // 图例和按钮组垂直居中
- gap: 24px; // 图例与按钮组的间距，避免贴紧
- margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
+ align-items: center;
+ gap: 24px;
+ margin-right: 46px;
}
- // 2. 图例：在右侧容器内横向排列
.legend {
display: flex;
- gap: 16px; // 图例项之间间距，避免重叠
+ gap: 16px;
align-items: center;
margin: 0;
}
@@ -336,7 +331,7 @@ export default {
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
- white-space: nowrap; // 防止图例文字换行
+ white-space: nowrap;
}
.legend-icon {
@@ -365,7 +360,6 @@ export default {
height: 8px;
}
- // 图例颜色
.yield {
background: rgba(40, 138, 255, 1);
}
@@ -382,7 +376,6 @@ export default {
background: rgba(255, 132, 0, 1);
}
- // 3. 按钮组：在右侧容器内，保留原有样式
.button-group {
display: flex;
position: relative;
@@ -406,7 +399,6 @@ export default {
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
-
overflow: hidden;
.item-text {
diff --git a/src/views/home/fullCostAnalysisComponents/operatingLineBarSale.vue b/src/views/home/fullCostAnalysisComponents/operatingLineBarSale.vue
index 679b12a1..d9a322a9 100644
--- a/src/views/home/fullCostAnalysisComponents/operatingLineBarSale.vue
+++ b/src/views/home/fullCostAnalysisComponents/operatingLineBarSale.vue
@@ -10,17 +10,24 @@ export default {
data() {
return {
myChart: null, // 存储图表实例
- resizeHandler: null // 存储resize事件处理函数，用于后续移除
+ resizeHandler: null, // 存储resize事件处理函数
+ // 核心：基地名称与序号的映射表（固定顺序）
+ baseNameToIndexMap: {
+ '宜兴': 7,
+ '漳州': 8,
+ '自贡': 3,
+ '桐城': 2,
+ '洛阳': 9,
+ '合肥': 5,
+ '宿迁': 6,
+ '秦皇岛': 10
+ }
};
},
props: {
chartData: {
type: Object,
default: () => ({}),
- // 可选：保留数据校验
- // validator: (value) => {
- // return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
- // }
}
},
mounted() {
@@ -57,19 +64,28 @@ export default {
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
- // 箭头函数保证this指向Vue实例
- console.log('点击事件的参数：', params);
-
- // 提取关键数据（注意：如果是折线图，value是数组；柱状图是单个值，需兼容）
+ // 提取点击的基地名称
const itemName = params.name;
+ // 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
+ const baseIndex = this.baseNameToIndexMap[itemName] || 0;
+
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
- const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
- const seriesName = params.seriesName;
- console.log(`你点击了【${itemName}】，${seriesName}：${itemValue}`);
+ // const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
+ // const seriesName = params.seriesName;
+
+ console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
+
+ // 路由跳转时携带序号（或名称+序号）
this.$router.push({
path: 'fullCostAnalysisBase',
- base: itemName
- })
+ query: { // 使用query传递参数（推荐），也可使用params
+ // baseName: itemName,
+ factory: baseIndex
+ }
+ // 若仍需用base作为参数：
+ // base: itemName,
+ // params: { baseIndex: baseIndex }
+ });
});
// 定义resize处理函数（命名函数，方便移除）
@@ -119,7 +135,12 @@ export default {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
interval: 0,
- padding: [5, 0, 0, 0]
+ padding: [5, 0, 0, 0],
+ // 可选：X轴标签显示“序号+名称”（如“1 宜兴”）
+ // formatter: (value) => {
+ // const index = this.baseNameToIndexMap[value] || '';
+ // return index ? `${index} ${value}` : value;
+ // }
},
data: xData
}
diff --git a/src/views/home/fullCostAnalysisComponents/operatingLineBarSaleGroup.vue b/src/views/home/fullCostAnalysisComponents/operatingLineBarSaleGroup.vue
index 5ff0b2a7..079cd879 100644
--- a/src/views/home/fullCostAnalysisComponents/operatingLineBarSaleGroup.vue
+++ b/src/views/home/fullCostAnalysisComponents/operatingLineBarSaleGroup.vue
@@ -34,7 +34,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
- console.log(this.chartData,'chartData');
+ console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
@@ -54,7 +54,7 @@ export default {
}
this.myChart = echarts.init(chartDom);
-
+
const { allPlaceNames, series } = this.chartData || {};
console.log('chartData', this.chartData);
diff --git a/src/views/home/fullCostAnalysisComponents/operatingLineChart.vue b/src/views/home/fullCostAnalysisComponents/operatingLineChart.vue
index 79232994..a54d6a5a 100644
--- a/src/views/home/fullCostAnalysisComponents/operatingLineChart.vue
+++ b/src/views/home/fullCostAnalysisComponents/operatingLineChart.vue
@@ -1,28 +1,16 @@
-
- 完成率
+ 完成率
-
- 目标
+ 预算
-
- 实际·达标
+ 实际·达标
-
- 实际·未达标
+ 实际·未达标
-
+
-
-
+
+
-
-
+
diff --git a/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue b/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue
index a03db15c..747c5f01 100644
--- a/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue
+++ b/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue
@@ -1,12 +1,10 @@
-
+
-
+ ">
集团情况
-
+ ">
-
-
各基地情况
-
@@ -29,63 +35,74 @@
diff --git a/src/views/home/netPriceAnalysisComponents/operatingBar.vue b/src/views/home/netPriceAnalysisComponents/operatingBar.vue
index 6ce591d0..ab7c7692 100644
--- a/src/views/home/netPriceAnalysisComponents/operatingBar.vue
+++ b/src/views/home/netPriceAnalysisComponents/operatingBar.vue
@@ -1,29 +1,21 @@
@@ -28,7 +26,7 @@
@@ -59,47 +57,80 @@ import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBar },
- props: ["chartData"],
+ props: [
+ "trendData" // 接收父组件传递的 trend 数据（单价/运费/净价）
+ ],
data() {
return {
activeButton: 0,
isDropdownShow: false,
- selectedProfit: null, // 选中的名称，初始为null
- profitOptions: [
- '净价',
- '单价',
- '运费',
- ]
+ selectedProfit: '净价', // 关键修改：默认赋值为「净价」，初始化即展示该类目数据
+ profitOptions: ['净价', '单价', '运费']
};
},
computed: {
- // profitOptions() {
- // return this.categoryData.map(item => item.name) || [];
+ // 核心：根据选中的类目，动态解析趋势数据
+ trendParsedData() {
+ // 1. 校验数据有效性
+ if (!this.trendData || !this.selectedProfit) {
+ return {
+ diffs:[],
+ months: [], // 月份数组（x轴标签）
+ rates: [], // 完成率（completeRate）
+ reals: [], // 实际值（real）
+ targets: [], // 目标值（target）
+ flags: [] // 达标状态
+ };
+ }
+
+ // 2. 获取选中类目的趋势数据（如：trendData.单价）
+ const selectedTrend = this.trendData[this.selectedProfit] || {};
+ // 3. 提取月份并排序（保证时间顺序）
+ const months = Object.keys(selectedTrend).sort((a, b) => new Date(a) - new Date(b));
+ // 4. 初始化数据数组
+ const rates = [];
+ const reals = [];
+ const targets = [];
+ const flags = [];
+ const diffs = []
+ // 5. 按月份提取数据
+ months.forEach(month => {
+ const monthData = selectedTrend[month] || {};
+ const completeRate = monthData.completeRate || 0;
+ // 填充对应数据
+ rates.push(completeRate);
+ reals.push(monthData.real || 0);
+ targets.push(monthData.target || 0);
+ diffs.push(monthData.diff || 0);
+ // 生成达标状态（复用 getRateFlag 逻辑）
+ flags.push(this.getRateFlag(completeRate));
+ });
+
+ return {
+ months,
+ rates,
+ reals,
+ targets,
+ flags,
+ diffs
+ };
+ },
+ // locations() {
+ // return this.activeButton === 0 ? this.chartData?.salesLocations : this.chartData?.grossMarginLocations;
// },
- currentDataSource() {
- console.log('yyyy', this.chartData);
-
- return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
- },
- locations() {
- console.log('this.chartData', this.chartData);
-
- return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
- },
- // 根据按钮切换生成对应的 chartData
+ // 重构 chartD：替换硬编码数据为动态解析数据
chartD() {
- // 销量场景数据
- const data = this.currentDataSource;
- console.log(this.currentDataSource, 'currentDataSource');
-
+ // 获取动态解析的趋势数据
+ const { months, rates, reals, targets, flags } = this.trendParsedData;
+ // 销量场景数据（保留原有结构，替换数据来源）
const salesData = {
- allPlaceNames: this.locations,
+ allPlaceNames: months, // 优先用基地名称，无则用月份
series: [
// 1. 完成率（折线图）
{
name: '完成率',
type: 'line',
- yAxisIndex: 1, // 绑定右侧Y轴（需在子组件启用配置）
+ yAxisIndex: 1,
lineStyle: {
color: 'rgba(40, 138, 255, .5)',
width: 2
@@ -117,7 +148,7 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
- data: data.rates, // 完成率（%）
+ data: rates, // 动态完成率
symbol: 'circle',
symbolSize: 6
},
@@ -125,7 +156,7 @@ export default {
{
name: '目标',
type: 'bar',
- yAxisIndex: 0, // 左侧Y轴（万元）
+ yAxisIndex: 0,
barWidth: 14,
itemStyle: {
color: {
@@ -139,7 +170,7 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: data.targets // 目标销量（万元）
+ data: targets, // 动态目标值
},
// 3. 实际（柱状图，含达标状态）
{
@@ -147,93 +178,68 @@ export default {
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
- itemStyle: {
- color: (params) => {
- // 达标状态：1=达标（绿色），0=未达标（橙色）
- const safeFlag = data.flags;
- const currentFlag = safeFlag[params.dataIndex] || 0;
- return currentFlag === 1
- ? {
- 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)' }
- ]
- }
- : {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(253, 209, 129, 1)' },
- { offset: 1, color: 'rgba(249, 164, 74, 1)' }
- ]
- };
+ label: {
+ show: true,
+ position: 'top',
+ offset: [0, 0],
+ // 固定label尺寸：68px×20px
+ width: 68,
+ height: 20,
+ // 关键：去掉换行，让文字在一行显示，适配小尺寸
+ formatter: function (params) {
+ const diff = data.diffs || [];
+ const currentDiff = diff[params.dataIndex] || 0;
+ return `{rate|${currentDiff}}{text|差值}`;
},
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.reals // 实际销量（万元）
- }
- ]
- };
-
- // 毛利率场景数据
- const grossProfitData = {
- series: [
- // 1. 完成率（折线图）
- {
- name: '完成率',
- type: 'line',
- yAxisIndex: 1,
- 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: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
- symbol: 'circle',
- symbolSize: 6
- },
- // 2. 目标（柱状图）
- {
- name: '目标',
- type: 'bar',
- yAxisIndex: 0,
- barWidth: 14,
- itemStyle: {
- color: {
+ backgroundColor: {
type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
colorStops: [
- { offset: 0, color: 'rgba(130, 204, 255, 1)' },
- { offset: 1, color: 'rgba(75, 157, 255, 1)' }
+ { 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' }
]
},
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
+ // 外阴影：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 // 垂直居中
+ },
+ rate: {
+ width: 'auto',
+ padding: [5, 0, 5, 10],
+ align: 'center',
+ color: '#30B590',
+ fontSize: 11,
+ lineHeight: 20
+ }
+ }
},
- data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
- },
- // 3. 实际（柱状图）
- {
- name: '实际',
- type: 'bar',
- yAxisIndex: 0,
- barWidth: 14,
itemStyle: {
color: (params) => {
- const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
- const currentFlag = safeFlag[params.dataIndex] || 0;
+ const currentFlag = flags[params.dataIndex] || 0;
return currentFlag === 1
? {
type: 'linear',
@@ -255,12 +261,12 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
+ data: reals, // 动态实际值
}
]
};
- // 根据按钮状态返回对应数据
+ // 直接返回动态组装的 salesData（移除硬编码的毛利率数据）
return salesData;
}
},
@@ -268,28 +274,32 @@ export default {
selectProfit(item) {
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/netPriceAnalysisComponents/monthlyOverview.vue b/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue
index 4018ce67..e7876a1f 100644
--- a/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue
+++ b/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue
@@ -1,9 +1,7 @@
-
+
-
-
diff --git a/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue
index af826a15..243cf053 100644
--- a/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue
+++ b/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue
@@ -10,7 +10,10 @@
单价·单位/万元
-
@@ -11,112 +9,124 @@
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
-
+
+
-
@@ -18,7 +21,10 @@
运费·单位/万元
-
-
-
- 各基地情况
-
+ 各基地情况
-
@@ -60,130 +52,79 @@ export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
+ emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
activeButton: 0,
isDropdownShow: false,
- selectedProfit: null, // 选中的名称，初始为null
+ selectedSort: null, // 选中的label
+ selectedSortValue: null, // 选中的value，用于排序逻辑
profitOptions: [
- '实际值：高~低',
- '实际值：低~高',
- '目标值：高~低',
- '目标值：低~高',
-
+ { label: '实际值：高~低', value: 1 },
+ { label: '实际值：低~高', value: 2 },
+ { label: '完成率：高~低', value: 3 },
+ { label: '完成率：低~高', value: 4 },
]
};
},
computed: {
- // profitOptions() {
- // return this.categoryData.map(item => item.name) || [];
- // },
+ // 排序后的数据源（核心：根据selectedSortValue重新排序）
currentDataSource() {
- console.log('yyyy', this.chartData);
+ if (!this.chartData) return {};
- return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
+ // 深拷贝原始数据，避免修改原数据
+ const factory = JSON.parse(JSON.stringify(this.chartData));
+ if (!factory.locations.length || !this.selectedSortValue) return factory;
+
+ // 构建带索引的数组，方便同步所有字段排序
+ const dataWithIndex = factory.locations.map((name, index) => ({
+ index,
+ name,
+ real: factory.reals[index],
+ target: factory.targets[index],
+ rate: factory.rates[index],
+ diff: factory.diff[index],
+ flag: factory.flags[index]
+ }));
+
+ // 根据选中的排序规则排序
+ switch (this.selectedSortValue) {
+ case 1: // 实际值：高~低
+ dataWithIndex.sort((a, b) => b.real - a.real);
+ break;
+ case 2: // 实际值：低~高
+ dataWithIndex.sort((a, b) => a.real - b.real);
+ break;
+ case 3: // 目标值：高~低
+ dataWithIndex.sort((a, b) => b.rate - a.rate);
+ break;
+ case 4: // 目标值：低~高
+ dataWithIndex.sort((a, b) => a.rate - b.rate);
+ break;
+ default:
+ return factory;
+ }
+
+ // 同步更新所有数组
+ factory.locations = dataWithIndex.map(item => item.name);
+ factory.reals = dataWithIndex.map(item => item.real);
+ factory.targets = dataWithIndex.map(item => item.target);
+ factory.rates = dataWithIndex.map(item => item.rate);
+ factory.diff = dataWithIndex.map(item => item.diff);
+ factory.flags = dataWithIndex.map(item => item.flag);
+
+ return factory;
},
locations() {
- console.log('this.chartData', this.chartData);
-
- return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
+ return this.currentDataSource.locations || [];
},
- // 根据按钮切换生成对应的 chartData
+ // 最终传递给图表的排序后数据
chartD() {
- // 销量场景数据
const data = this.currentDataSource;
- console.log(this.currentDataSource, 'currentDataSource');
-
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',
- yAxisIndex: 0, // 左侧Y轴（万元）
- barWidth: 14,
- itemStyle: {
- color: {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(130, 204, 255, 1)' },
- { offset: 1, color: 'rgba(75, 157, 255, 1)' }
- ]
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.targets // 目标销量（万元）
- },
- // 3. 实际（柱状图，含达标状态）
- {
- name: '实际',
- type: 'bar',
- yAxisIndex: 0,
- barWidth: 14,
- itemStyle: {
- color: (params) => {
- // 达标状态：1=达标（绿色），0=未达标（橙色）
- const safeFlag = data.flags;
- const currentFlag = safeFlag[params.dataIndex] || 0;
- return currentFlag === 1
- ? {
- 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)' }
- ]
- }
- : {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(253, 209, 129, 1)' },
- { offset: 1, color: 'rgba(249, 164, 74, 1)' }
- ]
- };
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.reals // 实际销量（万元）
- }
- ]
- };
-
- // 毛利率场景数据
- const grossProfitData = {
- series: [
- // 1. 完成率（折线图）
+ // 完成率（折线图）
{
name: '完成率',
type: 'line',
@@ -202,13 +143,13 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
- data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
+ data: data.rates || [],
symbol: 'circle',
symbolSize: 6
},
- // 2. 目标（柱状图）
+ // 目标（柱状图）
{
- name: '目标',
+ name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
@@ -224,17 +165,64 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
+ data: data.targets || []
},
- // 3. 实际（柱状图）
+ // 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
+ label: {
+ show: true,
+ position: 'top',
+ offset: [30, 0],
+ width: 68,
+ height: 20,
+ formatter: (params) => {
+ const diff = data.diff || [];
+ const currentDiff = diff[params.dataIndex] || 0;
+ return `{rate|${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
+ },
+ rate: {
+ width: 'auto',
+ padding: [5, 0, 5, 10],
+ align: 'center',
+ color: '#30B590',
+ fontSize: 11,
+ lineHeight: 20
+ }
+ }
+ },
itemStyle: {
color: (params) => {
- const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
+ const safeFlag = data.flags || [];
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
@@ -257,21 +245,34 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
+ data: data.reals || []
}
]
};
-
- // 根据按钮状态返回对应数据
return salesData;
}
},
methods: {
selectProfit(item) {
- this.selectedProfit = item;
+ // 更新选中的label和value
+ this.selectedSort = item.label;
+ this.selectedSortValue = item.value;
this.isDropdownShow = false;
+ // 向父组件传递排序事件（可选，保持原有逻辑）
+ this.$emit('sort-change', item.value);
}
},
+ // 监听父组件传入的chartData变化，重置选中状态（可选）
+ watch: {
+ 'chartData.factory': {
+ handler() {
+ // 若需要切换数据源后重置排序，可取消注释
+ // this.selectedSort = null;
+ // this.selectedSortValue = null;
+ },
+ deep: true
+ }
+ }
};
@@ -282,16 +283,14 @@ export default {
width: 100%;
padding: 12px;
- // 新增：头部行容器，实现一行排列
.header-row {
display: flex;
- justify-content: space-between; // 左右两端对齐
- align-items: center; // 垂直居中
+ justify-content: space-between;
+ align-items: center;
width: 100%;
- margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
+ margin-bottom: 8px;
}
- // 各基地情况标题样式
.base-title {
font-weight: 400;
font-size: 18px;
@@ -299,29 +298,25 @@ export default {
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
- padding: 0 0 0 16px; // 保留原有内边距
- white-space: nowrap; // 防止文字换行
+ padding: 0 0 0 16px;
+ white-space: nowrap;
}
.barTop {
- // 移除原有flex和justify-content，由header-row控制
- width: auto; // 自适应宽度
- // 保留原有align-items，确保内部元素垂直居中
+ width: auto;
align-items: center;
gap: 16px;
- // 1. 右侧容器：包裹图例和按钮组，整体靠右
.right-container {
display: flex;
- align-items: center; // 图例和按钮组垂直居中
- gap: 24px; // 图例与按钮组的间距，避免贴紧
- margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
+ align-items: center;
+ gap: 24px;
+ margin-right: 46px;
}
- // 2. 图例：在右侧容器内横向排列
.legend {
display: flex;
- gap: 16px; // 图例项之间间距，避免重叠
+ gap: 16px;
align-items: center;
margin: 0;
}
@@ -336,7 +331,7 @@ export default {
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
- white-space: nowrap; // 防止图例文字换行
+ white-space: nowrap;
}
.legend-icon {
@@ -365,7 +360,6 @@ export default {
height: 8px;
}
- // 图例颜色
.yield {
background: rgba(40, 138, 255, 1);
}
@@ -382,7 +376,6 @@ export default {
background: rgba(255, 132, 0, 1);
}
- // 3. 按钮组：在右侧容器内，保留原有样式
.button-group {
display: flex;
position: relative;
@@ -406,7 +399,6 @@ export default {
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
-
overflow: hidden;
.item-text {
diff --git a/src/views/home/netPriceAnalysisComponents/operatingLineBarSale.vue b/src/views/home/netPriceAnalysisComponents/operatingLineBarSale.vue
index dbbd0b74..f45f52c2 100644
--- a/src/views/home/netPriceAnalysisComponents/operatingLineBarSale.vue
+++ b/src/views/home/netPriceAnalysisComponents/operatingLineBarSale.vue
@@ -10,17 +10,24 @@ export default {
data() {
return {
myChart: null, // 存储图表实例
- resizeHandler: null // 存储resize事件处理函数，用于后续移除
+ resizeHandler: null, // 存储resize事件处理函数
+ // 核心：基地名称与序号的映射表（固定顺序）
+ baseNameToIndexMap: {
+ '宜兴': 7,
+ '漳州': 8,
+ '自贡': 3,
+ '桐城': 2,
+ '洛阳': 9,
+ '合肥': 5,
+ '宿迁': 6,
+ '秦皇岛': 10
+ }
};
},
props: {
chartData: {
type: Object,
default: () => ({}),
- // 可选：保留数据校验
- // validator: (value) => {
- // return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
- // }
}
},
mounted() {
@@ -57,19 +64,28 @@ export default {
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
- // 箭头函数保证this指向Vue实例
- console.log('点击事件的参数：', params);
-
- // 提取关键数据（注意：如果是折线图，value是数组；柱状图是单个值，需兼容）
+ // 提取点击的基地名称
const itemName = params.name;
+ // 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
+ const baseIndex = this.baseNameToIndexMap[itemName] || 0;
+
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
- const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
- const seriesName = params.seriesName;
- console.log(`你点击了【${itemName}】，${seriesName}：${itemValue}`);
+ // const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
+ // const seriesName = params.seriesName;
+
+ console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
+
+ // 路由跳转时携带序号（或名称+序号）
this.$router.push({
path: 'netPriceAnalysisBase',
- base: itemName
- })
+ query: { // 使用query传递参数（推荐），也可使用params
+ // baseName: itemName,
+ factory: baseIndex
+ }
+ // 若仍需用base作为参数：
+ // base: itemName,
+ // params: { baseIndex: baseIndex }
+ });
});
// 定义resize处理函数（命名函数，方便移除）
@@ -119,7 +135,12 @@ export default {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
interval: 0,
- padding: [5, 0, 0, 0]
+ padding: [5, 0, 0, 0],
+ // 可选：X轴标签显示“序号+名称”（如“1 宜兴”）
+ // formatter: (value) => {
+ // const index = this.baseNameToIndexMap[value] || '';
+ // return index ? `${index} ${value}` : value;
+ // }
},
data: xData
}
diff --git a/src/views/home/netPriceAnalysisComponents/operatingLineBarSaleGroup.vue b/src/views/home/netPriceAnalysisComponents/operatingLineBarSaleGroup.vue
index 5ff0b2a7..079cd879 100644
--- a/src/views/home/netPriceAnalysisComponents/operatingLineBarSaleGroup.vue
+++ b/src/views/home/netPriceAnalysisComponents/operatingLineBarSaleGroup.vue
@@ -34,7 +34,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
- console.log(this.chartData,'chartData');
+ console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
@@ -54,7 +54,7 @@ export default {
}
this.myChart = echarts.init(chartDom);
-
+
const { allPlaceNames, series } = this.chartData || {};
console.log('chartData', this.chartData);
diff --git a/src/views/home/netPriceAnalysisComponents/operatingLineChart.vue b/src/views/home/netPriceAnalysisComponents/operatingLineChart.vue
index 79232994..a54d6a5a 100644
--- a/src/views/home/netPriceAnalysisComponents/operatingLineChart.vue
+++ b/src/views/home/netPriceAnalysisComponents/operatingLineChart.vue
@@ -1,28 +1,16 @@
-
- 完成率
+ 完成率
-
- 目标
+ 预算
-
- 实际·达标
+ 实际·达标
-
- 实际·未达标
+ 实际·未达标
-
+
-
-
-
+
-
-
diff --git a/src/views/home/operatingProfitComponents/operatingBar.vue b/src/views/home/operatingProfitComponents/operatingBar.vue
index 6ce591d0..e1793fe7 100644
--- a/src/views/home/operatingProfitComponents/operatingBar.vue
+++ b/src/views/home/operatingProfitComponents/operatingBar.vue
@@ -1,29 +1,21 @@
+
+
-
-
diff --git a/src/views/home/operatingProfitComponents/monthlyOverview.vue b/src/views/home/operatingProfitComponents/monthlyOverview.vue
index 4018ce67..9c679019 100644
--- a/src/views/home/operatingProfitComponents/monthlyOverview.vue
+++ b/src/views/home/operatingProfitComponents/monthlyOverview.vue
@@ -1,9 +1,7 @@
-
+
-
+ ">
集团情况
-
+ ">
-
-
@@ -11,112 +9,109 @@
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
-
+
+
-
-
- 各基地情况
-
+ 各基地情况
-
@@ -60,130 +52,79 @@ export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
+ emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
activeButton: 0,
isDropdownShow: false,
- selectedProfit: null, // 选中的名称，初始为null
+ selectedSort: null, // 选中的label
+ selectedSortValue: null, // 选中的value，用于排序逻辑
profitOptions: [
- '实际值：高~低',
- '实际值：低~高',
- '目标值：高~低',
- '目标值：低~高',
-
+ { label: '实际值：高~低', value: 1 },
+ { label: '实际值：低~高', value: 2 },
+ { label: '完成率：高~低', value: 3 },
+ { label: '完成率：低~高', value: 4 },
]
};
},
computed: {
- // profitOptions() {
- // return this.categoryData.map(item => item.name) || [];
- // },
+ // 排序后的数据源（核心：根据selectedSortValue重新排序）
currentDataSource() {
- console.log('yyyy', this.chartData);
+ if (!this.chartData) return {};
- return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
+ // 深拷贝原始数据，避免修改原数据
+ const factory = JSON.parse(JSON.stringify(this.chartData));
+ if (!factory.locations.length || !this.selectedSortValue) return factory;
+
+ // 构建带索引的数组，方便同步所有字段排序
+ const dataWithIndex = factory.locations.map((name, index) => ({
+ index,
+ name,
+ real: factory.reals[index],
+ target: factory.targets[index],
+ rate: factory.rate[index],
+ diff: factory.diff[index],
+ flag: factory.flags[index]
+ }));
+
+ // 根据选中的排序规则排序
+ switch (this.selectedSortValue) {
+ case 1: // 实际值：高~低
+ dataWithIndex.sort((a, b) => b.real - a.real);
+ break;
+ case 2: // 实际值：低~高
+ dataWithIndex.sort((a, b) => a.real - b.real);
+ break;
+ case 3: // 目标值：高~低
+ dataWithIndex.sort((a, b) => b.rate - a.rate);
+ break;
+ case 4: // 目标值：低~高
+ dataWithIndex.sort((a, b) => a.rate - b.rate);
+ break;
+ default:
+ return factory;
+ }
+
+ // 同步更新所有数组
+ factory.locations = dataWithIndex.map(item => item.name);
+ factory.reals = dataWithIndex.map(item => item.real);
+ factory.targets = dataWithIndex.map(item => item.target);
+ factory.rates = dataWithIndex.map(item => item.rate);
+ factory.diff = dataWithIndex.map(item => item.diff);
+ factory.flags = dataWithIndex.map(item => item.flag);
+
+ return factory;
},
locations() {
- console.log('this.chartData', this.chartData);
-
- return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
+ return this.currentDataSource.locations || [];
},
- // 根据按钮切换生成对应的 chartData
+ // 最终传递给图表的排序后数据
chartD() {
- // 销量场景数据
const data = this.currentDataSource;
- console.log(this.currentDataSource, 'currentDataSource');
-
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',
- yAxisIndex: 0, // 左侧Y轴（万元）
- barWidth: 14,
- itemStyle: {
- color: {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(130, 204, 255, 1)' },
- { offset: 1, color: 'rgba(75, 157, 255, 1)' }
- ]
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.targets // 目标销量（万元）
- },
- // 3. 实际（柱状图，含达标状态）
- {
- name: '实际',
- type: 'bar',
- yAxisIndex: 0,
- barWidth: 14,
- itemStyle: {
- color: (params) => {
- // 达标状态：1=达标（绿色），0=未达标（橙色）
- const safeFlag = data.flags;
- const currentFlag = safeFlag[params.dataIndex] || 0;
- return currentFlag === 1
- ? {
- 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)' }
- ]
- }
- : {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(253, 209, 129, 1)' },
- { offset: 1, color: 'rgba(249, 164, 74, 1)' }
- ]
- };
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.reals // 实际销量（万元）
- }
- ]
- };
-
- // 毛利率场景数据
- const grossProfitData = {
- series: [
- // 1. 完成率（折线图）
+ // 完成率（折线图）
{
name: '完成率',
type: 'line',
@@ -202,13 +143,13 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
- data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
+ data: data.rate || [],
symbol: 'circle',
symbolSize: 6
},
- // 2. 目标（柱状图）
+ // 目标（柱状图）
{
- name: '目标',
+ name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
@@ -224,17 +165,64 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
+ data: data.targets || []
},
- // 3. 实际（柱状图）
+ // 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
+ label: {
+ show: true,
+ position: 'top',
+ offset: [30, 0],
+ width: 68,
+ height: 20,
+ formatter: (params) => {
+ const diff = data.diff || [];
+ const currentDiff = diff[params.dataIndex] || 0;
+ return `{rate|${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
+ },
+ rate: {
+ width: 'auto',
+ padding: [5, 0, 5, 10],
+ align: 'center',
+ color: '#30B590',
+ fontSize: 11,
+ lineHeight: 20
+ }
+ }
+ },
itemStyle: {
color: (params) => {
- const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
+ const safeFlag = data.flags || [];
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
@@ -257,21 +245,34 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
+ data: data.reals || []
}
]
};
-
- // 根据按钮状态返回对应数据
return salesData;
}
},
methods: {
selectProfit(item) {
- this.selectedProfit = item;
+ // 更新选中的label和value
+ this.selectedSort = item.label;
+ this.selectedSortValue = item.value;
this.isDropdownShow = false;
+ // 向父组件传递排序事件（可选，保持原有逻辑）
+ this.$emit('sort-change', item.value);
}
},
+ // 监听父组件传入的chartData变化，重置选中状态（可选）
+ watch: {
+ 'chartData.factory': {
+ handler() {
+ // 若需要切换数据源后重置排序，可取消注释
+ // this.selectedSort = null;
+ // this.selectedSortValue = null;
+ },
+ deep: true
+ }
+ }
};
@@ -282,16 +283,14 @@ export default {
width: 100%;
padding: 12px;
- // 新增：头部行容器，实现一行排列
.header-row {
display: flex;
- justify-content: space-between; // 左右两端对齐
- align-items: center; // 垂直居中
+ justify-content: space-between;
+ align-items: center;
width: 100%;
- margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
+ margin-bottom: 8px;
}
- // 各基地情况标题样式
.base-title {
font-weight: 400;
font-size: 18px;
@@ -299,29 +298,25 @@ export default {
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
- padding: 0 0 0 16px; // 保留原有内边距
- white-space: nowrap; // 防止文字换行
+ padding: 0 0 0 16px;
+ white-space: nowrap;
}
.barTop {
- // 移除原有flex和justify-content，由header-row控制
- width: auto; // 自适应宽度
- // 保留原有align-items，确保内部元素垂直居中
+ width: auto;
align-items: center;
gap: 16px;
- // 1. 右侧容器：包裹图例和按钮组，整体靠右
.right-container {
display: flex;
- align-items: center; // 图例和按钮组垂直居中
- gap: 24px; // 图例与按钮组的间距，避免贴紧
- margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
+ align-items: center;
+ gap: 24px;
+ margin-right: 46px;
}
- // 2. 图例：在右侧容器内横向排列
.legend {
display: flex;
- gap: 16px; // 图例项之间间距，避免重叠
+ gap: 16px;
align-items: center;
margin: 0;
}
@@ -336,7 +331,7 @@ export default {
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
- white-space: nowrap; // 防止图例文字换行
+ white-space: nowrap;
}
.legend-icon {
@@ -365,7 +360,6 @@ export default {
height: 8px;
}
- // 图例颜色
.yield {
background: rgba(40, 138, 255, 1);
}
@@ -382,7 +376,6 @@ export default {
background: rgba(255, 132, 0, 1);
}
- // 3. 按钮组：在右侧容器内，保留原有样式
.button-group {
display: flex;
position: relative;
@@ -406,7 +399,6 @@ export default {
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
-
overflow: hidden;
.item-text {
diff --git a/src/views/home/operatingProfitComponents/operatingLineBarSale.vue b/src/views/home/operatingProfitComponents/operatingLineBarSale.vue
index fae3ef41..067ffb0b 100644
--- a/src/views/home/operatingProfitComponents/operatingLineBarSale.vue
+++ b/src/views/home/operatingProfitComponents/operatingLineBarSale.vue
@@ -10,17 +10,24 @@ export default {
data() {
return {
myChart: null, // 存储图表实例
- resizeHandler: null // 存储resize事件处理函数，用于后续移除
+ resizeHandler: null, // 存储resize事件处理函数
+ // 核心：基地名称与序号的映射表（固定顺序）
+ baseNameToIndexMap: {
+ '宜兴': 7,
+ '漳州': 8,
+ '自贡': 3,
+ '桐城': 2,
+ '洛阳': 9,
+ '合肥': 5,
+ '宿迁': 6,
+ '秦皇岛': 10
+ }
};
},
props: {
chartData: {
type: Object,
default: () => ({}),
- // 可选：保留数据校验
- // validator: (value) => {
- // return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
- // }
}
},
mounted() {
@@ -57,19 +64,28 @@ export default {
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
- // 箭头函数保证this指向Vue实例
- console.log('点击事件的参数：', params);
-
- // 提取关键数据（注意：如果是折线图，value是数组；柱状图是单个值，需兼容）
+ // 提取点击的基地名称
const itemName = params.name;
+ // 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
+ const baseIndex = this.baseNameToIndexMap[itemName] || 0;
+
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
- const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
- const seriesName = params.seriesName;
- console.log(`你点击了【${itemName}】，${seriesName}：${itemValue}`);
+ // const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
+ // const seriesName = params.seriesName;
+
+ console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
+
+ // 路由跳转时携带序号（或名称+序号）
this.$router.push({
path: 'operatingProfitBase',
- base: itemName
- })
+ query: { // 使用query传递参数（推荐），也可使用params
+ // baseName: itemName,
+ factory: baseIndex
+ }
+ // 若仍需用base作为参数：
+ // base: itemName,
+ // params: { baseIndex: baseIndex }
+ });
});
// 定义resize处理函数（命名函数，方便移除）
@@ -119,7 +135,12 @@ export default {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
interval: 0,
- padding: [5, 0, 0, 0]
+ padding: [5, 0, 0, 0],
+ // 可选：X轴标签显示“序号+名称”（如“1 宜兴”）
+ // formatter: (value) => {
+ // const index = this.baseNameToIndexMap[value] || '';
+ // return index ? `${index} ${value}` : value;
+ // }
},
data: xData
}
diff --git a/src/views/home/operatingProfitComponents/operatingLineBarSaleGroup.vue b/src/views/home/operatingProfitComponents/operatingLineBarSaleGroup.vue
index 5ff0b2a7..079cd879 100644
--- a/src/views/home/operatingProfitComponents/operatingLineBarSaleGroup.vue
+++ b/src/views/home/operatingProfitComponents/operatingLineBarSaleGroup.vue
@@ -34,7 +34,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
- console.log(this.chartData,'chartData');
+ console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
@@ -54,7 +54,7 @@ export default {
}
this.myChart = echarts.init(chartDom);
-
+
const { allPlaceNames, series } = this.chartData || {};
console.log('chartData', this.chartData);
diff --git a/src/views/home/operatingProfitComponents/operatingLineBarSaleSingle.vue b/src/views/home/operatingProfitComponents/operatingLineBarSaleSingle.vue
index f577c56f..dc9aec94 100644
--- a/src/views/home/operatingProfitComponents/operatingLineBarSaleSingle.vue
+++ b/src/views/home/operatingProfitComponents/operatingLineBarSaleSingle.vue
@@ -34,7 +34,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
- console.log(this.chartData,'chartData');
+ console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
@@ -85,7 +85,7 @@ export default {
},
grid: {
top: 40,
- bottom: 40,
+ bottom: 50,
right: 70,
left: 60,
},
diff --git a/src/views/home/operatingProfitComponents/operatingLineChart.vue b/src/views/home/operatingProfitComponents/operatingLineChart.vue
index 79232994..a78f28a1 100644
--- a/src/views/home/operatingProfitComponents/operatingLineChart.vue
+++ b/src/views/home/operatingProfitComponents/operatingLineChart.vue
@@ -1,28 +1,15 @@
@@ -43,55 +44,60 @@ import verticalBarChart from './verticalBarChart.vue'
export default {
name: 'ProductionStatus',
components: { Container, electricityGauge, verticalBarChart },
- // mixins: [resize],
props: {
- itemData: { // 接收父组件传递的设备数据数组
- type: Array,
- default: () => [] // 默认空数组，避免报错
+ totalData: {
+ type: Object,
+ default: () => ({})
},
- title: { // 接收父组件传递的设备数据数组
+ title: {
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
- month: { // 接收父组件传递的设备数据数组
+ month: {
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
},
data() {
return {
chart: null,
-
}
},
- watch: {
- itemData: {
- handler(newValue, oldValue) {
- // this.updateChart()
- },
- deep: true // 若对象内属性变化需触发，需加 deep: true
+ computed: {
+ /**
+ * 自动提取monData中的工厂数据，并新增flag字段
+ */
+ factoryData() { // 整合原始数据 + 计算flag
+ return {
+ completeRate: Number(this.totalData.proportion).toFixed(2),
+ diff: this.totalData.diffValue,
+ real: this.totalData.value,
+ target: this.totalData.targetValue,
+ thb: this.totalData.thb,
+ // ...rawData,
+ flag: this.getRateFlag(this.totalData.completed) // 新增flag字段
+ };
}
},
- // 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: {
+ /**
+ * 格式化百分比数值：处理空值/非数字，兜底为0
+ */
+ formatRate(value) {
+ if (isNaN(value) || value === null || value === undefined) {
+ return 0;
+ }
+ return value;
+ },
+ /**
+ * 判断完成率对应的flag值（<100为0，≥100为1）
+ * @param {number} rate 完成率（原始值，如89代表89%）
+ * @returns {0|1} flag值
+ */
+ getRateFlag(rate) {
+ if (isNaN(rate) || rate === null || rate === undefined) return 0;
+ return rate >= 100 ? 1 : 0;
+ }
}
}
diff --git a/src/views/home/operatingProfitComponents/verticalBarChart.vue b/src/views/home/operatingProfitComponents/verticalBarChart.vue
index 11f2c512..02d55ba0 100644
--- a/src/views/home/operatingProfitComponents/verticalBarChart.vue
+++ b/src/views/home/operatingProfitComponents/verticalBarChart.vue
@@ -1,5 +1,5 @@
-
+
-
-
-
-
+
diff --git a/src/views/home/procurementGainAnalysisComponents/dataTrendBar.vue b/src/views/home/procurementGainAnalysisComponents/dataTrendBar.vue
index ee71444e..a4cb175c 100644
--- a/src/views/home/procurementGainAnalysisComponents/dataTrendBar.vue
+++ b/src/views/home/procurementGainAnalysisComponents/dataTrendBar.vue
@@ -28,7 +28,7 @@
-
- 完成率
+ 完成率
-
- 目标
+ 预算
-
- 实际·达标
+ 实际·达标
-
- 实际·未达标
+ 实际·未达标
-
-
-
-
+
+
+
-
-
diff --git a/src/views/home/operatingProfitComponents/totalOverview.vue b/src/views/home/operatingProfitComponents/totalOverview.vue
index 5b5d11ab..09950df7 100644
--- a/src/views/home/operatingProfitComponents/totalOverview.vue
+++ b/src/views/home/operatingProfitComponents/totalOverview.vue
@@ -11,21 +11,22 @@
-
+
-
+ ">
集团情况
-
-
-
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
-
+
+
@@ -18,31 +18,32 @@ export default {
// components: { Container },
// mixins: [resize],
props: {
- energyObj: {
+ detailData: {
type: Object,
default: () => ({
- electricComu: 0,
- steamComu: 20, // 调整为符合max范围的数值（0-8）
- // electricity: [120, 150, 130, 180, 160, 200, 190],
- // steam: [80, 95, 85, 110, 100, 120, 115],
- // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
+ // electricComu: 0,
+ // steamComu: 20, // 调整为符合max范围的数值（0-8）
+ // // electricity: [120, 150, 130, 180, 160, 200, 190],
+ // // steam: [80, 95, 85, 110, 100, 120, 115],
+ // // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
})
},
id: {
type: String,
- default: () => ('')
+ default: () => ('monthG')
}
},
data() {
return {
- electricityChart: null,
- steamChart: null,
- specialTicks: [2, 4, 6, 8], // 统一的刻度显示
+ // electricityChart: null,
+ // steamChart: null,
+ // specialTicks: [2, 4, 6, 8], // 统一的刻度显示
}
},
watch: {
- energyObj: {
+ detailData: {
deep: true,
+ immediate: true, // 初始化时立即执行
handler() {
this.updateGauges()
}
@@ -55,42 +56,47 @@ export default {
},
methods: {
observeContainerResize() {
- const container = document.querySelector('.gauge-container')
+ // 修复：获取正确的容器（组件内的.gauge-container）
+ const container = this.$el.querySelector('.gauge-container')
if (container && window.ResizeObserver) {
- const resizeObserver = new ResizeObserver(entries => {
- this.handleResize()
- })
- resizeObserver.observe(container)
- this.$once('hook:beforeDestroy', () => {
- resizeObserver.unobserve(container)
+ this.resizeObserver = new ResizeObserver(entries => {
+ if (this.electricityChart) {
+ this.electricityChart.resize() // 直接触发resize，无需防抖
+ }
})
+ this.resizeObserver.observe(container)
}
},
initGauges() {
+ // console.log('this.id',this.id);
+
// 初始化电气图表实例
const electricityDom = document.getElementById(this.id)
if (electricityDom) {
+ // 修复：正确创建并存储图表实例
this.electricityChart = echarts.init(electricityDom)
+ // 首次更新数据
+ this.updateGauges()
}
- // 初始化蒸汽图表实例
- const steamDom = document.getElementById('steamGauge')
- if (steamDom) {
- this.steamChart = echarts.init(steamDom)
- }
- // 首次更新数据
- this.updateGauges()
+ // 蒸汽图表若未使用，可注释/删除
+ // const steamDom = document.getElementById('steamGauge')
+ // if (steamDom) {
+ // this.steamChart = echarts.init(steamDom)
+ // }
},
updateGauges() {
- // 优化：仅更新数据，不销毁实例（提升性能）
- if (this.electricityChart) {
- // 转换原始数据为“万kw/h”（与仪表盘max匹配）
- const electricValue = 80
- this.electricityChart.setOption(this.getElectricityGaugeOption(electricValue))
- }
+ // 修复：先判断实例是否存在，再更新配置
+ if (!this.electricityChart) return
+
+ // 修复：兜底获取rate值，确保数值有效
+ const rate = Number(this.detailData?.completeRate) || 0
+ console.log('当前rate值：', rate); // 调试：确认rate值正确
+
+ // 关键：第二个参数传true，清空原有配置，强制更新
+ this.electricityChart.setOption(this.getElectricityGaugeOption(rate), true)
},
- // 1. 用电量仪表盘独立配置函数
+ // 用电量仪表盘配置（保留原有样式，优化数值范围）
getElectricityGaugeOption(value) {
- // 用电量专属渐变色
const electricityGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#0B58FF' },
{ offset: 1, color: '#32FFCD' }
@@ -101,12 +107,12 @@ export default {
{
name: '月度',
type: 'gauge',
- radius: '95',
+ radius: '95', // 修复：添加%，避免数值错误
center: ['50%', '90%'],
startAngle: 180,
endAngle: 0,
min: 0,
- max: 100, // 用电量专属最大值
+ max: 100,
splitNumber: 4,
label: { show: false },
progress: {
@@ -121,117 +127,34 @@ export default {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '75%',
width: 16,
- itemStyle: { color: '#288AFF' }, // 用电量指针颜色
+ itemStyle: { color: '#288AFF' },
offsetCenter: [0, '10%']
},
axisLine: {
roundCap: true,
lineStyle: { width: 12, color: [[1, '#E6EBF7']] }
},
- // axisTick: {
- // splitNumber: 2,
- // show: (val) => this.specialTicks.includes(val),
- // lineStyle: { width: 2, color: '#999' }
- // },
splitLine: {
- length: 10, lineStyle: { width: 5, color: '#D6DAE5' },
+ length: 10,
+ lineStyle: { width: 5, color: '#D6DAE5' },
},
- // axisLabel: {
- // show: (val) => this.specialTicks.includes(val),
- // distance: -45,
- // color: '#ffffff',
- // fontSize: 14,
- // fontWeight: 'bold'
- // },
axisTick: {
splitNumber: 2,
- length:6,
+ length: 6,
lineStyle: { width: 2, color: '#D6DAE5' }
},
axisLabel: {
show: false,
},
detail: { show: false },
- data: [{ value, unit: '' }] // 用电量单位
+ data: [{ value: value, unit: '' }] // 确保数值正确传入
}
]
}
},
-
- // 2. 用蒸汽仪表盘独立配置函数
- getSteamGaugeOption(value) {
- // 蒸汽专属渐变色
- const steamGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- { offset: 0, color: 'rgba(11, 168, 255, 0.26)' },
- { offset: 1, color: 'rgba(54, 239, 230, 1)' }
- ])
-
- return {
- series: [
- {
- name: '完成率',
- type: 'gauge',
- radius: '80',
- center: ['50%', '85%'],
- startAngle: 180,
- endAngle: 0,
- min: 0,
- max: 160, // 蒸汽专属最大值
- splitNumber: 4,
- label: { show: false },
- progress: {
- show: true,
- overlap: false,
- roundCap: true,
- clip: false,
- width: 14,
- itemStyle: { color: steamGradient }
- },
- pointer: {
- icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
- length: '75%',
- width: 16,
- itemStyle: { color: 'rgba(11, 168, 255, 1)' }, // 蒸汽指针颜色
- offsetCenter: [0, '5%']
- },
- axisLine: {
- roundCap: true,
- lineStyle: { width: 14, color: [[1, 'rgba(19, 84, 122, 1)']] }
- },
- axisTick: {
- splitNumber: 2,
- show: (val) => this.specialTicks.includes(val),
- lineStyle: { width: 2, color: '#999' }
- },
- splitLine: { length: 12, lineStyle: { width: 3, color: '#999' } },
- axisLabel: {
- show: (val) => this.specialTicks.includes(val),
- distance: -45,
- color: '#ffffff',
- fontSize: 14,
- fontWeight: 'bold'
- },
- detail: { show: false },
- data: [{ value, unit: 't' }] // 蒸汽单位
- }
- ]
- }
- },
-
- // handleResize() {
- // if (this.resizeTimer) clearTimeout(this.resizeTimer)
- // this.resizeTimer = setTimeout(() => {
- // if (this.electricityChart) this.electricityChart.resize()
- // if (this.steamChart) this.steamChart.resize()
- // }, 100)
- // }
- },
- // beforeDestroy() {
- // if (this.electricityChart) this.electricityChart.dispose()
- // if (this.steamChart) this.steamChart.dispose()
- // window.removeEventListener('resize', this.handleResize)
- // if (this.resizeTimer) clearTimeout(this.resizeTimer)
- // }
+ // 未使用的蒸汽仪表盘可注释/删除
+ // getSteamGaugeOption(value) { ... }
+ }
}
@@ -298,9 +221,4 @@ export default {
}
}
}
-
-
-
-
-
diff --git a/src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue b/src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue
index 4018ce67..e7876a1f 100644
--- a/src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue
+++ b/src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue
@@ -1,9 +1,7 @@
-
+
-
-
diff --git a/src/views/home/procurementGainAnalysisComponents/operatingBar.vue b/src/views/home/procurementGainAnalysisComponents/operatingBar.vue
index 6ce591d0..ab7c7692 100644
--- a/src/views/home/procurementGainAnalysisComponents/operatingBar.vue
+++ b/src/views/home/procurementGainAnalysisComponents/operatingBar.vue
@@ -1,29 +1,21 @@
-
+
-
@@ -11,112 +9,124 @@
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
-
+
+
-
@@ -29,61 +29,64 @@
diff --git a/src/views/home/productionCostAnalysisComponents/monthlyThreeRelatedMetrics.vue b/src/views/home/productionCostAnalysisComponents/monthlyThreeRelatedMetrics.vue
index 88b41d5b..06ad19e1 100644
--- a/src/views/home/productionCostAnalysisComponents/monthlyThreeRelatedMetrics.vue
+++ b/src/views/home/productionCostAnalysisComponents/monthlyThreeRelatedMetrics.vue
@@ -1,32 +1,35 @@
-
- 各基地情况
-
+ 各基地情况
-
@@ -60,130 +52,79 @@ export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
+ emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
activeButton: 0,
isDropdownShow: false,
- selectedProfit: null, // 选中的名称，初始为null
+ selectedSort: null, // 选中的label
+ selectedSortValue: null, // 选中的value，用于排序逻辑
profitOptions: [
- '实际值：高~低',
- '实际值：低~高',
- '目标值：高~低',
- '目标值：低~高',
-
+ { label: '实际值：高~低', value: 1 },
+ { label: '实际值：低~高', value: 2 },
+ { label: '完成率：高~低', value: 3 },
+ { label: '完成率：低~高', value: 4 },
]
};
},
computed: {
- // profitOptions() {
- // return this.categoryData.map(item => item.name) || [];
- // },
+ // 排序后的数据源（核心：根据selectedSortValue重新排序）
currentDataSource() {
- console.log('yyyy', this.chartData);
+ if (!this.chartData) return {};
- return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
+ // 深拷贝原始数据，避免修改原数据
+ const factory = JSON.parse(JSON.stringify(this.chartData));
+ if (!factory.locations.length || !this.selectedSortValue) return factory;
+
+ // 构建带索引的数组，方便同步所有字段排序
+ const dataWithIndex = factory.locations.map((name, index) => ({
+ index,
+ name,
+ real: factory.reals[index],
+ target: factory.targets[index],
+ rate: factory.rates[index],
+ diff: factory.diff[index],
+ flag: factory.flags[index]
+ }));
+
+ // 根据选中的排序规则排序
+ switch (this.selectedSortValue) {
+ case 1: // 实际值：高~低
+ dataWithIndex.sort((a, b) => b.real - a.real);
+ break;
+ case 2: // 实际值：低~高
+ dataWithIndex.sort((a, b) => a.real - b.real);
+ break;
+ case 3: // 目标值：高~低
+ dataWithIndex.sort((a, b) => b.rate - a.rate);
+ break;
+ case 4: // 目标值：低~高
+ dataWithIndex.sort((a, b) => a.rate - b.rate);
+ break;
+ default:
+ return factory;
+ }
+
+ // 同步更新所有数组
+ factory.locations = dataWithIndex.map(item => item.name);
+ factory.reals = dataWithIndex.map(item => item.real);
+ factory.targets = dataWithIndex.map(item => item.target);
+ factory.rates = dataWithIndex.map(item => item.rate);
+ factory.diff = dataWithIndex.map(item => item.diff);
+ factory.flags = dataWithIndex.map(item => item.flag);
+
+ return factory;
},
locations() {
- console.log('this.chartData', this.chartData);
-
- return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
+ return this.currentDataSource.locations || [];
},
- // 根据按钮切换生成对应的 chartData
+ // 最终传递给图表的排序后数据
chartD() {
- // 销量场景数据
const data = this.currentDataSource;
- console.log(this.currentDataSource, 'currentDataSource');
-
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',
- yAxisIndex: 0, // 左侧Y轴（万元）
- barWidth: 14,
- itemStyle: {
- color: {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(130, 204, 255, 1)' },
- { offset: 1, color: 'rgba(75, 157, 255, 1)' }
- ]
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.targets // 目标销量（万元）
- },
- // 3. 实际（柱状图，含达标状态）
- {
- name: '实际',
- type: 'bar',
- yAxisIndex: 0,
- barWidth: 14,
- itemStyle: {
- color: (params) => {
- // 达标状态：1=达标（绿色），0=未达标（橙色）
- const safeFlag = data.flags;
- const currentFlag = safeFlag[params.dataIndex] || 0;
- return currentFlag === 1
- ? {
- 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)' }
- ]
- }
- : {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(253, 209, 129, 1)' },
- { offset: 1, color: 'rgba(249, 164, 74, 1)' }
- ]
- };
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.reals // 实际销量（万元）
- }
- ]
- };
-
- // 毛利率场景数据
- const grossProfitData = {
- series: [
- // 1. 完成率（折线图）
+ // 完成率（折线图）
{
name: '完成率',
type: 'line',
@@ -202,13 +143,13 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
- data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
+ data: data.rates || [],
symbol: 'circle',
symbolSize: 6
},
- // 2. 目标（柱状图）
+ // 目标（柱状图）
{
- name: '目标',
+ name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
@@ -224,17 +165,64 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
+ data: data.targets || []
},
- // 3. 实际（柱状图）
+ // 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
+ label: {
+ show: true,
+ position: 'top',
+ offset: [30, 0],
+ width: 68,
+ height: 20,
+ formatter: (params) => {
+ const diff = data.diff || [];
+ const currentDiff = diff[params.dataIndex] || 0;
+ return `{rate|${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
+ },
+ rate: {
+ width: 'auto',
+ padding: [5, 0, 5, 10],
+ align: 'center',
+ color: '#30B590',
+ fontSize: 11,
+ lineHeight: 20
+ }
+ }
+ },
itemStyle: {
color: (params) => {
- const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
+ const safeFlag = data.flags || [];
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
@@ -257,21 +245,34 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
+ data: data.reals || []
}
]
};
-
- // 根据按钮状态返回对应数据
return salesData;
}
},
methods: {
selectProfit(item) {
- this.selectedProfit = item;
+ // 更新选中的label和value
+ this.selectedSort = item.label;
+ this.selectedSortValue = item.value;
this.isDropdownShow = false;
+ // 向父组件传递排序事件（可选，保持原有逻辑）
+ this.$emit('sort-change', item.value);
}
},
+ // 监听父组件传入的chartData变化，重置选中状态（可选）
+ watch: {
+ 'chartData.factory': {
+ handler() {
+ // 若需要切换数据源后重置排序，可取消注释
+ // this.selectedSort = null;
+ // this.selectedSortValue = null;
+ },
+ deep: true
+ }
+ }
};
@@ -282,16 +283,14 @@ export default {
width: 100%;
padding: 12px;
- // 新增：头部行容器，实现一行排列
.header-row {
display: flex;
- justify-content: space-between; // 左右两端对齐
- align-items: center; // 垂直居中
+ justify-content: space-between;
+ align-items: center;
width: 100%;
- margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
+ margin-bottom: 8px;
}
- // 各基地情况标题样式
.base-title {
font-weight: 400;
font-size: 18px;
@@ -299,29 +298,25 @@ export default {
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
- padding: 0 0 0 16px; // 保留原有内边距
- white-space: nowrap; // 防止文字换行
+ padding: 0 0 0 16px;
+ white-space: nowrap;
}
.barTop {
- // 移除原有flex和justify-content，由header-row控制
- width: auto; // 自适应宽度
- // 保留原有align-items，确保内部元素垂直居中
+ width: auto;
align-items: center;
gap: 16px;
- // 1. 右侧容器：包裹图例和按钮组，整体靠右
.right-container {
display: flex;
- align-items: center; // 图例和按钮组垂直居中
- gap: 24px; // 图例与按钮组的间距，避免贴紧
- margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
+ align-items: center;
+ gap: 24px;
+ margin-right: 46px;
}
- // 2. 图例：在右侧容器内横向排列
.legend {
display: flex;
- gap: 16px; // 图例项之间间距，避免重叠
+ gap: 16px;
align-items: center;
margin: 0;
}
@@ -336,7 +331,7 @@ export default {
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
- white-space: nowrap; // 防止图例文字换行
+ white-space: nowrap;
}
.legend-icon {
@@ -365,7 +360,6 @@ export default {
height: 8px;
}
- // 图例颜色
.yield {
background: rgba(40, 138, 255, 1);
}
@@ -382,7 +376,6 @@ export default {
background: rgba(255, 132, 0, 1);
}
- // 3. 按钮组：在右侧容器内，保留原有样式
.button-group {
display: flex;
position: relative;
@@ -406,7 +399,6 @@ export default {
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
-
overflow: hidden;
.item-text {
diff --git a/src/views/home/procurementGainAnalysisComponents/operatingLineBarSale.vue b/src/views/home/procurementGainAnalysisComponents/operatingLineBarSale.vue
index a6f2b806..7e2ccc00 100644
--- a/src/views/home/procurementGainAnalysisComponents/operatingLineBarSale.vue
+++ b/src/views/home/procurementGainAnalysisComponents/operatingLineBarSale.vue
@@ -10,17 +10,24 @@ export default {
data() {
return {
myChart: null, // 存储图表实例
- resizeHandler: null // 存储resize事件处理函数，用于后续移除
+ resizeHandler: null, // 存储resize事件处理函数
+ // 核心：基地名称与序号的映射表（固定顺序）
+ baseNameToIndexMap: {
+ '宜兴': 7,
+ '漳州': 8,
+ '自贡': 3,
+ '桐城': 2,
+ '洛阳': 9,
+ '合肥': 5,
+ '宿迁': 6,
+ '秦皇岛': 10
+ }
};
},
props: {
chartData: {
type: Object,
default: () => ({}),
- // 可选：保留数据校验
- // validator: (value) => {
- // return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
- // }
}
},
mounted() {
@@ -57,19 +64,28 @@ export default {
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
- // 箭头函数保证this指向Vue实例
- console.log('点击事件的参数：', params);
-
- // 提取关键数据（注意：如果是折线图，value是数组；柱状图是单个值，需兼容）
+ // 提取点击的基地名称
const itemName = params.name;
+ // 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
+ const baseIndex = this.baseNameToIndexMap[itemName] || 0;
+
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
- const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
- const seriesName = params.seriesName;
- console.log(`你点击了【${itemName}】，${seriesName}：${itemValue}`);
+ // const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
+ // const seriesName = params.seriesName;
+
+ console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
+
+ // 路由跳转时携带序号（或名称+序号）
this.$router.push({
path: 'procurementGainAnalysisBase',
- base: itemName
- })
+ query: { // 使用query传递参数（推荐），也可使用params
+ // baseName: itemName,
+ factory: baseIndex
+ }
+ // 若仍需用base作为参数：
+ // base: itemName,
+ // params: { baseIndex: baseIndex }
+ });
});
// 定义resize处理函数（命名函数，方便移除）
@@ -119,7 +135,12 @@ export default {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
interval: 0,
- padding: [5, 0, 0, 0]
+ padding: [5, 0, 0, 0],
+ // 可选：X轴标签显示“序号+名称”（如“1 宜兴”）
+ // formatter: (value) => {
+ // const index = this.baseNameToIndexMap[value] || '';
+ // return index ? `${index} ${value}` : value;
+ // }
},
data: xData
}
diff --git a/src/views/home/procurementGainAnalysisComponents/operatingLineBarSaleGroup.vue b/src/views/home/procurementGainAnalysisComponents/operatingLineBarSaleGroup.vue
index 5ff0b2a7..079cd879 100644
--- a/src/views/home/procurementGainAnalysisComponents/operatingLineBarSaleGroup.vue
+++ b/src/views/home/procurementGainAnalysisComponents/operatingLineBarSaleGroup.vue
@@ -34,7 +34,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
- console.log(this.chartData,'chartData');
+ console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
@@ -54,7 +54,7 @@ export default {
}
this.myChart = echarts.init(chartDom);
-
+
const { allPlaceNames, series } = this.chartData || {};
console.log('chartData', this.chartData);
diff --git a/src/views/home/procurementGainAnalysisComponents/operatingLineChart.vue b/src/views/home/procurementGainAnalysisComponents/operatingLineChart.vue
index 79232994..a54d6a5a 100644
--- a/src/views/home/procurementGainAnalysisComponents/operatingLineChart.vue
+++ b/src/views/home/procurementGainAnalysisComponents/operatingLineChart.vue
@@ -1,28 +1,16 @@
-
+
-
-
diff --git a/src/views/home/productionCostAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/productionCostAnalysisComponents/monthlyRelatedMetrics.vue
index 30fee201..6e296a99 100644
--- a/src/views/home/productionCostAnalysisComponents/monthlyRelatedMetrics.vue
+++ b/src/views/home/productionCostAnalysisComponents/monthlyRelatedMetrics.vue
@@ -10,7 +10,7 @@
原片成本·单位/万元
-
- 完成率
+ 完成率
-
- 目标
+ 预算
-
- 实际·达标
+ 实际·达标
-
- 实际·未达标
+ 实际·未达标
-
+
-
-
+
+
-
-
diff --git a/src/views/home/procurementGainAnalysisComponents/totalOverview.vue b/src/views/home/procurementGainAnalysisComponents/totalOverview.vue
index 5b5d11ab..36b16471 100644
--- a/src/views/home/procurementGainAnalysisComponents/totalOverview.vue
+++ b/src/views/home/procurementGainAnalysisComponents/totalOverview.vue
@@ -11,19 +11,20 @@
-
+
-
+ ">
集团情况
-
+ ">
-
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
+
@@ -43,55 +44,75 @@ import verticalBarChart from './verticalBarChart.vue'
export default {
name: 'ProductionStatus',
components: { Container, electricityGauge, verticalBarChart },
- // mixins: [resize],
props: {
- itemData: { // 接收父组件传递的设备数据数组
- type: Array,
- default: () => [] // 默认空数组，避免报错
+ totalData: {
+ type: Object,
+ default: () => ({})
},
- title: { // 接收父组件传递的设备数据数组
+ title: {
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
- month: { // 接收父组件传递的设备数据数组
+ month: {
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
},
data() {
return {
chart: null,
-
}
},
- watch: {
- itemData: {
- handler(newValue, oldValue) {
- // this.updateChart()
- },
- deep: true // 若对象内属性变化需触发，需加 deep: true
+ computed: {
+ /**
+ * 自动提取monData中的工厂数据，并新增flag字段
+ */
+ factoryData() {
+ const factoryKeys = Object.keys(this.totalData);
+ if (factoryKeys.length === 0) {
+ // 无数据时返回兜底对象（包含flag）
+ return {
+ completeRate: 0,
+ diff: 0,
+ real: 0,
+ target: 0,
+ thb: 0,
+ flag: 0 // 兜底flag
+ };
+ }
+ const firstKey = factoryKeys[0];
+ const rawData = this.totalData[firstKey];
+ // 整合原始数据 + 计算flag
+ return {
+ completeRate: 0,
+ diff: 0,
+ real: 0,
+ target: 0,
+ thb: 0,
+ ...rawData,
+ flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
+ };
}
},
- // 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: {
+ /**
+ * 格式化百分比数值：处理空值/非数字，兜底为0
+ */
+ formatRate(value) {
+ if (isNaN(value) || value === null || value === undefined) {
+ return 0;
+ }
+ return value;
+ },
+ /**
+ * 判断完成率对应的flag值（<100为0，≥100为1）
+ * @param {number} rate 完成率（原始值，如89代表89%）
+ * @returns {0|1} flag值
+ */
+ getRateFlag(rate) {
+ if (isNaN(rate) || rate === null || rate === undefined) return 0;
+ return rate >= 100 ? 1 : 0;
+ }
}
}
@@ -156,7 +177,7 @@ export default {
}
.mom {
- width: 97px;
+ // width: 97px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
diff --git a/src/views/home/procurementGainAnalysisComponents/verticalBarChart.vue b/src/views/home/procurementGainAnalysisComponents/verticalBarChart.vue
index 11f2c512..49efde66 100644
--- a/src/views/home/procurementGainAnalysisComponents/verticalBarChart.vue
+++ b/src/views/home/procurementGainAnalysisComponents/verticalBarChart.vue
@@ -1,5 +1,5 @@
-
+
-
-
diff --git a/src/views/home/productionCostAnalysisComponents/monthlyOverview.vue b/src/views/home/productionCostAnalysisComponents/monthlyOverview.vue
index 4018ce67..9c679019 100644
--- a/src/views/home/productionCostAnalysisComponents/monthlyOverview.vue
+++ b/src/views/home/productionCostAnalysisComponents/monthlyOverview.vue
@@ -1,9 +1,7 @@
-
@@ -11,112 +9,109 @@
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
-
+
+
-
@@ -18,7 +18,7 @@
加工成本·单位/万元
-
-
+
-
+
-
镀膜液·单位/万元
-
+
-
油墨·单位/万元
-
+
@@ -37,68 +40,107 @@
diff --git a/src/views/home/productionCostAnalysisComponents/operatingTopBar.vue b/src/views/home/productionCostAnalysisComponents/operatingTopBar.vue
index 2fb41793..13134cc0 100644
--- a/src/views/home/productionCostAnalysisComponents/operatingTopBar.vue
+++ b/src/views/home/productionCostAnalysisComponents/operatingTopBar.vue
@@ -23,17 +23,19 @@ export default {
currentDataSource() {
console.log('yyyy', this.chartData);
- return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
+ return this.chartData
},
locations() {
- console.log('this.chartData', this.chartData);
+ console.log('this.1111', this.chartData);
- return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
+ return this.chartData.locations
},
// 根据按钮切换生成对应的 chartData
chartD() {
// 销量场景数据
const data = this.currentDataSource;
+ const diff = data.diff[0]
+ const rate = data.rate[0]
console.log(this.currentDataSource, 'currentDataSource');
const salesData = {
@@ -73,12 +75,15 @@ export default {
label: {
show: true,
position: 'top',
- offset: [0, 0],
+ offset: [-30, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
- formatter: '{value|完成率}{rate|139%}',
+ formatter: (params) => {
+ // const { rate = 0, diff = 0 } = params.data || {};
+ return `{value|完成率}{rate|${rate}%}`;
+ },
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
@@ -149,12 +154,15 @@ export default {
label: {
show: true,
position: 'top',
- offset: [0, 0],
+ offset: [30, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
- formatter: '{rate|139%}{text|差值}',
+ formatter: (params) => {
+ // const { rate = 0, diff = 0 } = params.data || {};
+ return `{rate|${diff}}{text|差值}`;
+ },
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
diff --git a/src/views/home/productionCostAnalysisComponents/productionOperatingLineBarSale.vue b/src/views/home/productionCostAnalysisComponents/productionOperatingLineBarSale.vue
new file mode 100644
index 00000000..02539beb
--- /dev/null
+++ b/src/views/home/productionCostAnalysisComponents/productionOperatingLineBarSale.vue
@@ -0,0 +1,211 @@
+
+
+
+
+
diff --git a/src/views/home/productionCostAnalysisComponents/relateCombustibleCostAnalysis.vue b/src/views/home/productionCostAnalysisComponents/relateCombustibleCostAnalysis.vue
index eec49a82..0ebff124 100644
--- a/src/views/home/productionCostAnalysisComponents/relateCombustibleCostAnalysis.vue
+++ b/src/views/home/productionCostAnalysisComponents/relateCombustibleCostAnalysis.vue
@@ -1,31 +1,36 @@
釉料·单位/万元
-
-
+
+
-
+
-
-
diff --git a/src/views/home/totalProfitComponents/operatingBar.vue b/src/views/home/totalProfitComponents/operatingBar.vue
index 6ce591d0..e1793fe7 100644
--- a/src/views/home/totalProfitComponents/operatingBar.vue
+++ b/src/views/home/totalProfitComponents/operatingBar.vue
@@ -1,29 +1,21 @@
-
-
@@ -50,7 +50,7 @@ import { mapState } from "vuex";
import operatingLineChart from "../totalProfitComponents/operatingLineChart";
import operatingLineChartCumulative from "../totalProfitComponents/operatingLineChartCumulative.vue";
-import { getSalesRevenueData } from '@/api/cockpit'
+import { getProfitAnalysisTotalList } from '@/api/cockpit'
import moment from "moment";
export default {
name: "DayReport",
@@ -68,11 +68,9 @@ export default {
timer: null,
beilv: 1,
value: 100,
- saleData: {},
- premiumProduct: {},
- salesTrendMap: {},
- grossMarginTrendMap: {},
- salesProportion:{},
+ selectDate: {},
+ monData: [],
+ totalData: [],
};
},
@@ -140,23 +138,31 @@ export default {
};
},
methods: {
- getData(obj) {
- getSalesRevenueData({
- startTime: obj.startTime,
- endTime: obj.endTime,
- timeDim: obj.mode
+ getData() {
+ getProfitAnalysisTotalList({
+ startTime: this.selectDate.startTime,
+ endTime: this.selectDate.endTime,
+ analysisObject: [
+ "利润总额"
+ ],
+ levelId: 1,
+ // timeDim: this.selectDate.mode
}).then((res) => {
console.log(res);
- 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 : {}
+ this.monData = res.data.currentMonthData
+ this.totalData = res.data.totalMonthData
+ // this.totalData = res.data.totalData
+ // 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) {
- console.log(obj, 'obj');
- this.getData(obj)
+ // console.log(obj, 'obj');
+ this.selectDate = obj
+ this.getData()
},
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
@@ -228,12 +234,14 @@ export default {
-
-
diff --git a/src/views/home/totalProfitComponents/monthlyOverview.vue b/src/views/home/totalProfitComponents/monthlyOverview.vue
index 4018ce67..ac79209b 100644
--- a/src/views/home/totalProfitComponents/monthlyOverview.vue
+++ b/src/views/home/totalProfitComponents/monthlyOverview.vue
@@ -1,9 +1,7 @@
+
+
-
天然气·单位/万元
-
+
+
-
LNG液化天然气·单位/万元
-
+
+
-
-
+
@@ -58,19 +62,19 @@ export default {
type: Array,
default: () => [] // 默认空数组，避免报错
},
- title: { // 接收父组件传递的设备数据数组
+ title: { // 接收父组件传递的标题
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: '' // 修正原有默认值类型（原默认是数组，改为字符串，逻辑更合理，样式不变）
},
- month: { // 接收父组件传递的设备数据数组
+ month: { // 接收父组件传递的月份
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: '' // 修正原有默认值类型（原默认是数组，改为字符串，逻辑更合理，样式不变）
},
},
data() {
return {
chart: null,
-
+ activeMaterial: '' // 新增：记录选中物料状态，和第二个组件逻辑对齐，样式不变
}
},
watch: {
@@ -78,40 +82,66 @@ export default {
handler(newValue, oldValue) {
// this.updateChart()
},
- deep: true // 若对象内属性变化需触发，需加 deep: true
+ deep: true // 若对象内属性变化需触发，需加 deep: true（原有逻辑保留，样式不变）
+ }
+ },
+ // 新增：4个指标对应的计算属性，精准筛选itemData中的数据（仅数据逻辑，样式不变）
+ computed: {
+ // 1. 包材数据：从itemData中筛选，兜底值统一
+ packagingData() {
+ return this.itemData.find(item => (item.name || '').includes('包材')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 2. 备件丶机物料数据：精准筛选
+ sparePartsData() {
+ return this.itemData.find(item => (item.name || '').includes('备件丶机物料')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 3. 折旧数据：精准筛选
+ depreciationData() {
+ return this.itemData.find(item => (item.name || '').includes('折旧')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 4. 其他数据：精准筛选
+ otherData() {
+ return this.itemData.find(item => (item.name || '').includes('其他')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
}
},
- // 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: {
handleDashboardClick(material) {
- // 1. 记录选中状态（可选）
+ // 1. 记录选中状态（新增，和第二个组件逻辑对齐，样式不变）
this.activeMaterial = material;
// 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
+
+ // 修复路由跳转错误：month放入query中（原有逻辑优化，样式不变）
this.$router.push({
path: 'mfgOverheadSingleCostAnalysis',
- month: this.month,
query: {
- name: material
+ name: material,
+ month: this.month // 修正：原代码month直接写在路由配置里无效，移入query
}
})
},
@@ -120,6 +150,7 @@ export default {
diff --git a/src/views/home/productionCostAnalysisComponents/relateProcessCostAnalysis.vue b/src/views/home/productionCostAnalysisComponents/relateProcessCostAnalysis.vue
index 91a07207..ab89ea8d 100644
--- a/src/views/home/productionCostAnalysisComponents/relateProcessCostAnalysis.vue
+++ b/src/views/home/productionCostAnalysisComponents/relateProcessCostAnalysis.vue
@@ -1,37 +1,43 @@
重油·单位/万元
-
+
+
@@ -39,12 +44,16 @@ import Container from '../components/container.vue'
import operatingSingleBar from './operatingSingleBar.vue'
export default {
- name: 'ProductionStatus',
+ name: 'GasWaterProductionStatus', // 与第二个组件区分命名
components: { Container, operatingSingleBar },
props: {
- itemData: {
- type: Array,
- default: () => []
+ // 完全对齐第二个组件的props结构，数据格式统一
+ relatedData: {
+ type: Object,
+ default: () => ({
+ relatedMon: [], // 月度数据（数组格式，存储各物料项）
+ relatedTotal: [] // 累计数据（数组格式，存储各物料项）
+ })
},
title: {
type: String,
@@ -58,69 +67,98 @@ export default {
data() {
return {
chart: null,
- // 可选：记录当前选中的物料
- activeMaterial: ''
+ activeData: this.relatedData.relatedMon || [], // 核心激活数据集（默认月度，与第二个组件一致）
+ activeMaterial: '' // 记录选中物料状态，与第二个组件统一
}
},
+ // 新增计算属性：和第二个组件逻辑一致，精准筛选各物料数据
+ computed: {
+ // 天然气数据：从激活数据集中筛选，兜底值统一
+ naturalGasData() {
+ return this.activeData.find(item => (item.name || '').includes('天然气')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // LNG液化天然气数据：精准筛选
+ lngData() {
+ return this.activeData.find(item => (item.name || '').includes('LNG液化天然气')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 重油数据：精准筛选
+ heavyOilData() {
+ return this.activeData.find(item => (item.name || '').includes('重油')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 水数据：精准筛选
+ waterData() {
+ return this.activeData.find(item => (item.name || '').includes('水')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 移除原无效的itemData，统一使用activeData
+ },
watch: {
- itemData: {
- handler(newValue, oldValue) {
- // this.updateChart()
+ // 对齐第二个组件：深度监听relatedData变化，同步更新激活数据集
+ relatedData: {
+ handler(newVal) {
+ this.activeData = newVal.relatedMon || [];
},
- deep: true
+ immediate: true, // 挂载时立即执行
+ deep: true // 深度监听对象内部变化
}
},
mounted() {
- // this.$nextTick(() => this.updateChart())
+ console.log('燃气水组件挂载时的激活数据：', this.activeData);
},
methods: {
- /**
- * dashboard点击事件处理函数
- * @param {String} material 物料名称（硅砂/海砂/纯碱等）
- */
- handleDashboardClick(material) {
- // 1. 记录选中状态（可选）
- this.activeMaterial = material;
-
- // 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
- console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
- this.$router.push({
- path: 'singleCombustible',
- month: this.month,
- query: {
- name: material
- }
- })
- // 3. 扩展逻辑示例：
- // - 触发父组件事件（如需向父组件传递数据）
- this.$emit('dashboard-click', {
- material,
- month: this.month,
- // data: this.itemData.find(item => item.name === material) || {}
- });
-
- // - 跳转详情页（如需路由跳转）
- // this.$router.push({
- // path: '/material-detail',
- // query: { name: material, month: this.month }
- // });
-
- // - 打开弹窗/加载详情数据等
- // this.openMaterialDetail(material);
+ // 新增tab切换处理函数：和第二个组件逻辑完全一致，切换月度/累计数据
+ handleChange(value) {
+ console.log('Tab 切换值：', value);
+ // 根据tab值更新激活数据集
+ if (value === 'month') {
+ this.activeData = this.relatedData.relatedMon || [];
+ } else {
+ this.activeData = this.relatedData.relatedTotal || [];
+ }
+ console.log('当前激活数据集：', this.activeData);
},
- /**
- * 可选：打开物料详情弹窗（示例）
- */
- openMaterialDetail(material) {
- // 此处可编写弹窗逻辑
- alert(`查看【${material}】的详细成本分析`);
+ // 优化点击事件：对齐第二个组件，接收物料名和路由路径，修复原路由参数错误
+ handleDashboardClick(material, path) {
+ // 1. 记录选中状态
+ this.activeMaterial = material;
+
+ console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.activeData);
+
+ // 2. 修复原路由跳转错误：month放入query中（原代码month直接写在路由配置里无效）
+ this.$router.push({
+ path: path,
+ query: {
+ name: material,
+ month: this.month
+ }
+ });
}
}
}
diff --git a/src/views/home/productionCostAnalysisComponents/relateFactoryBurdenCostAnalysis.vue b/src/views/home/productionCostAnalysisComponents/relateFactoryBurdenCostAnalysis.vue
index ddfde1a1..58eba488 100644
--- a/src/views/home/productionCostAnalysisComponents/relateFactoryBurdenCostAnalysis.vue
+++ b/src/views/home/productionCostAnalysisComponents/relateFactoryBurdenCostAnalysis.vue
@@ -1,16 +1,17 @@
水·单位/万元
-
-
+
包材·单位/万元
-
@@ -18,7 +19,8 @@
备件丶机物料·单位/万元
-
@@ -26,7 +28,8 @@
折旧·单位/万元
-
@@ -34,7 +37,8 @@
其他·单位/万元
-
-
+
@@ -36,56 +42,68 @@ import verticalBarChart from './verticalBarChart.vue'
export default {
name: 'ProductionStatus',
- components: { Container, operatingSingleBar, verticalBarChart },
- // mixins: [resize],
+ components: { Container, operatingSingleBar },
props: {
- itemData: { // 接收父组件传递的设备数据数组
- type: Array,
- default: () => [] // 默认空数组，避免报错
+ relatedMon: {
+ type: Object,
+ default: () => ({
+ 销量: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+ 单价: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+ })
},
- title: { // 接收父组件传递的设备数据数组
+ title: {
type: String,
- default: () => '' // 默认空数组，避免报错
- },
- month: { // 接收父组件传递的设备数据数组
- type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
},
data() {
return {
chart: null,
-
+ // 兜底数据：防止字段缺失时报错
+ defaultData: {
+ completeRate: 0,
+ diff: 0,
+ real: 0,
+ target: 0,
+ thb: 0
+ }
}
},
watch: {
- itemData: {
- handler(newValue, oldValue) {
- // this.updateChart()
+ relatedMon: {
+ handler(newValue) {
+ this.updateChart()
},
- deep: true // 若对象内属性变化需触发，需加 deep: true
+ immediate: 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())
+ // 初始化图表
+ this.$nextTick(() => this.updateChart())
},
methods: {
+ /**
+ * 判断完成率对应的flag值（<100为0，≥100为1）
+ * @param {number} rate 完成率（原始值，如89代表89%）
+ * @returns {0|1} flag值
+ */
+ getRateFlag(rate) {
+ if (isNaN(rate) || rate === null || rate === undefined) return 0;
+ return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→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/salesVolumeAnalysisComponents/monthlyThreeRelatedMetrics.vue b/src/views/home/salesVolumeAnalysisComponents/monthlyThreeRelatedMetrics.vue
index 3f7968ca..c34f2cd0 100644
--- a/src/views/home/salesVolumeAnalysisComponents/monthlyThreeRelatedMetrics.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/monthlyThreeRelatedMetrics.vue
@@ -10,7 +10,10 @@
双镀成本·单位/万元
@@ -44,56 +53,69 @@ import verticalBarChart from './verticalBarChart.vue'
export default {
name: 'ProductionStatus',
- components: { Container, operatingSingleBar, verticalBarChart },
- // mixins: [resize],
+ components: { Container, operatingSingleBar },
props: {
- itemData: { // 接收父组件传递的设备数据数组
- type: Array,
- default: () => [] // 默认空数组，避免报错
+ relatedMon: {
+ type: Object,
+ default: () => ({
+ 双镀成本: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+ 双镀均价: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+ 双镀毛利: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+ })
},
- title: { // 接收父组件传递的设备数据数组
+ title: {
type: String,
- default: () => '' // 默认空数组，避免报错
- },
- month: { // 接收父组件传递的设备数据数组
- type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
},
data() {
return {
chart: null,
-
+ // 兜底数据：防止字段缺失时报错
+ defaultData: {
+ completeRate: 0,
+ diff: 0,
+ real: 0,
+ target: 0,
+ thb: 0
+ }
}
},
watch: {
- itemData: {
- handler(newValue, oldValue) {
- // this.updateChart()
+ relatedMon: {
+ handler(newValue) {
+ this.updateChart()
},
- deep: true // 若对象内属性变化需触发，需加 deep: true
+ immediate: 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())
+ // 初始化图表
+ this.$nextTick(() => this.updateChart())
},
methods: {
+ /**
+ * 判断完成率对应的flag值（<100为0，≥100为1）
+ * @param {number} rate 完成率（原始值，如89代表89%）
+ * @returns {0|1} flag值
+ */
+ getRateFlag(rate) {
+ if (isNaN(rate) || rate === null || rate === undefined) return 0;
+ return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→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/salesVolumeAnalysisComponents/operatingBar.vue b/src/views/home/salesVolumeAnalysisComponents/operatingBar.vue
index 6ce591d0..ab7c7692 100644
--- a/src/views/home/salesVolumeAnalysisComponents/operatingBar.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/operatingBar.vue
@@ -1,29 +1,21 @@
@@ -44,56 +53,69 @@ import verticalBarChart from './verticalBarChart.vue'
export default {
name: 'ProductionStatus',
- components: { Container, operatingSingleBar, verticalBarChart },
- // mixins: [resize],
+ components: { Container, operatingSingleBar },
props: {
- itemData: { // 接收父组件传递的设备数据数组
- type: Array,
- default: () => [] // 默认空数组，避免报错
+ relatedTotal: {
+ type: Object,
+ default: () => ({
+ 双镀成本: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+ 双镀均价: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+ 双镀毛利: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+ })
},
- title: { // 接收父组件传递的设备数据数组
+ title: {
type: String,
- default: () => '' // 默认空数组，避免报错
- },
- month: { // 接收父组件传递的设备数据数组
- type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
},
data() {
return {
chart: null,
-
+ // 兜底数据：防止字段缺失时报错
+ defaultData: {
+ completeRate: 0,
+ diff: 0,
+ real: 0,
+ target: 0,
+ thb: 0
+ }
}
},
watch: {
- itemData: {
- handler(newValue, oldValue) {
- // this.updateChart()
+ relatedTotal: {
+ handler(newValue) {
+ this.updateChart()
},
- deep: true // 若对象内属性变化需触发，需加 deep: true
+ immediate: 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())
+ // 初始化图表
+ this.$nextTick(() => this.updateChart())
},
methods: {
+ /**
+ * 判断完成率对应的flag值（<100为0，≥100为1）
+ * @param {number} rate 完成率（原始值，如89代表89%）
+ * @returns {0|1} flag值
+ */
+ getRateFlag(rate) {
+ if (isNaN(rate) || rate === null || rate === undefined) return 0;
+ return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
+ },
+
+ /**
+ * 图表更新方法：可在这里补充全局的图表刷新逻辑
+ * 若子组件内部已监听 chartData 变化，此方法可留空或补充额外逻辑
+ */
+ updateChart() {
+ console.log('数据更新，当前relatedMon:', this.relatedTotal)
+ // 打印各维度的flag值，方便调试
+ // console.log('销量flag:', this.getRateFlag(this.relatedTotal.销量.completeRate))
+ // console.log('成本flag:', this.getRateFlag(this.relatedTotal.成本.completeRate))
+ // console.log('运费flag:', this.getRateFlag(this.relatedTotal.运费.completeRate))
+ }
}
}
diff --git a/src/views/home/totalProfit/totalProfit.vue b/src/views/home/totalProfit/totalProfit.vue
index 95cdb750..8064bf53 100644
--- a/src/views/home/totalProfit/totalProfit.vue
+++ b/src/views/home/totalProfit/totalProfit.vue
@@ -16,7 +16,7 @@
gap: 12px;
grid-template-columns:1624px;
">
-
-
-
+
+
-
@@ -43,55 +44,60 @@ import verticalBarChart from './verticalBarChart.vue'
export default {
name: 'ProductionStatus',
components: { Container, electricityGauge, verticalBarChart },
- // mixins: [resize],
props: {
- itemData: { // 接收父组件传递的设备数据数组
- type: Array,
- default: () => [] // 默认空数组，避免报错
+ totalData: {
+ type: Object,
+ default: () => ({})
},
- title: { // 接收父组件传递的设备数据数组
+ title: {
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
- month: { // 接收父组件传递的设备数据数组
+ month: {
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
},
data() {
return {
chart: null,
-
}
},
- watch: {
- itemData: {
- handler(newValue, oldValue) {
- // this.updateChart()
- },
- deep: true // 若对象内属性变化需触发，需加 deep: true
+ computed: {
+ /**
+ * 自动提取monData中的工厂数据，并新增flag字段
+ */
+ factoryData() { // 整合原始数据 + 计算flag
+ return {
+ completeRate: Number(this.totalData.proportion).toFixed(2),
+ diff: this.totalData.diffValue,
+ real: this.totalData.value,
+ target: this.totalData.targetValue,
+ thb: this.totalData.thb,
+ // ...rawData,
+ flag: this.getRateFlag(this.totalData.completed) // 新增flag字段
+ };
}
},
- // 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: {
+ /**
+ * 格式化百分比数值：处理空值/非数字，兜底为0
+ */
+ formatRate(value) {
+ if (isNaN(value) || value === null || value === undefined) {
+ return 0;
+ }
+ return value;
+ },
+ /**
+ * 判断完成率对应的flag值（<100为0，≥100为1）
+ * @param {number} rate 完成率（原始值，如89代表89%）
+ * @returns {0|1} flag值
+ */
+ getRateFlag(rate) {
+ if (isNaN(rate) || rate === null || rate === undefined) return 0;
+ return rate >= 100 ? 1 : 0;
+ }
}
}
diff --git a/src/views/home/productionCostAnalysisComponents/verticalBarChart.vue b/src/views/home/productionCostAnalysisComponents/verticalBarChart.vue
index 11f2c512..02d55ba0 100644
--- a/src/views/home/productionCostAnalysisComponents/verticalBarChart.vue
+++ b/src/views/home/productionCostAnalysisComponents/verticalBarChart.vue
@@ -1,5 +1,5 @@
-
+
-
-
+
diff --git a/src/views/home/salesVolumeAnalysisComponents/dataTrendBar.vue b/src/views/home/salesVolumeAnalysisComponents/dataTrendBar.vue
index 44e05069..81c916c4 100644
--- a/src/views/home/salesVolumeAnalysisComponents/dataTrendBar.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/dataTrendBar.vue
@@ -28,7 +28,7 @@
人工成本·单位/万元
-
+
-
燃料成本·单位/万元
-
+
-
辅材成本·单位/万元
-
+
-
包材成本·单位/万元
-
+
@@ -48,9 +54,12 @@ export default {
name: 'ProductionStatus',
components: { Container, operatingSingleBar },
props: {
- itemData: {
- type: Array,
- default: () => []
+ relatedData: {
+ type: Object,
+ default: () => ({
+ relatedMon: [], // 成本月度数据（数组格式，存储各成本项）
+ relatedTotal: [] // 成本累计数据（数组格式，存储各成本项）
+ })
},
title: {
type: String,
@@ -64,17 +73,75 @@ export default {
data() {
return {
chart: null,
- // 可选：记录当前选中的物料
- activeMaterial: ''
+ activeMaterial: '',
+ // 新增：当前激活的成本数据集（默认月度，与第一个成本组件逻辑对齐，样式不变）
+ activeData: this.relatedData.relatedMon || []
+ }
+ },
+ // 新增：5个成本项对应的计算属性，精准筛选数据（仅数据逻辑，样式不变）
+ computed: {
+ // 1. 人工成本数据
+ laborCostData() {
+ return this.activeData.find(item => (item.name || '').includes('人工成本')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 2. 燃料成本数据
+ fuelCostData() {
+ return this.activeData.find(item => (item.name || '').includes('燃料成本')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 3. 辅材成本数据
+ auxiliaryMaterialCostData() {
+ return this.activeData.find(item => (item.name || '').includes('辅材成本')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 4. 包材成本数据
+ packagingMaterialCostData() {
+ return this.activeData.find(item => (item.name || '').includes('包材成本')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
+ },
+ // 5. 制造成本数据
+ manufacturingCostData() {
+ return this.activeData.find(item => (item.name || '').includes('制造成本')) || {
+ targetValue: 0,
+ value: 0,
+ completed: 0,
+ diffValue: 0
+ };
}
},
watch: {
- itemData: {
- handler(newValue, oldValue) {
- // this.updateChart()
+ // 替换无效的itemData监听，新增relatedData深度监听（数据逻辑优化，样式不变）
+ relatedData: {
+ handler(newVal) {
+ this.activeData = newVal.relatedMon || [];
},
- deep: true
+ immediate: true, // 组件挂载时立即执行
+ deep: true // 深度监听对象内部变化
}
+ // 原有itemData监听注释保留（若需恢复可直接启用，样式不变）
+ // itemData: {
+ // handler(newValue, oldValue) {
+ // // this.updateChart()
+ // },
+ // deep: true
+ // }
},
mounted() {
// this.$nextTick(() => this.updateChart())
@@ -82,51 +149,40 @@ export default {
methods: {
/**
* dashboard点击事件处理函数
- * @param {String} material 物料名称（硅砂/海砂/纯碱等）
+ * @param {String} material 物料名称（人工成本/燃料成本等）
+ * @param {String} path 路由路径
*/
- handleDashboardClick(material) {
+ handleDashboardClick(material, path) {
// 1. 记录选中状态（可选）
this.activeMaterial = material;
- // 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
- console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
+ // 2. 修复路由跳转错误：将month移入query（数据逻辑优化，样式不变）
+ console.log(`点击了【${material}】，月份：${this.month}`, '成本数据：', this.activeData);
this.$router.push({
- path: 'SIMFRMCostAnalysis',
- month: this.month,
+ path: path,
query: {
- name: material
+ name: material,
+ month: this.month // 修正：原代码month写在路由根配置无效，移入query
}
})
- // 3. 扩展逻辑示例：
- // - 触发父组件事件（如需向父组件传递数据）
- this.$emit('dashboard-click', {
- material,
- month: this.month,
- // data: this.itemData.find(item => item.name === material) || {}
- });
-
- // - 跳转详情页（如需路由跳转）
- // this.$router.push({
- // path: '/material-detail',
- // query: { name: material, month: this.month }
- // });
-
- // - 打开弹窗/加载详情数据等
- // this.openMaterialDetail(material);
},
-
- /**
- * 可选：打开物料详情弹窗（示例）
- */
- openMaterialDetail(material) {
- // 此处可编写弹窗逻辑
- alert(`查看【${material}】的详细成本分析`);
+ // 新增：Tab切换处理函数（与第一个成本组件逻辑对齐，样式不变）
+ handleChange(value) {
+ console.log('Tab 切换值：', value);
+ // 根据Tab值切换月度/累计数据
+ if (value === 'month') {
+ this.activeData = this.relatedData.relatedMon || [];
+ } else {
+ this.activeData = this.relatedData.relatedTotal || [];
+ }
+ console.log('当前激活数据集：', this.activeData);
}
}
}
-
-
diff --git a/src/views/home/productionCostAnalysisComponents/totalOverview.vue b/src/views/home/productionCostAnalysisComponents/totalOverview.vue
index 5b5d11ab..8ac731f0 100644
--- a/src/views/home/productionCostAnalysisComponents/totalOverview.vue
+++ b/src/views/home/productionCostAnalysisComponents/totalOverview.vue
@@ -11,21 +11,22 @@
制造成本·单位/万元
-
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
-
+
+
@@ -59,46 +59,84 @@ import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBar },
- props: ["chartData"],
+ props: [
+ "trendData" // 接收父组件传递的 trend 数据（单价/运费/净价）
+ ],
data() {
return {
activeButton: 0,
isDropdownShow: false,
- selectedProfit: null, // 选中的名称，初始为null
- profitOptions: [
- '产量',
- '效率',
- ]
+ selectedProfit: '产量', // 关键修改：默认赋值为「净价」，初始化即展示该类目数据
+ profitOptions: ['产量', '销量']
};
},
computed: {
- // profitOptions() {
- // return this.categoryData.map(item => item.name) || [];
+ // 核心：根据选中的类目，动态解析趋势数据
+ trendParsedData() {
+ // 1. 校验数据有效性
+ if (!this.trendData || !this.selectedProfit) {
+ return {
+ diffs:[],
+ months: [], // 月份数组（x轴标签）
+ rates: [], // 完成率（completeRate）
+ reals: [], // 实际值（real）
+ targets: [], // 目标值（target）
+ flags: [] // 达标状态
+ };
+ }
+
+ // 2. 获取选中类目的趋势数据（如：trendData.单价）
+ const selectedTrend = this.trendData[this.selectedProfit] || {};
+ // 3. 提取月份并排序（保证时间顺序）
+ const months = Object.keys(selectedTrend).sort((a, b) => new Date(a) - new Date(b));
+ // 4. 初始化数据数组
+ const rates = [];
+ const reals = [];
+ const targets = [];
+ const flags = [];
+ const diffs = [];
+
+
+ // 5. 按月份提取数据
+ months.forEach(month => {
+ const monthData = selectedTrend[month] || {};
+ const completeRate = monthData.completeRate || 0;
+ // 填充对应数据
+ rates.push(completeRate);
+ reals.push(monthData.real || 0);
+ targets.push(monthData.target || 0);
+ diffs.push(monthData.diff || 0);
+
+
+ // 生成达标状态（复用 getRateFlag 逻辑）
+ flags.push(this.getRateFlag(completeRate));
+ });
+
+ return {
+ months,
+ rates,
+ reals,
+ targets,
+ flags,
+ diffs
+ };
+ },
+ // locations() {
+ // return this.activeButton === 0 ? this.chartData?.salesLocations : this.chartData?.grossMarginLocations;
// },
- currentDataSource() {
- console.log('yyyy', this.chartData);
-
- return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
- },
- locations() {
- console.log('this.chartData', this.chartData);
-
- return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
- },
- // 根据按钮切换生成对应的 chartData
+ // 重构 chartD：替换硬编码数据为动态解析数据
chartD() {
- // 销量场景数据
- const data = this.currentDataSource;
- console.log(this.currentDataSource, 'currentDataSource');
-
+ // 获取动态解析的趋势数据
+ const { months, rates, reals, targets, flags } = this.trendParsedData;
+ // 销量场景数据（保留原有结构，替换数据来源）
const salesData = {
- allPlaceNames: this.locations,
+ allPlaceNames: months, // 优先用基地名称，无则用月份
series: [
// 1. 完成率（折线图）
{
name: '完成率',
type: 'line',
- yAxisIndex: 1, // 绑定右侧Y轴（需在子组件启用配置）
+ yAxisIndex: 1,
lineStyle: {
color: 'rgba(40, 138, 255, .5)',
width: 2
@@ -116,7 +154,7 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
- data: data.rates, // 完成率（%）
+ data: rates, // 动态完成率
symbol: 'circle',
symbolSize: 6
},
@@ -124,7 +162,7 @@ export default {
{
name: '目标',
type: 'bar',
- yAxisIndex: 0, // 左侧Y轴（万元）
+ yAxisIndex: 0,
barWidth: 14,
itemStyle: {
color: {
@@ -138,7 +176,7 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: data.targets // 目标销量（万元）
+ data: targets, // 动态目标值
},
// 3. 实际（柱状图，含达标状态）
{
@@ -146,93 +184,68 @@ export default {
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
- itemStyle: {
- color: (params) => {
- // 达标状态：1=达标（绿色），0=未达标（橙色）
- const safeFlag = data.flags;
- const currentFlag = safeFlag[params.dataIndex] || 0;
- return currentFlag === 1
- ? {
- 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)' }
- ]
- }
- : {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(253, 209, 129, 1)' },
- { offset: 1, color: 'rgba(249, 164, 74, 1)' }
- ]
- };
+ label: {
+ show: true,
+ position: 'top',
+ offset: [0, 0],
+ // 固定label尺寸：68px×20px
+ width: 68,
+ height: 20,
+ // 关键：去掉换行，让文字在一行显示，适配小尺寸
+ formatter: function (params) {
+ const diff = data.diffs || [];
+ const currentDiff = diff[params.dataIndex] || 0;
+ return `{rate|${currentDiff}}{text|差值}`;
},
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.reals // 实际销量（万元）
- }
- ]
- };
-
- // 毛利率场景数据
- const grossProfitData = {
- series: [
- // 1. 完成率（折线图）
- {
- name: '完成率',
- type: 'line',
- yAxisIndex: 1,
- 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: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
- symbol: 'circle',
- symbolSize: 6
- },
- // 2. 目标（柱状图）
- {
- name: '目标',
- type: 'bar',
- yAxisIndex: 0,
- barWidth: 14,
- itemStyle: {
- color: {
+ backgroundColor: {
type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
colorStops: [
- { offset: 0, color: 'rgba(130, 204, 255, 1)' },
- { offset: 1, color: 'rgba(75, 157, 255, 1)' }
+ { 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' }
]
},
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
+ // 外阴影：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 // 垂直居中
+ },
+ rate: {
+ width: 'auto',
+ padding: [5, 0, 5, 10],
+ align: 'center',
+ color: '#30B590',
+ fontSize: 11,
+ lineHeight: 20
+ }
+ }
},
- data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
- },
- // 3. 实际（柱状图）
- {
- name: '实际',
- type: 'bar',
- yAxisIndex: 0,
- barWidth: 14,
itemStyle: {
color: (params) => {
- const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
- const currentFlag = safeFlag[params.dataIndex] || 0;
+ const currentFlag = flags[params.dataIndex] || 0;
return currentFlag === 1
? {
type: 'linear',
@@ -254,12 +267,12 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
+ data: reals, // 动态实际值
}
]
};
- // 根据按钮状态返回对应数据
+ // 直接返回动态组装的 salesData（移除硬编码的毛利率数据）
return salesData;
}
},
@@ -267,8 +280,13 @@ export default {
selectProfit(item) {
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/salesVolumeAnalysisComponents/dataTrendDouble.vue b/src/views/home/salesVolumeAnalysisComponents/dataTrendDouble.vue
index cf848ad0..96c20a42 100644
--- a/src/views/home/salesVolumeAnalysisComponents/dataTrendDouble.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/dataTrendDouble.vue
@@ -1,7 +1,6 @@
-
@@ -24,306 +23,21 @@ export default {
name: "ProductionStatus",
components: { Container, dataTrendBar },
props: {
- salesTrendMap: {
- type: Object,
- default: () => ({}),
- },
- grossMarginTrendMap: {
- type: Object,
- default: () => ({}),
+ trendData: {
+ type: Object, // 接收 trend 数据（单价/运费/净价）
+ default: () => ({})
},
+ // 保留原有 props
},
data() {
return {
- chartData: null, // 初始化 chartData 为 null
+ chartData: null
};
},
watch: {
- grossMarginTrendMap: {
- handler() {
- this.processChartData();
- },
- immediate: true,
- deep: true,
- },
- salesTrendMap: {
- handler() {
- this.processChartData();
- },
- immediate: true,
- deep: true,
- },
},
methods: {
- /**
- * 核心处理函数：在所有数据都准备好后，才组装 chartData
- */
- processChartData() {
- // 关键改动：增加数据有效性检查
- // 检查 salesTrendMap 是否有实际数据（不只是空对象）
- const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
- // 检查 grossMarginTrendMap 是否有实际数据
- const isGrossMarginDataReady =
- Object.keys(this.grossMarginTrendMap).length > 0;
-
- // 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
- // 你可以根据业务需求调整这里的逻辑，比如：
- // 1. 等待两者都准备好
- // 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
-
- // --- 方案一：等待两者都准备好 ---
- // if (!isSalesDataReady || !isGrossMarginDataReady) {
- // console.log('数据尚未全部准备好，暂不更新图表');
- // this.chartData = {
- // grossMarginLocations: [],
- // salesLocations: [],
- // grossMargin: { rates: [], reals: [], targets: [], flags: [] },
- // sales: { rates: [], reals: [], targets: [], flags: [] },
- // };
- // return;
- // }
-
- // --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
- // 这种方式更友好，用户可以先看到部分数据
- const grossMarginLocations = isGrossMarginDataReady
- ? Object.keys(this.grossMarginTrendMap)
- : [];
- const salesLocations = isSalesDataReady
- ? Object.keys(this.salesTrendMap)
- : [];
-
- const processedGrossMarginData = isGrossMarginDataReady
- ? this.processSingleDataset(
- grossMarginLocations,
- this.grossMarginTrendMap
- )
- : { rates: [], reals: [], targets: [], flags: [] };
-
- const processedSalesData = isSalesDataReady
- ? this.processSingleDataset(salesLocations, this.salesTrendMap)
- : { rates: [], reals: [], targets: [], flags: [] };
-
- // 3. 组装最终的 chartData 对象
- this.chartData = {
- grossMarginLocations: grossMarginLocations,
- salesLocations: salesLocations,
- grossMargin: processedGrossMarginData,
- sales: processedSalesData,
- };
-
- console.log("chartData 已更新:", this.chartData);
- },
-
- /**
- * 通用数据处理函数（纯函数）
- * @param {Array} locations - 某个指标的地点数组
- * @param {Object} dataMap - 该指标的原始数据映射
- * @returns {Object} - 格式化后的数据对象
- */
- processSingleDataset(locations, dataMap) {
- const rates = [];
- const reals = [];
- const targets = [];
- const flags = [];
-
- locations.forEach((location) => {
- const data = dataMap[location] || {};
- // 优化：处理 data.rate 为 null/undefined 的情况
- const rate =
- data.rate !== null && data.rate !== undefined
- ? Math.round(data.rate * 100)
- : 0;
-
- rates.push(rate);
- reals.push(data.real ?? 0); // 使用空值合并运算符
- targets.push(data.target ?? 0);
-
- // 优化：更清晰的逻辑
- if (data.target === 0) {
- flags.push(1); // 如果目标为0，默认达标
- } else {
- flags.push(rate >= 100 ? 1 : 0);
- }
- });
-
- return { rates, reals, targets, flags };
- },
- },
+ }
};
-
-
-
-
+
diff --git a/src/views/home/salesVolumeAnalysisComponents/dataTrendProduct.vue b/src/views/home/salesVolumeAnalysisComponents/dataTrendProduct.vue
index 3148d064..90b42d53 100644
--- a/src/views/home/salesVolumeAnalysisComponents/dataTrendProduct.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/dataTrendProduct.vue
@@ -1,7 +1,6 @@
-
@@ -24,306 +23,20 @@ export default {
name: "ProductionStatus",
components: { Container, dataTrendBar },
props: {
- salesTrendMap: {
- type: Object,
- default: () => ({}),
- },
- grossMarginTrendMap: {
- type: Object,
- default: () => ({}),
+ trendData: {
+ type: Object, // 接收 trend 数据（单价/运费/净价）
+ default: () => ({})
},
},
data() {
return {
- chartData: null, // 初始化 chartData 为 null
+ chartData: null
};
},
watch: {
- grossMarginTrendMap: {
- handler() {
- this.processChartData();
- },
- immediate: true,
- deep: true,
- },
- salesTrendMap: {
- handler() {
- this.processChartData();
- },
- immediate: true,
- deep: true,
- },
},
methods: {
- /**
- * 核心处理函数：在所有数据都准备好后，才组装 chartData
- */
- processChartData() {
- // 关键改动：增加数据有效性检查
- // 检查 salesTrendMap 是否有实际数据（不只是空对象）
- const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
- // 检查 grossMarginTrendMap 是否有实际数据
- const isGrossMarginDataReady =
- Object.keys(this.grossMarginTrendMap).length > 0;
-
- // 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
- // 你可以根据业务需求调整这里的逻辑，比如：
- // 1. 等待两者都准备好
- // 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
-
- // --- 方案一：等待两者都准备好 ---
- // if (!isSalesDataReady || !isGrossMarginDataReady) {
- // console.log('数据尚未全部准备好，暂不更新图表');
- // this.chartData = {
- // grossMarginLocations: [],
- // salesLocations: [],
- // grossMargin: { rates: [], reals: [], targets: [], flags: [] },
- // sales: { rates: [], reals: [], targets: [], flags: [] },
- // };
- // return;
- // }
-
- // --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
- // 这种方式更友好，用户可以先看到部分数据
- const grossMarginLocations = isGrossMarginDataReady
- ? Object.keys(this.grossMarginTrendMap)
- : [];
- const salesLocations = isSalesDataReady
- ? Object.keys(this.salesTrendMap)
- : [];
-
- const processedGrossMarginData = isGrossMarginDataReady
- ? this.processSingleDataset(
- grossMarginLocations,
- this.grossMarginTrendMap
- )
- : { rates: [], reals: [], targets: [], flags: [] };
-
- const processedSalesData = isSalesDataReady
- ? this.processSingleDataset(salesLocations, this.salesTrendMap)
- : { rates: [], reals: [], targets: [], flags: [] };
-
- // 3. 组装最终的 chartData 对象
- this.chartData = {
- grossMarginLocations: grossMarginLocations,
- salesLocations: salesLocations,
- grossMargin: processedGrossMarginData,
- sales: processedSalesData,
- };
-
- console.log("chartData 已更新:", this.chartData);
- },
-
- /**
- * 通用数据处理函数（纯函数）
- * @param {Array} locations - 某个指标的地点数组
- * @param {Object} dataMap - 该指标的原始数据映射
- * @returns {Object} - 格式化后的数据对象
- */
- processSingleDataset(locations, dataMap) {
- const rates = [];
- const reals = [];
- const targets = [];
- const flags = [];
-
- locations.forEach((location) => {
- const data = dataMap[location] || {};
- // 优化：处理 data.rate 为 null/undefined 的情况
- const rate =
- data.rate !== null && data.rate !== undefined
- ? Math.round(data.rate * 100)
- : 0;
-
- rates.push(rate);
- reals.push(data.real ?? 0); // 使用空值合并运算符
- targets.push(data.target ?? 0);
-
- // 优化：更清晰的逻辑
- if (data.target === 0) {
- flags.push(1); // 如果目标为0，默认达标
- } else {
- flags.push(rate >= 100 ? 1 : 0);
- }
- });
-
- return { rates, reals, targets, flags };
- },
- },
+ }
};
-
-
-
-
+
diff --git a/src/views/home/salesVolumeAnalysisComponents/electricityGauge.vue b/src/views/home/salesVolumeAnalysisComponents/electricityGauge.vue
index 153fdbaf..92d73f5e 100644
--- a/src/views/home/salesVolumeAnalysisComponents/electricityGauge.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/electricityGauge.vue
@@ -4,7 +4,7 @@
@@ -18,31 +18,32 @@ export default {
// components: { Container },
// mixins: [resize],
props: {
- energyObj: {
+ detailData: {
type: Object,
default: () => ({
- electricComu: 0,
- steamComu: 20, // 调整为符合max范围的数值（0-8）
- // electricity: [120, 150, 130, 180, 160, 200, 190],
- // steam: [80, 95, 85, 110, 100, 120, 115],
- // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
+ // electricComu: 0,
+ // steamComu: 20, // 调整为符合max范围的数值（0-8）
+ // // electricity: [120, 150, 130, 180, 160, 200, 190],
+ // // steam: [80, 95, 85, 110, 100, 120, 115],
+ // // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
})
},
id: {
type: String,
- default: () => ('')
+ default: () => ('monthG')
}
},
data() {
return {
- electricityChart: null,
- steamChart: null,
- specialTicks: [2, 4, 6, 8], // 统一的刻度显示
+ // electricityChart: null,
+ // steamChart: null,
+ // specialTicks: [2, 4, 6, 8], // 统一的刻度显示
}
},
watch: {
- energyObj: {
+ detailData: {
deep: true,
+ immediate: true, // 初始化时立即执行
handler() {
this.updateGauges()
}
@@ -55,42 +56,47 @@ export default {
},
methods: {
observeContainerResize() {
- const container = document.querySelector('.gauge-container')
+ // 修复：获取正确的容器（组件内的.gauge-container）
+ const container = this.$el.querySelector('.gauge-container')
if (container && window.ResizeObserver) {
- const resizeObserver = new ResizeObserver(entries => {
- this.handleResize()
- })
- resizeObserver.observe(container)
- this.$once('hook:beforeDestroy', () => {
- resizeObserver.unobserve(container)
+ this.resizeObserver = new ResizeObserver(entries => {
+ if (this.electricityChart) {
+ this.electricityChart.resize() // 直接触发resize，无需防抖
+ }
})
+ this.resizeObserver.observe(container)
}
},
initGauges() {
+ // console.log('this.id',this.id);
+
// 初始化电气图表实例
const electricityDom = document.getElementById(this.id)
if (electricityDom) {
+ // 修复：正确创建并存储图表实例
this.electricityChart = echarts.init(electricityDom)
+ // 首次更新数据
+ this.updateGauges()
}
- // 初始化蒸汽图表实例
- const steamDom = document.getElementById('steamGauge')
- if (steamDom) {
- this.steamChart = echarts.init(steamDom)
- }
- // 首次更新数据
- this.updateGauges()
+ // 蒸汽图表若未使用，可注释/删除
+ // const steamDom = document.getElementById('steamGauge')
+ // if (steamDom) {
+ // this.steamChart = echarts.init(steamDom)
+ // }
},
updateGauges() {
- // 优化：仅更新数据，不销毁实例（提升性能）
- if (this.electricityChart) {
- // 转换原始数据为“万kw/h”（与仪表盘max匹配）
- const electricValue = 80
- this.electricityChart.setOption(this.getElectricityGaugeOption(electricValue))
- }
+ // 修复：先判断实例是否存在，再更新配置
+ if (!this.electricityChart) return
+
+ // 修复：兜底获取rate值，确保数值有效
+ const rate = Number(this.detailData?.completeRate) || 0
+ console.log('当前rate值：', rate); // 调试：确认rate值正确
+
+ // 关键：第二个参数传true，清空原有配置，强制更新
+ this.electricityChart.setOption(this.getElectricityGaugeOption(rate), true)
},
- // 1. 用电量仪表盘独立配置函数
+ // 用电量仪表盘配置（保留原有样式，优化数值范围）
getElectricityGaugeOption(value) {
- // 用电量专属渐变色
const electricityGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#0B58FF' },
{ offset: 1, color: '#32FFCD' }
@@ -101,12 +107,12 @@ export default {
{
name: '月度',
type: 'gauge',
- radius: '95',
+ radius: '95', // 修复：添加%，避免数值错误
center: ['50%', '90%'],
startAngle: 180,
endAngle: 0,
min: 0,
- max: 100, // 用电量专属最大值
+ max: 100,
splitNumber: 4,
label: { show: false },
progress: {
@@ -121,117 +127,34 @@ export default {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '75%',
width: 16,
- itemStyle: { color: '#288AFF' }, // 用电量指针颜色
+ itemStyle: { color: '#288AFF' },
offsetCenter: [0, '10%']
},
axisLine: {
roundCap: true,
lineStyle: { width: 12, color: [[1, '#E6EBF7']] }
},
- // axisTick: {
- // splitNumber: 2,
- // show: (val) => this.specialTicks.includes(val),
- // lineStyle: { width: 2, color: '#999' }
- // },
splitLine: {
- length: 10, lineStyle: { width: 5, color: '#D6DAE5' },
+ length: 10,
+ lineStyle: { width: 5, color: '#D6DAE5' },
},
- // axisLabel: {
- // show: (val) => this.specialTicks.includes(val),
- // distance: -45,
- // color: '#ffffff',
- // fontSize: 14,
- // fontWeight: 'bold'
- // },
axisTick: {
splitNumber: 2,
- length:6,
+ length: 6,
lineStyle: { width: 2, color: '#D6DAE5' }
},
axisLabel: {
show: false,
},
detail: { show: false },
- data: [{ value, unit: '' }] // 用电量单位
+ data: [{ value: value, unit: '' }] // 确保数值正确传入
}
]
}
},
-
- // 2. 用蒸汽仪表盘独立配置函数
- getSteamGaugeOption(value) {
- // 蒸汽专属渐变色
- const steamGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- { offset: 0, color: 'rgba(11, 168, 255, 0.26)' },
- { offset: 1, color: 'rgba(54, 239, 230, 1)' }
- ])
-
- return {
- series: [
- {
- name: '完成率',
- type: 'gauge',
- radius: '80',
- center: ['50%', '85%'],
- startAngle: 180,
- endAngle: 0,
- min: 0,
- max: 160, // 蒸汽专属最大值
- splitNumber: 4,
- label: { show: false },
- progress: {
- show: true,
- overlap: false,
- roundCap: true,
- clip: false,
- width: 14,
- itemStyle: { color: steamGradient }
- },
- pointer: {
- icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
- length: '75%',
- width: 16,
- itemStyle: { color: 'rgba(11, 168, 255, 1)' }, // 蒸汽指针颜色
- offsetCenter: [0, '5%']
- },
- axisLine: {
- roundCap: true,
- lineStyle: { width: 14, color: [[1, 'rgba(19, 84, 122, 1)']] }
- },
- axisTick: {
- splitNumber: 2,
- show: (val) => this.specialTicks.includes(val),
- lineStyle: { width: 2, color: '#999' }
- },
- splitLine: { length: 12, lineStyle: { width: 3, color: '#999' } },
- axisLabel: {
- show: (val) => this.specialTicks.includes(val),
- distance: -45,
- color: '#ffffff',
- fontSize: 14,
- fontWeight: 'bold'
- },
- detail: { show: false },
- data: [{ value, unit: 't' }] // 蒸汽单位
- }
- ]
- }
- },
-
- // handleResize() {
- // if (this.resizeTimer) clearTimeout(this.resizeTimer)
- // this.resizeTimer = setTimeout(() => {
- // if (this.electricityChart) this.electricityChart.resize()
- // if (this.steamChart) this.steamChart.resize()
- // }, 100)
- // }
- },
- // beforeDestroy() {
- // if (this.electricityChart) this.electricityChart.dispose()
- // if (this.steamChart) this.steamChart.dispose()
- // window.removeEventListener('resize', this.handleResize)
- // if (this.resizeTimer) clearTimeout(this.resizeTimer)
- // }
+ // 未使用的蒸汽仪表盘可注释/删除
+ // getSteamGaugeOption(value) { ... }
+ }
}
@@ -298,9 +221,4 @@ export default {
}
}
}
-
-
-
-
-
diff --git a/src/views/home/salesVolumeAnalysisComponents/monthlyOverview.vue b/src/views/home/salesVolumeAnalysisComponents/monthlyOverview.vue
index 4018ce67..e7876a1f 100644
--- a/src/views/home/salesVolumeAnalysisComponents/monthlyOverview.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/monthlyOverview.vue
@@ -1,9 +1,7 @@
-
+
-
-
diff --git a/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue
index 231faa62..d4a911dd 100644
--- a/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue
@@ -10,7 +10,10 @@
销量·单位/万元
-
-
-
-
- {{ energyObj.electricComu }}
+ {{ detailData.completeRate || 0 }}
-
@@ -11,112 +9,124 @@
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
-
+
+
-
@@ -18,7 +21,10 @@
单价·单位/万元
-
-
@@ -18,7 +21,10 @@
双镀均价·单位/万元
-
@@ -26,7 +32,10 @@
双镀毛利·单位/万元
-
-
-
- 各基地情况
-
+ 各基地情况
-
@@ -60,130 +52,79 @@ export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
+ emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
activeButton: 0,
isDropdownShow: false,
- selectedProfit: null, // 选中的名称，初始为null
+ selectedSort: null, // 选中的label
+ selectedSortValue: null, // 选中的value，用于排序逻辑
profitOptions: [
- '实际值：高~低',
- '实际值：低~高',
- '目标值：高~低',
- '目标值：低~高',
-
+ { label: '实际值：高~低', value: 1 },
+ { label: '实际值：低~高', value: 2 },
+ { label: '完成率：高~低', value: 3 },
+ { label: '完成率：低~高', value: 4 },
]
};
},
computed: {
- // profitOptions() {
- // return this.categoryData.map(item => item.name) || [];
- // },
+ // 排序后的数据源（核心：根据selectedSortValue重新排序）
currentDataSource() {
- console.log('yyyy', this.chartData);
+ if (!this.chartData) return {};
- return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
+ // 深拷贝原始数据，避免修改原数据
+ const factory = JSON.parse(JSON.stringify(this.chartData));
+ if (!factory.locations.length || !this.selectedSortValue) return factory;
+
+ // 构建带索引的数组，方便同步所有字段排序
+ const dataWithIndex = factory.locations.map((name, index) => ({
+ index,
+ name,
+ real: factory.reals[index],
+ target: factory.targets[index],
+ rate: factory.rates[index],
+ diff: factory.diff[index],
+ flag: factory.flags[index]
+ }));
+
+ // 根据选中的排序规则排序
+ switch (this.selectedSortValue) {
+ case 1: // 实际值：高~低
+ dataWithIndex.sort((a, b) => b.real - a.real);
+ break;
+ case 2: // 实际值：低~高
+ dataWithIndex.sort((a, b) => a.real - b.real);
+ break;
+ case 3: // 目标值：高~低
+ dataWithIndex.sort((a, b) => b.rate - a.rate);
+ break;
+ case 4: // 目标值：低~高
+ dataWithIndex.sort((a, b) => a.rate - b.rate);
+ break;
+ default:
+ return factory;
+ }
+
+ // 同步更新所有数组
+ factory.locations = dataWithIndex.map(item => item.name);
+ factory.reals = dataWithIndex.map(item => item.real);
+ factory.targets = dataWithIndex.map(item => item.target);
+ factory.rates = dataWithIndex.map(item => item.rate);
+ factory.diff = dataWithIndex.map(item => item.diff);
+ factory.flags = dataWithIndex.map(item => item.flag);
+
+ return factory;
},
locations() {
- console.log('this.chartData', this.chartData);
-
- return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
+ return this.currentDataSource.locations || [];
},
- // 根据按钮切换生成对应的 chartData
+ // 最终传递给图表的排序后数据
chartD() {
- // 销量场景数据
const data = this.currentDataSource;
- console.log(this.currentDataSource, 'currentDataSource');
-
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',
- yAxisIndex: 0, // 左侧Y轴（万元）
- barWidth: 14,
- itemStyle: {
- color: {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(130, 204, 255, 1)' },
- { offset: 1, color: 'rgba(75, 157, 255, 1)' }
- ]
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.targets // 目标销量（万元）
- },
- // 3. 实际（柱状图，含达标状态）
- {
- name: '实际',
- type: 'bar',
- yAxisIndex: 0,
- barWidth: 14,
- itemStyle: {
- color: (params) => {
- // 达标状态：1=达标（绿色），0=未达标（橙色）
- const safeFlag = data.flags;
- const currentFlag = safeFlag[params.dataIndex] || 0;
- return currentFlag === 1
- ? {
- 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)' }
- ]
- }
- : {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(253, 209, 129, 1)' },
- { offset: 1, color: 'rgba(249, 164, 74, 1)' }
- ]
- };
- },
- borderRadius: [4, 4, 0, 0],
- borderWidth: 0
- },
- data: data.reals // 实际销量（万元）
- }
- ]
- };
-
- // 毛利率场景数据
- const grossProfitData = {
- series: [
- // 1. 完成率（折线图）
+ // 完成率（折线图）
{
name: '完成率',
type: 'line',
@@ -202,13 +143,13 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
- data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
+ data: data.rates || [],
symbol: 'circle',
symbolSize: 6
},
- // 2. 目标（柱状图）
+ // 目标（柱状图）
{
- name: '目标',
+ name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
@@ -224,17 +165,64 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
+ data: data.targets || []
},
- // 3. 实际（柱状图）
+ // 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
+ label: {
+ show: true,
+ position: 'top',
+ offset: [30, 0],
+ width: 68,
+ height: 20,
+ formatter: (params) => {
+ const diff = data.diff || [];
+ const currentDiff = diff[params.dataIndex] || 0;
+ return `{rate|${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
+ },
+ rate: {
+ width: 'auto',
+ padding: [5, 0, 5, 10],
+ align: 'center',
+ color: '#30B590',
+ fontSize: 11,
+ lineHeight: 20
+ }
+ }
+ },
itemStyle: {
color: (params) => {
- const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
+ const safeFlag = data.flags || [];
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
@@ -257,21 +245,34 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
- data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
+ data: data.reals || []
}
]
};
-
- // 根据按钮状态返回对应数据
return salesData;
}
},
methods: {
selectProfit(item) {
- this.selectedProfit = item;
+ // 更新选中的label和value
+ this.selectedSort = item.label;
+ this.selectedSortValue = item.value;
this.isDropdownShow = false;
+ // 向父组件传递排序事件（可选，保持原有逻辑）
+ this.$emit('sort-change', item.value);
}
},
+ // 监听父组件传入的chartData变化，重置选中状态（可选）
+ watch: {
+ 'chartData.factory': {
+ handler() {
+ // 若需要切换数据源后重置排序，可取消注释
+ // this.selectedSort = null;
+ // this.selectedSortValue = null;
+ },
+ deep: true
+ }
+ }
};
@@ -282,16 +283,14 @@ export default {
width: 100%;
padding: 12px;
- // 新增：头部行容器，实现一行排列
.header-row {
display: flex;
- justify-content: space-between; // 左右两端对齐
- align-items: center; // 垂直居中
+ justify-content: space-between;
+ align-items: center;
width: 100%;
- margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
+ margin-bottom: 8px;
}
- // 各基地情况标题样式
.base-title {
font-weight: 400;
font-size: 18px;
@@ -299,29 +298,25 @@ export default {
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
- padding: 0 0 0 16px; // 保留原有内边距
- white-space: nowrap; // 防止文字换行
+ padding: 0 0 0 16px;
+ white-space: nowrap;
}
.barTop {
- // 移除原有flex和justify-content，由header-row控制
- width: auto; // 自适应宽度
- // 保留原有align-items，确保内部元素垂直居中
+ width: auto;
align-items: center;
gap: 16px;
- // 1. 右侧容器：包裹图例和按钮组，整体靠右
.right-container {
display: flex;
- align-items: center; // 图例和按钮组垂直居中
- gap: 24px; // 图例与按钮组的间距，避免贴紧
- margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
+ align-items: center;
+ gap: 24px;
+ margin-right: 46px;
}
- // 2. 图例：在右侧容器内横向排列
.legend {
display: flex;
- gap: 16px; // 图例项之间间距，避免重叠
+ gap: 16px;
align-items: center;
margin: 0;
}
@@ -336,7 +331,7 @@ export default {
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
- white-space: nowrap; // 防止图例文字换行
+ white-space: nowrap;
}
.legend-icon {
@@ -365,7 +360,6 @@ export default {
height: 8px;
}
- // 图例颜色
.yield {
background: rgba(40, 138, 255, 1);
}
@@ -382,7 +376,6 @@ export default {
background: rgba(255, 132, 0, 1);
}
- // 3. 按钮组：在右侧容器内，保留原有样式
.button-group {
display: flex;
position: relative;
@@ -406,7 +399,6 @@ export default {
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
-
overflow: hidden;
.item-text {
diff --git a/src/views/home/salesVolumeAnalysisComponents/operatingLineBarSale.vue b/src/views/home/salesVolumeAnalysisComponents/operatingLineBarSale.vue
index fd688933..ee3f5eec 100644
--- a/src/views/home/salesVolumeAnalysisComponents/operatingLineBarSale.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/operatingLineBarSale.vue
@@ -10,17 +10,24 @@ export default {
data() {
return {
myChart: null, // 存储图表实例
- resizeHandler: null // 存储resize事件处理函数，用于后续移除
+ resizeHandler: null, // 存储resize事件处理函数
+ // 核心：基地名称与序号的映射表（固定顺序）
+ baseNameToIndexMap: {
+ '宜兴': 7,
+ '漳州': 8,
+ '自贡': 3,
+ '桐城': 2,
+ '洛阳': 9,
+ '合肥': 5,
+ '宿迁': 6,
+ '秦皇岛': 10
+ }
};
},
props: {
chartData: {
type: Object,
default: () => ({}),
- // 可选：保留数据校验
- // validator: (value) => {
- // return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
- // }
}
},
mounted() {
@@ -57,19 +64,28 @@ export default {
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
- // 箭头函数保证this指向Vue实例
- console.log('点击事件的参数：', params);
-
- // 提取关键数据（注意：如果是折线图，value是数组；柱状图是单个值，需兼容）
+ // 提取点击的基地名称
const itemName = params.name;
+ // 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
+ const baseIndex = this.baseNameToIndexMap[itemName] || 0;
+
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
- const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
- const seriesName = params.seriesName;
- console.log(`你点击了【${itemName}】，${seriesName}：${itemValue}`);
+ // const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
+ // const seriesName = params.seriesName;
+
+ console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
+
+ // 路由跳转时携带序号（或名称+序号）
this.$router.push({
path: 'salesVolumeAnalysisBase',
- base: itemName
- })
+ query: { // 使用query传递参数（推荐），也可使用params
+ // baseName: itemName,
+ factory: baseIndex
+ }
+ // 若仍需用base作为参数：
+ // base: itemName,
+ // params: { baseIndex: baseIndex }
+ });
});
// 定义resize处理函数（命名函数，方便移除）
@@ -119,7 +135,12 @@ export default {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
interval: 0,
- padding: [5, 0, 0, 0]
+ padding: [5, 0, 0, 0],
+ // 可选：X轴标签显示“序号+名称”（如“1 宜兴”）
+ // formatter: (value) => {
+ // const index = this.baseNameToIndexMap[value] || '';
+ // return index ? `${index} ${value}` : value;
+ // }
},
data: xData
}
diff --git a/src/views/home/salesVolumeAnalysisComponents/operatingLineBarSaleGroup.vue b/src/views/home/salesVolumeAnalysisComponents/operatingLineBarSaleGroup.vue
index 5ff0b2a7..079cd879 100644
--- a/src/views/home/salesVolumeAnalysisComponents/operatingLineBarSaleGroup.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/operatingLineBarSaleGroup.vue
@@ -34,7 +34,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
- console.log(this.chartData,'chartData');
+ console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
@@ -54,7 +54,7 @@ export default {
}
this.myChart = echarts.init(chartDom);
-
+
const { allPlaceNames, series } = this.chartData || {};
console.log('chartData', this.chartData);
diff --git a/src/views/home/salesVolumeAnalysisComponents/operatingLineChart.vue b/src/views/home/salesVolumeAnalysisComponents/operatingLineChart.vue
index 79232994..a54d6a5a 100644
--- a/src/views/home/salesVolumeAnalysisComponents/operatingLineChart.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/operatingLineChart.vue
@@ -1,28 +1,16 @@
-
- 完成率
+ 完成率
-
- 目标
+ 预算
-
- 实际·达标
+ 实际·达标
-
- 实际·未达标
+ 实际·未达标
-
+
-
-
+
+
-
-
diff --git a/src/views/home/salesVolumeAnalysisComponents/totalOverview.vue b/src/views/home/salesVolumeAnalysisComponents/totalOverview.vue
index 5b5d11ab..36b16471 100644
--- a/src/views/home/salesVolumeAnalysisComponents/totalOverview.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/totalOverview.vue
@@ -11,19 +11,20 @@
-
+
-
+ ">
集团情况
-
+ ">
-
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
+
@@ -43,55 +44,75 @@ import verticalBarChart from './verticalBarChart.vue'
export default {
name: 'ProductionStatus',
components: { Container, electricityGauge, verticalBarChart },
- // mixins: [resize],
props: {
- itemData: { // 接收父组件传递的设备数据数组
- type: Array,
- default: () => [] // 默认空数组，避免报错
+ totalData: {
+ type: Object,
+ default: () => ({})
},
- title: { // 接收父组件传递的设备数据数组
+ title: {
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
- month: { // 接收父组件传递的设备数据数组
+ month: {
type: String,
- default: () => '' // 默认空数组，避免报错
+ default: ''
},
},
data() {
return {
chart: null,
-
}
},
- watch: {
- itemData: {
- handler(newValue, oldValue) {
- // this.updateChart()
- },
- deep: true // 若对象内属性变化需触发，需加 deep: true
+ computed: {
+ /**
+ * 自动提取monData中的工厂数据，并新增flag字段
+ */
+ factoryData() {
+ const factoryKeys = Object.keys(this.totalData);
+ if (factoryKeys.length === 0) {
+ // 无数据时返回兜底对象（包含flag）
+ return {
+ completeRate: 0,
+ diff: 0,
+ real: 0,
+ target: 0,
+ thb: 0,
+ flag: 0 // 兜底flag
+ };
+ }
+ const firstKey = factoryKeys[0];
+ const rawData = this.totalData[firstKey];
+ // 整合原始数据 + 计算flag
+ return {
+ completeRate: 0,
+ diff: 0,
+ real: 0,
+ target: 0,
+ thb: 0,
+ ...rawData,
+ flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
+ };
}
},
- // 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: {
+ /**
+ * 格式化百分比数值：处理空值/非数字，兜底为0
+ */
+ formatRate(value) {
+ if (isNaN(value) || value === null || value === undefined) {
+ return 0;
+ }
+ return value;
+ },
+ /**
+ * 判断完成率对应的flag值（<100为0，≥100为1）
+ * @param {number} rate 完成率（原始值，如89代表89%）
+ * @returns {0|1} flag值
+ */
+ getRateFlag(rate) {
+ if (isNaN(rate) || rate === null || rate === undefined) return 0;
+ return rate >= 100 ? 1 : 0;
+ }
}
}
@@ -156,7 +177,7 @@ export default {
}
.mom {
- width: 97px;
+ // width: 97px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
diff --git a/src/views/home/salesVolumeAnalysisComponents/verticalBarChart.vue b/src/views/home/salesVolumeAnalysisComponents/verticalBarChart.vue
index 11f2c512..49efde66 100644
--- a/src/views/home/salesVolumeAnalysisComponents/verticalBarChart.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/verticalBarChart.vue
@@ -1,5 +1,5 @@
-
+
diff --git a/src/views/home/salesVolumeAnalysisComponents/yearThreeRelatedMetrics.vue b/src/views/home/salesVolumeAnalysisComponents/yearThreeRelatedMetrics.vue
index 3f7968ca..2900cbfc 100644
--- a/src/views/home/salesVolumeAnalysisComponents/yearThreeRelatedMetrics.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/yearThreeRelatedMetrics.vue
@@ -10,7 +10,10 @@
双镀成本·单位/万元
-
@@ -18,7 +21,10 @@
双镀均价·单位/万元
-
@@ -26,7 +32,10 @@
双镀毛利·单位/万元
-
@@ -25,7 +25,7 @@
gap: 12px;
grid-template-columns: 1624px;
">
-
-
@@ -11,112 +9,109 @@
- 90%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比10%
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
-
+
+
-
-
- 各基地情况
-
+ 各基地情况