纯净地图和增加动画

src/views/BI/components/bottom_options.vue

@@ -9,9 +9,13 @@
       <div class="option">
         <img :src="item.check ? item.imgSelect : item.img" alt="" />
         <div class="title">{{ item.title }}</div>
-      </div>
+        <div class="child_container">
-      <div :class="['child_container', { active: item.check }]">
+          <!--          <transition-->
-        <div :class="['child_options', item.type]">
+          <!--            enter-active-class="animate__animated animate__bounceIn"-->
+          <!--            leave-active-class="animate__animated animate__bounceOut"-->
+          <!--            mode="out-in"-->
+          <!--          >-->
+          <div v-show="item.check" :class="['child_options', item.type]">
             <div
               v-for="(item1, index1) in item.list"
               :key="item1.title"
@@ -24,10 +28,13 @@
               </div>
             </div>
           </div>
+          <!--          </transition>-->
+        </div>
       </div>
     </div>
   </div>
 </template>
+
 <script setup>
 import { reactive, markRaw } from "vue";
 import Personnel from "@/views/BI/components/personnel.vue";
@@ -346,27 +353,20 @@ const data = reactive({
   bottomOptionsList,
 });
 const fnBottomOptionsListChange = (item, index) => {
+  const currentItem = data.bottomOptionsList[index];
   // ai 视频报警
   if (index === 4) {
-    data.bottomOptionsList[index].action(
+    if (currentItem.action) currentItem.action(!currentItem.check, item.type);
-      !data.bottomOptionsList[index].check,
-      item.type
-    );
   }
   for (let i = 0; i < data.bottomOptionsList.length; i++) {
     if (index === i) {
-      data.bottomOptionsList[index].check =
+      currentItem.check = !currentItem.check;
-        !data.bottomOptionsList[index].check;
       continue;
     }
     data.bottomOptionsList[i].check = false;
   }
-  leftCurrentComponent.value = data.bottomOptionsList[index].check
+  leftCurrentComponent.value = currentItem.check ? item.components[0] : "";
-    ? item.components[0]
+  rightCurrentComponent.value = currentItem.check ? item.components[1] : "";
-    : "";
-  rightCurrentComponent.value = data.bottomOptionsList[index].check
-    ? item.components[1]
-    : "";
   rightOption.value = index !== 4;
 };
 const fnBottomChildOptionsListChange = (index, item1, index1) => {
@@ -402,6 +402,7 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
   }
 };
 </script>
