修改

src/views/home/costComponents/costItemOverview.vue

@@ -0,0 +1,127 @@
+<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>