修改

src/views/home/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div id="dayReport" class="dayReport" :style="styles">
-    <!-- <sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
-    <ReportHeader top-title="洛玻集团运营驾驶舱" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
-      @timeRangeChange="handleTimeChange" />
+    <!-- <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> -->
+    <sidebar style="opacity: .9;" v-if="!sidebar.hide && openSider" class="sidebar-container" />
+    <ReportHeader top-title="洛玻集团运营驾驶舱" :openSider="openSider" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
+      @siderOpenChange="siderOpenChange" @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;">
@@ -42,12 +43,14 @@ import keyWork from './components/keyWork.vue'
 // import moment from 'moment'
 import { getOperateCockpit, getOrderDetail } from '@/api/cockpit'
 import { Sidebar } from "../../layout/components";
+import { mapState } from "vuex";
 export default {
   name: 'DayReport',
   components: { ReportHeader, coreSalesKPIs, keyProductionIndicators, coreBottomLeft, keyWork, orderProgress, financeCosts, Sidebar },
   data() {
     return {
       isFullScreen: false,
+      openSider: false,
       timer: null,
       beilv: 1,
       value: 100,
@@ -70,26 +73,25 @@ export default {
     this.windowWidth(document.documentElement.clientWidth)
   },
   computed: {
-    // ...mapState({
-    //   theme: (state) => state.settings.theme,
-    //   sideTheme: (state) => state.settings.sideTheme,
-    //   sidebar: (state) => state.app.sidebar,
-    //   device: (state) => state.app.device,
-    //   needTagsView: (state) => state.settings.tagsView,
-    //   fixedHeader: (state) => state.settings.fixedHeader,
-    // }),
-    // classObj() {
-    //   return {
-    //     hideSidebar: !this.sidebar.opened,
-    //     openSidebar: this.sidebar.opened,
-    //     withoutAnimation: this.sidebar.withoutAnimation,
-    //     mobile: this.device === "mobile",
-    //   };
-    // },
-    // variables() {
-    //   return variables;
-    // },
-    // ...mapGetters(['sidebar']),
+    ...mapState({
+      theme: (state) => state.settings.theme,
+      sideTheme: (state) => state.settings.sideTheme,
+      sidebar: (state) => state.app.sidebar,
+      device: (state) => state.app.device,
+      needTagsView: (state) => state.settings.tagsView,
+      fixedHeader: (state) => state.settings.fixedHeader,
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === "mobile",
+      };
+    },
+    variables() {
+      return variables;
+    },
     styles() {
       const v = Math.floor(this.value * this.beilv * 100) / 10000
       return {
@@ -172,6 +174,9 @@ export default {
     change() {
       this.isFullScreen = screenfull.isFullscreen
     },
+    handleClickOutside() {
+      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
+    },
     windowWidth(value) {
       this.clientWidth = value;
       this.beilv2 = this.clientWidth / 1920;
@@ -196,6 +201,9 @@ export default {
       }
       screenfull.off('change', this.change)
     },
+    siderOpenChange() {
+      this.openSider = !this.openSider
+    },
     // 全屏
     screenfullChange() {
       console.log('screenfull.enabled', screenfull.isEnabled);