修改

src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue

@@ -1,9 +1,7 @@
 <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;">
           <div class="dashboard">
             <div class="title">
@@ -11,112 +9,124 @@
             </div>
             <div class="number">
               <div class="yield">
-                90%
+                {{ formatRate(factoryData?.completeRate) }}%
               </div>
               <div class="mom">
-                环比10%
-                <img class="arrow" src="../../../assets/img/downArrow.png" alt="">
+                环比{{ formatRate(factoryData?.thb) }}%
+                <img v-if="factoryData?.thb >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="上升">
+                <img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="下降">
               </div>
             </div>
             <div class="electricityGauge">
-              <electricityGauge id="month"></electricityGauge>
+              <!-- 传递包含flag的factoryData给仪表盘组件 -->
+              <electricityGauge id="month" :detailData="factoryData"></electricityGauge>
             </div>
           </div>
           <div class="line" style="padding: 0px;">
-            <verticalBarChart>
-            </verticalBarChart>
-
+            <!-- 传递包含flag的factoryData给柱状图组件 -->
+            <verticalBarChart :detailData="factoryData"></verticalBarChart>
           </div>
         </div>
       </div>
     </Container>
   </div>
 </template>
+
 <script>
 import Container from './container.vue'
 import electricityGauge from './electricityGauge.vue'
 import verticalBarChart from './verticalBarChart.vue'
-
-// import * as echarts from 'echarts'
-// import rawItem from './raw-Item.vue'
+// 引入箭头图片（根据实际路径调整，若模板中直接用路径可注释）
 
 export default {
   name: 'ProductionStatus',
   components: { Container, electricityGauge, verticalBarChart },
-  // mixins: [resize],
   props: {
-    itemData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    monData: {
+      type: Object,
+      default: () => ({})
     },
-    title: {  // 接收父组件传递的设备数据数组
+    title: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
-    month: {  // 接收父组件传递的设备数据数组
+    month: {
       type: String,
-      default: () => ''  // 默认空数组，避免报错
+      default: ''
     },
   },
   data() {
     return {
       chart: null,
-
     }
   },
-  watch: {
-    itemData: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
-      },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+  computed: {
+    /**
+     * 自动提取monData中的工厂数据，并新增flag字段
+     */
+    factoryData() {
+      const factoryKeys = Object.keys(this.monData);
+      if (factoryKeys.length === 0) {
+        // 无数据时返回兜底对象（包含flag）
+        return {
+          completeRate: 0,
+          diff: 0,
+          real: 0,
+          target: 0,
+          thb: 0,
+          flag: 0 // 兜底flag
+        };
+      }
+      const firstKey = factoryKeys[0];
+      const rawData = this.monData[firstKey];
+      // 整合原始数据 + 计算flag
+      return {
+        completeRate: 0,
+        diff: 0,
+        real: 0,
+        target: 0,
+        thb: 0,
+        ...rawData,
+        flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
+      };
     }
   },
-  // 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())
-  },
   methods: {
+    /**
+     * 格式化百分比数值：处理空值/非数字，兜底为0
+     */
+    formatRate(value) {
+      if (isNaN(value) || value === null || value === undefined) {
+        return 0;
+      }
+      return value;
+    },
+    /**
+     * 判断完成率对应的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 ? 1 : 0;
+    }
   }
 }
 </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;
 }
 
@@ -127,16 +137,12 @@ export default {
   padding: 16px 0 0 16px;
 
   .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;
   }
 
@@ -144,19 +150,16 @@ export default {
     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 {
-    width: 97px;
+    width: fit-content; // 自适应宽度，避免文字溢出
     height: 18px;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
@@ -164,8 +167,16 @@ export default {
     color: #000000;
     line-height: 18px;
     letter-spacing: 1px;
-    text-align: left;
-    font-style: normal;
+    display: flex;
+    align-items: center; // 箭头和文字垂直居中
+    gap: 4px; // 文字和箭头间距
+  }
+
+  // 箭头样式优化
+  .arrow {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
   }
 }
 
@@ -174,34 +185,4 @@ export default {
   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> -->