修改

src/views/home/costComponents/costBar.vue

@@ -1,33 +1,24 @@
 <template>
   <div class="coreBar">
     <div class="barTop">
-      <!-- 标题：单独左对齐 -->
-      <!-- <div class="title">销售指标趋势</div> -->
-      <!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
       <div class="right-container">
         <div class="legend">
           <span class="legend-item">
             <span class="legend-icon square target"></span>
             目标
           </span>
-          <!-- 给第三个、第四个图例项加 close-item 类 -->
           <span class="legend-item">
             <span class="legend-icon square achieved"></span>
             实际
           </span>
-          <!-- <span class="legend-item close-item">
-            <span class="legend-icon square unachieved"></span>
-
-          </span> -->
         </div>
-        <!-- 按钮组：改为下拉框样式，仅宽度与第二个组件一致 -->
         <div class="button-group">
           <div class="item-button category-btn">
             <span class="item-text" style="width: 88px;">类目选择</span>
           </div>
           <div class="dropdown-container">
             <div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
-              <span class="item-text profit-text">{{ selectedProfit || '原料' }}</span>
+              <span class="item-text profit-text">{{ selectedProfit || '请选择' }}</span>
               <span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span>
             </div>
             <div class="dropdown-options" v-if="isDropdownShow">
@@ -41,7 +32,8 @@
       </div>
     </div>
     <div class="lineBottom" style="height: 100%; width: 1590px">
-      <costBaseBarChart :yName="yName" style="height: 99%; width: 1590px" />
+      <!-- 传递筛选后的数据给图表组件 -->
+      <costBaseBarChart :yName="yName" :chartData="filteredData" style="height: 99%; width: 1590px" />
     </div>
   </div>
 </template>
@@ -51,15 +43,40 @@ import costBaseBarChart from './costBaseBarChart.vue';
 export default {
   name: "Container",
   components: { costBaseBarChart },
-  props: ['dateData','yName'],
+  props: ['dateData', 'yName', 'categoryData'],
   data() {
     return {
       isDropdownShow: false,
-      selectedProfit: '原料', // 默认选中"原料"
-      profitOptions: ['原料', '其他选项1', '其他选项2'], // 可根据实际需求修改选项
+      selectedProfit: null, // 选中的名称，初始为null
     };
   },
-  computed: {},
+  computed: {
+    // 从categoryData中提取name作为下拉选项
+    profitOptions() {
+      return this.categoryData.map(item => item.name) || [];
+    },
+    // 根据选中的名称筛选数据
+    filteredData() {
+      if (!this.selectedProfit || !this.categoryData.length) {
+        // 未选择时默认取第一个分类的数据（或空）
+        return this.categoryData[0] || {};
+      }
+      // 找到选中名称对应的分类数据
+      return this.categoryData.find(item => item.name === this.selectedProfit) || {};
+    }
+  },
+  watch: {
+    categoryData: {
+      handler() {
+        // 当分类数据变化时，若没有选中项则默认选中第一个
+        if (this.categoryData.length && !this.selectedProfit) {
+          this.selectedProfit = this.categoryData[0].name;
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   methods: {
     selectProfit(item) {
       this.selectedProfit = item;
@@ -82,6 +99,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+/* 原有样式保持不变 */
 .coreBar {
   display: flex;
   flex-direction: column;
@@ -95,19 +113,6 @@ export default {
     gap: 16px;
     width: 100%;
 
-    .title {
-      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;
-      white-space: nowrap;
-    }
-
     .right-container {
       display: flex;
       align-items: center;
@@ -138,32 +143,11 @@ export default {
       display: inline-block;
     }
 
-    .legend-icon.line {
-      width: 12px;
-      height: 2px;
-      position: relative;
-
-      &::before {
-        position: absolute;
-        content: "";
-        top: -2px;
-        left: 3px;
-        width: 6px;
-        border-radius: 50%;
-        height: 6px;
-        background-color: rgba(40, 138, 255, 1);
-      }
-    }
-
     .legend-icon.square {
       width: 8px;
       height: 8px;
     }
 
-    .yield {
-      background: rgba(40, 138, 255, 1);
-    }
-
     .target {
       background: #2889FF;
     }
@@ -172,15 +156,6 @@ export default {
       background: rgba(40, 203, 151, 1);
     }
 
-    .unachieved {
-      background: rgba(255, 132, 0, 1);
-    }
-
-    .legend-item.close-item+.legend-item.close-item {
-      margin-left: -8px;
-    }
-
-    // 按钮组：完全复用第二个组件样式，仅保持原有宽度适配
     .button-group {
       display: flex;
       position: relative;
@@ -222,7 +197,7 @@ export default {
       }
 
       .profit-btn {
-        width: 102px; // 保持原组件要求的宽度，其余样式与第二个组件一致
+        width: 102px;
         border-top-right-radius: 12px;
         border-bottom-right-radius: 12px;
         position: relative;
@@ -264,7 +239,7 @@ export default {
         top: 100%;
         right: 0;
         margin-top: 2px;
-        width: 102px; // 与按钮宽度一致
+        width: 102px;
         background: #ffffff;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);