262 lines
7.0 KiB
Vue
262 lines
7.0 KiB
Vue
<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%;">
|
||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局（原有行内样式不变） -->
|
||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||
<div class="dashboard left" @click="handleDashboardClick('镀膜液')">
|
||
<div class="title">
|
||
镀膜液·万元
|
||
</div>
|
||
<div class="line">
|
||
<!-- 绑定镀膜液对应数据：新增数据绑定，样式不变 -->
|
||
<operatingSingleBar :detailData="coatingLiquidData"></operatingSingleBar>
|
||
</div>
|
||
</div>
|
||
<div class="dashboard right" @click="handleDashboardClick('油墨')">
|
||
<div class="title">
|
||
油墨·万元
|
||
</div>
|
||
<div class="line">
|
||
<!-- 绑定油墨对应数据：新增数据绑定，样式不变 -->
|
||
<operatingSingleBar :detailData="inkData"></operatingSingleBar>
|
||
</div>
|
||
</div>
|
||
<div class="dashboard right" @click="handleDashboardClick('釉料')">
|
||
<div class="title">
|
||
釉料·万元
|
||
</div>
|
||
<div class="line">
|
||
<!-- 绑定釉料对应数据：新增数据绑定，样式不变 -->
|
||
<operatingSingleBar :detailData="glazeData"></operatingSingleBar>
|
||
</div>
|
||
</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: () => []
|
||
},
|
||
dateData: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
factory: {
|
||
type: [String, Number],
|
||
default: ''
|
||
},
|
||
// 可选：动态标题（原有配置保留）
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null
|
||
// 注释无效的activeData，保持数据简洁（样式不变）
|
||
// activeData: this.relatedData || []
|
||
}
|
||
},
|
||
computed: {
|
||
// 1. 镀膜液数据：精准筛选对应名称数据，兜底值统一
|
||
coatingLiquidData() {
|
||
return this.relatedData.find(item => (item.name || '').includes('镀膜液')) || {
|
||
targetValue: 0,
|
||
value: 0,
|
||
completed: 0,
|
||
diffValue: 0
|
||
};
|
||
},
|
||
// 2. 油墨数据：精准筛选对应名称数据，兜底值统一
|
||
inkData() {
|
||
return this.relatedData.find(item => (item.name || '').includes('油墨')) || {
|
||
targetValue: 0,
|
||
value: 0,
|
||
completed: 0,
|
||
diffValue: 0
|
||
};
|
||
},
|
||
// 3. 釉料数据：精准筛选对应名称数据，兜底值统一
|
||
glazeData() {
|
||
return this.relatedData.find(item => (item.name || '').includes('釉料')) || {
|
||
targetValue: 0,
|
||
value: 0,
|
||
completed: 0,
|
||
diffValue: 0
|
||
};
|
||
},
|
||
// 保留原有电成本、水成本计算属性（若需使用可直接启用，样式不变）
|
||
// dianData() {
|
||
// return (this.relatedData.find(item => item.name === "电成本")) || {
|
||
// targetValue: 0,
|
||
// value: 0,
|
||
// completed: 0,
|
||
// diffValue: 0
|
||
// };
|
||
// },
|
||
// shuiData() {
|
||
// return (this.relatedData.find(item => item.name === "水成本")) || {
|
||
// targetValue: 0,
|
||
// value: 0,
|
||
// completed: 0,
|
||
// diffValue: 0
|
||
// };
|
||
// }
|
||
},
|
||
// 保留原有watch注释（若需恢复可直接启用，样式不变）
|
||
// watch: {
|
||
// relatedData: {
|
||
// handler(newVal) {
|
||
// this.activeData = newVal.relatedMon || [];
|
||
// },
|
||
// immediate: true,
|
||
// deep: true
|
||
// }
|
||
// },
|
||
mounted() {
|
||
// 优化打印日志，输出有效数据（样式不变）
|
||
console.log('组件挂载时的相关数据：', this.relatedData);
|
||
},
|
||
methods: {
|
||
handleDashboardClick(name) {
|
||
this.$router.push({
|
||
path: 'singleProcAuxMatCost',
|
||
query: {
|
||
name,
|
||
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
|
||
dateData: this.dateData
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
/* 样式100%保留不变，无任何增删改 */
|
||
/* 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 16px;
|
||
|
||
.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: 30px;
|
||
// width: 190px;
|
||
height: 32px;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 32px;
|
||
color: #0B58FF;
|
||
line-height: 32px;
|
||
letter-spacing: 2px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.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;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
// .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> -->
|