add fullscreen

src/views/dashboard/components/Header.vue

@@ -7,6 +7,7 @@
 
 <template>
   <header class="dashboard-header">
+    <div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
     <h1>发电玻璃智能管控平台地图总览</h1>
     <span class="side left">晴转多云 14℃</span>
     <span class="side right">23:12|星期一|2023.12.13</span>
@@ -14,15 +15,38 @@
 </template>
 
 <script>
+import screenfull from "screenfull";
+import fullscreenIcon from "@/assets/images/homeindex/fullscreen.png";
+import fullscreenExitIcon from "@/assets/images/homeindex/exit-fullscreen.png";
+
 export default {
   name: "DashboardHeader",
   components: {},
   props: {},
   data() {
-    return {};
+    return {
+      isFullscreen: false,
+    };
+  },
+  computed: {
+    btnStyle() {
+      return {
+        backgroundImage: `url(${
+          this.isFullscreen ? fullscreenExitIcon : fullscreenIcon
+        })`,
+      };
+    },
+  },
+  methods: {
+    toggleFullscreen() {
+      screenfull.toggle();
+      this.isFullscreen = !this.isFullscreen;
+      // 矫正宽度
+      const el = document.querySelector(".dashboard-factory-all");
+      el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
+      el.style.left = this.isFullscreen ? "0" : "54px";
+    },
   },
-  computed: {},
-  methods: {},
 };
 </script>
 
@@ -34,6 +58,17 @@ export default {
   position: relative;
   display: grid;
   place-content: center;
+
+  .btn {
+    cursor: pointer;
+    position: absolute;
+    width: 2vw;
+    height: 2vw;
+    top: 50%;
+    right: 1.18vw;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
 }
 
 h1 {

src/views/index.vue

@@ -48,7 +48,7 @@ import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
 import Container from "./dashboard/components/Container.vue";
 import ChartContainer from "./dashboard/components/ChartContainer.vue";
 import FtoChart from "./dashboard/charts/Fto.vue";
-import ChipInvestChart from './dashboard/charts/ChipInvest.vue';
+import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
 
 export default {
   name: "Index",
@@ -58,7 +58,7 @@ export default {
     DbContainer: Container,
     ChartContainer,
     FtoChart,
-    ChipInvestChart
+    ChipInvestChart,
   },
   data() {
     return {
@@ -145,7 +145,7 @@ export default {
   left: 54px;
   height: 100vh;
   width: calc(100vw - 54px);
-  z-index: 1000;
+  z-index: 1001;
   color: #fff;
 }