修改页面路由

src/views/map/index.vue

@@ -21,65 +21,92 @@
           <mMenuItem index="3">水文数据</mMenuItem>
           <div class="top-menu-mid-space"></div>
           <mMenuItem index="4">防洪预警</mMenuItem>
-          <mMenuItem index="5">水资源管理</mMenuItem>
+          <mMenuItem index="5">融合体系</mMenuItem>
           <mMenuItem index="6">系统设置</mMenuItem>
         </mMenu>
       </div>
-      <!-- 顶部统计卡片 -->
-      <div class="top-count-card">
-        <mCountCard v-for="(item, index) in state.totalView" :info="item" :key="index"></mCountCard>
-      </div>
-      <!-- 左边布局 图表 -->
-      <div class="left-wrap">
-        <div class="left-wrap-3d">
-          <!-- 中心简介 -->
-          <BulkCommoditySalesChart></BulkCommoditySalesChart>
-          <!-- 近年水位变化 -->
-          <EconomicTrendChart></EconomicTrendChart>
+      <!-- 区域总览内容 -->
+      <template v-if="state.activeIndex === '1'">
+        <!-- 顶部统计卡片 -->
+        <div class="top-count-card">
+          <mCountCard v-for="(item, index) in state.totalView" :info="item" :key="index"></mCountCard>
         </div>
-      </div>
-      <!-- 右边布局 图表 -->
-      <div class="right-wrap">
-        <div class="right-wrap-3d">
-          <!-- 水利设施分布 -->
-          <PurposeSpecialFunds> </PurposeSpecialFunds>
-          <!-- 用水量分析 -->
-          <ElectricityUsage></ElectricityUsage>
+        <!-- 左边布局 图表 -->
+        <div class="left-wrap">
+          <div class="left-wrap-3d">
+            <!-- 中心简介 -->
+            <BulkCommoditySalesChart></BulkCommoditySalesChart>
+            <!-- 近年水位变化 -->
+            <EconomicTrendChart></EconomicTrendChart>
+          </div>
         </div>
-      </div>
-      <!-- 底部托盘 -->
-      <div class="bottom-tray">
-        <!-- svg线条动画 -->
-        <mSvglineAnimation class="bottom-svg-line-left" :width="721" :height="57" color="#00BFFF" :strokeWidth="2"
-          :dir="[0, 1]" :length="50"
-          path="M1 56.6105C1 31.5123 185.586 10.0503 451.904 1.35519C458.942 1.12543 465.781 4.00883 470.505 9.22964L484.991 25.2383C487.971 28.4775 492.938 30.4201 498.254 30.4201H720.142">
-        </mSvglineAnimation>
-        <mSvglineAnimation class="bottom-svg-line-left bottom-svg-line-right" :width="721" :height="57" color="#00BFFF"
-          :strokeWidth="2" :dir="[0, 1]" :length="50"
-          path="M1 56.6105C1 31.5123 185.586 10.0503 451.904 1.35519C458.942 1.12543 465.781 4.00883 470.505 9.22964L484.991 25.2383C487.971 28.4775 492.938 30.4201 498.254 30.4201H720.142">
-        </mSvglineAnimation>
-        <!-- 做箭头 -->
-        <div class="bottom-tray-arrow">
-          <img src="@/assets/images/bottom-menu-arrow-big.svg" alt="" />
-          <img src="@/assets/images/bottom-menu-arrow-small.svg" alt="" />
+        <!-- 右边布局 图表 -->
+        <div class="right-wrap">
+          <div class="right-wrap-3d">
+            <!-- 水利设施分布 -->
+            <PurposeSpecialFunds> </PurposeSpecialFunds>
+            <!-- 用水量分析 -->
+            <ElectricityUsage></ElectricityUsage>
+          </div>
         </div>
