运营驾驶舱修改部分

src/views/home/components/keyProductionIndicators.vue

@@ -1,33 +1,49 @@
 <template>
   <div style="flex: 1">
-    <Container name="生产重点指标" icon="cockpitItemIcon" size="topBasic" topSize="basic">
+    <Container name="生产重点指标" nameTwo="热耗" icon="cockpitItemIcon" size="topBasic" topSize="basic" @switchTab="handleTabSwitch" @tabChange='tabChange'>
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content" style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
-        <div class="top" style="display: flex; width: 100%;">
-          <top-item :rawItemList='productData' :dateData="dateData" />
-        </div>
-        <div class="bottom" style="display: flex;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
-          <!-- <top-item /> -->
-          <coreBottomBar :lineData="productData.line" :dateData="dateData" />
-
-        </div>
+         <template v-if="activeTab === 'product'">
+          <div class="top" style="display: flex; width: 100%;">
+            <top-item :rawItemList='productData' :dateData="dateData" />
+          </div>
+          <div class="bottom" style="display: flex;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
+            <!-- <top-item /> -->
+            <coreBottomBar :lineData="product.line" :dateData="dateData" />
+          </div>
+         </template>
+         <template v-else-if="activeTab === 'heat'">
+          <div class="bottom" style="background-color: rgba(249, 252, 255, 1);">
+            <div class="bottom" style="margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
+            <div style='text-align: center;margin: 5px;font-size: 18px;font-weight: 400;color: #000;'>1200t/d</div>
+            <heatBar :lineData="heatData['1200t']" :xData="['桐城','洛阳','江苏','秦皇岛']" :dateData="dateData" />
+          </div>
+            <div style='text-align: center;margin: 5px;font-size: 18px;font-weight: 400;color: #000;'>650t/d</div>
+            <heatBar :lineData="heatData['650t']" :xData="['宜兴','自贡','漳州']" :dateData="dateData" />
+          </div>
+         </template>
       </div>
     </Container>
   </div>
 </template>
 <script>
-import Container from './container.vue'
+import Container from './keyProductContainer.vue'
 // import * as echarts from 'echarts'
 import topItem from './top-product-item.vue'
 import coreBottomBar from './productBottomBar.vue'
+import heatBar from './heatBarChart.vue'
 
 export default {
   name: 'ProductionStatus',
-  components: { Container, topItem, coreBottomBar },
+  components: { Container, topItem, coreBottomBar, heatBar },
   // mixins: [resize],
   props: {
-    productData: {
+    product: {
+      type: Object,
+      default: () => {}  // 默认空数组，避免报错
+    },
+    heat: {
       type: Object,
       default: () => {}  // 默认空数组，避免报错
     },
@@ -35,13 +51,45 @@ export default {
       type: Object,
       default: () => { }  // 默认空数组，避免报错
     },
+    heat: {
+      type: Object,
+      default: () => { }
+    }
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      activeTab: 'product',
+      currentTap: 'month',
+      productData:{},
+      heatData:{}
     }
   },
   watch: {
+    // 切换标签时更新图表
+    activeTab(newVal) {
+      // this.$nextTick(() => this.updateChart())
+    },
+    product: {
+      handler() {
+        if(this.currentTap === 'month') {
+          this.productData = this.product.mon
+        }else{
+          this.productData = this.product.total
+        }
+      },
+      deep: true
+    },
+    heat: {
+      handler() {
+        if(this.currentTap === 'month') {
+          this.heatData = this.heat.mon
+        }else{
+          this.heatData = this.heat.total
+        }
+      },
+      deep: true
+    },
   },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
@@ -49,6 +97,22 @@ export default {
   },
 
   methods: {
+    // 处理标题点击切换标签
+    handleTabSwitch(tabType) {
+      this.activeTab = tabType  // tabType由Container组件传递：'purchase'或'inventory'
+      this.showChart = true     // 切换时默认显示图表（可根据需求调整）
+    },
+    tabChange(val) {
+      if(val === 'month') {
+        this.currentTap = 'month'
+        this.productData = this.product.mon
+        this.heatData = this.heat.mon
+      }else{
+        this.currentTap = 'total'
+        this.productData = this.product.total
+        this.heatData = this.heat.total
+      }
+    },
   }
 }
 </script>