运营驾驶舱对接

src/views/home/components/productBottomBar.vue

@@ -14,18 +14,28 @@
         <div class="button-line lineFour" v-if="activeButton !== 3 && activeButton !== 4"></div>
         <div class="item-button" style="width: 75px;" :class="{ active: activeButton === 4 }" @click="activeButton = 4">
           投入产出率</div>
+          <div class="button-line lineFive" v-if="activeButton !== 4 && activeButton !== 5"></div>
+        <div class="item-button" style="width: 45px;" :class="{ active: activeButton === 5 }" @click="activeButton = 5">
+          折旧</div>
       </div>
     </div>
     <div class="lineBottom" style="height: 219px; width: 100%" v-if="isLineDataReady">
       <!-- 核心改动：动态传递数据给子组件 -->
-      <coreLineChart style="height: 219px; width: 100%" :chart-data="selectedChartData" :dateData="dateData" />
+      <coreLineChart style="height: 219px; width: 100%" :chart-data="selectedChartData" :unit='unit' :dateData="dateData" />
     </div>
   </div>
 </template>
 
 <script>
 import coreLineChart from './productBar.vue';
-
+const dataKeyMap = [
+  {name:'制造成本',unit:'元/㎡'},
+  {name:'原片成本',unit:'元/㎡'},
+  {name:'加工成本',unit:'元/㎡'},
+  {name:'原片成品率',unit:'%'},
+  {name:'投入产出率',unit:'%'},
+  {name:'折旧',unit:'万元'}
+];
 export default {
   name: "Container",
   components: { coreLineChart },
@@ -33,6 +43,7 @@ export default {
   data() {
     return {
       activeButton: 0, // 初始激活第一个按钮（索引0）
+      dataKeyMap
     };
   },
   computed: {
@@ -42,22 +53,14 @@ export default {
     },
     // 核心改动：计算属性，根据activeButton动态返回选中的数据
     selectedChartData() {
-      // 定义按钮索引与lineData中key的映射关系
-      const dataKeyMap = [
-        '制造成本',
-        '原片成本',
-        '加工成本',
-        '原片成品率',
-        '投入产出率'
-      ];
-
       // 根据当前激活的按钮索引获取对应的数据key
-      const selectedKey = dataKeyMap[this.activeButton];
-      console.log(this.lineData[selectedKey]);
-
+      const selectedKey = this.dataKeyMap[this.activeButton].name;
 
       // 从lineData中获取对应的数据，如果不存在则返回一个空对象以防止报错
       return this.lineData ? this.lineData[selectedKey] || {} : {};
+    },
+    unit() {
+      return this.dataKeyMap[this.activeButton].unit;
     }
   },
   methods: {},
@@ -73,7 +76,7 @@ export default {
 
   .barTop {
     display: flex;
-    gap: 40px;
+    gap: 20px;
 
     .title {
       height: 18px;
@@ -91,7 +94,7 @@ export default {
       display: flex;
       position: relative;
       gap: 2px;
-      width: 327px;
+      width: 356px;
       align-items: center;
       height: 24px;
       background: #ecf4fe;
@@ -105,23 +108,27 @@ export default {
       }
 
       .lineOne {
-        top: 5px;
-        left: 57px;
+        top: 6px;
+        left: 55px;
       }
 
       .lineTwo {
-        top: 5px;
-        left: 118px;
+        top: 6px;
+        left: 111px;
       }
 
       .lineThree {
-        top: 5px;
-        left: 177px;
+        top: 6px;
+        left: 169px;
       }
 
       .lineFour {
-        top: 5px;
-        left: 252px;
+        top: 6px;
+        left: 240px;
+      }
+      .lineFive {
+        top: 6px;
+        left: 314px;
       }
 
       .item-button {