From 9f58dbdd9c16587104162c9a1ee164ec3cfcdbf6 Mon Sep 17 00:00:00 2001
From: LiuJiaNan <liujianan@zcloudchina.com>
Date: Tue, 27 Feb 2024 16:02:35 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BA=AF=E5=87=80=E5=9C=B0=E5=9B=BE=E5=92=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BI/components/bottom_options.vue | 71 +++++++++-----------
 src/views/BI/components/rightico.vue       | 20 +++---
 src/views/BI/index.vue                     | 76 +++++++++++++++-------
 3 files changed, 96 insertions(+), 71 deletions(-)

diff --git a/src/views/BI/components/bottom_options.vue b/src/views/BI/components/bottom_options.vue
index be191ee..9e1e12d 100644
--- a/src/views/BI/components/bottom_options.vue
+++ b/src/views/BI/components/bottom_options.vue
@@ -9,25 +9,32 @@
       <div class="option">
         <img :src="item.check ? item.imgSelect : item.img" alt="" />
         <div class="title">{{ item.title }}</div>
-      </div>
-      <div :class="['child_container', { active: item.check }]">
-        <div :class="['child_options', item.type]">
-          <div
-            v-for="(item1, index1) in item.list"
-            :key="item1.title"
-            class="child_option"
-            @click.stop="fnBottomChildOptionsListChange(index, item1, index1)"
-          >
-            <img :src="item1.check ? item1.imgSelect : item1.img" alt="" />
-            <div class="tit" :class="item1.check ? 'active' : ''">
-              {{ item1.title }}
+        <div class="child_container">
+          <!--          <transition-->
+          <!--            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"
+              class="child_option"
+              @click.stop="fnBottomChildOptionsListChange(index, item1, index1)"
+            >
+              <img :src="item1.check ? item1.imgSelect : item1.img" alt="" />
+              <div class="tit" :class="item1.check ? 'active' : ''">
+                {{ item1.title }}
+              </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(
-      !data.bottomOptionsList[index].check,
-      item.type
-    );
+    if (currentItem.action) currentItem.action(!currentItem.check, item.type);
   }
   for (let i = 0; i < data.bottomOptionsList.length; i++) {
     if (index === i) {
-      data.bottomOptionsList[index].check =
-        !data.bottomOptionsList[index].check;
+      currentItem.check = !currentItem.check;
       continue;
     }
     data.bottomOptionsList[i].check = false;
   }
-  leftCurrentComponent.value = data.bottomOptionsList[index].check
-    ? item.components[0]
-    : "";
-  rightCurrentComponent.value = data.bottomOptionsList[index].check
-    ? item.components[1]
-    : "";
+  leftCurrentComponent.value = currentItem.check ? item.components[0] : "";
+  rightCurrentComponent.value = currentItem.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;
-      }
+      position: absolute;
+      left: 50%;
+      top: -100px;
+      transform: translateX(-50%);
 
       .child_options {
-        position: absolute;
-        left: 50%;
-        top: -120px;
-        transform: translateX(-50%);
+        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%;
         }
       }
     }
diff --git a/src/views/BI/components/rightico.vue b/src/views/BI/components/rightico.vue
index 1b12376..c8325b3 100644
--- a/src/views/BI/components/rightico.vue
+++ b/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;
diff --git a/src/views/BI/index.vue b/src/views/BI/index.vue
index 119ee1e..1cd2ddf 100644
--- a/src/views/BI/index.vue
+++ b/src/views/BI/index.vue
@@ -13,37 +13,62 @@
         <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"
+    <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" />
+      </div>
+    </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"
+            v-model:right-option="right_option"
+            v-model:is-historical-trajectory="isHistoricalTrajectory"
+          />
+        </div>
       </transition>
     </div>
-    <div class="mid-container">
-      <bottom-options
-        v-model:left-current-component="leftCurrentComponent"
-        v-model:right-current-component="rightCurrentComponent"
-        v-model:right-option="right_option"
-        v-model:is-historical-trajectory="isHistoricalTrajectory"
-      />
-    </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-container {
-    width: 934px;
-    height: 88px;
-    background-image: url("/src/assets/images/map/bottombg.png");
-    background-repeat: no-repeat;
-    position: fixed;
+  .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;
+    }
   }
 
   .right_ico {