128 lines
3.7 KiB
Vue
128 lines
3.7 KiB
Vue
<template>
|
||
<div style="flex: 1">
|
||
<Container name="成本单项总览·元/m²" icon="cockpitItemIcon" size="costMiddleBg" topSize="middle">
|
||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||
<div class="leftTitle" style="display: flex;flex-direction: column;gap: 16px;">
|
||
<div class="item">
|
||
原片成本
|
||
</div>
|
||
<div class="item">
|
||
加工成本
|
||
</div>
|
||
</div>
|
||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||
<div class="topItem-container" style="display: flex; flex-direction: column;gap: 16px;overflow: hidden;">
|
||
<rawSheet :piecesCostViews="piecesCostViews" />
|
||
<processingCost :processCostViews="processCostViews" />
|
||
|
||
</div>
|
||
<!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
|
||
<!-- <div class="top" style="display: flex; width: 100%;">
|
||
<top-item :itemList="parentItemList" />
|
||
</div> -->
|
||
</div>
|
||
</Container>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import Container from './container.vue'
|
||
// import * as echarts from 'echarts'
|
||
import processingCost from './processingCost-Item.vue'
|
||
import rawSheet from './rawSheet-Item.vue'
|
||
|
||
export default {
|
||
name: 'ProductionStatus',
|
||
components: { Container, processingCost, rawSheet },
|
||
// mixins: [resize],
|
||
props: {
|
||
piecesCostViews: { // 接收父组件传递的设备数据数组
|
||
type: Array,
|
||
default: () => [] // 默认空数组，避免报错
|
||
},
|
||
processCostViews: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
|
||
type: Array,
|
||
default: () => [] // 默认空数组，避免报错
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
// parentItemList: [
|
||
// { unit: "销量", targetValue: 16, currentValue: 14.5, progress: 90 },
|
||
// { unit: "产量", targetValue: 16, currentValue: 15.2, progress: 85 },
|
||
// ]
|
||
}
|
||
},
|
||
watch: {
|
||
// productionOverviewVo: {
|
||
// handler(newValue, oldValue) {
|
||
// this.updateChart()
|
||
// },
|
||
// deep: true // 若对象内属性变化需触发，需加 deep: true
|
||
// }
|
||
},
|
||
mounted() {
|
||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||
// this.$nextTick(() => this.updateChart())
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
|
||
.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>
|