+
 <style scoped lang="scss">
 .container {
   width: 100%;
@@ -445,22 +446,13 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
     }
 
     .child_container {
-      position: relative;
-      width: 80px;
-      height: 95px;
-      left: 0;
-      top: -95px;
-      display: none;
-
-      &.active {
-        display: block;
-      }
-
-      .child_options {
       position: absolute;
       left: 50%;
-        top: -120px;
+      top: -100px;
       transform: translateX(-50%);
+
+      .child_options {
+        position: relative;
         background-image: linear-gradient(
           to right,
           rgba(0, 0, 0, 0) 0%,
@@ -478,7 +470,6 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
         border-left: none;
         border-right: none;
         display: flex;
-        animation: 0.5s all;
 
         .child_option {
           text-align: center;
@@ -495,7 +486,7 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
         }
 
         &.workSafely {
-          left: 100%;
+          left: 20%;
         }
       }
     }

src/views/BI/components/rightico.vue

@@ -17,8 +17,17 @@
 <script setup>
 import { reactive } from "vue";
 import { reduction } from "../js/map";
-import { useFullscreen } from "@vueuse/core";
+import { useFullscreen, useVModel } from "@vueuse/core";
 
+const props = defineProps({
+  isPureMap: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+});
+const emits = defineEmits(["update:isPureMap"]);
+const isPureMap = useVModel(props, "isPureMap", emits);
 const { isFullscreen, toggle } = useFullscreen();
 const data = reactive({
   rightOptionsList: [
@@ -45,23 +54,18 @@ const data = reactive({
       check: false,
       label: "返回中心点",
     },
-    {
-      img: new URL("/src/assets/images/map/rico3.png", import.meta.url).href,
-      checkImg: new URL("/src/assets/images/map/rico3_on.png", import.meta.url)
-        .href,
-      check: false,
-      label: "切换视角",
-    },
     {
       img: new URL("/src/assets/images/map/rico4.png", import.meta.url).href,
       checkImg: new URL("/src/assets/images/map/rico4_on.png", import.meta.url)
         .href,
       check: false,
       label: "纯净地图",
+      action: () => (isPureMap.value = !isPureMap.value),
     },
   ],
 });
 </script>
+
 <style scoped lang="scss">
 .right_options {
   width: 40px;

src/views/BI/index.vue

@@ -13,16 +13,26 @@
         <div class="title" />
       </div>
     </transition>
-    <div v-if="leftCurrentComponent" class="left_container">
     <transition
       enter-active-class="animate__animated animate__fadeInLeft"
       leave-active-class="animate__animated animate__fadeOutLeft"
       mode="out-in"
+    >
+      <div
+        v-if="leftCurrentComponent && !isPureMap"
+        :key="Math.random()"
+        class="left_container"
       >
         <component :is="leftCurrentComponent" />
-      </transition>
       </div>
-    <div class="mid-container">
+    </transition>
+    <div class="mid-external-container">
+      <transition
+        enter-active-class="animate__animated animate__fadeInDown"
+        leave-active-class="animate__animated animate__fadeOutDown"
+        mode="out-in"
+      >
+        <div v-show="!isPureMap" class="mid-container">
           <bottom-options
             v-model:left-current-component="leftCurrentComponent"
             v-model:right-current-component="rightCurrentComponent"
@@ -30,20 +40,35 @@
             v-model:is-historical-trajectory="isHistoricalTrajectory"
           />
         </div>
+      </transition>
+    </div>
     <transition
       enter-active-class="animate__animated animate__fadeInRight"
       leave-active-class="animate__animated animate__fadeOutRight"
       mode="out-in"
     >
-      <div v-if="rightCurrentComponent" class="right_container">
+      <div
+        v-if="rightCurrentComponent && !isPureMap"
+        :key="Math.random()"
+        class="right_container"
+      >
         <component :is="rightCurrentComponent" />
       </div>
     </transition>
 
     <div v-show="right_option" class="right_ico">
-      <right-ico></right-ico>
+      <right-ico v-model:is-pure-map="isPureMap" />
     </div>
-    <historical-trajectory-options v-if="isHistoricalTrajectory" />
+
+    <transition
+      enter-active-class="animate__animated animate__fadeInDown"
+      leave-active-class="animate__animated animate__fadeOutDown"
+      mode="out-in"
+    >
+      <historical-trajectory-options
+        v-if="isHistoricalTrajectory && !isPureMap"
+      />
+    </transition>
   </div>
 </template>
 
@@ -64,9 +89,9 @@ const transitionKey = ref(0);
 const leftCurrentComponent = ref("");
 const rightCurrentComponent = ref("");
 const isHistoricalTrajectory = ref(false);
+const isPureMap = ref(false);
 const userStore = useUserStore();
 const CORPINFO_ID = userStore.getUserInfo.CORPINFO_ID;
-
 onMounted(async () => {
   autofit.init({
     dh: document.querySelector(".map_bg").offsetHeight,
@@ -85,6 +110,7 @@ onBeforeUnmount(() => {
   autofit.off();
 });
 </script>
+
 <style scoped lang="scss">
 #bi_container {
   width: 100%;
@@ -161,6 +187,7 @@ onBeforeUnmount(() => {
     left: 20px;
     top: 100px;
   }
+
   .right_container {
     width: 435px;
     position: absolute;
@@ -168,15 +195,18 @@ onBeforeUnmount(() => {
     top: 100px;
   }
 
+  .mid-external-container {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+
     .mid-container {
       width: 934px;
       height: 88px;
       background-image: url("/src/assets/images/map/bottombg.png");
       background-repeat: no-repeat;
-    position: fixed;
+    }
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
   }
 
   .right_ico {