面板控制公有化

src/store/getters.js

@@ -28,6 +28,6 @@ const getters = {
   queryParamsXiaoqu: (state) => state.xiaoqu.queryParmas,
   mapParmas: (state) => state.xiaoqu.mapParmas,
   netWorkintroduce: (state) => state.xiaoqu.netWorkintroduce,
-  bottomPanel: (state) => state.xiaoqu.bottomPanel,
+  panel: (state) => state.xiaoqu.panel,
 };
 export default getters;

src/store/modules/xiaoqu.js

@@ -7,11 +7,13 @@ const xiaoqu = {
       networkName: undefined,
     },
     netWorkintroduce: {},
-    bottomPanel: false,
+    panel: {},
   },
   mutations: {
     SET_PANEL: (state, boolean) => {
-      state.bottomPanel = !boolean;
+      for (let key in boolean) {
+        state.panel[key] = boolean[key];
+      }
     },
     //参数变化
     CHANGE_QUERY: (state, query) => {
@@ -19,6 +21,10 @@ const xiaoqu = {
         state.queryParmas[key] = query[key];
       }
 
+      if (query.buildingid) {
+        state.panel.bottomPanel = true;
+        return;
+      }
       if (
         query.color ||
         query.type ||
@@ -27,8 +33,9 @@ const xiaoqu = {
         query.isx ||
         query.isj ||
         query.parentid
-      )
+      ) {
-        state.bottomPanel = false;
+        state.panel.bottomPanel = false;
+      }
     },
     CHANGE_QUERY_MAP: (state, query) => {
       for (let key in query) {
@@ -40,7 +47,11 @@ const xiaoqu = {
     },
     //重置参数
     RESET_QUERY: (state, query) => {
-      state.bottomPanel = true;
+      state.panel = {
+        leftPanel: false,
+        rightPanel: false,
+        bottomPanel: true,
+      };
       state.netWorkintroduce = {
         intro: "",
         list: [],

src/views/components/foldPaneBottom/index.vue

@@ -4,14 +4,14 @@
       <div class="fold-btn" @click="togglePanel()">
         <img
           :src="
-            bottomPanel
+            panel.bottomPanel
               ? require('@/assets/images/ui/arrow_left.jpg')
               : require('@/assets/images/ui/arrow_right.jpg')
           "
           alt=""
         />
       </div>
-      <div :class="['panel-main', { collapsed: bottomPanel }]">
+      <div :class="['panel-main', { collapsed: panel.bottomPanel }]">
         <slot></slot>
       </div>
     </div>
@@ -25,12 +25,13 @@ export default {
     return {};
   },
   computed: {
-    ...mapGetters(["bottomPanel"]),
+    ...mapGetters(["panel"]),
   },
 
+  created() {},
   methods: {
     togglePanel() {
-      this.$store.commit("SET_PANEL", this.bottomPanel);
+      this.$store.commit("SET_PANEL", { bottomPanel: !this.panel.bottomPanel });
     },
   },
 };

src/views/components/foldpanelLeft/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fold-panel">
     <div class="panel-container">
-      <div :class="['panel-main', { collapsed: isCollapsed }]">
+      <div :class="['panel-main', { collapsed: panel.leftPanel }]">
         <div class="panel-box">
           <introduceTitle
             :title="title"
@@ -13,7 +13,7 @@
       <div class="fold-btn" @click="togglePanel()">
         <img
           :src="
-            isCollapsed
+            panel.leftPanel
               ? require('@/assets/images/ui/arrow_left.jpg')
               : require('@/assets/images/ui/arrow_right.jpg')
           "
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import introduceTitle from "@/views/components/introduceTitle";
 export default {
   props: {
@@ -37,13 +38,14 @@ export default {
     introduceTitle,
   },
   data() {
-    return {
+    return {};
-      isCollapsed: false,
+  },
-    };
+  computed: {
+    ...mapGetters(["panel"]),
   },
   methods: {
     togglePanel() {
-      this.isCollapsed = !this.isCollapsed;
+      this.$store.commit("SET_PANEL", { leftPanel: !this.panel.leftPanel });
     },
   },
 };

src/views/components/foldpanelRight/index.vue

@@ -3,7 +3,7 @@
     <div class="panel-container">
       <div
         class="panel-main"
-        :class="['panel-main', { collapsed: isCollapsed }]"
+        :class="['panel-main', { collapsed: panel.rightPanel }]"
       >
         <div class="panel-box">
           <introduceTitle
@@ -16,7 +16,7 @@
       <div class="fold-btn" @click="togglePanel()">
         <img
           :src="
-            isCollapsed
+            panel.rightPanel
               ? require('@/assets/images/ui/arrow_right.jpg')
               : require('@/assets/images/ui/arrow_left.jpg')
           "
@@ -28,17 +28,20 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import introduceTitle from "@/views/components/introduceTitle";
 export default {
   components: { introduceTitle },
   data() {
-    return {
+    return {};
-      isCollapsed: false,
-    };
   },
+  computed: {
+    ...mapGetters(["panel"]),
+  },
+
   methods: {
     togglePanel() {
-      this.isCollapsed = !this.isCollapsed;
+      this.$store.commit("SET_PANEL", { rightPanel: !this.panel.rightPanel });
     },
   },
 };

src/views/components/xiaoqu/bottomList.vue

@@ -250,4 +250,20 @@ export default {
   width: 20px;
   margin-right: 3px;
 }
+
+/*全局滚动条样式*/
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  height: 10px;
+  width: 1px;
+  background: rgba(255, 255, 255, 0.5);
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
 </style>

src/views/components/xiaoqu/mapSearchBox.vue

@@ -97,8 +97,6 @@ export default {
       if (e) {
         let item = this.networkOption.filter((item) => item.dept_id == e)[0];
         networkName = item.dept_name;
-        console.log(networkName, item);
-
         this.$store.commit("SET_NETWORK_INTRODUCE", {
           intro: JSON.parse(item.intro).kaiguo.text,
           list: await this.getNetworkIntro(e),
@@ -112,7 +110,6 @@ export default {
 
     async getNetworkIntro(deptid) {
       let res = await getNectWorkOffice({ deptid: deptid });
-
       return res.data;
     },