修改

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="dayReport" class="dayReport" :style="styles">
     <ReportHeader top-title="洛玻集团运营驾驶舱" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
-       @timeRangeChange="handleTimeChange" />
+      @timeRangeChange="handleTimeChange" />
     <div class="main-body"
       style="margin-top: -20px; flex: 1; display: flex;padding: 0px 16px 0;flex-direction: column;">
       <div class="top" style="display: flex;gap: 16px;">
@@ -10,9 +10,9 @@
               gap: 12px;
               grid-template-columns: 560px 745px 560px ;
             ">
-          <coreSalesKPIs />
-          <financeCosts />
-          <keyProductionIndicators />
+          <coreSalesKPIs :sale="sale" :dateData="dateData" />
+          <financeCosts :finance="finance" :dateData="dateData" :cost="cost" />
+          <keyProductionIndicators :productData="productData" :dateData="dateData" />
         </div>
       </div>
       <div class="top" style="display: flex;gap: 16px;margin-top: 6px;">
@@ -21,9 +21,9 @@
               gap: 12px;
               grid-template-columns: 560px 745px 560px ;
             ">
-          <coreBottomLeft />
-          <orderProgress />
-          <keyWork />
+          <coreBottomLeft :purchase="purchase" :inventory="inventory" />
+          <orderProgress @getData="getOrderData" :baseOrder="baseOrder" :orderOutput="orderOutput" />
+          <keyWork :importantWork="importantWork" />
         </div>
       </div>
     </div>
@@ -38,7 +38,8 @@ import keyProductionIndicators from './components/keyProductionIndicators.vue'
 import coreBottomLeft from './components/coreBottomLeft.vue'
 import orderProgress from './components/orderProgress.vue'
 import keyWork from './components/keyWork.vue'
-import moment from 'moment'
+// import moment from 'moment'
+import { getOperateCockpit } from '@/api/cockpit'
 export default {
   name: 'DayReport',
   components: { ReportHeader, coreSalesKPIs, keyProductionIndicators, coreBottomLeft, keyWork, orderProgress, financeCosts },
@@ -48,6 +49,16 @@ export default {
       timer: null,
       beilv: 1,
       value: 100,
+      productData: {},
+      purchase: {},
+      dateData:{},
+      inventory: {},
+      importantWork: {},
+      finance: {},
+      cost: {},
+      sale: {},
+      orderOutput: {},
+      baseOrder:[],
     }
   },
 
@@ -96,9 +107,52 @@ export default {
     }
   },
   methods: {
+    getOrderData(num) {
+      this.getData({
+        startTime: this.dateData.startTime,
+        endTime: this.dateData.endTime,
+        timeDim: this.dateData.mode,
+        baseId: num
+      })
+    },
+    getData(obj) {
+      console.log('obj', obj);
+
+      this.dateData= obj
+      getOperateCockpit({
+        startTime: obj.startTime,
+        endTime: obj.endTime,
+        timeDim: obj.mode ? obj.mode : obj.timeDim,
+        baseId: obj.baseId ? obj.baseId : 1
+      }).then((res) => {
+        console.log(res)
+        this.productData = res.data.product
+        this.purchase = res.data.purchase
+        this.inventory = res.data.inventory
+        this.importantWork = res.data.importantWork
+        this.finance = res.data.finance
+        this.cost = res.data.cost
+        this.sale = res.data.sale
+        this.orderOutput = res.data.orderOutput
+        this.baseOrder = res.data.baseOrder
+        // this.saleData = res.data.SaleData
+        // this.premiumProduct = res.data.premiumProduct
+        // this.salesTrendMap = res.data.salesTrendMap
+        // this.grossMarginTrendMap = res.data.grossMarginTrendMap
+        // this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {}
+      })
+    },
+    handleTimeChange(obj) {
+      console.log(obj, 'obj');
+      this.getData(obj)
+    },
     change() {
       this.isFullScreen = screenfull.isFullscreen
     },
+    windowWidth(value) {
+      this.clientWidth = value;
+      this.beilv2 = this.clientWidth / 1920;
+    },
     init() {
       if (!screenfull.isEnabled) {
         this.$message({