From e770dc4fed1fb8fc6ff69e9cb3769f75ded37658 Mon Sep 17 00:00:00 2001
From: juzi <819872918@qq.com>
Date: Thu, 26 Mar 2026 09:52:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=B6=E9=80=A0=E6=88=90=E6=9C=AC=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/svg/turn-data.svg            |  24 ++
 src/views/home/components/container.vue       |   2 +-
 .../procPackMatCost.vue                       |  12 +-
 .../containerPackMatCost.vue                  | 368 ++++++++++++++++++
 .../dataTrendBarProcessingLabor.vue           |   4 +-
 .../dataTrendProcessingLabor.vue              | 210 +++++++++-
 .../operatingLineBarSale.vue                  |  14 +-
 .../operatingLineBarSaleSingle.vue            |  13 +
 .../operatingSingleBar.vue                    |   4 +-
 9 files changed, 628 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/icons/svg/turn-data.svg
 create mode 100644 src/views/home/productionCostAnalysisComponents/containerPackMatCost.vue

diff --git a/src/assets/icons/svg/turn-data.svg b/src/assets/icons/svg/turn-data.svg
new file mode 100644
index 00000000..b27354a6
--- /dev/null
+++ b/src/assets/icons/svg/turn-data.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切换数据</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon和插图" transform="translate(-339.000000, -683.000000)" fill-rule="nonzero">
+            <g id="检测数据" transform="translate(339.000000, 683.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
+                <g id="编组-5" transform="translate(1.358796, 1.358796)">
+                    <path d="M14.6412037,0 C6.56329821,0 0,6.56329821 0,14.6412037 C0,22.7191092 6.56329821,29.2824074 14.6412037,29.2824074 C22.7191092,29.2824074 29.2824074,22.7191092 29.2824074,14.6412037 C29.2824074,6.56329821 22.7191092,0 14.6412037,0 Z" id="形状" fill="#ECF5FE"></path>
+                    <g id="烧瓶,实验,化学,科学" transform="translate(4.362930, 5.001581)">
+                        <rect id="矩形" fill="#000000" opacity="0" x="1.95940783" y="1.320757" width="16.6377315" height="16.6377315"></rect>
+                        <g>
+                            <rect id="矩形" fill="#000000" opacity="0" x="2.83308197" y="2.32185598" width="14.8903832" height="14.8903832"></rect>
+                            <g id="还原画布" fill="#3E6AF7">
+                                <rect id="矩形" opacity="0" x="1.23578458" y="0.724558589" width="18.084978" height="18.084978"></rect>
+                                <path d="M17.6932207,6.74823569 L13.2296336,6.74823569 C13.0215873,6.74823569 12.8513571,6.54528408 12.8513571,6.29724746 L12.8513571,1.97232623 C12.8513571,1.72428962 13.0215542,1.521338 13.2296171,1.521338 L17.6932207,1.521338 C17.901267,1.521338 18.0714972,1.72428962 18.0714972,1.97232623 L18.0714972,6.29722771 C18.0714972,6.54526433 17.9031719,6.74823569 17.6932207,6.74823569 L17.6932207,6.74823569 Z M6.87068348,17.3028361 L2.40704671,17.3028361 C2.19900041,17.3028361 2.02877016,17.0998845 2.02877016,16.8518479 L2.02877016,12.5269266 C2.02877016,12.27889 2.19900041,12.0759384 2.40704671,12.0759384 L6.87068348,12.0759384 C7.07872978,12.0759384 7.24896003,12.2788703 7.24896003,12.5269266 L7.24896003,16.8518479 C7.24896003,17.1021358 7.07872978,17.3028361 6.87068348,17.3028361 Z M20.4661601,11.5941637 L19.1062728,9.97893922 C19.0135961,9.86923455 18.8717403,9.82573697 18.7412476,9.85222312 C18.680722,9.86356959 18.6239731,9.89194406 18.574794,9.93355332 L16.8858257,11.3558546 C16.7269585,11.4901405 16.7061539,11.7284496 16.8404398,11.8892217 C16.9160885,11.9781052 17.0220165,12.0235076 17.1298163,12.0235076 C17.2149231,12.0235076 17.3019183,11.9951332 17.3738069,11.9346076 L18.4537759,11.0267571 C18.4518711,11.0418803 18.4518711,11.0551316 18.4518711,11.0702547 C18.4518711,13.3493556 17.7350555,15.2804262 16.3789447,16.6535483 C15.0077109,18.0437151 13.0596123,18.7775586 10.7445837,18.7775586 C10.5365374,18.7775586 10.3663072,18.9477723 10.3663072,19.1558352 C10.3663072,19.3638981 10.5365208,19.5340952 10.7445837,19.5340952 C13.2657703,19.5340952 15.3992222,18.7227146 16.9160885,17.1850271 C17.6556136,16.4360439 18.2287016,15.5319866 18.6183247,14.4993084 C18.9890314,13.5157926 19.1857312,12.4301421 19.2065193,11.2707477 L19.8912003,12.0840332 C19.9668656,12.1729167 20.072777,12.2183192 20.1805768,12.2183192 C20.2657002,12.2183192 20.3526954,12.1899447 20.4245674,12.1294191 C20.5815463,11.9932449 20.602351,11.7549358 20.4661767,11.5941637 L20.4661601,11.5941637 Z M9.98803061,0 C8.67730576,0 7.47441384,0.202364785 6.41524944,0.603334282 C5.37500136,0.996733941 4.47470417,1.57928016 3.74086058,2.33204005 C2.34880553,3.76191116 1.58658748,5.7724236 1.52796679,8.16311747 L0.622004647,7.3990111 C0.461232559,7.2647086 0.222923469,7.28551323 0.0886375303,7.444397 C-0.0456484081,7.6032642 -0.0248437777,7.84347818 0.134023428,7.97776411 L1.82300826,9.40006538 C1.88255245,9.4508878 1.95677081,9.48136671 2.03484776,9.48706054 C2.04619423,9.48706054 2.05565239,9.48896542 2.06699887,9.48896542 C2.17481522,9.48896542 2.28261501,9.44357953 2.35637537,9.35466292 L3.71626275,7.73945502 C3.85054869,7.58057125 3.82974406,7.34037384 3.67087685,7.20608791 C3.51200965,7.07180197 3.27179567,7.0926066 3.13750974,7.2514738 L2.28263157,8.26714062 C2.32044763,6.0334422 3.00890532,4.16667386 4.28178097,2.86163053 C4.93808755,2.18640764 5.74570807,1.66627531 6.681933,1.3125966 C7.65597399,0.943778206 8.76809412,0.758424851 9.98803061,0.758424851 C10.1960769,0.758424851 10.3663072,0.588211171 10.3663072,0.380164867 C10.3663072,0.172118563 10.1979652,0 9.98803061,0 Z" id="形状" stroke="#3E6AF7" stroke-width="0.7"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/home/components/container.vue b/src/views/home/components/container.vue
index 567bd0c0..38b4dd8a 100644
--- a/src/views/home/components/container.vue
+++ b/src/views/home/components/container.vue
@@ -321,7 +321,7 @@ export default {
   display: inline-flex;
   position: absolute;
   right: 5%;
-  top: 10%;
+  top: 25px;
   z-index: 9999;
   align-items: center;
   border-radius: 24px;
diff --git a/src/views/home/productionCostAnalysis/procPackMatCost.vue b/src/views/home/productionCostAnalysis/procPackMatCost.vue
index d8da34a4..dd5a3ade 100644
--- a/src/views/home/productionCostAnalysis/procPackMatCost.vue
+++ b/src/views/home/productionCostAnalysis/procPackMatCost.vue
@@ -37,7 +37,7 @@
             gap: 12px;
             grid-template-columns: 1624px;
           ">
-          <dataTrend :trendData="trend" :title="'数据趋势'" />
+          <dataTrend :trendData="trend" :relatedData="relatedData"  :title="'指标分析&数据趋势'" />
         </div>
       </div>
     </div>
@@ -95,7 +95,10 @@ export default {
       monData: {},
       totalData: {},
       trend: [],
-      relatedData: {},
+      relatedData: {
+        total:[],
+        current:[]
+      },
       trendName: '包材成本',
     };
   },
