master: Fixed 组件抽离，为后续动画准备

src/views/home/home.vue

@@ -10,27 +10,10 @@
       <Map />
     </template>
     <template #left>
-      <div class="w-453px flex flex-col gap-15px relative lr-box-bg">
-        <Box title="概况" wHeader="60px">
-          <TopBox />
-        </Box>
-        <Box title="设备信息">
-          <MiddleBox />
-        </Box>
-        <Box title="用户情况">
-          <BottomBox />
-        </Box>
-      </div>
+      <LeftBox />
     </template>
     <template #right>
-      <div class="w-453px flex flex-col gap-15px lr-box-bg">
-        <Box title="报警中心">
-          <RightTopBox />
-        </Box>
-        <Box title="报警类型TOP5" wHeader="124px">
-          <RightBottomBox />
-        </Box>
-      </div>
+      <RightBox />
     </template>
     <template #top>
       <MiddleTopBox v-if="isMap" />
@@ -44,11 +27,9 @@
 
 <script setup>
   import Layout from '@/layout/index.vue'
-  import TopBox from './leftBox/topBox.vue'
-  import MiddleBox from './leftBox/middleBox.vue'
-  import BottomBox from './leftbox/bottomBox.vue'
-  import RightTopBox from './rightBox/topBox.vue'
-  import RightBottomBox from './rightBox/bottomBox.vue'
+  import LeftBox from './leftbox/index.vue'
+  import RightBox from './rightbox/index.vue'
+
   import MiddleBottomBox from './middleBottomBox/index.vue'
   import MiddleTopBox from './middleTopBox/index.vue'
   import VideoBox from '../VideoBox/index.vue'
@@ -58,8 +39,5 @@
   import { useOutsideHomeStore } from '@/stores/modules/home'
 
   const useHomeStore = useOutsideHomeStore()
-  const router = useRouter()
-
-  const route = useRoute()
   const isMap = computed(() => useHomeStore.temp === 'map')
 </script>

src/views/home/leftbox/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="w-453px flex flex-col gap-15px relative lr-box-bg">
+    <Box title="概况" wHeader="60px">
+      <TopBox />
+    </Box>
+    <Box title="设备信息">
+      <MiddleBox />
+    </Box>
+    <Box title="用户情况">
+      <BottomBox />
+    </Box>
+  </div>
+</template>
+
+<script setup>
+  import TopBox from './topBox.vue'
+  import MiddleBox from './middleBox.vue'
+  import BottomBox from './bottomBox.vue'
+</script>

src/views/home/rightbox/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="w-453px flex flex-col gap-15px lr-box-bg">
+    <Box title="报警中心">
+      <RightTopBox />
+    </Box>
+    <Box title="报警类型TOP5" wHeader="124px">
+      <RightBottomBox />
+    </Box>
+  </div>
+</template>
+
+<script setup>
+  import RightTopBox from './topBox.vue'
+  import RightBottomBox from './bottomBox.vue'
+</script>

src/views/home/tool/index.vue

@@ -12,7 +12,7 @@
     <div
       :class="[
         tools[0].selected ? 'transform-scale-100' : 'transform-scale-0',
-        'overflow-hidden origin-top-right transition duration-300 z-999 h-100px w-180px bg-[rgba(11,21,44,1)] absolute right-62px top-0'
+        'overflow-hidden origin-top-right transition duration-300 z-999 w-180px bg-[rgba(11,21,44,1)] absolute right-62px top-0'
       ]"
     >
       <ul class="flex flex-col gap-1 p-2">
@@ -28,11 +28,30 @@
         </li>
       </ul>
     </div>
+    <div
+      :class="[
+        tools[3].selected ? 'transform-scale-100' : 'transform-scale-0',
+        'overflow-hidden origin-top-right transition duration-300 z-999 w-180px bg-[rgba(11,21,44,1)] absolute right-62px top-180px'
+      ]"
+    >
+      <ul class="flex flex-col gap-1 p-2">
+        <li
+          class="flex gap-1 items-center cursor-pointer"
+          v-for="(item, ii) in twoList"
+          :key="ii"
+          @click="twoClick(ii)"
+        >
+          <img v-show="ii === twoActive" :src="item.yes" alt="" />
+          <img v-show="ii != twoActive" :src="item.no" alt="" />
+          <span>{{ item.name }}</span>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script setup>
-  import { getStaticResource } from '@/utils'
+  import { getStaticResource, $mitt } from '@/utils'
 
   const tools = ref([
     {
@@ -47,6 +66,12 @@
       no: getStaticResource('assets/images/gn-no-bg.png'),
       selected: false
     },
+    {
+      icon: getStaticResource('assets/images/gn3-icon.png'),
+      yes: getStaticResource('assets/images/gn-yes-bg.png'),
+      no: getStaticResource('assets/images/gn-no-bg.png'),
+      selected: false
+    },
     {
       icon: getStaticResource('assets/images/gn3-icon.png'),
       yes: getStaticResource('assets/images/gn-yes-bg.png'),
@@ -79,8 +104,24 @@
       no: getStaticResource('assets/images/no-icon.png')
     }
   ])
-
   const oneClick = (i) => {
     oneActive.value = i
   }
+  const twoActive = ref(0)
+  const twoList = ref([
+    {
+      name: '指标一',
+      yes: getStaticResource('assets/images/yes-icon.png'),
+      no: getStaticResource('assets/images/no-icon.png')
+    },
+    {
+      name: '指标二',
+      yes: getStaticResource('assets/images/yes-icon.png'),
+      no: getStaticResource('assets/images/no-icon.png')
+    }
+  ])
+  const twoClick = (i) => {
+    twoActive.value = i
+    $mitt.emit('onTheme', i)
+  }
 </script>