修改

src/views/home/components/coreBottomLeft.vue

@@ -3,7 +3,7 @@
     <Container name="采购重点指标" nameTwo="存货重点指标" icon="cockpitItemIcon" size="bottomBasic">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="bottom-left-content" style="display: flex;gap: 9px;padding: 14px 16px;">
-        <coreBottomLeftItem>
+        <coreBottomLeftItem :purchase="purchase">
         </coreBottomLeftItem>
         <div class="content-right" style="background: #F9FCFF;padding: 15px 12px;">
           <base-table style="height: 180px;width: 260px;" :page="1" :limit="10" :show-index="true" :beilv="1"
@@ -25,11 +25,11 @@ export default {
   components: { Container, coreBottomLeftItem, baseTable },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    purchase: {  // 接收父组件传递的设备数据数组
+      type: Object,
+      default: () => {}  // 默认空数组，避免报错
     },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    inventory: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
       type: Object,
       default: () => ({})
     }
@@ -37,12 +37,12 @@ export default {
   data() {
     return {
       maintenanceTasks: [
-        { id: 1, eqName: '纯碱', taskName: '1313,252', },
-        { id: 2, eqName: '硅砂', taskName: '14,252', },
-        { id: 2, eqName: '白云石', taskName: '23,252', },
-        { id: 2, eqName: '石灰石', taskName: '34,421', },
-        { id: 2, eqName: '氧化铝', taskName: '1,251.34', },
-        { id: 2, eqName: '氢氧化铝', taskName: '14,252', },
+        { id: 1, name: '纯碱', number: '1313,252', },
+        { id: 2, name: '硅砂', number: '14,252', },
+        { id: 2, name: '白云石', number: '23,252', },
+        { id: 2, name: '石灰石', number: '34,421', },
+        { id: 2, name: '氧化铝', number: '1,251.34', },
+        { id: 2, name: '氢氧化铝', number: '14,252', },
 
         // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
         // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
@@ -53,22 +53,26 @@ export default {
       ],
       tableProps: [
         // { prop: 'id', label: '序号', width: 50, align: 'center' },
-        { prop: 'eqName', label: '物料', align: 'left' },
-        { prop: 'taskName', label: '库存/吨', align: 'left' },
+        { prop: 'name', label: '物料', align: 'left' },
+        { prop: 'number', label: '库存/吨', align: 'left' },
       ]
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
+    inventory: {
+      handler(newInventoryData) {
+        // 当 inventory 数据变化时，执行转换函数
+        this.maintenanceTasks = this.transformInventoryData(newInventoryData);
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true       // 深度监听对象内部属性的变化
     }
   },
   mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
+    // 组件挂载时，如果有初始 inventory 数据，也执行一次转换
+    if (this.inventory) {
+      this.maintenanceTasks = this.transformInventoryData(this.inventory);
+    }
   },
   beforeDestroy() {
     // 销毁图表，避免内存泄漏
@@ -78,115 +82,25 @@ export default {
     }
   },
   methods: {
-    updateChart() {
-      // 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
-      // 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
-      if (!document.getElementById('productionStatusChart')) return
-
-      if (this.chart) this.chart.dispose()
-      this.chart = echarts.init(document.getElementById('productionStatusChart'))
-
-      const data = [
-        this.productionOverviewVo.input || 0,
-        this.productionOverviewVo.output || 0,
-        this.productionOverviewVo.ng || 0,
-        this.productionOverviewVo.lowValue || 0,
-        this.productionOverviewVo.scrap || 0,
-        this.productionOverviewVo.inProcess || 0,
-        this.productionOverviewVo.engineer || 0
-      ]
-
-      const option = {
-        type: 'bar',
-        grid: { left: 51, right: 40, top: 50, bottom: 45 },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'shadow' },
-          className: 'production-status-chart-tooltip'
-        },
-        xAxis: {
-          type: 'category',
-          offset: 8,
-          data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
-          axisTick: { show: false },
-          axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
-          axisLabel: {
-            color: 'rgba(255,255,255,0.7)',
-            fontSize: 12,
-            interval: 0,
-            width: 38,
-            overflow: 'break'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位/片',
-          nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
-          min: () => 0,
-          max: (value) => Math.ceil(value.max),
-          scale: true,
-          axisTick: { show: false },
-          axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
-          splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
-          axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
-        },
-        series: [
-          {
-            type: 'pictorialBar',
-            label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
-            symbolSize: [20, 8],
-            symbolOffset: [0, 5],
-            z: 20,
-            itemStyle: {
-              borderColor: '#3588C7',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            data: data
-          },
-          {
-            type: 'bar',
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: '#3588C7',
-              opacity: 0.8,
-              color: {
-                x: 0, y: 0, x2: 0, y2: 1,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  { offset: 0, color: 'rgba(73,178,255,0)' },
-                  { offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
-                  { offset: 1, color: 'rgba(0, 232, 255, 1)' }
-                ]
-              }
-            },
-            tooltip: { show: false },
-            data: data
-          },
-          {
-            type: 'pictorialBar',
-            symbolSize: [20, 8],
-            symbolOffset: [0, -4],
-            z: 12,
-            symbolPosition: 'end',
-            itemStyle: {
-              borderColor: 'rgba(0, 232, 255, 1)',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            tooltip: { show: false },
-            data: data
-          }
-        ]
+    /**
+     * 核心转换函数：将 inventory 对象转换为 maintenanceTasks 数组
+     * @param {Object} inventoryData - 格式如: { "纯碱": 0, "硅砂": 0, ... }
+     * @returns {Array} - 格式如: [ { id: 1, name: '纯碱', number: '0' }, ... ]
+     */
+    transformInventoryData(inventoryData) {
+      // 检查输入是否为有效的非空对象
+      if (!inventoryData || typeof inventoryData !== 'object' || Object.keys(inventoryData).length === 0) {
+        return []; // 如果无效，返回空数组
       }
 
-      this.chart.setOption(option)
+      // 使用 Object.entries() 和 map() 进行转换
+      return Object.entries(inventoryData).map(([name, value], index) => {
+        return {
+          id: index + 1,          // id 从 1 开始自增
+          name: name,             // 物料名称
+          number: String(value)   // 将数值转换为字符串，以匹配 "number" 字段
+        };
+      });
     }
   }
 }