驾驶舱

src/views/copilot/container.vue

@@ -7,13 +7,12 @@
 -->
 
 <template>
-  <div class="copilot-layout" ref="copilot-layout">
+  <div class="copilot-layout" ref="copilot-layout" :class="[ page== '产量' ? 'produce': 'other' ]">
     <CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />
 
     <YieldCopilot v-if="page == '产量'" :period="period" />
     <EnergyCopilot v-if="page == '综合'" :period="period" />
     <EfficiencyCopilot v-if="page == '效率'" :period="period" />
-
     <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
   </div>
 </template>
@@ -36,8 +35,24 @@ export default {
     return {
       page: "产量",
       period: "日",
+      currentsStyles: '',
     };
   },
+  // watch: {
+  //   page(val) {
+  //     if (val === '产量') {
+  //       console.log(val)
+  //       this.currentsStyles =
+  //         'height: calc(100% + 38px)'
+  //       console.log(this.currentsStyles)
+  //     } else {
+  //       console.log(val)
+  //       this.currentsStyles = 'height:100%+38px'
+  //       console.log(this.currentsStyles)
+  //     }
+  //     immediate: true
+  //   }
+  // }
   // mounted() {
   //   document.body.style.minHeight = "1024px";
   //   document.body.style.minWidth = "1550px";
@@ -54,9 +69,8 @@ export default {
   padding: 16px;
   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
   position: absolute;
-  height: calc(100% + 38px);
   left: -16px;
-  top: -8px;
+  /* top: -8px; */
   width: calc(100% + 30px);
   z-index: 1001;
   color: #fff;
@@ -65,6 +79,12 @@ export default {
   gap: 8px;
 }
 
+.produce{
+  height: calc(100% + 38px);
+}
+.other {
+  height: 100vh + 50px;
+}
 .copilot-footer {
   /** position: absolute;
   bottom: 10px; **/