添加全局事件总线

src/components/common/BottomMenus.vue

@@ -25,25 +25,17 @@
           <!-- 遍历渲染每个模块下的子菜单，也是menus数组中subMenu数组 -->
           <div
             class="colBtuMenu"
-            @click="changeBottomMenu(item.index, subItem.index)"
+            @click="changeBottomMenu(item.index, subItem.index, subItem.clickEmit)"
             v-for="(subItem, subIndex) in item.subMenu"
             :key="subIndex"
           >
             <!-- 选中状态的背景高亮 -->
-            <div :class="ifMenuIndex(item.index, subItem.index) ? 'colBtuMenuShadow' : ''"></div>
+            <!-- <div :class="ifMenuIndex(item.index, subItem.index) ? 'colBtuMenuShadow' : ''"></div> -->
             <!-- 子菜单图标的选择性渲染 -->
-            <el-image
-              class="BtuMenu"
-              v-show="ifMenuIndex(item.index, subItem.index)"
-              :src="returnBgImage(subItem.bgImage + '-a')"
-            ></el-image>
-            <el-image
-              class="BtuMenu"
-              v-show="!ifMenuIndex(item.index, subItem.index)"
-              :src="returnBgImage(subItem.bgImage)"
-            ></el-image>
+            <el-image class="BtuMenu_hover" :src="returnBgImage(subItem.bgImage + '-a')"></el-image>
+            <el-image class="BtuMenu" :src="returnBgImage(subItem.bgImage)"></el-image>
             <!-- 子菜单标题 -->
-            <div class="BtuMenu_title" :style="{ color: ifMenuIndex(item.index, subItem.index) ? '#00f5ff' : '#FFFFFF' }">
+            <div class="BtuMenu_title">
               {{ subItem.title }}
             </div>
           </div>
@@ -86,7 +78,7 @@ export default {
             { index: 0, title: "疑点审计", bgImage: "ydsj" },
             { index: 1, title: "标记疑点", bgImage: "bjyd" },
             { index: 2, title: "同屏对比", bgImage: "tpdb" },
-            { index: 3, title: "卷帘对比", bgImage: "jldb" },
+            { index: 3, title: "卷帘对比", bgImage: "jldb", clickEmit: "JLControl" },
             { index: 4, title: "上传数据", bgImage: "scsj" },
             { index: 5, title: "自定义模型", bgImage: "zdymx" }
           ]
@@ -117,8 +109,12 @@ export default {
       return this.$store.state.bottomMenuIndexs.index == index && this.$store.state.bottomMenuIndexs.subIndex == subIndex;
     },
     // 根据菜单父级index和子菜单index，更新全局变量。
