修改

src/views/home/fullCostAnalysisComponents/dataTrendBar.vue

@@ -28,7 +28,7 @@
           </div>
           <div class="button-group">
             <div class="item-button category-btn">
-              <span class="item-text">展示顺序</span>
+              <span class="item-text">类目选择</span>
             </div>
             <div class="dropdown-container">
               <div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
@@ -59,48 +59,82 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { operatingLineBar },
-  props: ["chartData"],
+  props: [
+    "trendData" // 接收父组件传递的 trend 数据（单价/运费/净价）
+  ],
   data() {
     return {
       activeButton: 0,
       isDropdownShow: false,
-      selectedProfit: null, // 选中的名称，初始为null
-      profitOptions: [
-        '全成本',
-        '财务费用',
-        '制造费用',
-        '销售费用',
-        '管理费用',
-        '运费',
-      ]
+      selectedProfit: '全成本', // 关键修改：默认赋值为「净价」，初始化即展示该类目数据
+      profitOptions: ['全成本', '制造成本', '管理费用', '财务费用', '运费', '销售费用']
     };
   },
   computed: {
-    // profitOptions() {
-    //   return this.categoryData.map(item => item.name) || [];
-    // },
-    currentDataSource() {
-      console.log('yyyy', this.chartData);
-      return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
-    },
-    locations() {
-      console.log('this.chartData', this.chartData);
-      return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
-    },
-    // 根据按钮切换生成对应的 chartData
-    chartD() {
-      // 销量场景数据
-      const data = this.currentDataSource;
-      console.log(this.currentDataSource, 'currentDataSource');
+    // 核心：根据选中的类目，动态解析趋势数据
+    trendParsedData() {
+      // 1. 校验数据有效性
+      if (!this.trendData || !this.selectedProfit) {
+        return {
+          months: [], // 月份数组（x轴标签）
+          rates: [], // 完成率（completeRate）
+          reals: [], // 实际值（real）
+          targets: [], // 目标值（target）
+          flags: [], // 达标状态
+          diffs:[]
+        };
+      }
 
+      // 2. 获取选中类目的趋势数据（如：trendData.单价）
+      const selectedTrend = this.trendData[this.selectedProfit] || {};
+      // 3. 提取月份并排序（保证时间顺序）
+      const months = Object.keys(selectedTrend).sort((a, b) => new Date(a) - new Date(b));
+      // 4. 初始化数据数组
+      const rates = [];
+      const reals = [];
+      const targets = [];
+      const flags = [];
+      const diffs = []
+
+      // 5. 按月份提取数据
+      months.forEach(month => {
+        const monthData = selectedTrend[month] || {};
+        const completeRate = monthData.completeRate || 0;
+        // 填充对应数据
+        rates.push(completeRate);
+        reals.push(monthData.real || 0);
+        targets.push(monthData.target || 0);
+        diffs.push(monthData.diff || 0);
+
+        // 生成达标状态（复用 getRateFlag 逻辑）
+        flags.push(this.getRateFlag(completeRate));
+      });
+
+      return {
+        months,
+        rates,
+        reals,
+        targets,
+        flags,
+        diffs
+      };
+    },
+    // locations() {
+    //   return this.activeButton === 0 ? this.chartData?.salesLocations : this.chartData?.grossMarginLocations;
+    // },
+    // 重构 chartD：替换硬编码数据为动态解析数据
+    chartD() {
+      // 获取动态解析的趋势数据
+      const { months, rates, reals, targets, flags } = this.trendParsedData;
+      // 销量场景数据（保留原有结构，替换数据来源）
       const salesData = {
-        allPlaceNames: this.locations,
+        allPlaceNames: months, // 优先用基地名称，无则用月份
         series: [
           // 1. 完成率（折线图）
           {
             name: '完成率',
             type: 'line',
-            yAxisIndex: 1, // 绑定右侧Y轴（需在子组件启用配置）
+            yAxisIndex: 1,
             lineStyle: {
               color: 'rgba(40, 138, 255, .5)',
               width: 2
@@ -118,7 +152,7 @@ export default {
                 { offset: 1, color: 'rgba(40, 138, 255, 0)' }
               ])
             },
-            data: data.rates, // 完成率（%）
+            data: rates, // 动态完成率
             symbol: 'circle',
             symbolSize: 6
           },
@@ -126,7 +160,7 @@ export default {
           {
             name: '目标',
             type: 'bar',
-            yAxisIndex: 0, // 左侧Y轴（万元）
+            yAxisIndex: 0,
             barWidth: 14,
             itemStyle: {
               color: {
@@ -140,7 +174,7 @@ export default {
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
-            data: data.targets // 目标销量（万元）
+            data: targets, // 动态目标值
           },
           // 3. 实际（柱状图，含达标状态）
           {
@@ -148,93 +182,68 @@ export default {
             type: 'bar',
             yAxisIndex: 0,
             barWidth: 14,
-            itemStyle: {
-              color: (params) => {
-                // 达标状态：1=达标（绿色），0=未达标（橙色）
-                const safeFlag = data.flags;
-                const currentFlag = safeFlag[params.dataIndex] || 0;
-                return currentFlag === 1
-                  ? {
-                    type: 'linear',
-                    x: 0, y: 0, x2: 0, y2: 1,
-                    colorStops: [
-                      { offset: 0, color: 'rgba(174, 239, 224, 1)' },
-                      { offset: 1, color: 'rgba(118, 218, 190, 1)' }
-                    ]
-                  }
-                  : {
-                    type: 'linear',
-                    x: 0, y: 0, x2: 0, y2: 1,
-                    colorStops: [
-                      { offset: 0, color: 'rgba(253, 209, 129, 1)' },
-                      { offset: 1, color: 'rgba(249, 164, 74, 1)' }
-                    ]
-                  };
+            label: {
+              show: true,
+              position: 'top',
+              offset: [0, 0],
+              // 固定label尺寸：68px×20px
+              width: 68,
+              height: 20,
+              // 关键：去掉换行，让文字在一行显示，适配小尺寸
+              formatter: function (params) {
+                const diff = data.diffs || [];
+                const currentDiff = diff[params.dataIndex] || 0;
+                return `{rate|${currentDiff}}{text|差值}`;
               },
-              borderRadius: [4, 4, 0, 0],
-              borderWidth: 0
-            },
-            data: data.reals // 实际销量（万元）
-          }
-        ]
-      };
-
-      // 毛利率场景数据
-      const grossProfitData = {
-        series: [
-          // 1. 完成率（折线图）
-          {
-            name: '完成率',
-            type: 'line',
-            yAxisIndex: 1,
-            lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
-            itemStyle: {
-              color: 'rgba(40, 138, 255, 1)',
-              borderColor: 'rgba(40, 138, 255, 1)',
-              borderWidth: 2,
-              radius: 4
-            },
-            areaStyle: {
-              opacity: 0.2,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(40, 138, 255, .9)' },
-                { offset: 1, color: 'rgba(40, 138, 255, 0)' }
-              ])
-            },
-            data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
-            symbol: 'circle',
-            symbolSize: 6
-          },
-          // 2. 目标（柱状图）
-          {
-            name: '目标',
-            type: 'bar',
-            yAxisIndex: 0,
-            barWidth: 14,
-            itemStyle: {
-              color: {
+              backgroundColor: {
                 type: 'linear',
-                x: 0, y: 0, x2: 0, y2: 1,
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
                 colorStops: [
-                  { offset: 0, color: 'rgba(130, 204, 255, 1)' },
-                  { offset: 1, color: 'rgba(75, 157, 255, 1)' }
+                  { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
+                  // { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
+                  // { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
+                  { offset: 0.2, color: '#ffffff' }, // 主体白色
+                  { offset: 1, color: '#ffffff' }
                 ]
               },
-              borderRadius: [4, 4, 0, 0],
-              borderWidth: 0
+              // 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
+              shadowColor: 'rgba(191,203,215,0.5)',
+              shadowBlur: 2,
+              shadowOffsetX: 0,
+              shadowOffsetY: 2,
+              // 圆角：4px
+              borderRadius: 4,
+              // 移除边框
+              borderColor: '#BFCBD577',
+              borderWidth: 0,
+              // 文字垂直居中（针对富文本）
+              lineHeight: 20,
+              rich: {
+                text: {
+                  // 缩小宽度和内边距，适配68px容器
+                  width: 'auto', // 自动宽度，替代固定40px
+                  padding: [5, 10, 5, 0], // 缩小内边距
+                  align: 'center',
+                  color: '#464646', // 文字灰色
+                  fontSize: 11, // 缩小字体，适配小尺寸
+                  lineHeight: 20 // 垂直居中
+                },
+                rate: {
+                  width: 'auto',
+                  padding: [5, 0, 5, 10],
+                  align: 'center',
+                  color: '#30B590',
+                  fontSize: 11,
+                  lineHeight: 20
+                }
+              }
             },
-            data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
-          },
-          // 3. 实际（柱状图）
-          {
-            name: '实际',
-            type: 'bar',
-            yAxisIndex: 0,
-            barWidth: 14,
             itemStyle: {
               color: (params) => {
-                const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
-                const currentFlag = safeFlag[params.dataIndex] || 0;
+                const currentFlag = flags[params.dataIndex] || 0;
                 return currentFlag === 1
                   ? {
                     type: 'linear',
@@ -256,12 +265,12 @@ export default {
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
-            data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
+            data: reals, // 动态实际值
           }
         ]
       };
 
-      // 根据按钮状态返回对应数据
+      // 直接返回动态组装的 salesData（移除硬编码的毛利率数据）
       return salesData;
     }
   },
@@ -269,8 +278,13 @@ export default {
     selectProfit(item) {
       this.selectedProfit = item;
       this.isDropdownShow = false;
+    },
+    // 复用达标状态判断方法
+    getRateFlag(rate) {
+      if (isNaN(rate) || rate === null || rate === undefined) return 0;
+      return (rate >= 100 || rate === 0) ? 1 : 0;
     }
-  },
+  }
 };
 </script>
 
@@ -393,7 +407,7 @@ export default {
 
       .dropdown-container {
         position: relative;
-        z-index: 999; // 提高z-index，确保菜单不被遮挡
+        z-index: 10;
       }
 
       .item-button {
@@ -457,21 +471,18 @@ export default {
         transition: transform 0.2s ease;
 
         &.rotate {
-          transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
+          transform: rotate(90deg);
         }
       }
 
       .dropdown-options {
         position: absolute;
-        // 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
         bottom: 100%;
         right: 0;
-        // 移除多余的margin-top，避免额外间距
-        // margin-top: 2px;
+        margin-top: 2px;
         width: 123px;
         background: #ffffff;
-        // 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
-        border-radius: 8px 8px 0 0;
+        border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         overflow: hidden;