-        <!-- 底部菜单 -->
-        <div class="bottom-menu">
-          <div class="bottom-menu-item is-active"><span>区域总览</span></div>
-          <div class="bottom-menu-item"><span>水质监测</span></div>
-          <div class="bottom-menu-item"><span>水文数据</span></div>
-          <div class="bottom-menu-item"><span>防洪预警</span></div>
+        <!-- 底部托盘 -->
+        <div class="bottom-tray">
+          <!-- svg线条动画 -->
+          <mSvglineAnimation class="bottom-svg-line-left" :width="721" :height="57" color="#00BFFF" :strokeWidth="2"
+            :dir="[0, 1]" :length="50"
+            path="M1 56.6105C1 31.5123 185.586 10.0503 451.904 1.35519C458.942 1.12543 465.781 4.00883 470.505 9.22964L484.991 25.2383C487.971 28.4775 492.938 30.4201 498.254 30.4201H720.142">
+          </mSvglineAnimation>
+          <mSvglineAnimation class="bottom-svg-line-left bottom-svg-line-right" :width="721" :height="57" color="#00BFFF"
+            :strokeWidth="2" :dir="[0, 1]" :length="50"
+            path="M1 56.6105C1 31.5123 185.586 10.0503 451.904 1.35519C458.942 1.12543 465.781 4.00883 470.505 9.22964L484.991 25.2383C487.971 28.4775 492.938 30.4201 498.254 30.4201H720.142">
+          </mSvglineAnimation>
+          <!-- 做箭头 -->
+          <div class="bottom-tray-arrow">
+            <img src="@/assets/images/bottom-menu-arrow-big.svg" alt="" />
+            <img src="@/assets/images/bottom-menu-arrow-small.svg" alt="" />
+          </div>
+          <!-- 底部菜单 -->
+          <div class="bottom-menu">
+            <div class="bottom-menu-item is-active"><span>区域总览</span></div>
+            <div class="bottom-menu-item"><span>水质监测</span></div>
+            <div class="bottom-menu-item"><span>水文数据</span></div>
+            <div class="bottom-menu-item"><span>防洪预警</span></div>
+          </div>
+          <!-- 右箭头 -->
+          <div class="bottom-tray-arrow is-reverse">
+            <img src="@/assets/images/bottom-menu-arrow-big.svg" alt="" />
+            <img src="@/assets/images/bottom-menu-arrow-small.svg" alt="" />
+          </div>
         </div>
-        <!-- 右箭头 -->
-        <div class="bottom-tray-arrow is-reverse">
-          <img src="@/assets/images/bottom-menu-arrow-big.svg" alt="" />
-          <img src="@/assets/images/bottom-menu-arrow-small.svg" alt="" />
+        <!-- 雷达 -->
+        <div class="bottom-radar">
+          <mRadar></mRadar>
         </div>
-      </div>
-      <!-- 雷达 -->
-      <div class="bottom-radar">
-        <mRadar></mRadar>
-      </div>
+      </template>
+
+      <!-- 融合体系内容 -->
+      <template v-else-if="state.activeIndex === '5'">
+        <div class="left-column">
+          <div class="left-column-3d">
+            <div class="module-card">
+              <SystemIntegration />
+            </div>
+            <div class="module-card">
+              <IntegrationEffect />
+            </div>
+          </div>
+        </div>
+        <div class="right-column">
+          <div class="right-column-3d">
+            <div class="module-card">
+              <CollaborativeProcess />
+            </div>
+            <div class="module-card">
+              <DemonstrationBase />
+            </div>
+          </div>
+        </div>
+      </template>
       <!-- 左右装饰线 -->
       <div class="large-screen-left-zsline"></div>
       <div class="large-screen-right-zsline"></div>
@@ -104,7 +131,7 @@
   </div>
 </template>
 <script setup>
