实时标绘设置

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -22,7 +22,7 @@
     </div>
     <div v-if="menuActive1 === 0" class="content">
       <div class="box1">
-        <div class="box-item">
+        <div v-show="!showSetting" class="box-item">
           <div class="btn" @click="handleUndo">
             <div class="revoke-icon"></div>
             撤回
@@ -38,6 +38,12 @@
             保存
           </div>
         </div>
+        <div v-show="showSetting" class="box-item">
+          <div class="btn" @click="showSetting = false">
+            <div class="revoke-icon"></div>
+            退出设置
+          </div>
+        </div>
         <div class="box-item">
           <div class="btn">
             <i class="template-icon" />
@@ -49,7 +55,7 @@
             分类导入
           </div>
           <div class="line2"></div>
-          <div class="btn">
+          <div class="btn" @click="handleOpenSetting">
             <i class="setting-icon" />
             设置
           </div>
@@ -78,11 +84,27 @@
               v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
               :key="index"
               :class="menuActive3 === index ? 'tab tab_active' : 'tab'"
+              :style="{ cursor: showSetting ? 'default' : 'pointer' }"
               @click="clickTab3(item, index)"
             >
               <div :class="menuActive3 === index ? 'checked2' : 'checked1'"></div>
               <img :src="item.image" class="icon" />
               {{ item.name }}
+              <div v-if="!!showSetting" class="setting-btn" @click="handleShowSetting(item)" />
+              <div v-if="item.showSetting" class="setting-menu">
+                <div class="menu-item" @click="handleShowSwitch(item)">
+                  <i class="icon-switch" />
+                  <span>更换</span>
+                </div>
+                <div class="menu-item" @click="handleMenuItemHide(item)">
+                  <i class="icon-eye" />
+                  <span>{{ item.hide ? '隐藏' : '显示' }}</span>
+                </div>
+                <div class="menu-item" @click="handleMenuItemDelete(item)">
+                  <i class="icon-delete" />
+                  <span>删除</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -434,6 +456,7 @@ const clickTab2 = (value: number) => {
 };
 // 点击三级菜单
 const clickTab3 = (item, index) => {
+  if (showSetting.value) return;
   const type = item.value;
   if (mouseToolState.value.graphicsType !== type || (mouseToolState.value.graphicsType === 'marker' && mouseToolState.value.title !== item.name)) {
     if (type === 'text') {
@@ -909,6 +932,26 @@ const handleShowDialog = () => {
   };
   showEdit.value = true;
 };
+let showSetting = ref(false);
+const handleOpenSetting = () => {
+  showSetting.value = true;
+};
+const handleShowSetting = (item, index) => {
+  menu.value[0].children.forEach((menu2) => {
+    menu2.children.forEach((item2) => {
+      item2.showSetting = item.name === item2.name;
+    });
+  });
+};
+const handleShowSwitch = (item) => {
+  item.showSetting = false;
+};
+const handleMenuItemHide = (item) => {
+  item.showSetting = false;
+};
+const handleMenuItemDelete = (item) => {
+  item.showSetting = false;
+};
 const handleSendData = (data) => {
   const { type, content } = data;
   if (type === 'update') {
@@ -1182,6 +1225,7 @@ onMounted(() => {
     .tab-list {
       width: 100%;
       flex: 1;
+      overflow-x: hidden;
       overflow-y: auto;
       display: flex;
       flex-wrap: wrap;
@@ -1193,7 +1237,105 @@ onMounted(() => {
       }
       .tab {
         &:nth-child(3n-1) {
-          margin: 40px 50px 0;
+          margin: 40px 46px 0;
+        }
+      }
+      .setting-btn {
+        position: absolute;
+        bottom: 18px;
+        right: 13px;
+        width: 83px;
+        height: 82px;
+        background: url('@/assets/images/map/rightMenu/onlinePlotting/setting2.png') no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+      }
+      .setting-menu {
+        position: absolute;
+        bottom: -310px;
+        right: 0;
+        z-index: 99;
+        width: 200px;
+        height: 284px;
+        border: 4px solid #2c81ff;
+        background-color: #091432;
+        //box-shadow: inset 0 0 60px #596891;
+        padding: 30px 5px;
+        &::after {
+          content: '';
+          width: 40px;
+          height: 40px;
+          border-top: 4px solid #2c81ff;
+          border-left: 4px solid #2c81ff;
+          border-bottom: 4px solid transparent;
+          border-right: 4px solid transparent;
+          position: absolute;
+          top: -20px;
+          right: 30px;
+          transform: rotate(45deg);
+          background-color: #091432;
+        }
+        .menu-item {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #a7b3c5;
+          font-size: 32px;
+          height: 72px;
+          cursor: pointer;
+          .icon-switch {
+            display: inline-block;
+            width: 36px;
+            height: 36px;
+            background: url('@/assets/images/map/rightMenu/onlinePlotting/switch1.png') no-repeat;
+            background-size: 100% 100%;
+            margin-right: 16px;
+          }
+          .icon-eye {
+            display: inline-block;
+            width: 36px;
+            height: 30px;
+            background: url('@/assets/images/map/rightMenu/onlinePlotting/show1.png') no-repeat;
+            background-size: 100% 100%;
+            margin-right: 16px;
+          }
+          .icon-eye2 {
+            display: inline-block;
+            width: 36px;
+            height: 35px;
+            background: url('@/assets/images/map/rightMenu/onlinePlotting/hide1.png') no-repeat;
+            background-size: 100% 100%;
+            margin-right: 16px;
+          }
+          .icon-delete {
+            display: inline-block;
+            width: 32px;
+            height: 33px;
+            background: url('@/assets/images/map/rightMenu/onlinePlotting/delete1.png') no-repeat;
+            background-size: 100% 100%;
+            margin-right: 16px;
+          }
+          &:hover {
+            color: #00fde7;
+            background: #1e3b77;
+            .icon-switch {
+              background: url('@/assets/images/map/rightMenu/onlinePlotting/switch2.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            .icon-eye {
+              background: url('@/assets/images/map/rightMenu/onlinePlotting/show2.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            .icon-eye2 {
+              background: url('@/assets/images/map/rightMenu/onlinePlotting/hide2.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            .icon-delete {
+              background: url('@/assets/images/map/rightMenu/onlinePlotting/delete2.png') no-repeat;
+              background-size: 100% 100%;
+            }
+          }
         }
       }
     }

src/views/globalMap/RightMenu/index.vue

@@ -201,7 +201,7 @@ const updateMenu = (type, menu, location?: any) => {
     } else if (menu.name === '定点分析') {
       menuState.menuData.push(menu);
       location2.value = location;
-    }  else {
+    } else {
       menuState.menuData.push(menu);
     }
     clickMenu(menuState.menuData.length - 1);