+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -25,27 +25,40 @@
gap: 12px;
grid-template-columns: 1624px;
">
-
+
+
diff --git a/src/views/home/electricityCostAnalysisComponents/container.vue b/src/views/home/electricityCostAnalysisComponents/container.vue
index 1a680670..d9663d14 100644
--- a/src/views/home/electricityCostAnalysisComponents/container.vue
+++ b/src/views/home/electricityCostAnalysisComponents/container.vue
@@ -43,37 +43,35 @@ export default {
.content-top {
height: 60px;
+.title-wrapper {
+ display: flex;
+ align-items: center;
+ margin-left: 10px;
+ /* 垂直居中关键属性 */
+ height: 100%;
+ /* 继承父容器高度，确保垂直居中范围 */
+ }
- .title-wrapper {
- display: flex;
- align-items: center;
- margin-left: 10px;
- /* 垂直居中关键属性 */
- height: 100%;
- /* 继承父容器高度，确保垂直居中范围 */
- }
-
- .title-icon {
- font-size: 30px;
- margin-right: 12px;
- margin-top: 4px;
- /* 图标和文字之间的间距 */
- flex-shrink: 0;
- /* 防止图标被压缩 */
- }
-
- .title-text {
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 24px;
- color: #000000;
- letter-spacing: 3px;
- text-align: left;
- font-style: normal;
- // 移除固定行高，避免影响垂直对齐
- // line-height: 60px;
- }
+ .title-icon {
+ font-size: 30px;
+ margin-right: 12px;
+ margin-top: 4px;
+ /* 图标和文字之间的间距 */
+ flex-shrink: 0;
+ /* 防止图标被压缩 */
+ }
+ .title-text {
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 400;
+ font-size: 24px;
+ color: #000000;
+ letter-spacing: 3px;
+ text-align: left;
+ font-style: normal;
+ // 移除固定行高，避免影响垂直对齐
+ // line-height: 60px;
+ }
// width: 547px;
// background: url(../../../assets/img/contentTopBasic.png) no-repeat;
// background-size: 100% 100%;
@@ -108,12 +106,11 @@ export default {
background-size: 100% 100%;
background-position: 0 0;
}
-
- &__rawTopTitleLarge {
- background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
- background-size: 100% 100%;
- background-position: 0 0;
- }
+ &__rawTopTitleLarge {
+ background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ }
}
@@ -165,30 +162,22 @@ export default {
background-position: 0 0;
}
- &__operatingRevenueBg {
- background: url(../../../assets/img/operatingRevenueBg.png) no-repeat;
- background-size: 100% 100%;
- background-position: 0 0;
- }
+ &__operatingRevenueBg {
+ background: url(../../../assets/img/operatingRevenueBg.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ }
&__costBasicBg {
background: url(../../../assets/img/costBasicBg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
-
- &__rawTopBg {
- background: url(../../../assets/img/rawTopBg.png) no-repeat;
- background-size: 100% 100%;
- background-position: 0 0;
- }
-
- &__opLargeBg {
- background: url(../../../assets/img/opLargeBg.png) no-repeat;
- background-size: 100% 100%;
- background-position: 0 0;
- }
-
+ &__rawTopBg {
+ background: url(../../../assets/img/rawTopBg.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ }
// &__left {
// background: url(../../../../../../../assets/img/left.png) no-repeat;
// background-size: 100% 100%;
diff --git a/src/views/home/electricityCostAnalysisComponents/dataTrend.vue b/src/views/home/electricityCostAnalysisComponents/dataTrend.vue
index d5252997..80ec8679 100644
--- a/src/views/home/electricityCostAnalysisComponents/dataTrend.vue
+++ b/src/views/home/electricityCostAnalysisComponents/dataTrend.vue
@@ -8,7 +8,8 @@
width: 1595px;
background-color: rgba(249, 252, 255, 1);
">
-
-
@@ -11,113 +9,104 @@
- {{ monthData?.rate || 0 }}%
+ {{ formatRate(factoryData?.completeRate) }}%
- 环比{{ monthData?.momRate }}%
- 
- 
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
+ 环比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
+
+
-
-
-
-
@@ -14,88 +14,70 @@ export default {
components: {},
data() {
return {
- myChart: null // 存储图表实例，避免重复创建
+ myChart: null
};
},
props: {
- // 明确接收的props结构，增强可读性
refName: {
type: String,
- default: () => 'verticalBarChart',
+ default: 'verticalBarChart',
},
detailData: {
type: Object,
default: () => ({
+ completeRate: 0,
+ diff: 0,
+ real: 0,
+ target: 0,
+ thb: 0,
+ flag: 0
}),
}
},
mounted() {
- this.$nextTick(() => {
- this.updateChart();
- });
+ this.$nextTick(() => this.updateChart());
},
-
- // 新增：监听 chartData 变化
watch: {
- // 深度监听数据变化，仅更新图表配置（不销毁实例）
detailData: {
handler() {
- console.log(this.chartData, 'chartData');
-
this.updateChart();
},
deep: true,
- immediate: true // 初始化时立即执行
+ immediate: true
}
},
methods: {
- getRateFlag(rate, real, target) {
- if (isNaN(rate) || rate === null || rate === undefined) return 0;
-
- // 1. 完成率 >= 100 => 达标
- if (rate >= 100) return 1;
-
- // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
- if (rate === 0 && target === 0) return 1;
-
- // 其他情况 => 未达标
- return 0;
- },
updateChart() {
const chartDom = this.$refs[this.refName];
if (!chartDom) {
console.error('图表容器未找到！');
return;
}
+ console.log('this.detailData', this.detailData);
+ // 修复：优化实例销毁逻辑，避免重复dispose
if (this.myChart) {
- this.myChart.dispose();
+ this.myChart.clear(); // 先清空，再重新渲染
+ } else {
+ this.myChart = echarts.init(chartDom);
}
- this.myChart = echarts.init(chartDom);
- const diff = this.detailData.diff || 0
- const rate = this.detailData.rate || 0
- const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0
+ // 解构数据，避免重复取值
+ const { diff, completeRate, real, target, flag } = this.detailData;
+ // 确保数值为数字类型
+ const realValue = Number(real) || 0;
+ const targetValue = Number(target) || 0;
+ const diffValue = Number(diff) || 0;
+ const rateValue = Number(completeRate) || 0;
+ const flagValue = Number(flag) || 0;
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- },
- // formatter: (params) => {
- // let html = `${params[0].axisValue}
`; - // params.forEach(item => { - // const unit = item.seriesName === '完成率' ? '%' : ( - // ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元' - // ); - // html += `${item.marker} ${item.seriesName}: ${item.value}${unit}
`; - // }); - // return html; - // } + label: { backgroundColor: '#6a7985' } + } }, grid: { top: 40, @@ -103,122 +85,98 @@ export default { right: 80, left: 10, containLabel: true, - show: false // 隐藏grid背景，避免干扰 + show: false }, xAxis: { - // 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值 type: 'value', - // offset: 0, - // boundaryGap: true , - // boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白 axisTick: { show: false }, min: 0, - // splitNumber: 4, - axisLine: { - show: true, - lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } - }, - axisLabel: { - color: 'rgba(0, 0, 0, 0.45)', - fontSize: 12, - interval: 0, - padding: [5, 0, 0, 0] - }, - // data: xData // 数值轴不需要手动设置data，由series的数据自动生成 + axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }, + axisLabel: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 12, interval: 0, padding: [5, 0, 0, 0] } }, yAxis: { type: 'category', - axisLabel: { - color: 'rgba(0, 0, 0, 0.75)', - fontSize: 12, - interval: 0, - padding: [5, 0, 0, 0] - }, - axisLine: { - show: true, // 显示Y轴轴线（关键） - lineStyle: { - color: '#E5E6EB', // 轴线颜色（浅灰色，可自定义） - width: 1, // 轴线宽度 - type: 'solid' // 实线（可选：dashed虚线、dotted点线） - } - }, + axisLabel: { color: 'rgba(0, 0, 0, 0.75)', fontSize: 12, interval: 0, padding: [5, 0, 0, 0] }, + axisLine: { show: true, lineStyle: { color: '#E5E6EB', width: 1, type: 'solid' } }, axisTick: { show: false }, - // padding: [300, 100, 100, 100], - data: ['实际', '预算'] // y轴分类：实际、预算 + data: ['实际', '预算'] }, series: [ { - // name: '预算', type: 'bar', barWidth: 24, - // barCategoryGap: '50', // 柱子之间的间距（相对于柱子宽度） - // 数据长度与yAxis的分类数量匹配（实际、预算各一个值） - data: [{ - value: this.detailData.real, - label: { - show: true, - position: 'right', - fontSize: 14, + // 修复：拆分数据项，确保每个柱子的样式独立生效 + data: [ + // 实际值柱子（核心：绑定flag颜色） + { + value: realValue, + label: { + show: true, + position: 'right', + fontSize: 14 + }, + // 修复：flag颜色判断独立绑定到实际值柱子 + itemStyle: { + color: flagValue === 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] + } }, - itemStyle: { - color: flagValue === 1 - ? { + // 预算值柱子（固定蓝色渐变） + { + value: targetValue, + label: { + show: true, + position: 'right', + fontSize: 14 + }, + itemStyle: { + color: { type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, + x: 1, 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)' } + { offset: 0, color: '#82CCFF' }, + { offset: 1, color: '#4B9DFF' } ] }, - borderRadius: [4, 4, 0, 0] + borderRadius: [4, 4, 0, 0], + borderWidth: 0 + } } - }, { - value: this.detailData.target, - label: { - show: true, - position: 'right', - fontSize: 14, - }, - itemStyle: { - // 预算的渐变颜色（蓝系渐变） - color: { - type: 'linear', - x: 1, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: '#82CCFF' }, // 浅蓝 - { offset: 1, color: '#4B9DFF' } // 深蓝 - ] - }, - borderRadius: [4, 4, 0, 0], - borderWidth: 0 - }, - },], - - }, + ] + } ] }; - option && this.myChart.setOption(option); + this.myChart.setOption(option, true); // 新增：true表示替换所有配置，避免缓存 - // 窗口缩放适配和销毁逻辑保持不变 - window.addEventListener('resize', () => { + // 优化：防抖resize，避免频繁触发 + const resizeHandler = () => { this.myChart && this.myChart.resize(); - }); + }; + window.removeEventListener('resize', resizeHandler); // 先移除再添加，避免重复绑定 + window.addEventListener('resize', resizeHandler); this.$once('hook:destroyed', () => { - window.removeEventListener('resize', () => { - this.myChart && this.myChart.resize(); - }); + window.removeEventListener('resize', resizeHandler); this.myChart && this.myChart.dispose(); + this.myChart = null; }); } }, diff --git a/src/views/home/electricityCostAnalysisComponents/yearRelatedMetrics.vue b/src/views/home/electricityCostAnalysisComponents/yearRelatedMetrics.vue index eb71709c..68792250 100644 --- a/src/views/home/electricityCostAnalysisComponents/yearRelatedMetrics.vue +++ b/src/views/home/electricityCostAnalysisComponents/yearRelatedMetrics.vue @@ -1,36 +1,24 @@
+
-
@@ -44,55 +43,56 @@ import verticalBarChart from './verticalBarChart.vue'
export default {
name: 'ProductionStatus',
components: { Container, electricityGauge, verticalBarChart },
- // mixins: [resize],
props: {
- ytdData: { // 接收父组件传递的设备数据数组
+ totalData: {
type: Object,
- default: () => {} // 默认空数组，避免报错
+ 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: this.totalData.proportion ? Number(this.totalData.proportion) : 0,
+ diff: this.totalData.diffValue,
+ real: this.totalData.value,
+ target: this.totalData.targetValue,
+ thb: this.totalData.thb,
+ // ...rawData,
+ flag: 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值
+ */
}
}
@@ -126,6 +126,7 @@ export default {
height: 205px;
background: #F9FCFF;
padding: 16px 0 0 10px;
+
.title {
// width: 190px;
height: 18px;
diff --git a/src/views/home/electricityCostAnalysisComponents/verticalBarChart.vue b/src/views/home/electricityCostAnalysisComponents/verticalBarChart.vue
index ec9643f0..6a72b359 100644
--- a/src/views/home/electricityCostAnalysisComponents/verticalBarChart.vue
+++ b/src/views/home/electricityCostAnalysisComponents/verticalBarChart.vue
@@ -1,8 +1,8 @@
- 销量·万㎡
-
-
- 完成率:{{monthAnalysis[0].rate}}%
- 差值:{{monthAnalysis[0].diff}}
-
+
+
+
+
+ 销量·万元
-
-
-
-
+
-
-
-
+
+
diff --git a/src/views/home/electricityCostAnalysisComponents/operatingBar.vue b/src/views/home/electricityCostAnalysisComponents/operatingBar.vue
index 8429afc9..0f6ea951 100644
--- a/src/views/home/electricityCostAnalysisComponents/operatingBar.vue
+++ b/src/views/home/electricityCostAnalysisComponents/operatingBar.vue
@@ -51,7 +51,7 @@ import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBar },
- props: ["chartData", 'dateData'],
+ props: ["chartData",'dateData'],
emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
@@ -70,10 +70,10 @@ export default {
computed: {
// 排序后的数据源（核心：根据selectedSortValue重新排序）
currentDataSource() {
- if (!this.chartData?.factory) return {};
+ if (!this.chartData) return {};
// 深拷贝原始数据，避免修改原数据
- const factory = JSON.parse(JSON.stringify(this.chartData.factory));
+ const factory = JSON.parse(JSON.stringify(this.chartData));
if (!factory.locations.length || !this.selectedSortValue) return factory;
// 构建带索引的数组，方便同步所有字段排序
@@ -82,7 +82,7 @@ export default {
name,
real: factory.reals[index],
target: factory.targets[index],
- rate: factory.rates[index],
+ rate: factory.rate[index],
diff: factory.diff[index],
flag: factory.flags[index]
}));
@@ -143,7 +143,7 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
- data: data.rates || [],
+ data: data.rate || [],
symbol: 'circle',
symbolSize: 6
},
@@ -219,14 +219,14 @@ export default {
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
- fontSize: 14,
+ fontSize: 14
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
- fontSize: 14,
+ fontSize: 14
},
// 未达标样式
unachieved: {
@@ -234,7 +234,7 @@ export default {
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
- fontSize: 14,
+ fontSize: 14
}
}
},
@@ -413,7 +413,7 @@ export default {
height: 24px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
- fontSize: 12px;
+ font-size: 12px;
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
@@ -485,7 +485,7 @@ export default {
.dropdown-option {
padding: 6px 12px;
- fontSize: 12px;
+ font-size: 12px;
color: #333;
cursor: pointer;
text-align: left;
diff --git a/src/views/home/electricityCostAnalysisComponents/operatingLineBarSale.vue b/src/views/home/electricityCostAnalysisComponents/operatingLineBarSale.vue
index 5c46ad38..ed40b4dd 100644
--- a/src/views/home/electricityCostAnalysisComponents/operatingLineBarSale.vue
+++ b/src/views/home/electricityCostAnalysisComponents/operatingLineBarSale.vue
@@ -62,11 +62,7 @@ export default {
console.error('图表容器未找到！');
return;
}
-
- // 只创建一次图表实例
this.myChart = echarts.init(chartDom);
-
- // 绑定点击事件（只绑定一次，永久生效）
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
@@ -94,9 +90,10 @@ export default {
if (itemName === undefined) {
return;
}
+
// 路由跳转时携带序号（或名称+序号）
this.$router.push({
- path: 'operatingRevenueBase',
+ path: 'totalProfitBase',
query: { // 使用query传递参数（推荐），也可使用params
// baseName: itemName,
factory: baseIndex,
@@ -136,7 +133,7 @@ export default {
}
}
},
- grid: {
+ grid: {
top: 30,
bottom: 5,
right: 20,
@@ -175,6 +172,7 @@ export default {
fontSize: 12,
align: 'right'
},
+
splitNumber: 4,
axisTick: { show: false },
axisLabel: {
@@ -183,7 +181,7 @@ export default {
formatter: '{value}'
},
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
- axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
+ axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
},
{
type: 'value',
@@ -199,7 +197,7 @@ export default {
formatter: '{value}%'
},
splitLine: { show: false },
- axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+ axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
splitNumber: 4
}
],
diff --git a/src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleGroup.vue b/src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleGroup.vue
index 91e81381..674cf190 100644
--- a/src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleGroup.vue
+++ b/src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleGroup.vue
@@ -34,7 +34,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
- console.log(this.chartData,'chartData');
+ console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
@@ -83,9 +83,9 @@ export default {
// return html;
// }
},
- grid: {
+ grid: {
top: 30,
- bottom:20,
+ bottom: 20,
right: 10,
left: 25,
containLabel: true
@@ -118,6 +118,7 @@ export default {
fontSize: 12,
align: 'right'
},
+
splitNumber: 4,
axisTick: { show: false },
axisLabel: {
@@ -126,7 +127,7 @@ export default {
formatter: '{value}'
},
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
- axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+ axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
},
// 右侧Y轴：利润占比（百分比）
{
diff --git a/src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleSingle.vue b/src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleSingle.vue
index f4d6d502..ce622ef4 100644
--- a/src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleSingle.vue
+++ b/src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleSingle.vue
@@ -1,5 +1,5 @@
-
+
diff --git a/src/views/home/electricityCostAnalysisComponents/totalOverview.vue b/src/views/home/electricityCostAnalysisComponents/totalOverview.vue
index acc15d77..89456518 100644
--- a/src/views/home/electricityCostAnalysisComponents/totalOverview.vue
+++ b/src/views/home/electricityCostAnalysisComponents/totalOverview.vue
@@ -11,22 +11,21 @@
- 单价·元/㎡
-
-
- 完成率:{{monthAnalysis[1].rate}}%
- 差值:{{monthAnalysis[1].diff}}
-
+
+
@@ -38,167 +26,102 @@
+ 单价·万元
-
-
+
- {{ ytdData?.rate || 0}}%
+ {{ formatRate(factoryData?.completeRate) }}%
- 同比{{ ytdData?.yoyRate || 0}}%
-
-
+ 同比{{ formatRate(factoryData?.thb) }}%
+
+
-
+ 同比{{ formatRate(factoryData?.thb) }}%
+
+
-
-
-
+
+
- 完成率:{{detailData.rate}}%
- 差值:{{detailData.diff}}
+ 完成率:{{detailData.completeRate}}%
+ 差值:{{detailData.diff}}
`; - // params.forEach(item => { - // const unit = item.seriesName === '完成率' ? '%' : ( - // ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元' - // ); - // html += `${item.marker} ${item.seriesName}: ${item.value}${unit}
`; - // }); - // return html; - // } + label: { backgroundColor: '#6a7985' } + } }, grid: { top: 40, @@ -103,122 +85,98 @@ export default { right: 80, left: 10, containLabel: true, - show: false // 隐藏grid背景，避免干扰 + show: false }, xAxis: { - // 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值 type: 'value', - // offset: 0, - // boundaryGap: true , - // boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白 axisTick: { show: false }, min: 0, - // splitNumber: 4, - axisLine: { - show: true, - lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } - }, - axisLabel: { - color: 'rgba(0, 0, 0, 0.45)', - fontSize: 12, - interval: 0, - padding: [5, 0, 0, 0] - }, - // data: xData // 数值轴不需要手动设置data，由series的数据自动生成 + axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }, + axisLabel: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 12, interval: 0, padding: [5, 0, 0, 0] } }, yAxis: { type: 'category', - axisLabel: { - color: 'rgba(0, 0, 0, 0.75)', - fontSize: 12, - interval: 0, - padding: [5, 0, 0, 0] - }, - axisLine: { - show: true, // 显示Y轴轴线（关键） - lineStyle: { - color: '#E5E6EB', // 轴线颜色（浅灰色，可自定义） - width: 1, // 轴线宽度 - type: 'solid' // 实线（可选：dashed虚线、dotted点线） - } - }, + axisLabel: { color: 'rgba(0, 0, 0, 0.75)', fontSize: 12, interval: 0, padding: [5, 0, 0, 0] }, + axisLine: { show: true, lineStyle: { color: '#E5E6EB', width: 1, type: 'solid' } }, axisTick: { show: false }, - // padding: [300, 100, 100, 100], - data: ['实际', '预算'] // y轴分类：实际、预算 + data: ['实际', '预算'] }, series: [ { - // name: '预算', type: 'bar', barWidth: 24, - // barCategoryGap: '50', // 柱子之间的间距（相对于柱子宽度） - // 数据长度与yAxis的分类数量匹配（实际、预算各一个值） - data: [{ - value: this.detailData.real, - label: { - show: true, - position: 'right', - fontSize: 14, + // 修复：拆分数据项，确保每个柱子的样式独立生效 + data: [ + // 实际值柱子（核心：绑定flag颜色） + { + value: realValue, + label: { + show: true, + position: 'right', + fontSize: 14 + }, + // 修复：flag颜色判断独立绑定到实际值柱子 + itemStyle: { + color: flagValue === 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] + } }, - itemStyle: { - color: flagValue === 1 - ? { + // 预算值柱子（固定蓝色渐变） + { + value: targetValue, + label: { + show: true, + position: 'right', + fontSize: 14 + }, + itemStyle: { + color: { type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, + x: 1, 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)' } + { offset: 0, color: '#82CCFF' }, + { offset: 1, color: '#4B9DFF' } ] }, - borderRadius: [4, 4, 0, 0] + borderRadius: [4, 4, 0, 0], + borderWidth: 0 + } } - }, { - value: this.detailData.target, - label: { - show: true, - position: 'right', - fontSize: 14, - }, - itemStyle: { - // 预算的渐变颜色（蓝系渐变） - color: { - type: 'linear', - x: 1, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: '#82CCFF' }, // 浅蓝 - { offset: 1, color: '#4B9DFF' } // 深蓝 - ] - }, - borderRadius: [4, 4, 0, 0], - borderWidth: 0 - }, - },], - - }, + ] + } ] }; - option && this.myChart.setOption(option); + this.myChart.setOption(option, true); // 新增：true表示替换所有配置，避免缓存 - // 窗口缩放适配和销毁逻辑保持不变 - window.addEventListener('resize', () => { + // 优化：防抖resize，避免频繁触发 + const resizeHandler = () => { this.myChart && this.myChart.resize(); - }); + }; + window.removeEventListener('resize', resizeHandler); // 先移除再添加，避免重复绑定 + window.addEventListener('resize', resizeHandler); this.$once('hook:destroyed', () => { - window.removeEventListener('resize', () => { - this.myChart && this.myChart.resize(); - }); + window.removeEventListener('resize', resizeHandler); this.myChart && this.myChart.dispose(); + this.myChart = null; }); } }, diff --git a/src/views/home/electricityCostAnalysisComponents/yearRelatedMetrics.vue b/src/views/home/electricityCostAnalysisComponents/yearRelatedMetrics.vue index eb71709c..68792250 100644 --- a/src/views/home/electricityCostAnalysisComponents/yearRelatedMetrics.vue +++ b/src/views/home/electricityCostAnalysisComponents/yearRelatedMetrics.vue @@ -1,36 +1,24 @@
-
-
-
-
-
- 销量·万㎡
-
-
- 完成率:{{ytdAnalysis[0].rate}}%
- 差值:{{ytdAnalysis[0].diff}}
-
+
+
+
+
+ 销量·万元
-
-
-
-
+
-
-
-
+
+
diff --git a/src/views/home/fullCostAnalysisComponents/operatingLineBarSaleSingle.vue b/src/views/home/fullCostAnalysisComponents/operatingLineBarSaleSingle.vue
index 25ae0f68..27c7b7eb 100644
--- a/src/views/home/fullCostAnalysisComponents/operatingLineBarSaleSingle.vue
+++ b/src/views/home/fullCostAnalysisComponents/operatingLineBarSaleSingle.vue
@@ -85,7 +85,7 @@ export default {
},
grid: {
top: 25,
- bottom: 20,
+ bottom: 25,
right: 10,
left: 2,
containLabel: true
diff --git a/src/views/home/fullCostAnalysisComponents/operatingSingleBar.vue b/src/views/home/fullCostAnalysisComponents/operatingSingleBar.vue
index 25357471..a748b909 100644
--- a/src/views/home/fullCostAnalysisComponents/operatingSingleBar.vue
+++ b/src/views/home/fullCostAnalysisComponents/operatingSingleBar.vue
@@ -1,6 +1,6 @@
-
- 单价·元/㎡
-
-
- 完成率:{{ytdAnalysis[1].rate}}%
- 差值:{{ytdAnalysis[1].diff}}
-
+
+
@@ -38,163 +26,102 @@
+ 单价·万元
-
-
+
-
-
+
@@ -35,59 +35,6 @@ export default {
show: true,
position: 'top',
offset: [0, 0],
- // 固定label尺寸：68px×20px
- width: 68,
- height: 20,
- // 关键：去掉换行，让文字在一行显示，适配小尺寸
- formatter: function (params) {
- return `{value|完成率}{rate|${rate}%}`;
- },
- // 核心样式：匹配CSS需求
- backgroundColor: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
- // { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
- // { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
- { offset: 0.2, color: '#ffffff' }, // 主体白色
- { offset: 1, color: '#ffffff' }
- ]
- },
- // 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
- shadowColor: 'rgba(191,203,215,0.5)',
- shadowBlur: 2,
- shadowOffsetX: 0,
- shadowOffsetY: 2,
- // 圆角：4px
- borderRadius: 4,
- // 移除边框
- borderColor: '#BFCBD577',
- borderWidth: 0,
- // 文字垂直居中（针对富文本）
- lineHeight: 20,
- rich: {
- value: {
- // 缩小宽度和内边距，适配68px容器
- width: 'auto', // 自动宽度，替代固定40px
- padding: [5, 0, 5, 10], // 缩小内边距
- align: 'center',
- color: '#464646', // 文字灰色
- fontSize: 11, // 缩小字体，适配小尺寸
- lineHeight: 20 // 垂直居中
- },
- rate: {
- width: 'auto',
- padding: [5, 10, 5, 0],
- align: 'center',
- color: '#0B58FF', // 数字蓝色
- fontSize: 11,
- lineHeight: 20
- }
- }
},
itemStyle: {
color: {
@@ -109,69 +56,6 @@ export default {
show: true,
position: 'top',
offset: [0, 0],
- // 固定label尺寸：68px×20px
- width: 68,
- height: 20,
- // 关键：去掉换行，让文字在一行显示，适配小尺寸
- formatter: (params) => {
-
- // const flags = flags || [];
- const currentDiff = diff || 0;
- const currentFlag = this.detailData?.flag || 0;
- // const prefix = currentFlag === 1 ? '+' : '';
- // 根据标志位选择不同的样式类
- if (currentFlag === 1) {
- // 达标 - 使用 rate-achieved 样式
- return `{achieved|${currentDiff}}{text|差值}`;
- } else {
- // 未达标 - 使用 rate-unachieved 样式
- return `{unachieved|${currentDiff}}{text|差值}`;
- }
- },
- backgroundColor: {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
- { offset: 0.2, color: '#ffffff' },
- { offset: 1, color: '#ffffff' }
- ]
- },
- shadowColor: 'rgba(191,203,215,0.5)',
- shadowBlur: 2,
- shadowOffsetX: 0,
- shadowOffsetY: 2,
- borderRadius: 4,
- borderColor: '#BFCBD577',
- borderWidth: 0,
- lineHeight: 20,
- rich: {
- text: {
- width: 'auto',
- padding: [5, 10, 5, 0],
- align: 'center',
- color: '#464646',
- fontSize: 11,
- lineHeight: 20
- },
- achieved: {
- width: 'auto',
- padding: [5, 0, 5, 10],
- align: 'center',
- color: '#76DABE', // 与达标的 offset: 1 颜色一致
- fontSize: 11,
- lineHeight: 20
- },
- // 未达标样式
- unachieved: {
- width: 'auto',
- padding: [5, 0, 5, 10],
- align: 'center',
- color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
- fontSize: 11,
- lineHeight: 20
- }
- }
},
itemStyle: {
borderRadius: [4, 4, 0, 0],
@@ -185,7 +69,7 @@ export default {
series: [
{
type: 'bar',
- barWidth: 24,
+ barWidth: 60,
barCategoryGap: '50%',
data: seriesData,
itemStyle: {
diff --git a/src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue b/src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue
index 0c4d9550..07203453 100644
--- a/src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue
+++ b/src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue
@@ -2,65 +2,22 @@
-
-
-
+
+
-
@@ -116,6 +73,57 @@ export default {
}
}
},
+ computed: {
+ indicatorDefs() {
+ return [
+ { key: 'productionCost', name: '制造成本', unit: '元/㎡', route:'/productionCostAnalysis/productionCostAnalysisBase'},
+ { key: 'financialCost', name: '财务费用', unit: '元/㎡',route:'/expenseAnalysis/expenseAnalysisBase' },
+ { key: 'saleCost', name: '销售费用', unit: '元/㎡',route:'/expenseAnalysis/expenseAnalysisBase'},
+ { key: 'manageCost', name: '管理费用', unit: '元/㎡',route:'/expenseAnalysis/expenseAnalysisBase' },
+ { key: 'freight', name: '运费', unit: '元/㎡',route:null },
+ ]
+ },
+ indicators() {
+ let _this = this
+ const fallback = { target: 0, real: 0, completeRate: 0, diff: 0, flag: 0 }
+ const list = Object.entries(_this.relatedDetailData).map(([title, data]) => {
+ return {
+ title: title,
+ target: data.target,
+ real: data.real,
+ completeRate: data.completeRate,
+ diff: data.diff
+ };
+ });
+ return _this.indicatorDefs.map(def => {
+ const data = list.find(item => item && item.title === def.name) || fallback
+ const detailData = {
+ ...data,
+ flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target),
+ }
+ return {
+ ...def,
+ detailData,
+ sortValue: Number((data && data.real) ?? 0)
+ }
+ })
+ },
+ sortedIndicators() {
+ const unitOrder = ['元/㎡']
+ const unitRank = (u) => {
+ const idx = unitOrder.indexOf(u)
+ return idx === -1 ? 999 : idx
+ }
+
+ return this.indicators.slice().sort((a, b) => {
+ const ur = unitRank(a.unit) - unitRank(b.unit)
+ if (ur !== 0) return ur
+ const vr = (b.sortValue ?? -Infinity) - (a.sortValue ?? -Infinity)
+ if (vr !== 0) return vr
+ return String(a.key).localeCompare(String(b.key))
+ })
+ },
+ },
watch: {
// 监听 relatedData 变化（异步加载场景），同步更新月度数据
relatedData: {
@@ -145,23 +153,18 @@ export default {
}
})
},
- handleRoute(path) {
- this.$router.push({
- path: path
- })
+ getRateFlag(rate, real, target) {
+ if (isNaN(rate) || rate === null || rate === undefined) return 0;
+
+ // 1. 完成率 >= 100 => 达标
+ if (rate >= 100) return 1;
+
+ // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
+ if (rate === 0 && target === 0) return 1;
+
+ // 其他情况 => 未达标
+ return 0;
},
-getRateFlag(rate, real, target) {
- if (isNaN(rate) || rate === null || rate === undefined) return 0;
-
- // 1. 完成率 >= 100 => 达标
- if (rate >= 100) return 1;
-
- // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
- if (rate === 0 && target === 0) return 1;
-
- // 其他情况 => 未达标
- return 0;
-},
handleChange(value) {
console.log('value', value, this.relatedData);
if (value === 'month') {
diff --git a/src/views/home/procurementGainAnalysisComponents/operatingLineBarSaleSingle.vue b/src/views/home/procurementGainAnalysisComponents/operatingLineBarSaleSingle.vue
index 25ae0f68..27c7b7eb 100644
--- a/src/views/home/procurementGainAnalysisComponents/operatingLineBarSaleSingle.vue
+++ b/src/views/home/procurementGainAnalysisComponents/operatingLineBarSaleSingle.vue
@@ -85,7 +85,7 @@ export default {
},
grid: {
top: 25,
- bottom: 20,
+ bottom: 25,
right: 10,
left: 2,
containLabel: true
diff --git a/src/views/home/procurementGainAnalysisComponents/operatingSingleBar.vue b/src/views/home/procurementGainAnalysisComponents/operatingSingleBar.vue
index 07e2f6aa..eb20488c 100644
--- a/src/views/home/procurementGainAnalysisComponents/operatingSingleBar.vue
+++ b/src/views/home/procurementGainAnalysisComponents/operatingSingleBar.vue
@@ -1,6 +1,6 @@
-
- 制造成本·元/㎡
+ {{ item.name }}·{{ item.unit }}
-
-
-
-
-
- 财务费用·元/㎡
-
-
-
-
-
-
- 销售费用·元/㎡
-
-
-
-
-
-
- 管理费用·元/㎡
-
-
-
-
-
- 运费·元/㎡
-
-
-
+ 完成率:{{item.detailData.completeRate}}%
+ 差值:{{item.detailData.diff}}
+
-
+
@@ -35,59 +35,6 @@ export default {
show: true,
position: 'top',
offset: [0, 0],
- // 固定label尺寸：68px×20px
- width: 68,
- height: 20,
- // 关键：去掉换行，让文字在一行显示，适配小尺寸
- formatter: function (params) {
- return `{value|完成率}{rate|${rate}%}`;
- },
- // 核心样式：匹配CSS需求
- backgroundColor: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
- // { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
- // { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
- { offset: 0.2, color: '#ffffff' }, // 主体白色
- { offset: 1, color: '#ffffff' }
- ]
- },
- // 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
- shadowColor: 'rgba(191,203,215,0.5)',
- shadowBlur: 2,
- shadowOffsetX: 0,
- shadowOffsetY: 2,
- // 圆角：4px
- borderRadius: 4,
- // 移除边框
- borderColor: '#BFCBD577',
- borderWidth: 0,
- // 文字垂直居中（针对富文本）
- lineHeight: 20,
- rich: {
- value: {
- // 缩小宽度和内边距，适配68px容器
- width: 'auto', // 自动宽度，替代固定40px
- padding: [5, 0, 5, 10], // 缩小内边距
- align: 'center',
- color: '#464646', // 文字灰色
- fontSize: 11, // 缩小字体，适配小尺寸
- lineHeight: 20 // 垂直居中
- },
- rate: {
- width: 'auto',
- padding: [5, 10, 5, 0],
- align: 'center',
- color: '#0B58FF', // 数字蓝色
- fontSize: 11,
- lineHeight: 20
- }
- }
},
itemStyle: {
color: {
@@ -109,72 +56,6 @@ export default {
show: true,
position: 'top',
offset: [0, 0],
- // 固定label尺寸：68px×20px
- width: 68,
- height: 20,
- // 关键：去掉换行，让文字在一行显示，适配小尺寸
- formatter: (params) => {
-
- // const flags = flags || [];
- const currentDiff = diff || 0;
- const currentFlag = this.detailData?.flag || 0;
- // console.log('flags[params.dataIndex]', flags);
-
- const prefix = currentFlag === 1 ? '+' : '';
-
- // 根据标志位选择不同的样式类
- if (currentFlag === 1) {
- // 达标 - 使用 rate-achieved 样式
- return `{achieved|${currentDiff}}{text|差值}`;
- } else {
- // 未达标 - 使用 rate-unachieved 样式
- return `{unachieved|${currentDiff}}{text|差值}`;
- }
- },
- backgroundColor: {
- type: 'linear',
- x: 0, y: 0, x2: 0, y2: 1,
- colorStops: [
- { offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
- { offset: 0.2, color: '#ffffff' },
- { offset: 1, color: '#ffffff' }
- ]
- },
- shadowColor: 'rgba(191,203,215,0.5)',
- shadowBlur: 2,
- shadowOffsetX: 0,
- shadowOffsetY: 2,
- borderRadius: 4,
- borderColor: '#BFCBD577',
- borderWidth: 0,
- lineHeight: 20,
- rich: {
- text: {
- width: 'auto',
- padding: [5, 10, 5, 0],
- align: 'center',
- color: '#464646',
- fontSize: 11,
- lineHeight: 20
- },
- achieved: {
- width: 'auto',
- padding: [5, 0, 5, 10],
- align: 'center',
- color: '#76DABE', // 与达标的 offset: 1 颜色一致
- fontSize: 11,
- lineHeight: 20
- },
- // 未达标样式
- unachieved: {
- width: 'auto',
- padding: [5, 0, 5, 10],
- align: 'center',
- color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
- fontSize: 11,
- lineHeight: 20
- }
- }
},
itemStyle: {
borderRadius: [4, 4, 0, 0],
@@ -188,7 +69,7 @@ export default {
series: [
{
type: 'bar',
- barWidth: 24,
+ barWidth: 60,
barCategoryGap: '50%',
data: seriesData,
itemStyle: {
diff --git a/src/views/home/procurementGainAnalysisComponents/relatedIndicatorsAnalysis.vue b/src/views/home/procurementGainAnalysisComponents/relatedIndicatorsAnalysis.vue
index 6944ee7a..8074c3c9 100644
--- a/src/views/home/procurementGainAnalysisComponents/relatedIndicatorsAnalysis.vue
+++ b/src/views/home/procurementGainAnalysisComponents/relatedIndicatorsAnalysis.vue
@@ -3,61 +3,21 @@
-
-
+
+
-
@@ -106,6 +66,57 @@ export default {
}
}
},
+ computed: {
+ indicatorDefs() {
+ return [
+ { key: 'grossProfit', name: '大宗类', unit: '万元', route:null},
+ { key: 'stoneProfit', name: '石料类', unit: '万元',route:null},
+ { key: 'materialProfit', name: '材料类', unit: '万元',route:null},
+ { key: 'powerProfit', name: '动力类', unit: '万元',route:null},
+ { key: 'technicalServiceProfit', name: '技术服务类', unit: '万元',route:'/salesVolumeAnalysis/doublePlatedBase' },
+ ]
+ },
+ indicators() {
+ let _this = this
+ const fallback = { target: 0, real: 0, completeRate: 0, diff: 0, flag: 0 }
+ const list = Object.entries(_this.relatedDetailData).map(([title, data]) => {
+ return {
+ title: title,
+ target: data.target,
+ real: data.real,
+ completeRate: data.completeRate,
+ diff: data.diff
+ };
+ });
+ return _this.indicatorDefs.map(def => {
+ const data = list.find(item => item && item.title.includes(def.name.slice(0, -1))) || fallback
+ const detailData = {
+ ...data,
+ flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target),
+ }
+ return {
+ ...def,
+ detailData,
+ sortValue: Number((data && data.real) ?? 0)
+ }
+ })
+ },
+ sortedIndicators() {
+ const unitOrder = ['万元']
+ const unitRank = (u) => {
+ const idx = unitOrder.indexOf(u)
+ return idx === -1 ? 999 : idx
+ }
+
+ return this.indicators.slice().sort((a, b) => {
+ const ur = unitRank(a.unit) - unitRank(b.unit)
+ if (ur !== 0) return ur
+ const vr = (b.sortValue ?? -Infinity) - (a.sortValue ?? -Infinity)
+ if (vr !== 0) return vr
+ return String(a.key).localeCompare(String(b.key))
+ })
+ },
+ },
watch: {
// 监听 relatedData 变化（异步加载场景），同步更新月度数据
relatedData: {
@@ -131,9 +142,17 @@ export default {
path: path
})
},
- getRateFlag(rate) {
+ getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
- return +(rate >= 100 || rate === 0);
+
+ // 1. 完成率 >= 100 => 达标
+ if (rate >= 100) return 1;
+
+ // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
+ if (rate === 0 && target === 0) return 1;
+
+ // 其他情况 => 未达标
+ return 0;
},
handleChange(value) {
console.log('value', value, this.relatedData);
diff --git a/src/views/home/productionCostAnalysis/combustible.vue b/src/views/home/productionCostAnalysis/combustible.vue
index c0e02f81..4bc1e55a 100644
--- a/src/views/home/productionCostAnalysis/combustible.vue
+++ b/src/views/home/productionCostAnalysis/combustible.vue
@@ -2,7 +2,7 @@
- 大宗类·万元
+ {{ item.name }}·{{ item.unit }}
-
-
-
-
-
- 石料类·万元
-
-
-
-
-
-
- 材料类·万元
-
-
-
-
-
-
- 动力类·万元
-
-
-
-
-
- 技术服务类·万元
-
-
-
+ 完成率:{{item.detailData.completeRate}}%
+ 差值:{{item.detailData.diff}}
+
+
+
+
+
+
diff --git a/src/views/home/productionCostAnalysis/fuelCostAnalysis.vue b/src/views/home/productionCostAnalysis/fuelCostAnalysis.vue
index ff3b4e91..fb4f5807 100644
--- a/src/views/home/productionCostAnalysis/fuelCostAnalysis.vue
+++ b/src/views/home/productionCostAnalysis/fuelCostAnalysis.vue
@@ -33,7 +33,7 @@
diff --git a/src/views/home/productionCostAnalysis/procMfgOverheadCost.vue b/src/views/home/productionCostAnalysis/procMfgOverheadCost.vue
index d3ff72ce..325812d7 100644
--- a/src/views/home/productionCostAnalysis/procMfgOverheadCost.vue
+++ b/src/views/home/productionCostAnalysis/procMfgOverheadCost.vue
@@ -37,8 +37,8 @@
grid-template-columns: 804px 804px;
">
diff --git a/src/views/home/productionCostAnalysis/processingFuel.vue b/src/views/home/productionCostAnalysis/processingFuel.vue
index f4b9ea5f..86900f85 100644
--- a/src/views/home/productionCostAnalysis/processingFuel.vue
+++ b/src/views/home/productionCostAnalysis/processingFuel.vue
@@ -2,7 +2,7 @@
+
+
+
+
+
+
+
diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarFuel.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarFuel.vue
index 50594cbf..019f165f 100644
--- a/src/views/home/productionCostAnalysisComponents/dataTrendBarFuel.vue
+++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarFuel.vue
@@ -64,10 +64,13 @@ export default {
profitOptions: [
'原片原料成本',
'硅砂',
- '海砂',
'纯碱',
'白云石',
'石灰石',
+ '复合澄清剂',
+ '氢氧化铝',
+ '助溶剂',
+ '碎玻璃'
]
};
},
diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuel.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuel.vue
index c7d0c077..f3e9ce0f 100644
--- a/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuel.vue
+++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarSingleFuel.vue
@@ -66,6 +66,7 @@ export default {
'产量',
'单耗',
'消耗量',
+ '日均消耗量'
]
};
},
diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendSingleCCA.vue b/src/views/home/productionCostAnalysisComponents/dataTrendSingleCCA.vue
new file mode 100644
index 00000000..20cd05d9
--- /dev/null
+++ b/src/views/home/productionCostAnalysisComponents/dataTrendSingleCCA.vue
@@ -0,0 +1,250 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/home/productionCostAnalysisComponents/monthlyThreeRelatedMetricsCCA.vue b/src/views/home/productionCostAnalysisComponents/monthlyThreeRelatedMetricsCCA.vue
new file mode 100644
index 00000000..36738503
--- /dev/null
+++ b/src/views/home/productionCostAnalysisComponents/monthlyThreeRelatedMetricsCCA.vue
@@ -0,0 +1,239 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/home/productionCostAnalysisComponents/operatingLineBarSale.vue b/src/views/home/productionCostAnalysisComponents/operatingLineBarSale.vue
index 45d303cd..0bfb96bc 100644
--- a/src/views/home/productionCostAnalysisComponents/operatingLineBarSale.vue
+++ b/src/views/home/productionCostAnalysisComponents/operatingLineBarSale.vue
@@ -140,7 +140,7 @@ export default {
top: 30,
bottom: 5,
right: 20,
- left: 25,
+ left: 35,
containLabel: true
},
xAxis: [
diff --git a/src/views/home/productionCostAnalysisComponents/operatingSingleBar.vue b/src/views/home/productionCostAnalysisComponents/operatingSingleBar.vue
index a7f28c63..6457cf87 100644
--- a/src/views/home/productionCostAnalysisComponents/operatingSingleBar.vue
+++ b/src/views/home/productionCostAnalysisComponents/operatingSingleBar.vue
@@ -71,7 +71,7 @@ export default {
series: [
{
type: 'bar',
- barWidth: 60,
+ barWidth: 40,
barCategoryGap: '50%',
data: seriesData,
itemStyle: {
diff --git a/src/views/home/productionCostAnalysisComponents/relateFuelCostAnalysis.vue b/src/views/home/productionCostAnalysisComponents/relateFuelCostAnalysis.vue
index 03e46ae0..5a058093 100644
--- a/src/views/home/productionCostAnalysisComponents/relateFuelCostAnalysis.vue
+++ b/src/views/home/productionCostAnalysisComponents/relateFuelCostAnalysis.vue
@@ -13,7 +13,7 @@
+
+
+
+
+
+
+ {{ item.name }}·{{ item.unit }}
+
+
+ 完成率:{{item.data.proportion}}%
+ 差值:{{item.data.diffValue}}
+
+
{{ item.name }}·{{ item.unit }}
-
+
-
完成率:{{item.data.proportion}}%
差值:{{item.data.diffValue}}
@@ -65,10 +65,14 @@ export default {
indicatorDefs() {
return [
{ key: 'silicaSand', name: '硅砂', unit: '元/㎡', route: 'SIMFRMCostAnalysis'},
- { key: 'seaSand', name: '海砂', unit: '元/㎡', route: 'SIMFRMCostAnalysis'},
+ // { key: 'seaSand', name: '海砂', unit: '元/㎡', route: 'SIMFRMCostAnalysis'},
{ key: 'sodaAsh', name: '纯碱', unit: '元/㎡', route: 'SIMFRMCostAnalysis'},
{ key: 'dolomite', name: '白云石', unit: '元/㎡', route: 'SIMFRMCostAnalysis'},
{ key: 'limestone', name: '石灰石', unit: '元/㎡', route: 'SIMFRMCostAnalysis'},
+ { key: 'compoundClarifyingAgent', name: '复合澄清剂', unit: '元/㎡', route: 'compositeClarifyingAgentCostAnalysis'},
+ { key: 'ATH', name: '氢氧化铝', unit: '元/㎡', route: null},
+ { key: 'cosolvent', name: '助溶剂', unit: '元/㎡', route: null},
+ { key: 'brokenGlass', name: '碎玻璃', unit: '元/㎡', route: null},
]
},
indicators() {
@@ -166,7 +170,7 @@ export default {
}
.dashboard {
- width: 310px;
+ width: 194px;
height: 205px;
background: #F9FCFF;
padding: 16px 0 0 10px;
diff --git a/src/views/home/productionCostAnalysisComponents/relateSingleFuelCostAnalysis.vue b/src/views/home/productionCostAnalysisComponents/relateSingleFuelCostAnalysis.vue
index a6bc2a60..1102a7ba 100644
--- a/src/views/home/productionCostAnalysisComponents/relateSingleFuelCostAnalysis.vue
+++ b/src/views/home/productionCostAnalysisComponents/relateSingleFuelCostAnalysis.vue
@@ -68,7 +68,8 @@ export default {
{ key: 'rawMaterialCost', name: '采购单价', unit: '元/吨'},
{ key: 'fuelCost', name: '产量', unit: '吨'},
{ key: 'electricityCost', name: '单耗', unit: '吨'},
- { key: 'laborCost', name: '消耗量', unit: '吨'}
+ { key: 'laborCost', name: '消耗量', unit: '吨'},
+ { key: 'laborCostDay', name: '日均消耗量', unit: '吨'}
]
},
indicators() {
@@ -156,7 +157,7 @@ export default {
}
.dashboard {
- width: 390px;
+ width: 312px;
height: 205px;
background: #F9FCFF;
padding: 16px 0 0 10px;
diff --git a/src/views/home/productionCostAnalysisComponents/yearThreeRelatedMetricsCCA.vue b/src/views/home/productionCostAnalysisComponents/yearThreeRelatedMetricsCCA.vue
new file mode 100644
index 00000000..36738503
--- /dev/null
+++ b/src/views/home/productionCostAnalysisComponents/yearThreeRelatedMetricsCCA.vue
@@ -0,0 +1,239 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue
index c122e08f..b9bec254 100644
--- a/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue
+++ b/src/views/home/salesVolumeAnalysisComponents/monthlyRelatedMetrics.vue
@@ -1,31 +1,21 @@
+
+
+
+
+
+
+ {{ item.name }}·{{ item.unit }}
+
+
+ 完成率:{{item.data.proportion}}%
+ 差值:{{item.data.diffValue}}
+
+
-
-
-
+
+
-
@@ -35,7 +25,6 @@
- 产量·万㎡
+ {{ item.name }}·{{ item.unit }}
-
-
-
-
- 销量·万㎡
-
-
-
+ 完成率:{{item.detailData.completeRate}}%
+ 差值:{{item.detailData.diff}}
+