修改ui

src/views/copilot/container.vue

@@ -1,4 +1,3 @@
-
 <!--
     filename: container.vue
     author: liubin
@@ -8,12 +7,12 @@
 
 <template>
   <!-- <div class="copilot-layout" ref="copilot-layout"> -->
-  <div class="copilot-layout" ref="copilot-layout" :class="[page == '效率' ? 'other' : 'produce' ]">
-    <CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />
+  <div class="copilot-layout produce" ref="copilot-layout">
+    <CopilotHeaderVue :active="page" :period="period" @update:active="updateActive" @update:period="period = $event" />
 
-    <YieldCopilot v-if="page == '产量'" :period="period" />
-    <EnergyCopilot v-if="page == '综合'" :period="period" />
-    <EfficiencyCopilot v-if="page == '效率'" :period="period" />
+    <YieldCopilot :period="period" />
+    <!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> -->
+    <!-- <EfficiencyCopilot v-if="page == '效率'" :period="period" /> -->
     <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
   </div>
 </template>
@@ -39,6 +38,31 @@ export default {
       currentsStyles: '',
     };
   },
+  methods: {
+    updateActive(val, oldVal) {
+      console.log(val)
+      if (val === '效率') {
+        this.$router.push({
+          path: 'efficiency-container',
+          query: {
+            name: '效率'
+          }
+        })
+        // this.page = oldVal
+      } else if (val === '产量') {
+        this.$router.push({
+          path: 'main',
+          query: {
+            name: '产量'
+          }
+        })
+        // this.page = oldVal
+      }
+    }
+  },
+  // mounted() {
+  //   this.page = this.$route.query.name
+  // },
   // watch: {
   //   page(val) {
   //     if (val === '产量') {
@@ -65,7 +89,6 @@ export default {
 };
 </script>
 <style>
-
 .copilot-layout {
   padding: 16px;
   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
@@ -81,12 +104,14 @@ export default {
   gap: 8px;
 }
 
-.produce{
+.produce {
   height: calc(100% + 38px);
 }
+
 .other {
   height: calc(100% + 240px);
 }
+
 .copilot-footer {
   /** position: absolute;
   bottom: 10px; **/