海绵城市最终版

src/router/index.js

@@ -6,6 +6,12 @@ import MainPage from "@/views/c-views/visualizationPart/mainPage/MainPage.vue";
 import MunicipalFacilities from "@/views/c-views/visualizationPart/municipalFacilities/MunicipalFacilities.vue";
 import {ElMessageBox} from "element-plus";
 import {useUserStore} from "@/store/userStore.js";
+import ProjectManagement from "@/views/c-views/visualizationPart/projectManagement/projectManagement.vue";
+import knowledgdBase from "@/views/c-views/visualizationPart/knowledgeBase/knowledgdBase.vue";
+import device from "@/views/c-views/visualizationPart/device/device.vue";
+import effect from "@/views/c-views/visualizationPart/effect/effect.vue";
+import planningPlan from "@/views/c-views/visualizationPart/planningPlan/planningPlan.vue";
+
 
 const router = createRouter({
     history:createWebHashHistory(import.meta.env.BASE_URL),
@@ -20,14 +26,29 @@ const router = createRouter({
             component:VisualizationHome,
             children:[
                 {
-                    path:'houseBuilding',
-                    name:'houseBuilding',
-                    component:HouseBuilding,
+                    path:'knowledgdBase',
+                    name:'knowledgdBase',
+                    component:knowledgdBase,
+                },
+                {
+                    path:'projectManagement',
+                    name:'projectManagement',
+                    component:ProjectManagement,
+                },
+                {
+                    path:'device',
+                    name:'device',
+                    component:device,
+                },
+                {
+                    path:'effect',
+                    name:'effect',
+                    component:effect,
                 },
                 {
-                    path:'municipalFacilities',
-                    name:'municipalFacilities',
-                    component:MunicipalFacilities,
+                    path:'planningPlan',
+                    name:'planningPlan',
+                    component:planningPlan,
                 },
                 {
                     path:'mainPage',

src/views/c-cpns/Map.vue

@@ -9,7 +9,7 @@
 <script>
 import CityGis from '../../unit/map/CityGis.Bridge.js';
 import {myBridge} from "@/unit/map/map.js";
-import {nextTick,ref,onMounted} from "vue";
+import {watch ,onMounted} from "vue";
 import {AddSingleLayer, invokeParams, MapClickByType, SetBackground} from "@/unit/map/addLayer.js";
 let bridge;
 export default {
@@ -17,10 +17,10 @@ export default {
   props: {
     serviceNos: {
       type: Array,
-      required: true
+      default: () => []  // 默认值为空数组
     }
   },
-  setup(){
+  setup(props){
     onMounted(()=>{
       myBridge.bridgeContent =  bridge = new CityGis.Bridge({
         id: "i_map",
@@ -30,14 +30,13 @@ export default {
 
         }
       })
+
+
       console.log("地图创建完成")
       watch(() => props.serviceNos, (newServiceNos) => {
         loadServices(newServiceNos);
       }, { immediate: true });
-
       function loadServices(serviceNos) {
-        debugger
-        console.log(serviceNos)
         serviceNos.forEach(serviceNo => {
           AddSingleLayer({
             id: 0,

src/views/c-views/visualizationPart/device/device.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="Device">
+    <VisualizationHeader />
+    <Map :serviceNos="['D9999990320240701']" />
+  </div>
+</template>
+
+<script>
+import HouseBuildingLeft from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingLeft/HouseBuildingLeft.vue";
+import HouseBuildingRight from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingRight/HouseBuildingRight.vue";
+import Map from "@/views/c-cpns/Map.vue";
+import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
+import VisualizationHeader from "@/views/c-cpns/VisualizationHeader.vue";
+import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
+
+export default {
+  name: "Device",
+  components: {ServiceTree, VisualizationHeader, HouseBuildingLeft, HouseBuildingRight, TreeMenu, Map}
+}
+</script>
+
+<style scoped lang="scss">
+#houseBuilding {
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}
+</style>

src/views/c-views/visualizationPart/effect/effect.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="effect">
+    <VisualizationHeader />
+    <Map :serviceNos="['D9999990320240701','D9999990520240701','D9999990620240701']" />
+  </div>
+</template>
+
+<script>
+import HouseBuildingLeft from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingLeft/HouseBuildingLeft.vue";
+import HouseBuildingRight from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingRight/HouseBuildingRight.vue";
+import Map from "@/views/c-cpns/Map.vue";
+import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
+import VisualizationHeader from "@/views/c-cpns/VisualizationHeader.vue";
+import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
+
+export default {
+  name: "Effect",
+  components: {ServiceTree, VisualizationHeader, HouseBuildingLeft, HouseBuildingRight, TreeMenu, Map}
+}
+</script>
+
+<style scoped lang="scss">
+#houseBuilding {
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}
+</style>

src/views/c-views/visualizationPart/knowledgeBase/knowledgdBase.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="knowledgdBase">
+    <VisualizationHeader />
+    <Map :serviceNos="['D9999990320240701']" />
+  </div>
+</template>
+
+<script>
+import HouseBuildingLeft from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingLeft/HouseBuildingLeft.vue";
+import HouseBuildingRight from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingRight/HouseBuildingRight.vue";
+import Map from "@/views/c-cpns/Map.vue";
+import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
+import VisualizationHeader from "@/views/c-cpns/VisualizationHeader.vue";
+import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
+
+export default {
+  name: "knowledgdBase",
+  components: {ServiceTree, VisualizationHeader, HouseBuildingLeft, HouseBuildingRight, TreeMenu, Map}
+}
+</script>
+
+<style scoped lang="scss">
+#houseBuilding {
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}
+</style>

src/views/c-views/visualizationPart/mainPage/mainPageTop/MainPageTop.vue

@@ -6,11 +6,11 @@
           <img src="../../../../../assets/imgs/上海.png" alt="上海天际线"/>
         </div>
         <div  class="sidebar" >
-          <button @click="goToPage('/visualizationHome/houseBuilding', { category: '规划计划', serviceNos: ['D9999990320240701', 'D9999990520240701'] })" class="sidebar-1 button-with-arrow">规划计划</button>
-          <button @click="goToPage('/visualizationHome/houseBuilding', { category: '项目管理', serviceNos: ['D9999990520240701'] })" class="sidebar-2 button-with-arrow">项目管理</button>
-          <button @click="goToPage('/visualizationHome/houseBuilding', { category: '设备设施监测', serviceNos: ['D9999990620240701'] })" class="sidebar-3 button-with-arrow">设备设施监测</button>
-          <button @click="goToPage('/visualizationHome/houseBuilding', { category: '成效评估', serviceNos: ['D9999990320240701'] })" class="sidebar-4 button-with-arrow">成效评估</button>
-          <button @click="goToPage('/visualizationHome/houseBuilding', { category: '知识库', serviceNos: ['D9999990620240701'] })" class="sidebar-5 button-with-arrow">知识库</button>
+          <button @click="goToPage('/visualizationHome/planningPlan')" class="sidebar-1 button-with-arrow">规划计划</button>
+          <button @click="goToPage('/visualizationHome/projectManagement')" class="sidebar-2 button-with-arrow">项目管理</button>
+          <button @click="goToPage('/visualizationHome/device')" class="sidebar-3 button-with-arrow">设备设施监测</button>
+          <button @click="goToPage('/visualizationHome/effect')" class="sidebar-4 button-with-arrow">成效评估</button>
+          <button @click="goToPage('/visualizationHome/knowledgdBase')" class="sidebar-5 button-with-arrow">知识库</button>
         </div>
       </div>
     </div>
@@ -21,8 +21,8 @@
 export default {
   name: "MainPageTop",
   methods: {
-    goToPage(path, params) {
-      this.$router.push({ path: path, query: params });
+    goToPage(path) {
+      this.$router.push({ path: path});
     }
   }
 }
@@ -111,6 +111,8 @@ export default {
 .sidebar-3{
   background-image: url("../../../../../assets/imgs/mainPage/sbss1.png");
   background-size: cover;
+  pointer-events: none;
+  cursor: not-allowed
 }
 .sidebar-3:hover{
   background-image: url("../../../../../assets/imgs/mainPage/sbss2.png");
@@ -129,6 +131,8 @@ export default {
 .sidebar-5{
   background-image: url("../../../../../assets/imgs/mainPage/zzk1.png");
   background-size: cover;
+  pointer-events: none;
+
 }
 .sidebar-5:hover{
   background-image: url("../../../../../assets/imgs/mainPage/zzs2.png");

src/views/c-views/visualizationPart/planningPlan/planningPlan.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="planningPlan">
+    <VisualizationHeader />
+    <Map :serviceNos="['D9999990620240701']" />
+  </div>
+</template>
+
+<script>
+import HouseBuildingLeft from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingLeft/HouseBuildingLeft.vue";
+import HouseBuildingRight from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingRight/HouseBuildingRight.vue";
+import Map from "@/views/c-cpns/Map.vue";
+import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
+import VisualizationHeader from "@/views/c-cpns/VisualizationHeader.vue";
+import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
+
+export default {
+  name: "PlanningPlan",
+  components: {ServiceTree, VisualizationHeader, HouseBuildingLeft, HouseBuildingRight, TreeMenu, Map}
+}
+</script>
+
+<style scoped lang="scss">
+#houseBuilding {
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}
+</style>

src/views/c-views/visualizationPart/projectManagement/projectManagement.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="projectManagement">
+    <VisualizationHeader />
+    <Map :serviceNos="['D9999990320240701']" />
+  </div>
+</template>
+
+<script>
+import Map from "@/views/c-cpns/Map.vue";
+import VisualizationHeader from "@/views/c-cpns/VisualizationHeader.vue";
+
+export default {
+  name: "projectManagement",
+  components: { VisualizationHeader, Map}
+}
+</script>
+
+<style scoped lang="scss">
+#houseBuilding {
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}
+</style>