制造成本分析修改
This commit is contained in:
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<div class="topItem-container" style="display: flex; gap: 8px">
|
||||
<div
|
||||
v-for="item in sortedIndicators"
|
||||
:key="item.key"
|
||||
class="dashboard"
|
||||
@click="handleDashboardClick(item.name)"
|
||||
>
|
||||
<div class="title">
|
||||
{{ item.name }}·{{ item.unit }}
|
||||
</div>
|
||||
<div style='font-size: 16px;text-align: right;padding-right: 5px;'>
|
||||
<span>完成率:<span style='color: #0B58FF;'>{{item.data.proportion}}%</span></span>
|
||||
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:item.data.completed>0?'#30B590':'#FF9423'}" >{{item.data.diffValue}}</span></span>
|
||||
</div>
|
||||
<operatingSingleBar :detailData="item.data"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
import operatingSingleBar from './operatingSingleBar.vue'
|
||||
|
||||
// import * as echarts from 'echarts'
|
||||
// import rawItem from './raw-Item.vue'
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
// 接收父组件传递的 月度+累计 组合数据（原有配置保留，仅优化注释）
|
||||
relatedData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
factory: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
dateData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
// 可选：动态标题（原有配置保留）
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
// 注释无效的activeData，保持数据简洁（样式不变）
|
||||
// activeData: this.relatedData || []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
indicatorDefs() {
|
||||
return [
|
||||
{ key: 'mx', name: '芒硝', unit: '元/㎡'},
|
||||
{ key: 'xsn', name: '硝酸钠', unit: '元/㎡'},
|
||||
{ key: 'jtsn', name: '焦锑酸钠', unit: '元/㎡'},
|
||||
]
|
||||
},
|
||||
indicators() {
|
||||
const fallback = { targetValue: 0, value: 0, completed: 0, diffValue: 0 }
|
||||
const list = (Array.isArray(this.relatedData) ? this.relatedData : [])
|
||||
|
||||
return this.indicatorDefs.map(def => {
|
||||
const data = list.find(item => item && item.name.includes(def.name)) || fallback
|
||||
return {
|
||||
...def,
|
||||
data,
|
||||
sortValue: Number((data && data.value) ?? 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注释（若需恢复可直接启用，样式不变）
|
||||
// watch: {
|
||||
// // 可选：监听 relatedData 初始变化（若父组件异步传递数据，确保 activeData 同步更新）
|
||||
// relatedData: {
|
||||
// handler(newVal) {
|
||||
// this.activeData = newVal.relatedMon || [];
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 优化打印日志，输出有效数据（移除无效的activeData打印，样式不变）
|
||||
console.log('组件挂载时的相关数据：', this.relatedData);
|
||||
},
|
||||
methods: {
|
||||
handleDashboardClick(name) {
|
||||
this.$router.push({
|
||||
path: 'singleProcMfgOverheadCost',
|
||||
query: {
|
||||
name,
|
||||
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
|
||||
dateData: this.dateData
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
width: 250px;
|
||||
height: 205px;
|
||||
background: #F9FCFF;
|
||||
padding: 16px 0 0 10px;
|
||||
|
||||
.title {
|
||||
// width: 190px;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// .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);
|
||||
}
|
||||
|
||||
.production-status-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style> -->
|
||||
Reference in New Issue
Block a user