-    changeBottomMenu(index, subIndex) {
+    changeBottomMenu(index, subIndex, clickEvent) {
       this.$store.commit("changeBottomMenu", { index: index, subIndex: subIndex });
+      if (clickEvent) {
+        // 调用全局事件总线中的指定事件
+        this.$bus.$emit(clickEvent);
+      }
     },
     // 根据菜单参数bgImage,菜单父级index和子菜单index,判断全局变量已选中底部菜单的index对比，返回不同状态下的icon图标地址。
     returnBgImage(bgImage, index, subIndex) {
@@ -253,7 +249,16 @@ export default {
             height: 110%;
             border-radius: 10px;
             z-index: 999;
-            box-shadow: 0px 0px 5px 1px #00aaff;
+            box-shadow: 0px 0px 5px 1px #00F5FF;
+          }
+          .BtuMenu {
+            display: none;
+          }
+          .BtuMenu_hover {
+            display: block;
+          }
+          .BtuMenu_title{
+            color: #00F5FF;
           }
         }
         .colBtuMenuShadow {
@@ -263,14 +268,21 @@ export default {
           height: 110%;
           border-radius: 10px;
           z-index: 999;
-          box-shadow: 0px 0px 5px 3px #00aaff;
+          box-shadow: 0px 0px 5px 3px #00F5FF;
         }
-        .BtuMenu {
+        .BtuMenu,
+        .BtuMenu_hover {
           width: 50px;
           height: 50px;
           background-repeat: no-repeat;
           background-size: 100% 100%;
         }
+        .BtuMenu {
+          display: block;
+        }
+        .BtuMenu_hover {
+          display: none;
+        }
         & > .BtuMenu_title {
           font-size: 14px;
           font-family: pingfangSC;

src/components/layout/MenuCard.vue

@@ -100,7 +100,7 @@ export default {
           this.$refs.menuCard.style.display = "block";
           setTimeout(() => {
             this.$refs.menuCard.style.transform = "translate(0,0)";
-            this.$refs.menuCard.style.opacity = "1";
+            this.$refs.menuCard.style.opacity = "0.9";
           });
         } else {
           // 如果不符合，页面创建时就直接隐藏
@@ -148,7 +148,7 @@ export default {
           this.$refs.menuCard.style.display = "block";
           setTimeout(() => {
             this.$refs.menuCard.style.transform = "translate(0,0)";
-            this.$refs.menuCard.style.opacity = "1";
+            this.$refs.menuCard.style.opacity = "0.9";
           });
         } else {
           // 延迟0.3s后修改display为none
@@ -190,7 +190,7 @@ export default {
 @borderColor: #00aaff;
 @borderColor32: #00aaff32;
 @borderColor64: #00aaff64;
-@topTitleBgLeft: #00244d;
+@topTitleBgLeft: #002645;
 @topTitleMinLeft: #002f56;
 @lightColor: #74ffff;
 .menuMainBox,
@@ -206,7 +206,19 @@ export default {
   border-image: --webkit-linear-gradient(to top, @borderColor, transparent) 1;
   border-image: --moz-linear-gradient(to top, @borderColor, transparent) 1;
   border-image: linear-gradient(to top, @borderColor, transparent) 1;
-  opacity: 0.9;
+  &:hover {
+    border-image: --webkit-linear-gradient(to top, @lightColor, transparent) 1;
+    border-image: --moz-linear-gradient(to top, @lightColor, transparent) 1;
+    border-image: linear-gradient(to top, @lightColor, transparent) 1;
+    .menuMainBox_top {
+      background-color: @lightColor;
+      &_left {
+        background-image: --webkit-linear-gradient(to left, @lightColor, #007dff);
+        background-image: --moz-linear-gradient(to left, @lightColor, #007dff);
+        background-image: linear-gradient(to left, @lightColor, #007dff);
+      }
+    }
+  }
   cursor: pointer;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -290,9 +302,9 @@ export default {
       border-left: 2px solid @borderColor;
       transform: skew(-45deg);
       background-color: @topTitleBgLeft;
-      border-image: --webkit-linear-gradient(to right, @borderColor, transparent) 1;
-      border-image: --moz-linear-gradient(to right, @borderColor, transparent) 1;
-      border-image: linear-gradient(to right, @borderColor, transparent) 1;
+      border-image: --webkit-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
+      border-image: --moz-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
+      border-image: linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
       &_d1 {
         position: absolute;
         left: 10px;
@@ -347,7 +359,6 @@ export default {
   border-image: --webkit-linear-gradient(to top, @lightColor, transparent) 1;
   border-image: --moz-linear-gradient(to top, @lightColor, transparent) 1;
   border-image: linear-gradient(to top, @lightColor, transparent) 1;
-  opacity: 0.9;
   cursor: pointer;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -431,9 +442,9 @@ export default {
       border-left: 2px solid @borderColor;
       transform: skew(-45deg);
       background-color: @topTitleBgLeft;
-      border-image: --webkit-linear-gradient(to right, @borderColor, transparent) 1;
-      border-image: --moz-linear-gradient(to right, @borderColor, transparent) 1;
-      border-image: linear-gradient(to right, @borderColor, transparent) 1;
+      border-image: --webkit-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
+      border-image: --moz-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
+      border-image: linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
       &_d1 {
         position: absolute;
         left: 10px;

src/components/map/MapHolder.vue

@@ -8,16 +8,26 @@ export default {
   name: "MapHolder",
   data() {
     return {
+      JLControlShowStatus: false,
       town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
     };
   },
   mounted() {
-    var that = this;
+    // 监听全局事件总线中的卷帘对比事件（JLControl）
+    this.$bus.$on("JLControl",this.JLControl);
     //地图初始化
-    that.mapInit();
-    that.getJSonData();
+    this.mapInit();
+    this.getJSonData();
+  },
+  destroy() {
+    // 当容器销毁时，需要停止监听该事件
+    this.$bus.$off("JLControl");
   },
   methods: {
+    // 卷帘对比
+    JLControl(){
+      console.log("用户点击了卷帘对比菜单!");
+    },
     mapInit: function () {
       map2DViewer.map = L.map("map2DViewer", {
         attributionControl: false,
@@ -130,6 +140,7 @@ export default {
   position: absolute;
   width: 100%;
   height: calc(100% - 60px);
+  background-color: #003452;
   z-index: 1;
   top: 60px;
   left: 0px;

src/main.js

@@ -26,5 +26,9 @@ Vue.prototype.$ifLeftMenu = (leftMenuIndex) => {
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: h => h(App),
+  // 全局事件总线
+  beforeCreate() {
+    Vue.prototype.$bus = this
+  }
 }).$mount('#app')

src/store/index.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 // 定义是否菜单可取消选中（true：可取消选中，false：不可取消选中）【取消选中：当菜单已经为选中状态，再次点击会取消选中状态】
-const menus = false;
+const menus = true;
 export default new Vuex.Store({
   state: {
     // 头部菜单选中菜单对象（主要用于元素判断是否显示）

src/views/HomeView.vue

@@ -86,20 +86,25 @@
       <MenuCard :menuData="menus.left[4]"> </MenuCard>
       <MenuCard :menuData="menus.left[5]"> </MenuCard>
       <MenuCard :menuData="menus.left[6]"> </MenuCard>
+      <MenuCard :menuData="menus.left[7]"> </MenuCard>
+      <MenuCard :menuData="menus.left[8]"> </MenuCard>
+      <MenuCard :menuData="menus.left[9]"> </MenuCard>
+      <MenuCard :menuData="menus.left[10]"> </MenuCard>
     </div>
     <!-- 底部菜单 2 -- 疑点筛查 -->
-    <div id="leftMenusB" v-if="$ifMenu('2', '')">
+    <div id="leftMenusB" v-if="$ifMenu('3', '')">
       <BottomMenus />
     </div>
     <!-- 中部菜单列 -->
-    <div id="mainMenus" v-if="$ifMenu('1', '')">
-      <div id="mainMenus_topLeft">所属街道</div>
+    <div id="mainMenus">
+      <div id="mainMenus_topLeft" v-if="$ifMenu('1', '')">所属街道</div>
       <NewSelect
         id="mainMenus_topSelect"
         v-model="streetSelectVal"
         :options="streetOptions"
         :value="streetSelectVal"
         @selectEvent="homeSelect"
+        v-if="$ifMenu('1', '')"
       />
       <div id="mainMenus_topRight">
         <MenuCard :menuData="menus.main[0]">
@@ -133,7 +138,9 @@
           title: '图例',
           boxWidth: '150',
           boxHeight: '180',
-          legendShowState: true
+          legendShowState: true,
+          menuIndex: '1',
+          position: 'bottom'
         }"
         ><div class="legend-container">
           <div class="left-container">
@@ -146,7 +153,7 @@
       </MenuCard>
     </div>
     <!-- 右侧菜单列 -->
-    <div id="rightMenus">
+    <div class="rightMenus">
       <MenuCard :menuData="menus.right[0]">
         <template slot="top">
           <div class="menuCardFlex" style="justify-content: center">
@@ -170,6 +177,9 @@
           <TopCard :dataSize="5" />
         </template>
       </MenuCard>
+    </div>
+    <!-- 右侧菜单列 -->
+    <div class="rightMenus">
       <MenuCard :menuData="menus.right[3]">
         <template slot="top">
           <div class="menuCardFlex" style="justify-content: center">
@@ -287,6 +297,50 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left"
+          },
+          {
+            type: "imageMenu",
+            index: 4,
+            title: "基本农田被违规占用",
+            titleWidth: 81,
+            boxHeight: 236,
+            imageUrl: "/static/images/2.png",
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "left"
+          },
+          {
+            type: "imageMenu",
+            index: 5,
+            title: "基本农田种林",
+            titleWidth: 81,
+            boxHeight: 236,
+            imageUrl: "/static/images/3.png",
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "left"
+          },
+          {
+            type: "imageMenu",
+            index: 6,
+            title: "基本农田抛荒",
+            titleWidth: 81,
+            boxHeight: 236,
+            imageUrl: "/static/images/1.png",
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "left"
+          },
+          {
+            type: "imageMenu",
+            index: 7,
+            title: "一般耕地被违规占用",
+            titleWidth: 81,
+            boxHeight: 236,
+            imageUrl: "/static/images/4.png",
+            menuIndex: "2",
+            subMenuIndex: "1",
+            position: "left"
           }
         ],
         main: [
@@ -297,7 +351,7 @@ export default {
             boxHeight: "370",
             boxBackground: "rgba(0,39,77,0.6)",
             menuIndex: "1",
-            position: "bottom"
+            position: "top"
           }
         ],
         right: [
@@ -736,7 +790,8 @@ export default {
     }
   }
 }
-#rightMenus {
+// 右侧菜单列
+.rightMenus {
   position: absolute;
   right: 10px;
   top: 60px;