运营驾驶舱对接

src/views/home/components/financeCostsBottomBar.vue

@@ -27,11 +27,21 @@
         <div class="item-button" :class="{ active: activeButton === 3 }" @click="activeButton = 3">
           毛利率
         </div>
+        <div class="button-line lineFour" v-if="activeButton !== 3 && activeButton !== 4"></div>
+
+        <div class="item-button" :class="{ active: activeButton === 4 }" @click="activeButton = 4">
+          应收账款
+        </div>
+        <div class="button-line lineFive" v-if="activeButton !== 4 && activeButton !== 5"></div>
+
+        <div class="item-button" :class="{ active: activeButton === 5 }" @click="activeButton = 5">
+          存货
+        </div>
       </div>
     </div>
-    <div class="lineBottom" style="height: 210px; width: 100%">
+    <div class="lineBottom" style="height: 184px; width: 100%">
       <!-- 传递当前选中的 series 数据和 xAxis 数据给子组件 -->
-      <coreLineChart style="height: 210px; width: 680px" :chart-series="currentSeries" :x-axis-data="xAxisData"
+      <coreLineChart style="height: 184px; width: 680px" :chart-series="currentSeries" :x-axis-data="xAxisData"
         :dateData="dateData" />
     </div>
   </div>
@@ -59,10 +69,12 @@ export default {
       activeButton: 0, // 初始激活第一个按钮（索引0）
       // 定义按钮与 line 数据中 key 的映射关系
       buttonToDataKey: [
-        '营业收入',
-        '经营性利润', // 注意：数据中的 key 是“经营收入”，按钮显示的是“经营性利润”
-        '利润总额',
-        '毛利率'
+        {name:'营业收入',unit:'万元'},
+        {name:'经营性利润',unit:'万元'},
+        {name:'利润总额',unit:'万元'},
+        {name:'毛利率',unit:'%'},
+        {name:'应收账款',unit:'万元'},
+        {name:'存货',unit:'万元'}
       ]
     };
   },
@@ -70,20 +82,19 @@ export default {
     // 根据当前激活的按钮，动态生成对应的 series 数据
     currentSeries() {
 
-      const dataKey = this.buttonToDataKey[this.activeButton];
+      const dataKey = this.buttonToDataKey[this.activeButton].name;
       const chartData = this.line[dataKey];
-      console.log('this.line[dataKey', this.buttonToDataKey[this.activeButton]);
 
       if (!chartData) {
-        return [];
+        return {};
       }
 
       // 提取目标和实际数据的值
       const targetDataValues = Object.values(chartData.target || {});
       const realDataValues = Object.values(chartData.real || {});
-      console.log('realDataValues', realDataValues);
-
-      return [
+      let obj = {
+        unit: this.buttonToDataKey[this.activeButton].unit,
+        series:[
         {
           name: '预算',
           type: 'line',
@@ -116,11 +127,12 @@ export default {
           },
           data: realDataValues
         }
-      ];
+      ]}
+      return obj;
     },
     // 提取 x 轴数据（日期）
     xAxisData() {
-      const dataKey = this.buttonToDataKey[this.activeButton];
+      const dataKey = this.buttonToDataKey[this.activeButton].name;
       const chartData = this.line[dataKey];
       // 使用 'target' 的键作为 x 轴，如果 'target' 不存在，则使用 'real' 的键
       if (chartData && chartData.target) {
@@ -205,7 +217,7 @@ export default {
       display: flex;
       position: relative;
       gap: 2px;
-      width: 252px;
+      width: 350px;
       align-items: center;
       height: 24px;
       background: #ecf4fe;
@@ -219,18 +231,27 @@ export default {
       }
 
       .lineOne {
-        top: 5px;
+        top: 6px;
         left: 59px;
       }
 
       .lineTwo {
-        top: 5px;
-        left: 134px;
+        top: 6px;
+        left: 131px;
       }
 
       .lineThree {
-        top: 5px;
-        left: 193px;
+        top: 6px;
+        left: 190px;
+      }
+      .lineFour {
+        top: 6px;
+        left: 238px;
+      }
+
+      .lineFive {
+        top: 6px;
+        left: 302px;
       }
 
       .item-button {