mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

制造成本分析修改

Browse Source
This commit is contained in:
朱菊兰
2026-03-25 14:10:27 +08:00
parent bb66f97b95
commit 4f7466bb29
59 changed files with 3909 additions and 1779 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
src/views/home/electricityCostAnalysisComponents/monthlyRelatedMetrics.vue
View File

@@ -1,36 +1,24 @@
<template>
<div style="flex: 1">
<Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
<div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
<!-- 销量模块（直接传递整合了flag的salesData） -->
<div class="dashboard left" @click="handleDashboardClick('/salesVolumeAnalysis/salesVolumeAnalysisBase')">
<div style='position: relative;'>
<div class="title">
销量·万㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{monthAnalysis[0].rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:monthAnalysis[0].flags>0?'#30B590':'#FF9423'}" >{{monthAnalysis[0].diff}}</span></span>
</div>
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
<div class="topItem-container" style="display: flex; gap: 8px;">
<div class="dashboard left">
<div class="title">
销量·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="salesData"></operatingSingleBar>
<div class="line">
<operatingSingleBar></operatingSingleBar>
</div>
</div>
<!-- 单价模块（直接传递整合了flag的unitPriceData） -->
<div class="dashboard right" @click="handleDashboardClick('/unitPriceAnalysis/unitPriceAnalysisBase')">
<div style='position: relative;'>
<div class="title">
单价·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{monthAnalysis[1].rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:monthAnalysis[1].flags>0?'#30B590':'#FF9423'}" >{{monthAnalysis[1].diff}}</span></span>
</div>
<div class="dashboard right">
<div class="title">
单价·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
<div class="line">
<operatingSingleBar></operatingSingleBar>
</div>
</div>
</div>
@@ -38,167 +26,102 @@
</Container>
</div>
</template>
<script>
import Container from './container.vue'
import operatingSingleBar from './operatingSingleBar.vue'
import verticalBarChart from './verticalBarChart.vue'
// import * as echarts from 'echarts'
// import rawItem from './raw-Item.vue'
export default {
name: 'ProductionStatus',
components: { Container, operatingSingleBar },
components: { Container, operatingSingleBar, verticalBarChart },
// mixins: [resize],
props: {
monthAnalysis: {
itemData: { // 接收父组件传递的设备数据数组
type: Array,
default: () => [
{ title: "销量", budget: 0, real: 0, rate: 0, diff: 0 },
{ title: "单价", budget: 0, real: 0, rate: 0, diff: 0 }
]
default: () => [] // 默认空数组，避免报错
},
dateData: {
type: Object,
default: () => {}
},
title: {
title: { // 接收父组件传递的设备数据数组
type: String,
default: ''
default: () => '' // 默认空数组，避免报错
},
factory: {
type: [String,Number],
default: ''
},
month: {
month: { // 接收父组件传递的设备数据数组
type: String,
default: ''
default: () => '' // 默认空数组，避免报错
},
},
data() {
return {
chart: null,
// 初始化数据包含flag字段
salesData: { title: "销量", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
unitPriceData: { title: "单价", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
}
},
watch: {
monthAnalysis: {
handler(newVal) {
this.updateChart(newVal)
itemData: {
handler(newValue, oldValue) {
// this.updateChart()
},
deep: true,
immediate: true
deep: true // 若对象内属性变化需触发，需加 deep: true
}
},
// computed: {
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
// sortedItemData() {
// // 过滤出包含“总成本”的项（不区分大小写）
// const totalCostItems = this.itemData.filter(item =>
// item.name && item.name.includes('总成本')
// );
// // 过滤出不包含“总成本”的项
// const otherItems = this.itemData.filter(item =>
// !item.name || !item.name.includes('总成本')
// );
// // 合并：总成本项在前，其他项在后
// return [...totalCostItems, ...otherItems];
// }
// },
mounted() {
this.updateChart(this.monthAnalysis)
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
// this.$nextTick(() => this.updateChart())
},
methods: {
handleDashboardClick(path) {
this.$router.push({
path: path,
query: {
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
dateData: this.dateData
}
})
},
// 判断flag的核心方法
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart(data) {
// 数据兜底
const salesItem = Array.isArray(data) && data[0] ? data[0] : { title: "销量", budget: 0, real: 0, rate: 0, diff: 0 };
const unitPriceItem = Array.isArray(data) && data[1] ? data[1] : { title: "单价", budget: 0, real: 0, rate: 0, diff: 0 };
// 核心修改：将flag整合到数据对象中，无需单独定义salesFlag/unitPriceFlag
this.salesData = {
...salesItem, // 合并原有字段
flag: this.getRateFlag(salesItem.rate, salesItem.real, salesItem.budget) // 新增flag字段
};
this.unitPriceData = {
...unitPriceItem, // 合并原有字段
flag: this.getRateFlag(unitPriceItem.rate, unitPriceItem.real, unitPriceItem.budget) // 新增flag字段
};
// 调试：确认整合后的数据
console.log('整合flag后的销量数据：', this.salesData);
console.log('整合flag后的单价数据：', this.unitPriceData);
}
}
}
</script>
<style lang='scss' scoped>
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
.scroll-container {
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
max-height: 210px;
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
overflow-y: auto;
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
overflow-x: hidden;
/* 4. 内边距：与标题栏和容器边缘对齐 */
padding: 10px 0;
/* 5. 隐藏滚动条（兼容主流浏览器） */
/* Chrome/Safari */
&::-webkit-scrollbar {
display: none;
}
/* Firefox */
scrollbar-width: none;
/* IE/Edge */
-ms-overflow-style: none;
}
.topItem-container {
display: flex;
justify-content: space-between;
}
.dashboard {
flex: 1;
min-width: 300px;
width: 382px;
height: 205px;
background: #F9FCFF;
padding: 16px 0 0 10px;
margin: 0 4px;
.title {
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 2px;
text-align: left;
margin-bottom: 12px;
}
.chart-wrap {
width: 100%;
height: calc(100% - 30px);
}
.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;
// width: 190px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
@@ -207,15 +130,74 @@ getRateFlag(rate, real, target) {
line-height: 18px;
letter-spacing: 1px;
text-align: left;
font-style: normal;
letter-spacing: 2px;
}
.number {
display: flex;
align-items: center;
gap: 6px;
// width: 190px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
font-style: normal;
white-space: nowrap;
}
.mom {
width: 120px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
font-style: normal;
z-index: 1000;
}
}
.dashboard.left {
margin-left: 0;
// .line {
// width: 500px;
// height: 205px;
// background: #F9FCFF;
// }
// .leftTitle {
// .item {
// width: 67px;
// height: 180px;
// padding: 37px 23px;
// background: #F9FCFF;
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 18px;
// color: #000000;
// line-height: 25px;
// letter-spacing: 1px;
// // text-align: left;
// font-style: normal;
// }
// }
</style>
<!-- <style>
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
.production-status-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.dashboard.right {
margin-right: 0;
.production-status-chart-tooltip * {
color: #fff !important;
}
</style>
</style> -->