@@ -208,8 +211,9 @@ export default {
         this.totalData = res.data.totalMonthData.find(item => {
           return item.name === "包材成本";
         });
-        // this.relatedMon = res.data.relatedMon
-        ;
+        this.relatedData.total =res.data.totalMonthData,
+        this.relatedData.current= res.data.currentMonthData
+    
         this.trend = res.data.dataTrend
       });
     },
diff --git a/src/views/home/productionCostAnalysisComponents/containerPackMatCost.vue b/src/views/home/productionCostAnalysisComponents/containerPackMatCost.vue
new file mode 100644
index 00000000..60e74f52
--- /dev/null
+++ b/src/views/home/productionCostAnalysisComponents/containerPackMatCost.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="cockpitContainer" :class="['cockpitContainer__' + size]">
+    <div class="content-top" :class="['content-top__' + topSize]">
+      <!-- 使用 flex 容器包裹图标和文字，实现垂直居中 -->
+      <div class="title-wrapper">
+        <svg-icon class="title-icon" :icon-class="icon" />
+        <span class="title-text">
+          {{ name }}
+        </span>
+        <svg-icon icon-class="turn-data" style='font-size: 40px;margin-left: 60px;' @click='switchData'/>
+      </div>
+      <div v-show="this.name === '指标分析'" class="tab-group">
+        <!-- 月度Tab：点击切换状态，动态绑定样式 -->
+        <div class="tab-item" :class="{ active: activeTab === 'month' }" @click="handleTabClick('month')">
+          月度
+        </div>
+        <!-- 累计Tab：点击切换状态，动态绑定样式 -->
+        <div class="tab-item" :class="{ active: activeTab === 'total' }" @click="handleTabClick('total')">
+          累计
+        </div>
+      </div>
+    </div>
+    <div class="cockpitContainer-body">
+      <slot>
+        <div class="test-body">something test....</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Container',
+  components: {},
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['size', 'icon', 'topSize', 'isShowTab'],
+  data() {
+    return {
+      activeTab: 'month', // 初始化激活的Tab（支持父组件传默认值）
+      name:'指标分析',
+    };
+  },
+  computed: {},
+  methods: {
+    handleTabClick(tabType) {
+      this.activeTab = tabType;
+      // 向父组件派发Tab切换事件，传递当前选中的Tab类型
+      this.$emit('tabChange', tabType);
+      // 可选：同时传递更详细的信息（如标签名）
+      // this.$emit('tabChange', { type: tabType, name: tabType === 'month' ? '月度' : '累计' });
+    },
+    switchData() {
+      console.log('aaa')
+      if (this.name === '数据趋势') {
+        this.name = '指标分析';
+      } else {
+        this.name = '数据趋势';
+      }
+      this.$emit('dataChange', this.name);
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.cockpitContainer {
+  display: inline-block;
+  // width: 100%;
+  // height: 100%;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .content-top {
+    height: 60px;
+
+    .title-wrapper {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+      /* 垂直居中关键属性 */
+      height: 100%;
+      /* 继承父容器高度，确保垂直居中范围 */
+    }
+
+    .title-icon {
+      font-size: 30px;
+      margin-right: 12px;
+      margin-top: 4px;
+      /* 图标和文字之间的间距 */
+      flex-shrink: 0;
+      /* 防止图标被压缩 */
+    }
+
+    .title-text {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 24px;
+      color: #000000;
+      letter-spacing: 3px;
+      text-align: left;
+      font-style: normal;
+      // 移除固定行高，避免影响垂直对齐
+      // line-height: 60px;
+    }
+
+    // width: 547px;
+    // background: url(../../../assets/img/contentTopBasic.png) no-repeat;
+    // background-size: 100% 100%;
+    // background-position: 0 0;
+    &__basic {
+      // width: 547px;
+      background: url(../../../assets/img/contentTopBasic.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+
+    &__middle {
+      background: url(../../../assets/img/topTileMiddle.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+
+    &__large {
+      background: url(../../../assets/img/topTitleLargeBg.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+
+    &__KFAPTopTitle {
+      background: url(../../../assets/img/KFAPTopTitle.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+
+    &__psiTopTitleBasic {
+      background: url(../../../assets/img/psiTopTitleBasic.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+
+    &__rawTopTitleLarge {
+      background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+
+    &__calendarTitleBg {
+      background: url(../../../assets/img/calendarTitleBg.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+
+    &__indicatorDetailsTitleBg {
+      background: url(../../../assets/img/indicatorDetailsTitleBg.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+  }
+
+  &__topBasic {
+    background: url(../../../assets/img/top-basic.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__bottomBasic {
+    background: url(../../../assets/img/bottom-basic.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__operatingBasic {
+    background: url(../../../assets/img/operating-basic.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__operatingLarge {
+    background: url(../../../assets/img/operating-large.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__profitTopBasic {
+    background: url(../../../assets/img/profitTopBasic.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__profitMiddleBasic {
+    background: url(../../../assets/img/profitMiddleBasic.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__psiBasicBg {
+    background: url(../../../assets/img/psiBasicBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__psiMiddleBg {
+    background: url(../../../assets/img/psiMiddleBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__costBasicBg {
+    background: url(../../../assets/img/costBasicBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__rawTopBg {
+    background: url(../../../assets/img/rawTopBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__opLargeBg {
+    background: url(../../../assets/img/opLargeBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__calendarBg {
+    background: url(../../../assets/img/calendarBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__indicatorDetailsBg {
+    background: url(../../../assets/img/indicatorDetailsBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  // &__left {
+  //   background: url(../../../../../../../assets/img/left.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__energyConsumption {
+  //   background: url(../../../../../../../assets/img/energyConsumption.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__left2 {
+  //   background: url(../../assets/left_2.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__left3 {
+  //   background: url(../../assets/left_3.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__mid2 {
+  //   background: url(../../assets/mid_2.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__mid3 {
+  //   background: url(../../assets/mid_3.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__right1 {
+  //   background: url(../../assets/right_1.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__right2 {
+  //   background: url(../../assets/right_2.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__right3 {
+  //   background: url(../../assets/right_3.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__weekRight2 {
+  //   background: url(../../assets/week_right_2.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__weekMidTop {
+  //   background: url(../../assets/week-mid-top.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  // &__weekMidMid {
+  //   background: url(../../assets/week-mid-mid.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   background-position: 0 0;
+  // }
+
+  &::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    // background: inherit;
+    /* 设置模糊，不用 filter */
+    backdrop-filter: blur(5px);
+    z-index: -1;
+  }
+}
+
+.container-body {
+  flex: 1;
+}
+
+.tab-group {
+  display: inline-flex;
+  position: absolute;
+  right: 5%;
+  top: 25px;
+  z-index: 9999;
+  align-items: center;
+  border-radius: 24px;
+  overflow: hidden;
+  gap: 8px; // Tab之间的间距
+}
+
+// Tab基础样式（统一）
+.tab-item {
+  padding: 0 24px;
+  width: 79px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: center;
+  border-radius: 12px;
+  transition: all 0.2s ease; // 样式切换动画
+}
+
+// 未激活的Tab样式（原first-child样式）
+.tab-item:not(.active) {
+  background: #ECF4FE;
+  color: #0B58FF;
+}
+
+// 激活的Tab样式（原last-child样式）
+.tab-item.active {
+  background: #3071FF;
+  color: #F9FCFF;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingLabor.vue b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingLabor.vue
index ed339800..dae77eae 100644
--- a/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingLabor.vue
+++ b/src/views/home/productionCostAnalysisComponents/dataTrendBarProcessingLabor.vue
@@ -44,7 +44,7 @@
       </div>
     </div>
     <div class="lineBottom" style="height: 100%; width: 100%">
-      <operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
+      <operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" :showRelated='showRelated'/>
     </div>
   </div>
 </template>
@@ -56,7 +56,7 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { operatingLineBar },
-  props: ["chartData"],
+  props: ["chartData","showRelated"],
   data() {
     return {
       activeButton: 0,
diff --git a/src/views/home/productionCostAnalysisComponents/dataTrendProcessingLabor.vue b/src/views/home/productionCostAnalysisComponents/dataTrendProcessingLabor.vue
index 06b14f6b..05391021 100644
--- a/src/views/home/productionCostAnalysisComponents/dataTrendProcessingLabor.vue
+++ b/src/views/home/productionCostAnalysisComponents/dataTrendProcessingLabor.vue
@@ -1,39 +1,98 @@
 <template>
   <div style="flex: 1">
-    <Container name="数据趋势" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
-      <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
-        <div class="right" style="
-            height: 491px;
-            display: flex;
-            width: 1595px;
-            background-color: rgba(249, 252, 255, 1);
-          ">
-          <!-- 直接使用计算属性 chartData，无需手动更新 -->
-          <dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
+    <Container :isShowTab="true" icon="cockpitItemIcon" size="opLargeBg" topSize="large" @tabChange="handleChange" @dataChange='dataChange'>
+      <div v-show='showRelated' style="padding: 14px 16px; width: 100%; gap: 16px">
+        <div style="display: flex; gap: 8px;overflow: auto">
+          <div
+            v-for="item in sortedIndicatorsFirst"
+            :key="item.key"
+            class="dashboard"
+          >
+            <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 :showRelated='showRelated' :detailData="item.data"></operatingSingleBar>
+          </div>
+        </div>
+
+        <div style="display: flex; gap: 8px;margin-top: 10px;overflow: auto">
+          <div
+            v-for="item in sortedIndicatorsSec"
+            :key="item.key"
+            class="dashboard"
+          >
+            <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 :showRelated='showRelated' :detailData="item.data"></operatingSingleBar>
+          </div>
         </div>
       </div>
+
+      <div v-show='!showRelated' class="right" style="
+            height: 499px;
+            display: flex;
+            width: 1578px;
+            background-color: rgba(249, 252, 255, 1);
+            margin-left: 12px;
+            margin-top: 10px;
+          ">
+          <dataTrendBar @handleGetItemData="getData" :chartData="chartData" :showRelated='showRelated'/>
+        </div>
+
     </Container>
   </div>
 </template>
 
 <script>
-import Container from "../components/container.vue";
+import Container from "./containerPackMatCost.vue";
 import dataTrendBar from "./dataTrendBarProcessingLabor.vue";
+import operatingSingleBar from './operatingSingleBar.vue'
 
 export default {
   name: "ProductionStatus",
-  components: { Container, dataTrendBar },
+  components: { Container, dataTrendBar, operatingSingleBar },
   props: {
     trendData: {
       type: Array,
       default: () => [],
     },
+    relatedData: {
+      type: Object,
+      default: () => ({
+        current: [], // 物料月度数据（数组格式，存储各物料项）
+        total: [] // 物料累计数据（数组格式，存储各物料项）
+      })
+    },
   },
   data() {
     return {
-      // 移除：原 chartData 定义，改为计算属性
+      showRelated:true,
+      titleName:'指标分析',
+      activeData: this.relatedData.current || [],
     };
   },
+  mounted() {
+    console.log('物料组件挂载时的激活数据：', this.activeData);
+  },
+   watch: {
+    // 对齐第二个组件：监听物料数据变化，同步更新激活数据集
+    relatedData: {
+      handler(newVal) {
+        this.activeData = newVal.current || {};
+      },
+      immediate: true, // 组件挂载时立即执行
+      deep: true // 深度监听对象内部变化
+    }
+  },
   // 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
   computed: {
     /**
@@ -74,8 +133,103 @@ export default {
         rawData: this.trendData, // 透传原始数据，方便子组件使用
       };
     },
+    indicatorDefsFirst() {
+      return [
+        { key: 'f1', name: '防霉纸单价', unit: '元/吨'},
+        { key: 'f2', name: '瓦楞纸单价', unit: '元/平方米'},
+        { key: 'f3', name: '蜂窝板单价', unit: '元/平方米'},
+        { key: 'f4', name: 'PE聚乙烯吹塑薄膜单价', unit: '元/吨'},
+        { key: 'f5', name: '缠绕膜单价', unit: '元/吨'},
+        { key: 'f6', name: '塑钢带单价', unit: '元/吨'},
+        { key: 'f7', name: '胶合板包装箱单价', unit: '元/立方米'},
+        { key: 'f8', name: '防霉隔离粉单价', unit: '元/吨'},
+        { key: 'f9', name: '干燥剂单价', unit: '元/吨'},
+      ]
+    },
+    indicatorsFirst() {
+      const fallback = { targetValue: 0, value: 0, completed: 0, diffValue: 0 }
+      const list = (Array.isArray(this.activeData) ? this.activeData : [])
+      console.log('list===================',list)
+      return this.indicatorDefsFirst.map(def => {
+        const data = list.find(item => item && item.name === def.name) || fallback
+        return {
+          ...def,
+          data,
+          sortValue: Number((data && data.value) ?? 0)
+        }
+      })
+    },
+    sortedIndicatorsFirst() {
+      const unitOrder = ['元/吨','元/平方米','元/立方米']
+      const unitRank = (u) => {
+        const idx = unitOrder.indexOf(u)
+        return idx === -1 ? 999 : idx
+      }
+
+      return this.indicatorsFirst.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))
+      })
+    },
+    indicatorDefsSec() {
+      return [
+        { key: 's1', name: '防霉纸用量', unit: '吨'},
+        { key: 's2', name: '瓦楞纸用量', unit: '平方米'},
+        { key: 's3', name: '蜂窝板用量', unit: '平方米'},
+        { key: 's4', name: 'PE聚乙烯吹塑薄膜用量', unit: '吨'},
+        { key: 's5', name: '缠绕膜用量', unit: '吨'},
+        { key: 's6', name: '塑钢带用量', unit: '吨'},
+        { key: 's7', name: '胶合板包装箱用量', unit: '立方米'},
+        { key: 's8', name: '防霉隔离粉用量', unit: '吨'},
+        { key: 's9', name: '干燥剂用量', unit: '吨'},
+      ]
+    },
+    indicatorsSec() {
+      const fallback = { targetValue: 0, value: 0, completed: 0, diffValue: 0 }
+      const list = (Array.isArray(this.activeData) ? this.activeData : [])
+
+      return this.indicatorDefsSec.map(def => {
+        const data = list.find(item => item && item.name.includes(def.name)) || fallback
+        return {
+          ...def,
+          data,
+          sortValue: Number((data && data.value) ?? 0)
+        }
+      })
+    },
+    sortedIndicatorsSec() {
+      const unitOrder = ['吨','平方米','立方米']
+      const unitRank = (u) => {
+        const idx = unitOrder.indexOf(u)
+        return idx === -1 ? 999 : idx
+      }
+
+      return this.indicatorsSec.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))
+      })
+    }
   },
   methods: {
+    handleChange(value) {
+      console.log('Tab 切换值：', value);
+      // 根据 Tab 值更新当前激活的数据集
+      if (value === 'month') {
+        // 切换为月度数据
+        this.activeData = this.relatedData.current || [];
+      } else {
+        // 切换为累计数据（非 month 均视为累计，可根据实际需求调整判断条件）
+        this.activeData = this.relatedData.total || [];
+      }
+      console.log('当前激活数据集：', this.activeData);
+    },
+    // 对齐第二个组件：优化点击事件，接收物料名和路由路径参数
     /**
      * 格式化时间戳为年月格式（YYYY-MM）
      * @param {Number} timestamp 13位毫秒级时间戳
@@ -93,11 +247,41 @@ export default {
     getData(value) {
       this.$emit('getData', value)
     },
+    dataChange(val) {
+      if (val === '数据趋势') {
+        this.showRelated = false
+      }else{
+        this.showRelated = true
+      }
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.dashboard {
+  width: 390px;
+  height: 220px;
+  background: #F9FCFF;
+  padding: 16px 0 0 10px;
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-basis:390px;
+  // overflow: auto;
+  .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;
+  }
+}
 /* 原有样式保持不变 */
 .scroll-container {
   max-height: 210px;
diff --git a/src/views/home/productionCostAnalysisComponents/operatingLineBarSale.vue b/src/views/home/productionCostAnalysisComponents/operatingLineBarSale.vue
index 0bfb96bc..72a6c4b6 100644
--- a/src/views/home/productionCostAnalysisComponents/operatingLineBarSale.vue
+++ b/src/views/home/productionCostAnalysisComponents/operatingLineBarSale.vue
@@ -33,6 +33,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    showRelated: {
+      type: Boolean,
+      default: true,
+    }
   },
   mounted() {
     this.$nextTick(() => {
@@ -49,6 +53,15 @@ export default {
       deep: true,
       immediate: true
     },
+    showRelated: {
+      handler(val) {
+        if (!val) {
+          this.resizeHandler()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
   },
   beforeDestroy() {
     // 组件销毁时清理资源
@@ -107,7 +120,6 @@ export default {
         //   // params: { baseIndex: baseIndex }
         // });
       });
-
       // 定义resize处理函数（命名函数，方便移除）
       this.resizeHandler = () => {
         this.myChart && this.myChart.resize();
diff --git a/src/views/home/productionCostAnalysisComponents/operatingLineBarSaleSingle.vue b/src/views/home/productionCostAnalysisComponents/operatingLineBarSaleSingle.vue
index 38322624..42b41f47 100644
--- a/src/views/home/productionCostAnalysisComponents/operatingLineBarSaleSingle.vue
+++ b/src/views/home/productionCostAnalysisComponents/operatingLineBarSaleSingle.vue
@@ -21,6 +21,10 @@ export default {
       // validator: (value) => {
       //   return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
       // }
+    },
+    showRelated: {
+      type: Boolean,
+      default: false,
     }
   },
   mounted() {
@@ -39,6 +43,15 @@ export default {
       },
       deep: true,
       immediate: true // 初始化时立即执行
+    },
+    showRelated: {
+      handler(val) {
+        if (val) {
+          this.myChart.resize();
+        }
+      },
+      deep: true,
+      immediate: true
     }
   },
   methods: {
diff --git a/src/views/home/productionCostAnalysisComponents/operatingSingleBar.vue b/src/views/home/productionCostAnalysisComponents/operatingSingleBar.vue
index 6457cf87..63ef82ac 100644
--- a/src/views/home/productionCostAnalysisComponents/operatingSingleBar.vue
+++ b/src/views/home/productionCostAnalysisComponents/operatingSingleBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="lineBottom" style="height: 160px; width: 100%">
-    <operatingLineBarSaleSingle :refName="'totalOperating'" :chartData="chartD" style="height: 100%; width: 100%" />
+    <operatingLineBarSaleSingle :refName="'totalOperating'" :chartData="chartD" style="height: 100%; width: 100%" :showRelated='showRelated'/>
   </div>
 </template>
 
@@ -10,7 +10,7 @@ import operatingLineBarSaleSingle from './operatingLineBarSaleSingle.vue';
 export default {
   name: "Container",
   components: { operatingLineBarSaleSingle },
-  props: ["detailData"],
+  props: ["detailData","showRelated"],
   data() {
     return {
       // 1. 存储resize监听函数的引用，方便后续销毁