修改

src/views/home/unitPriceAnalysisComponents/monthlyRelatedMetrics.vue

@@ -1,24 +1,42 @@
 <template>
   <div style="flex: 1">
     <Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
-      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
-        <!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
         <div class="topItem-container" style="display: flex; gap: 8px;">
+          <!-- 销量图表：传递销量数据 + 完成率flag -->
           <div class="dashboard left">
             <div class="title">
               销量·单位/万元
             </div>
-            <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+            <div class="chart-wrap">
+              <operatingSingleBar :detailData="{
+                ...(relatedMon.销量 || defaultData),
+                flag: getRateFlag((relatedMon.销量 || defaultData).completeRate)
+              }" />
             </div>
           </div>
+          <!-- 成本图表：传递全成本数据 + 完成率flag -->
           <div class="dashboard right">
             <div class="title">
-              单价·单位/万元
+              成本·单位/万元
             </div>
-            <div class="line">
-              <operatingSingleBar></operatingSingleBar>
+            <div class="chart-wrap">
+              <operatingSingleBar :detailData="{
+  ...(relatedMon.成本 || defaultData),
+  flag: getRateFlag((relatedMon.成本 || defaultData).completeRate)
+              }" />
+            </div>
+          </div>
+          <!-- 运费图表：传递单价数据 + 完成率flag -->
+          <div class="dashboard right">
+            <div class="title">
+              运费·单位/万元
+            </div>
+            <div class="chart-wrap">
+              <operatingSingleBar :detailData="{
+                ...(relatedMon.运费 || defaultData),
+                flag: getRateFlag((relatedMon.运费 || defaultData).completeRate)
+              }" />
             </div>
           </div>
         </div>
@@ -26,127 +44,130 @@
     </Container>
   </div>
 </template>
+
 <script>
 import Container from './container.vue'
 import operatingSingleBar from './operatingSingleBar.vue'
-import verticalBarChart from './verticalBarChart.vue'
-
-// import * as echarts from 'echarts'
-// import rawItem from './raw-Item.vue'
-
 export default {
   name: 'ProductionStatus',
-  components: { Container, operatingSingleBar, verticalBarChart },
-  // mixins: [resize],
+  components: { Container, operatingSingleBar },
   props: {
-    itemData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    relatedMon: {
+      type: Object,
+      default: () => ({
+        运费: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+        成本: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+        销量: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 }
+      })
     },
-    title: {  // 接收父组件传递的设备数据数组
+    title: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
-    },
-    month: {  // 接收父组件传递的设备数据数组
-      type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
   },
   data() {
     return {
       chart: null,
-
+      // 兜底数据：防止字段缺失时报错
+      defaultData: {
+        completeRate: 0,
+        diff: 0,
+        real: 0,
+        target: 0,
+        thb: 0
+      }
     }
   },
   watch: {
-    itemData: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
+    relatedMon: {
+      handler(newValue) {
+        this.updateChart()
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+      immediate: true, // 初始化时立即执行
+      deep: true
     }
   },
-  // computed: {
-  //   // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
-  //   sortedItemData() {
-  //     // 过滤出包含“总成本”的项（不区分大小写）
-  //     const totalCostItems = this.itemData.filter(item =>
-  //       item.name && item.name.includes('总成本')
-  //     );
-  //     // 过滤出不包含“总成本”的项
-  //     const otherItems = this.itemData.filter(item =>
-  //       !item.name || !item.name.includes('总成本')
-  //     );
-  //     // 合并：总成本项在前，其他项在后
-  //     return [...totalCostItems, ...otherItems];
-  //   }
-  // },
   mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
+    // 初始化图表
+    this.$nextTick(() => this.updateChart())
   },
   methods: {
+    /**
+     * 判断完成率对应的flag值（<100为0，≥100为1）
+     * @param {number} rate 完成率（原始值，如89代表89%）
+     * @returns {0|1} flag值
+     */
+    getRateFlag(rate) {
+      if (isNaN(rate) || rate === null || rate === undefined) return 0;
+      return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
+    },
+
+    /**
+     * 图表更新方法：可在这里补充全局的图表刷新逻辑
+     * 若子组件内部已监听 chartData 变化，此方法可留空或补充额外逻辑
+     */
+    updateChart() {
+      console.log('数据更新，当前relatedMon:', this.relatedMon)
+      // 打印各维度的flag值，方便调试
+      console.log('销量flag:', this.getRateFlag(this.relatedMon.销量.completeRate))
+      console.log('成本flag:', this.getRateFlag(this.relatedMon.成本.completeRate))
+      console.log('运费flag:', this.getRateFlag(this.relatedMon.运费.completeRate))
+    }
   }
 }
 </script>
 
 <style lang='scss' scoped>
-/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
+/* 滚动容器样式保留 */
 .scroll-container {
-  /* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
   max-height: 210px;
-  /* 2. 溢出滚动：内容超出高度时显示滚动功能 */
   overflow-y: auto;
-  /* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
   overflow-x: hidden;
-  /* 4. 内边距：与标题栏和容器边缘对齐 */
   padding: 10px 0;
 
-  /* 5. 隐藏滚动条（兼容主流浏览器） */
-  /* Chrome/Safari */
   &::-webkit-scrollbar {
     display: none;
   }
 
-  /* Firefox */
   scrollbar-width: none;
-  /* IE/Edge */
   -ms-overflow-style: none;
 }
 
+/* 仪表盘容器样式优化 */
 .dashboard {
-  width: 382px;
+  width: 250px;
   height: 205px;
   background: #F9FCFF;
   padding: 16px 0 0 16px;
+  box-sizing: border-box; // 防止内边距撑大容器
 
   .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;
+    margin-bottom: 12px; // 标题和图表增加间距
+  }
+
+  // 图表容器样式：适配高度
+  .chart-wrap {
+    width: calc(100% - 16px); // 适配左侧内边距
+    height: calc(100% - 46px); // 减去标题高度和间距
   }
 
   .number {
     display: flex;
     align-items: center;
     gap: 30px;
-    // width: 190px;
     height: 32px;
     font-family: YouSheBiaoTiHei;
     font-size: 32px;
     color: #0B58FF;
     line-height: 32px;
     letter-spacing: 2px;
-    text-align: left;
-    font-style: normal;
   }
 
   .mom {
@@ -158,44 +179,6 @@ export default {
     color: #000000;
     line-height: 18px;
     letter-spacing: 1px;
-    text-align: left;
-    font-style: normal;
   }
 }
-
-// .line {
-//   width: 500px;
-//   height: 205px;
-//   background: #F9FCFF;
-// }
-
-// .leftTitle {
-//   .item {
-//     width: 67px;
-//     height: 180px;
-//     padding: 37px 23px;
-//     background: #F9FCFF;
-//     font-family: PingFangSC, PingFang SC;
-//     font-weight: 400;
-//     font-size: 18px;
-//     color: #000000;
-//     line-height: 25px;
-//     letter-spacing: 1px;
-//     // text-align: left;
-//     font-style: normal;
-//   }
-// }
 </style>
-
-<!-- <style>
-/* 全局 tooltip 样式（不使用 scoped，确保生效） */
-.production-status-chart-tooltip {
-  background: #0a2b4f77 !important;
-  border: none !important;
-  backdrop-filter: blur(12px);
-}
-
-.production-status-chart-tooltip * {
-  color: #fff !important;
-}
-</style> -->