修改

src/views/home/components/keyWork.vue

@@ -1,7 +1,6 @@
 <template>
   <div style="flex: 1">
     <Container name="重点工作/三大攻坚战" icon="cockpitItemIcon" size="bottomBasic" topSize="basic">
-      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content"
         style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;height: 280px;">
         <div class="bottom"
@@ -16,79 +15,78 @@
               <span class="legend-text">未完成</span>
             </div>
           </div>
-          <base-table style="height: 180px;" :page="1" :limit="10" :show-index="true" :beilv="1" :tableConfig="tableProps"
-            :table-data="maintenanceTasks" />
-
+          <base-table style="height: 180px;" :page="1" :limit="10" :show-index="true" :beilv="1"
+            :tableConfig="tableProps" :table-data="tableData" />
         </div>
       </div>
     </Container>
   </div>
 </template>
+
 <script>
 import Container from './container.vue'
-// import * as echarts from 'echarts'
-import topItem from './top-product-item.vue'
-import coreBottomBar from './productBottomBar.vue'
 import baseTable from './baseTable.vue'
 import finishDiv from './finishDiv.vue'
 
-
 export default {
   name: 'ProductionStatus',
-  components: { Container, topItem, coreBottomBar, baseTable },
-  // mixins: [resize],
+  components: { Container, baseTable },
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
-    },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    importantWork: {
       type: Object,
       default: () => ({})
     }
   },
   data() {
     return {
-      maintenanceTasks: [
-        {
-          id: 1, eqName: '应收账款（亿元）', taskName: '10', monthlyActual: '12.45', accumulated: '12.45', status: 'done' }, // 已完成-绿色
-
-        { id: 2, eqName: '存货/亿元', taskName: '0.57', monthlyActual: '0.72', accumulated: '0.72', status: 'pending' }, // 未完成-橙色
-        { id: 3, eqName: '三年以上应收款/亿元', taskName: '0.57', monthlyActual: '0.72', accumulated: '0.72', status: 'done' },
-        { id: 4, eqName: '非经营性资产处置到账金额/万元', taskName: '11000', monthlyActual: '0', accumulated: '0', status: 'pending' },
-        { id: 1, eqName: '研发经费入强度/%', taskName: '3.07', monthlyActual: '2.37', accumulated: '3.14', status: 'done' }, // 已完成-绿色
-        { id: 4, eqName: '研发经费投入/万元', taskName: '19500', monthlyActual: '1084', accumulated: '2797', status: 'pending' },
-        { id: 4, eqName: '经营性现金流/万元', taskName: '2898', monthlyActual: '13472', accumulated: '-30490', status: 'pending' },
-
-        // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-
-      ],
+      tableData: [],
       tableProps: [
-        // { prop: 'id', label: '序号', width: 50, align: 'center' },
-        { prop: 'eqName', label: '攻坚指标', align: 'center' },
-        { prop: 'taskName', label: '攻坚目标', align: 'center' },
-        { prop: 'taskName', label: '当月实际', align: 'center' },
-        { prop: 'taskName', label: '累计', align: 'center', subcomponent: finishDiv },
-
+        { prop: 'name', label: '攻坚指标', align: 'center' },
+        { prop: 'target', label: '攻坚目标', align: 'center' },
+        { prop: 'monthlyActual', label: '当月实际', align: 'center' },
+        { prop: 'accumulated', label: '累计', align: 'center', subcomponent: finishDiv },
       ]
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
+    importantWork: {
+      handler(newVal) {
+        this.tableData = this.transformData(newVal);
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+      immediate: true,
+      deep: true
     }
   },
-  mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
-  },
-  beforeDestroy() {
-    // 销毁图表，避免内存泄漏
-  },
   methods: {
+    transformData(rawData) {
+      if (!rawData || typeof rawData !== 'object') return [];
+
+      const mapping = [
+        { key: 'jyxxjl', name: '经营现金流', unit: '万元' },
+        { key: 'yszk', name: '应收账款', unit: '万元' },
+        { key: 'ch', name: '存货', unit: '万元' },
+        { key: 'yysr', name: '营业收入', unit: '万元' },
+        { key: 'snysysk', name: '三年以上应收款', unit: '万元' },
+        { key: 'dzje', name: '非经营性资产处置到账金额', unit: '万元' },
+        { key: 'yfjftr', name: '研发经费投入', unit: '万元' },
+        { key: 'yfjftrqd', name: '研发经费投入强度', unit: '%' }
+      ];
+
+      return mapping.map((item, index) => {
+        const data = rawData[item.key] || { monValue: 0, real: 0, target: 0 };
+        const accumulated = data.real || 0;
+        const target = data.target || 0;
+
+        return {
+          id: index + 1,
+          name: item.name + '/' + item.unit,
+          target: target,
+          monthlyActual: data.monValue,
+          accumulated: accumulated,
+          status: accumulated > 0 && target > 0 && accumulated / target >= 1 ? 'done' : 'pending'
+        };
+      });
+    }
   }
 }
 </script>
@@ -98,41 +96,31 @@ export default {
   display: flex;
   align-items: center;
   gap: 10px;
-  /* 两个图例项之间的间距 */
 }
 
-/* 单个图例项 */
 .legend-item {
   display: flex;
   align-items: center;
 }
 
-/* 图例小方块 */
 .legend-dot {
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 5px;
   border-radius: 2px;
-  /* 可选：轻微圆角 */
 }
 
-/* 已完成（绿色） */
 .legend-dot.done {
   background-color: #4CAF50;
-  /* 绿色，可根据需求调整色值 */
 }
 
-/* 未完成（橙色） */
 .legend-dot.pending {
   background-color: #FF9800;
-  /* 橙色，可根据需求调整色值 */
 }
 
-/* 图例文字 */
 .legend-text {
   font-size: 14px;
   color: #333;
 }
-
 </style>