-import { shallowRef, ref, reactive, onMounted, onBeforeUnmount } from "vue"
+import { shallowRef, ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue"
 import mapScene from "./map.vue"
 import mHeader from "@/components/mHeader/index.vue"
 import mCountCard from "@/components/mCountCard/index.vue"
@@ -120,6 +147,10 @@ import PurposeSpecialFunds from "./components/PurposeSpecialFunds.vue"
 import ProportionPopulationConsumption from "./components/ProportionPopulationConsumption.vue"
 import ElectricityUsage from "./components/ElectricityUsage.vue"
 import QuarterlyGrowthSituation from "./components/QuarterlyGrowthSituation.vue"
+import SystemIntegration from "@/views/waterResource/components/SystemIntegration.vue"
+import CollaborativeProcess from "@/views/waterResource/components/CollaborativeProcess.vue"
+import IntegrationEffect from "@/views/waterResource/components/IntegrationEffect.vue"
+import DemonstrationBase from "@/views/waterResource/components/DemonstrationBase.vue"
 
 import { Assets } from "./assets.js"
 import emitter from "@/utils/emitter"
@@ -234,6 +265,20 @@ async function hideLoading() {
 
 function handleMenuSelect(index) {
   state.activeIndex = index
+  if (index === "1") {
+    nextTick(() => {
+      gsap.to(".left-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+      gsap.to(".right-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+      gsap.to(".count-card", { y: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+      gsap.to(".bottom-tray", { y: 0, opacity: 1, duration: 0.5 })
+      gsap.to(".bottom-radar", { y: 0, opacity: 1, duration: 0.5 })
+    })
+  } else if (index === "5") {
+    nextTick(() => {
+      gsap.to(".left-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+      gsap.to(".right-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+    })
+  }
 }
 // 地图开始动画播放完成
 function handleMapPlayComplete() {
@@ -376,4 +421,67 @@ function handleMapPlayComplete() {
   transform: translateY(100%);
   opacity: 0;
 }
+
+.left-column {
+  position: absolute;
+  z-index: 4;
+  width: 398px;
+  left: 32px;
+  top: 126px;
+  bottom: 50px;
+  perspective: 500px;
+  perspective-origin: 50% 50%;
+  .left-column-3d {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+    z-index: 4;
+  }
+  .module-card {
+    height: 450px;
+    background: rgba(0, 20, 40, 0.8);
+    border: 1px solid rgba(48, 220, 255, 0.3);
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
+    transform: translateX(-150%);
+    opacity: 0;
+  }
+}
+
+.right-column {
+  position: absolute;
+  z-index: 4;
+  width: 398px;
+  right: 32px;
+  top: 126px;
+  bottom: 50px;
+  perspective: 800px;
+  perspective-origin: 50% 50%;
+  .right-column-3d {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+  }
+  .module-card {
+    height: 450px;
+    background: rgba(0, 20, 40, 0.8);
+    border: 1px solid rgba(48, 220, 255, 0.3);
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
+    transform: translateX(150%);
+    opacity: 0;
+  }
+}
 </style>

src/views/waterResource/index.vue

@@ -12,12 +12,12 @@
       </m-header>
       <div class="top-menu">
         <mMenu :default-active="state.activeIndex" @select="handleMenuSelect">
-          <mMenuItem index="1">流域总览</mMenuItem>
+          <mMenuItem index="1">区域总览</mMenuItem>
           <mMenuItem index="2">水质监测</mMenuItem>
           <mMenuItem index="3">水文数据</mMenuItem>
           <div class="top-menu-mid-space"></div>
           <mMenuItem index="4">防洪预警</mMenuItem>
-          <mMenuItem index="5">水资源管理</mMenuItem>
+          <mMenuItem index="5">融合体系</mMenuItem>
           <mMenuItem index="6">系统设置</mMenuItem>
         </mMenu>
       </div>
@@ -146,6 +146,8 @@ function handleMenuSelect(index) {
   state.activeIndex = index
   if (index === "1") {
     router.push("/map")
+  } else if (index === "5") {
+    router.push("/waterResource")
   }
 }