279 lines
8.3 KiB
Vue
279 lines
8.3 KiB
Vue
<template>
|
||
<div style="flex: 1">
|
||
<Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
|
||
@tabChange="handleChange">
|
||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||
<!-- 横向滚动容器：适配5个成本组件，与第二个组件样式统一 -->
|
||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||
<!-- 1. 原料成本组件：传递对应筛选数据 -->
|
||
<div class="dashboard left" @click="handleDashboardClick('原料成本','fuelCostAnalysis/fuelCostAnalysis')">
|
||
<div class="title">
|
||
原料成本·元/㎡
|
||
</div>
|
||
<div class="line">
|
||
<operatingSingleBar :detailData="rawMaterialCostData"></operatingSingleBar>
|
||
</div>
|
||
</div>
|
||
<!-- 2. 燃料成本组件：传递对应筛选数据 -->
|
||
<div class="dashboard right" @click="handleDashboardClick('燃料成本','combustible/combustible')">
|
||
<div class="title">
|
||
燃料成本·元/㎡
|
||
</div>
|
||
<div class="line">
|
||
<operatingSingleBar :detailData="fuelCostData"></operatingSingleBar>
|
||
</div>
|
||
</div>
|
||
<!-- 3. 电成本组件：传递对应筛选数据 -->
|
||
<div class="dashboard right" @click="handleDashboardClick('电成本','osElectricityCostAnalysis')">
|
||
<div class="title">
|
||
电成本·元/㎡
|
||
</div>
|
||
<div class="line">
|
||
<operatingSingleBar :detailData="electricCostData"></operatingSingleBar>
|
||
</div>
|
||
</div>
|
||
<!-- 4. 人工成本组件：传递对应筛选数据 -->
|
||
<div class="dashboard right" @click="handleDashboardClick('人工成本','originalSheetLabor')">
|
||
<div class="title">
|
||
人工成本·元/㎡
|
||
</div>
|
||
<div class="line">
|
||
<operatingSingleBar :detailData="laborCostData"></operatingSingleBar>
|
||
</div>
|
||
</div>
|
||
<!-- 5. 制造成本组件：传递对应筛选数据 -->
|
||
<div class="dashboard right"
|
||
@click="handleDashboardClick('制造成本','mfgOverheadCostAnalysis/mfgOverheadCostAnalysis')">
|
||
<div class="title">
|
||
制造成本·元/㎡
|
||
</div>
|
||
<div class="line">
|
||
<operatingSingleBar :detailData="manufacturingCostData"></operatingSingleBar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Container from '../components/container.vue'
|
||
import operatingSingleBar from './operatingSingleBar.vue'
|
||
|
||
export default {
|
||
name: 'ProductionStatus', // 保持组件名一致（如需区分可重命名为CostProductionStatus）
|
||
components: { Container, operatingSingleBar },
|
||
props: {
|
||
// 参考第二个组件，改为接收 成本相关数据（支持月度/累计，与第二个组件格式统一）
|
||
relatedData: {
|
||
type: Object,
|
||
default: () => ({
|
||
relatedMon: [], // 成本月度数据（数组格式，存储各成本项）
|
||
relatedTotal: [] // 成本累计数据（数组格式，存储各成本项）
|
||
})
|
||
},
|
||
dateData: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
factory: {
|
||
type: [String, Number],
|
||
default: ''
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
month: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
// 核心：当前激活的成本数据集（默认月度数据，与第二个组件逻辑一致）
|
||
activeData: this.relatedData.relatedMon || [],
|
||
activeMaterial: '' // 选中的成本名称状态
|
||
}
|
||
},
|
||
computed: {
|
||
// 1. 原料成本数据：从激活数据集中筛选，与第二个组件筛选逻辑一致
|
||
rawMaterialCostData() {
|
||
return this.activeData.find(item => item.name === "原料成本") || {
|
||
targetValue: 0,
|
||
value: 0,
|
||
completed: 0,
|
||
diffValue: 0
|
||
};
|
||
},
|
||
// 2. 燃料成本数据：精准筛选
|
||
fuelCostData() {
|
||
return this.activeData.find(item => item.name === "燃料成本") || {
|
||
targetValue: 0,
|
||
value: 0,
|
||
completed: 0,
|
||
diffValue: 0
|
||
};
|
||
},
|
||
// 3. 电成本数据：精准筛选
|
||
electricCostData() {
|
||
return this.activeData.find(item => item.name === "电成本") || {
|
||
targetValue: 0,
|
||
value: 0,
|
||
completed: 0,
|
||
diffValue: 0
|
||
};
|
||
},
|
||
// 4. 人工成本数据：精准筛选
|
||
laborCostData() {
|
||
return this.activeData.find(item => item.name === "人工成本") || {
|
||
targetValue: 0,
|
||
value: 0,
|
||
completed: 0,
|
||
diffValue: 0
|
||
};
|
||
},
|
||
// 5. 制造成本数据：精准筛选
|
||
manufacturingCostData() {
|
||
return this.activeData.find(item => item.name === "制造成本") || {
|
||
targetValue: 0,
|
||
value: 0,
|
||
completed: 0,
|
||
diffValue: 0
|
||
};
|
||
}
|
||
},
|
||
watch: {
|
||
// 监听父组件传递的itemData变化，同步更新激活数据集（与第二个组件逻辑一致）
|
||
relatedData: {
|
||
handler(newVal) {
|
||
this.activeData = newVal.relatedMon || [];
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log('成本组件挂载时的激活数据：', this.activeData);
|
||
},
|
||
methods: {
|
||
|
||
handleChange(value) {
|
||
console.log('Tab 切换值：', value);
|
||
// 根据 Tab 值更新当前激活的数据集
|
||
if (value === 'month') {
|
||
// 切换为月度数据
|
||
this.activeData = this.relatedData.relatedMon || [];
|
||
} else {
|
||
// 切换为累计数据（非 month 均视为累计，可根据实际需求调整判断条件）
|
||
this.activeData = this.relatedData.relatedTotal || [];
|
||
}
|
||
console.log('当前激活数据集：', this.activeData);
|
||
},
|
||
// 成本项点击事件：保留跳转功能，优化参数传递
|
||
handleDashboardClick(material,path) {
|
||
// 1. 记录选中状态
|
||
this.activeMaterial = material;
|
||
// alert(this.$route.query.factory)
|
||
console.log(`点击了【${material}】，月份：${this.month}`, '成本数据：', this.activeData, this.$route.query.factory);
|
||
|
||
// 2. 优化路由跳转：month放入query中（修复原代码参数错误）
|
||
this.$router.push({
|
||
path: path,
|
||
query: {
|
||
name: material,
|
||
month: this.month,
|
||
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
|
||
dateData: this.dateData
|
||
}
|
||
});
|
||
|
||
// 3. 向父组件传递事件（携带当前成本项的详细数据）
|
||
this.$emit('dashboard-click', {
|
||
material,
|
||
month: this.month,
|
||
data: this.activeData.find(item => item.name === material) || {}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
/* 与第二个组件样式统一，优化兼容性 */
|
||
.scroll-container {
|
||
max-height: 210px;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
padding: 10px 0;
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
|
||
.dashboard {
|
||
width: 310px;
|
||
height: 205px;
|
||
background: #F9FCFF;
|
||
padding: 16px 0 0 16px;
|
||
flex-shrink: 0; // 固定宽度，不被挤压（与第二个组件一致）
|
||
|
||
.title {
|
||
height: 18px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
line-height: 18px;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 16px; // 与第二个组件间距一致
|
||
}
|
||
|
||
.number {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 30px;
|
||
height: 32px;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 32px;
|
||
color: #0B58FF;
|
||
line-height: 32px;
|
||
letter-spacing: 2px;
|
||
text-align: left;
|
||
}
|
||
|
||
.mom {
|
||
width: 97px;
|
||
height: 18px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
line-height: 18px;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
}
|
||
|
||
// .line {
|
||
// width: 280px; // 适配310px宽度，避免图表溢出
|
||
// height: 150px; // 与第二个组件图表高度一致
|
||
// }
|
||
}
|
||
|
||
/* 隐藏横向滚动条，与第二个组件样式统一 */
|
||
.topItem-container::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.topItem-container {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
</style>
|