Home Explore Help
Register Sign In
sharedExchange
/
industry-database
5
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

zzy + 元数据项详情

zhiyuan-007 8 months ago
parent
a737fed570
commit
6818bf5005
19 changed files with 1077 additions and 775 deletions
Split View Show Diff Stats
  1. 7 7
      index.html
  2. 0 0
      src/assets/fonts/YouSheBiaoTiHei.ttf
  3. 1 2
      src/assets/init.scss
  4. 127 127
      src/components/MunicipalFacilities.vue
  5. 237 237
      src/components/RoadGrade.vue
  6. 160 161
      src/components/RoadWarnings.vue
  7. 17 0
      src/service/map.js
  8. 4 0
      src/store/mapStore.js
  9. 27 4
      src/unit/map/addLayer.js
  10. 81 4
      src/views/c-cpns/Map.vue
  11. 231 51
      src/views/c-cpns/ServiceTree.vue
  12. 1 1
      src/views/c-cpns/VisualizationBottom.vue
  13. 6 3
      src/views/c-cpns/VisualizationHeader.vue
  14. 15 15
      src/views/c-views/visualizationPart/houseBuilding/HouseBuilding.vue
  15. 35 35
      src/views/c-views/visualizationPart/houseBuilding/HouseBuildingLeft/HouseBuildingLeft.vue
  16. 18 18
      src/views/c-views/visualizationPart/mainPage/MainPage.vue
  17. 35 35
      src/views/c-views/visualizationPart/mainPage/mainPageLeft/MainPageLeft.vue
  18. 38 38
      src/views/c-views/visualizationPart/mainPage/mainPageRight/MainPageRight.vue
  19. 37 37
      src/views/c-views/visualizationPart/municipalFacilities/MunicipalFacilitiesRight/MunicipalFacilitiesRight.vue

+ 7 - 7
index.html
View File 

@@ -1,13 +1,13 @@
 
 <!doctype html>
 
 <html lang="en">
 
-  <head>
 
+<head>
 
     <meta charset="UTF-8" />
 
     <link rel="icon" type="image/svg+xml" href="/jianzhu.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>上海市住建行业基础数据应用系统</title>
 
-  </head>
 
-  <body>
 
-    <div id="app"></div>
 
-    <script type="module" src="/src/main.js"></script>
 
-  </body>
 
+    <title>上海市住建行业基础数据库应用系统</title>
 
+</head>
 
+<body>
 
+<div id="app"></div>
 
+<script type="module" src="/src/main.js"></script>
 
+</body>
 
 </html>

+ 0 - 0
src/assets/fonts/YouSheBiaoTiHei.ttf
View File


+ 1 - 2
src/assets/init.scss
View File 

@@ -19,7 +19,6 @@ html,
 
   &::-webkit-scrollbar-thumb {
 
     border-radius: 10px;
 
     -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
 
-
 
     background: #409eff;
 
   }
 
   &::-webkit-scrollbar-track {
 
@@ -28,4 +27,4 @@ html,
 
     background: rgba(235, 245, 255, 0.8);
 
   }
 
 
-}
 
+}

+ 127 - 127
src/components/MunicipalFacilities.vue
View File 

@@ -1,149 +1,149 @@
 
 <template>
 
-	<div class="right_one">
 
+  <div class="right_one">
 
     <CommonTitle title="市政设施类型" />
 
-		<div class="content" id="chartFive" v-loading="isLoading"
 
+    <div class="content" id="chartFive" v-loading="isLoading"
 
          element-loading-background="rgba(0, 22, 52, 0.75)">
 
-			<div class="right_item" v-for="item in arr" :key="item.id">
 
-				<div class="item_top">
 
-					<div class="top_left center">
 
-						{{item.NAME}}
 
-					</div>
 
-					<div class="middle_left center">
 
-						{{item.NUM}}
 
-					</div>
 
-					<div class="middle_right center">
 
-						{{item.discribe}}
 
-					</div>
 
-					<div class="top_right center">
 
-						{{item.per}}
 
-					</div>
 
-				</div>
 
-				<div class="item_bottom"
 
-					:style="`width:${item.per};background: linear-gradient(270deg, rgba(29, 128, 224, 0.64) 0%, rgba(255, 255, 255, 0.64) 100%);`">
 
+      <div class="right_item" v-for="item in arr" :key="item.id">
 
+        <div class="item_top">
 
+          <div class="top_left center">
 
+            {{item.NAME}}
 
+          </div>
 
+          <div class="middle_left center">
 
+            {{item.NUM}}
 
+          </div>
 
+          <div class="middle_right center">
 
+            {{item.discribe}}
 
+          </div>
 
+          <div class="top_right center">
 
+            {{item.per}}
 
+          </div>
 
+        </div>
 
+        <div class="item_bottom"
 
+             :style="`width:${item.per};background: linear-gradient(270deg, rgba(29, 128, 224, 0.64) 0%, rgba(255, 255, 255, 0.64) 100%);`">
 
           <img src="@/assets/imgs/guangquan.png" alt="" />
 
-				</div>
 
-			</div>
 
-		</div>
 
-	</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
 </template>
 
 
 <script setup>
 
-	import {
 
-		ref,
 
-		onMounted,
 
-		nextTick
 
-	} from 'vue'
 
-	import {
 
-		getMunicipalFacilityTypes
 
-	} from '../service/http.js'
 
-  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 
-	let arr = ref([])
 
-	let num = ref(0);
 
-  const isLoading = ref(false);
 
-	onMounted(() => {
 
-    isLoading.value = true;
 
-		getMunicipalFacilityTypes().then(res => {
 
-      isLoading.value = false;
 
-			arr.value = res.data.data.Rows
 
-			num.value = 0
 
-			arr.value.forEach(item=>{
 
-				num.value += Number(item.NUM)
 
-			})
 
-			arr.value.forEach(item=>{
 
-				item["per"] = ((Number(item.NUM)/num.value)*100).toFixed(2) + '%'
 
-				if(item.NAME != '市政道路附属设施（点状）'){
 
-					item["discribe"] = "公里"
 
-				}else{
 
-					item["discribe"] = "个"
 
-				}
 
-			})
 
-		})
 
-	})
 
-	
+import {
 
+  ref,
 
+  onMounted,
 
+  nextTick
 
+} from 'vue'
 
+import {
 
+  getMunicipalFacilityTypes
 
+} from '../service/http.js'
 
+import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 
+let arr = ref([])
 
+let num = ref(0);
 
+const isLoading = ref(false);
 
+onMounted(() => {
 
+  isLoading.value = true;
 
+  getMunicipalFacilityTypes().then(res => {
 
+    isLoading.value = false;
 
+    arr.value = res.data.data.Rows
 
+    num.value = 0
 
+    arr.value.forEach(item=>{
 
+      num.value += Number(item.NUM)
 
+    })
 
+    arr.value.forEach(item=>{
 
+      item["per"] = ((Number(item.NUM)/num.value)*100).toFixed(2) + '%'
 
+      if(item.NAME != '市政道路附属设施（点状）'){
 
+        item["discribe"] = "公里"
 
+      }else{
 
+        item["discribe"] = "个"
 
+      }
 
+    })
 
+  })
 
+})
 
+
 
 </script>
 
 
 <style scoped lang="scss">
 
-	.center {
 
-		display: flex;
 
-		justify-content: flex-start;
 
-		align-items: center;
 
-	}
 
+.center {
 
+  display: flex;
 
+  justify-content: flex-start;
 
+  align-items: center;
 
+}
 
 
-	.center_center {
 
-		display: flex;
 
-		justify-content: center;
 
-		align-items: center;
 
-	}
 
+.center_center {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
 
-	.right_one {
 
-		height: 24%;
 
-		padding-top: 10px;
 
-		box-sizing: border-box;
 
+.right_one {
 
+  height: 24%;
 
+  padding-top: 10px;
 
+  box-sizing: border-box;
 
 
-		.content {
 
-			height: 80%;
 
-			margin: 0 20px;
 
-			box-sizing: border-box;
 
+  .content {
 
+    height: 80%;
 
+    margin: 0 20px;
 
+    box-sizing: border-box;
 
 
-			.right_item {
 
-				height: 20%;
 
-				box-sizing: border-box;
 
+    .right_item {
 
+      height: 20%;
 
+      box-sizing: border-box;
 
 
-				.item_top {
 
-					height: 80%;
 
-					display: flex;
 
+      .item_top {
 
+        height: 80%;
 
+        display: flex;
 
 
-					.top_left {
 
-						width: 180px;
 
-						font-weight: bold;
 
-						font-size: 14px;
 
-						color: #FFFFFF;
 
-					}
 
+        .top_left {
 
+          width: 180px;
 
+          font-weight: bold;
 
+          font-size: 14px;
 
+          color: #FFFFFF;
 
+        }
 
 
-					.middle_left {
 
-						width: 89px;
 
-						font-family: YouSheBiaoTiHei;
 
-						font-weight: bold;
 
-						font-size: 16px;
 
-						color: #8DC6FF;
 
-						text-align: right;
 
-						//line-height: 55px;
 
-					}
 
+        .middle_left {
 
+          width: 89px;
 
+          font-family: YouSheBiaoTiHei;
 
+          font-weight: bold;
 
+          font-size: 16px;
 
+          color: #8DC6FF;
 
+          text-align: right;
 
+          //line-height: 55px;
 
+        }
 
 
-					.middle_right {
 
-						width: 24px;
 
-						font-family: Microsoft YaHei;
 
-						font-weight: 400;
 
-						font-size: 12px;
 
-						color: #FFFFFF;
 
-						opacity: 0.6;
 
-						margin-right: 5px;
 
-					}
 
+        .middle_right {
 
+          width: 24px;
 
+          font-family: Microsoft YaHei;
 
+          font-weight: 400;
 
+          font-size: 12px;
 
+          color: #FFFFFF;
 
+          opacity: 0.6;
 
+          margin-right: 5px;
 
+        }
 
 
-					.top_right {
 
-						width: 33px;
 
+        .top_right {
 
+          width: 33px;
 
 
-						font-family: YouSheBiaoTiHei;
 
-						font-weight: 400;
 
-						font-size: 16px;
 
-						color: #ECF2F5;
 
-						//line-height: 55px;
 
-					}
 
-				}
 
+          font-family: YouSheBiaoTiHei;
 
+          font-weight: 400;
 
+          font-size: 16px;
 
+          color: #ECF2F5;
 
+          //line-height: 55px;
 
+        }
 
+      }
 
 
-				.item_bottom {
 
-					height: 4px;
 
-          margin-top: 6px;
 
-          position: relative;
 
-          img{
 
-            width: 12px;
 
-            height: 12px;
 
-            position: absolute;
 
-            bottom: -4px;
 
-            right: -6px;
 
-          }
 
-				}
 
-			}
 
-		}
 
-	}
 
+      .item_bottom {
 
+        height: 4px;
 
+        margin-top: 6px;
 
+        position: relative;
 
+        img{
 
+          width: 12px;
 
+          height: 12px;
 
+          position: absolute;
 
+          bottom: -4px;
 
+          right: -6px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
 </style>

+ 237 - 237
src/components/RoadGrade.vue
View File 

@@ -1,246 +1,246 @@
 
 <template>
 
-	<div class="left_four">
 
+  <div class="left_four">
 
     <CommonTitle title="道路等级" />
 
-		<div class="content" v-loading="isLoading"
 
+    <div class="content" v-loading="isLoading"
 
          element-loading-background="rgba(0, 22, 52, 0.75)">
 
-			<div id="chartOne">
 
-	
-			</div>
 
-			<div class="right">
 
-				<div class="top center">
 
-					<div class="top_left center">
 
-						面积(万㎡)
 
-					</div>
 
-					<div class="top_right center">
 
-						{{num}}
 
-					</div>
 
-				</div>
 
-				<div class="bottom">
 
-					<div class="bottom_item" v-for="item in arr" :key="item.id">
 
-						<div class="item_top center">
 
-							<div :class="`dot ${item.className1}`">
 
-								
-							</div>
 
-							<div class="name">
 
-								{{item.dldj}}
 
-							</div>
 
-							<div :class="`percent ${item.className2}`">
 
-								{{item.per}}
 
-							</div>
 
-						</div>
 
-						<div class="item_bottom center">
 
-							<div class="item_bottom_left">
 
-								{{item.dlldcd}}
 
-							</div>
 
-							<div class="item_bottom_right">
 
-								公里
 
-							</div>
 
-						</div>
 
-					</div>
 
-				</div>
 
-			</div>
 
-		</div>
 
-	</div>
 
+      <div id="chartOne">
 
+
 
+      </div>
 
+      <div class="right">
 
+        <div class="top center">
 
+          <div class="top_left center">
 
+            面积(万㎡)
 
+          </div>
 
+          <div class="top_right center">
 
+            {{num}}
 
+          </div>
 
+        </div>
 
+        <div class="bottom">
 
+          <div class="bottom_item" v-for="item in arr" :key="item.id">
 
+            <div class="item_top center">
 
+              <div :class="`dot ${item.className1}`">
 
+
 
+              </div>
 
+              <div class="name">
 
+                {{item.dldj}}
 
+              </div>
 
+              <div :class="`percent ${item.className2}`">
 
+                {{item.per}}
 
+              </div>
 
+            </div>
 
+            <div class="item_bottom center">
 
+              <div class="item_bottom_left">
 
+                {{item.dlldcd}}
 
+              </div>
 
+              <div class="item_bottom_right">
 
+                公里
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
 </template>
 
 
 <script setup>
 
-	import {
 
-		ref,
 
-		onMounted,
 
-		nextTick
 
-	} from 'vue'
 
-  import {
 
-    setEchartsPie, setRoadEchartsPie
 
-  } from '../echarts/option.js'
 
-	import {
 
-		getSelectDldjCount
 
-	} from '../service/http.js'
 
-  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 
-	let arr = ref([]);
 
-	let num = ref(0);
 
-  const isLoading = ref(false);
 
-	onMounted(() => {
 
-    isLoading.value = true;
 
-		getSelectDldjCount().then(res => {
 
-      isLoading.value = false;
 
-			let total = 0
 
-			arr.value = res.data.data.Rows.reverse()
 
-			arr.value.forEach(item=>{
 
-				total += Number(item.dlldcd)
 
-			})
 
-			num.value = total.toFixed()
 
-			arr.value.forEach(item=>{
 
-				item["per"] = ((Number(item.dlldcd)/num.value)*100).toFixed(2) + '%'
 
-				if(item.dldj == "快速路"){
 
-					item["className1"] = "bg1"
 
-					item["className2"] = "color1"
 
-				}else if(item.dldj == "主干路"){
 
-					item["className1"] = "bg2"
 
-					item["className2"] = "color2"
 
-				}else if(item.dldj == "次干路"){
 
-					item["className1"] = "bg3"
 
-					item["className2"] = "color3"
 
-				}else{
 
-					item["className1"] = "bg4"
 
-					item["className2"] = "color4"
 
-				}
 
-			})
 
-      setRoadEchartsPie(document.getElementById("chartOne"),arr.value)
 
-		})
 
-		
-	})
 
-	
-	
+import {
 
+  ref,
 
+  onMounted,
 
+  nextTick
 
+} from 'vue'
 
+import {
 
+  setEchartsPie, setRoadEchartsPie
 
+} from '../echarts/option.js'
 
+import {
 
+  getSelectDldjCount
 
+} from '../service/http.js'
 
+import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 
+let arr = ref([]);
 
+let num = ref(0);
 
+const isLoading = ref(false);
 
+onMounted(() => {
 
+  isLoading.value = true;
 
+  getSelectDldjCount().then(res => {
 
+    isLoading.value = false;
 
+    let total = 0
 
+    arr.value = res.data.data.Rows.reverse()
 
+    arr.value.forEach(item=>{
 
+      total += Number(item.dlldcd)
 
+    })
 
+    num.value = total.toFixed()
 
+    arr.value.forEach(item=>{
 
+      item["per"] = ((Number(item.dlldcd)/num.value)*100).toFixed(2) + '%'
 
+      if(item.dldj == "快速路"){
 
+        item["className1"] = "bg1"
 
+        item["className2"] = "color1"
 
+      }else if(item.dldj == "主干路"){
 
+        item["className1"] = "bg2"
 
+        item["className2"] = "color2"
 
+      }else if(item.dldj == "次干路"){
 
+        item["className1"] = "bg3"
 
+        item["className2"] = "color3"
 
+      }else{
 
+        item["className1"] = "bg4"
 
+        item["className2"] = "color4"
 
+      }
 
+    })
 
+    setRoadEchartsPie(document.getElementById("chartOne"),arr.value)
 
+  })
 
+
 
+})
 
+
 
+
 
 </script>
 
 
 <style lang="scss" scoped>
 
-	.center {
 
-		display: flex;
 
-		justify-content: flex-start;
 
-		align-items: center;
 
-	}
 
-	
-	.center_center{
 
-		display: flex;
 
-		justify-content: center;
 
-		align-items: center;
 
-	}
 
-	
-	.right_item{
 
-		height: 19%;
 
-		padding-top: 10px;
 
-		box-sizing: border-box;
 
-	}
 
-	.left_four {
 
-		height: 20%;
 
-		padding-top: 10px;
 
-		box-sizing: border-box;
 
-		
-		.content {
 
-			height: 80%;
 
-			margin: 0;
 
-			display: flex;
 
-			
-			align-items: center;
 
-	
-			#chartOne {
 
-        width: 45%;
 
-        height: 90%;
 
-        background-size: 183px 75px;
 
-        background: url("@/assets/imgs/bpdt.png") center 90% no-repeat;
 
-			}
 
-			.right{
 
-				width: 55%;
 
-				height: 100%;
 
-				
-				.top{
 
-					height: 20%;
 
-					.top_left{
 
-						font-family: Source Han Sans CN;
 
-						font-weight: bold;
 
-						font-size: 14px;
 
-						color: #FFFFFF;
 
-						//text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
 
-						background: linear-gradient(0deg, #5FB3DD 0%, #FFFFFF 89.7705078125%);
 
-						-webkit-background-clip: text;
 
-						-webkit-text-fill-color: transparent;
 
-						margin-right: 14px;
 
-					}
 
-					.top_right{
 
-						font-family: YouSheBiaoTiHei;
 
-						font-weight: bold;
 
-						font-size: 18px;
 
-						color: #3DA6FE;
 
-						//text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
 
-						background: linear-gradient(0deg, #5FB3DD 0%, #FFFFFF 89.7705078125%);
 
-						-webkit-background-clip: text;
 
-						-webkit-text-fill-color: transparent;
 
-					}
 
-				}
 
-				.bottom{
 
-					height: 80%;
 
-					width: 100%;
 
-					display: flex;
 
-					flex-wrap: wrap;
 
-					
-					.bottom_item{
 
-						width: 50%;
 
-						height: 40%;
 
-						margin-bottom: 10px;
 
-						
-						.item_top{
 
-							height: 50%;
 
-							.bg1{
 
-								background: #10DCDC;
 
-							}
 
-							.color1{
 
-								color: #50C5C5;
 
-							}
 
-							.bg2{
 
-								background: #67CBFF;
 
-							}
 
-							.color2{
 
-								color: #67CBFF;
 
-							}
 
-							.bg3{
 
-								background: #71EAB4;
 
-							}
 
-							.color3{
 
-								color: #71EAB4;
 
-							}
 
-							.bg4{
 
-								background: #F1B062;
 
-							}
 
-							.color4{
 
-								color: #F1B062;
 
-							}
 
-							
-							
-							.dot{
 
-								width: 4px;
 
-								height: 4px;
 
-								border-radius: 50%;
 
-								margin-right: 9px;
 
-							}
 
-							
-							.name{
 
-								font-family: Microsoft YaHei;
 
-								font-weight: 400;
 
-								font-size: 13px;
 
-								color: #FFFFFF;
 
-								margin-right: 5px;
 
-							}
 
-							
-							.percent{
 
-								font-family: YouSheBiaoTiHei;
 
-								font-weight: 400;
 
-								font-size: 14px;
 
-								//background: linear-gradient(0deg, rgba(3,0,0,0.29) 0%, rgba(255,255,255,0.29) 100%);
 
-								/* -webkit-background-clip: text;
 
-								-webkit-text-fill-color: transparent; */
 
-							}
 
-						}
 
-						.item_bottom{
 
-							height: 50%;
 
-							margin-left: 13px;
 
-							.item_bottom_left{
 
-								font-family: YouSheBiaoTiHei;
 
-								font-weight: bold;
 
-								font-size: 14px;
 
-								color: #FFFFFF;
 
-								margin-right: 5px;
 
-							}
 
-							.item_bottom_right{
 
-								font-family: Microsoft YaHei;
 
-								font-weight: 400;
 
-								font-size: 12px;
 
-								color: #FFFFFF;
 
-								opacity: 0.6;
 
-							}
 
-						}
 
-					}
 
-				}
 
-			}
 
-		}
 
-	}
 
-</style>
 
+.center {
 
+  display: flex;
 
+  justify-content: flex-start;
 
+  align-items: center;
 
+}
 
+
 
+.center_center{
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
+
 
+.right_item{
 
+  height: 19%;
 
+  padding-top: 10px;
 
+  box-sizing: border-box;
 
+}
 
+.left_four {
 
+  height: 20%;
 
+  padding-top: 10px;
 
+  box-sizing: border-box;
 
+
 
+  .content {
 
+    height: 80%;
 
+    margin: 0;
 
+    display: flex;
 
+
 
+    align-items: center;
 
+
 
+    #chartOne {
 
+      width: 45%;
 
+      height: 90%;
 
+      background-size: 183px 75px;
 
+      background: url("@/assets/imgs/bpdt.png") center 90% no-repeat;
 
+    }
 
+    .right{
 
+      width: 55%;
 
+      height: 100%;
 
+
 
+      .top{
 
+        height: 20%;
 
+        .top_left{
 
+          font-family: Source Han Sans CN;
 
+          font-weight: bold;
 
+          font-size: 14px;
 
+          color: #FFFFFF;
 
+          //text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
 
+          background: linear-gradient(0deg, #5FB3DD 0%, #FFFFFF 89.7705078125%);
 
+          -webkit-background-clip: text;
 
+          -webkit-text-fill-color: transparent;
 
+          margin-right: 14px;
 
+        }
 
+        .top_right{
 
+          font-family: YouSheBiaoTiHei;
 
+          font-weight: bold;
 
+          font-size: 18px;
 
+          color: #3DA6FE;
 
+          //text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
 
+          background: linear-gradient(0deg, #5FB3DD 0%, #FFFFFF 89.7705078125%);
 
+          -webkit-background-clip: text;
 
+          -webkit-text-fill-color: transparent;
 
+        }
 
+      }
 
+      .bottom{
 
+        height: 80%;
 
+        width: 100%;
 
+        display: flex;
 
+        flex-wrap: wrap;
 
+
 
+        .bottom_item{
 
+          width: 50%;
 
+          height: 40%;
 
+          margin-bottom: 10px;
 
+
 
+          .item_top{
 
+            height: 50%;
 
+            .bg1{
 
+              background: #10DCDC;
 
+            }
 
+            .color1{
 
+              color: #50C5C5;
 
+            }
 
+            .bg2{
 
+              background: #67CBFF;
 
+            }
 
+            .color2{
 
+              color: #67CBFF;
 
+            }
 
+            .bg3{
 
+              background: #71EAB4;
 
+            }
 
+            .color3{
 
+              color: #71EAB4;
 
+            }
 
+            .bg4{
 
+              background: #F1B062;
 
+            }
 
+            .color4{
 
+              color: #F1B062;
 
+            }
 
+
 
+
 
+            .dot{
 
+              width: 4px;
 
+              height: 4px;
 
+              border-radius: 50%;
 
+              margin-right: 9px;
 
+            }
 
+
 
+            .name{
 
+              font-family: Microsoft YaHei;
 
+              font-weight: 400;
 
+              font-size: 13px;
 
+              color: #FFFFFF;
 
+              margin-right: 5px;
 
+            }
 
+
 
+            .percent{
 
+              font-family: YouSheBiaoTiHei;
 
+              font-weight: 400;
 
+              font-size: 14px;
 
+              //background: linear-gradient(0deg, rgba(3,0,0,0.29) 0%, rgba(255,255,255,0.29) 100%);
 
+              /* -webkit-background-clip: text;
 
+              -webkit-text-fill-color: transparent; */
 
+            }
 
+          }
 
+          .item_bottom{
 
+            height: 50%;
 
+            margin-left: 13px;
 
+            .item_bottom_left{
 
+              font-family: YouSheBiaoTiHei;
 
+              font-weight: bold;
 
+              font-size: 14px;
 
+              color: #FFFFFF;
 
+              margin-right: 5px;
 
+            }
 
+            .item_bottom_right{
 
+              font-family: Microsoft YaHei;
 
+              font-weight: 400;
 
+              font-size: 12px;
 
+              color: #FFFFFF;
 
+              opacity: 0.6;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>

+ 160 - 161
src/components/RoadWarnings.vue
View File 

@@ -1,169 +1,168 @@
 
 <template>
 
-	<div class="right_two">
 
+  <div class="right_two">
 
     <CommonTitle title="道路预警" />
 
-		<div class="content" v-loading="isLoading"
 
+    <div class="content" v-loading="isLoading"
 
          element-loading-background="rgba(0, 22, 52, 0.75)">
 
-			<div class="item" v-for="item in arr" :key="item.id">
 
-				<div :class="`top center_center ${item.className1}`">
 
-					{{item.LFXS_NAME}}
 
-				</div>
 
-				<div :class="`bottom ${item.className2}`">
 
-					<div class="bottom_top center_center">
 
-						{{item.WARNING_DLZC}}
 
-					</div>
 
-					<div class="bottom_bottom center_center">
 
-						公里
 
-					</div>
 
-				</div>
 
-			</div>
 
-		</div>
 
-	</div>
 
+      <div class="item" v-for="item in arr" :key="item.id">
 
+        <div :class="`top center_center ${item.className1}`">
 
+          {{item.LFXS_NAME}}
 
+        </div>
 
+        <div :class="`bottom ${item.className2}`">
 
+          <div class="bottom_top center_center">
 
+            {{item.WARNING_DLZC}}
 
+          </div>
 
+          <div class="bottom_bottom center_center">
 
+            公里
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
 </template>
 
 
 <script setup>
 
-	import {
 
-		ref,
 
-		onMounted,
 
-		nextTick
 
-	} from 'vue'
 
-	import {
 
-		getQueryRoadWarning
 
-	} from '../service/http.js'
 
-  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 
-	let arr = ref([]);
 
-  const isLoading = ref(false);
 
-	onMounted(() => {
 
-    isLoading.value = true;
 
-		getQueryRoadWarning().then(res => {
 
-      isLoading.value = false;
 
-			let arr1 = [];
 
-			for(let i in res.data.data.Rows[0]) {
 
-			  arr1.push (res.data.data.Rows[0][i])  
-			}
 
-			arr.value = arr1.filter(item=>{
 
-				return item.LFXS_NAME != "其它"
 
-			
-			})
 
-			arr.value.forEach(item=>{
 
-				if(item.LFXS_NAME == "一幅路"){
 
-					item["className1"] = "top_one"
 
-					item["className2"] = "bottom_one"
 
-				}else if(item.LFXS_NAME == "两幅路"){
 
-					item["className1"] = "top_two"
 
-					item["className2"] = "bottom_two"
 
-				}else if(item.LFXS_NAME == "三幅路"){
 
-					item["className1"] = "top_three"
 
-					item["className2"] = "bottom_three"
 
-				}else if(item.LFXS_NAME == "四幅路"){
 
-					item["className1"] = "top_four"
 
-					item["className2"] = "bottom_four"
 
-				}else{
 
-					item["className1"] = "top_five"
 
-					item["className2"] = "bottom_five"
 
-				}
 
-			})
 
-		})
 
-	})
 
-	
-</script>
 
+import {
 
+  ref,
 
+  onMounted,
 
+  nextTick
 
+} from 'vue'
 
+import {
 
+  getQueryRoadWarning
 
+} from '../service/http.js'
 
+import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 
+let arr = ref([]);
 
+const isLoading = ref(false);
 
+onMounted(() => {
 
+  isLoading.value = true;
 
+  getQueryRoadWarning().then(res => {
 
+    isLoading.value = false;
 
+    let arr1 = [];
 
+    for(let i in res.data.data.Rows[0]) {
 
+      arr1.push (res.data.data.Rows[0][i])
 
+    }
 
+    arr.value = arr1.filter(item=>{
 
+      return item.LFXS_NAME != "其它"
 
+
 
+    })
 
+    arr.value.forEach(item=>{
 
+      if(item.LFXS_NAME == "一幅路"){
 
+        item["className1"] = "top_one"
 
+        item["className2"] = "bottom_one"
 
+      }else if(item.LFXS_NAME == "两幅路"){
 
+        item["className1"] = "top_two"
 
+        item["className2"] = "bottom_two"
 
+      }else if(item.LFXS_NAME == "三幅路"){
 
+        item["className1"] = "top_three"
 
+        item["className2"] = "bottom_three"
 
+      }else if(item.LFXS_NAME == "四幅路"){
 
+        item["className1"] = "top_four"
 
+        item["className2"] = "bottom_four"
 
+      }else{
 
+        item["className1"] = "top_five"
 
+        item["className2"] = "bottom_five"
 
+      }
 
+    })
 
+  })
 
+})
 
 
+</script>
 
 <style scoped lang="scss">
 
-	.center {
 
-		display: flex;
 
-		justify-content: flex-start;
 
-		align-items: center;
 
-	}
 
-	
-	.center_center{
 
-		display: flex;
 
-		justify-content: center;
 
-		align-items: center;
 
-	}
 
-	.right_two{
 
-		height: 17%;
 
-		padding-top: 10px;
 
-		box-sizing: border-box;
 
-		.content {
 
-			height: 85%;
 
-			margin: 0 20px;
 
-			box-sizing: border-box;
 
-			display: flex;
 
-			justify-content: space-between;
 
-			align-items: center;
 
-			
-			.item{
 
-				width: 72px;
 
-				height: 83px;
 
-				
-				.top_one{
 
-					background: #0058B2;
 
-					border: 1px solid #007EFF;
 
-				}
 
-				.bottom_one{
 
-					background: rgba(0,126,255,0.3);
 
-				}
 
-				.top_two{
 
-					background: #00B285;
 
-					border: 1px solid #00E6AC;
 
-	
-				}
 
-				.bottom_two{
 
-					background: rgba(45,179,145,0.3);
 
-				}
 
-				.top_three{
 
-					background: #0094B2;
 
-					border: 1px solid #00D5FF;
 
-				}
 
-				.bottom_three{
 
-					background: rgba(0,148,178,0.3);
 
-				}
 
-				.top_four{
 
-					background: rgba(203,203,0,0.5);
 
-					border: 1px solid #BFBF00;
 
-				}
 
-				.bottom_four{
 
-					background: rgba(255,255,0,0.3);
 
-	
-				}
 
-				.top_five{
 
-					background: rgba(217,126,0,0.5);
 
-					border: 1px solid #D97E00;
 
-	
-				}
 
-				.bottom_five{
 
-					background: rgba(217,126,0,0.3);
 
-				}
 
-				
-				.top{
 
-					width: 72px;
 
-					height: 24px;
 
-					font-family: Microsoft YaHei;
 
-					font-weight: bold;
 
-					font-size: 13px;
 
-					color: #FFFFFF;
 
-					box-sizing: border-box;
 
-				}
 
-				.bottom{
 
-					width: 72px;
 
-					height: 63px;
 
-					
-					
-					.bottom_top{
 
-						height: 50%;
 
-						font-family: YouSheBiaoTiHei;
 
-						font-weight: bold;
 
-						font-size: 16px;
 
-						color: #FFFFFF;
 
-					}
 
-					.bottom_bottom{
 
-						font-family: Microsoft YaHei;
 
-						font-weight: 400;
 
-						font-size: 12px;
 
-						color: #FFFFFF;
 
-					}
 
-				}
 
-				
-			}
 
-		}
 
-	}
 
-</style>
 
+.center {
 
+  display: flex;
 
+  justify-content: flex-start;
 
+  align-items: center;
 
+}
 
+
 
+.center_center{
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
+.right_two{
 
+  height: 17%;
 
+  padding-top: 10px;
 
+  box-sizing: border-box;
 
+  .content {
 
+    height: 85%;
 
+    margin: 0 20px;
 
+    box-sizing: border-box;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+
 
+    .item{
 
+      width: 72px;
 
+      height: 83px;
 
+
 
+      .top_one{
 
+        background: #0058B2;
 
+        border: 1px solid #007EFF;
 
+      }
 
+      .bottom_one{
 
+        background: rgba(0,126,255,0.3);
 
+      }
 
+      .top_two{
 
+        background: #00B285;
 
+        border: 1px solid #00E6AC;
 
+
 
+      }
 
+      .bottom_two{
 
+        background: rgba(45,179,145,0.3);
 
+      }
 
+      .top_three{
 
+        background: #0094B2;
 
+        border: 1px solid #00D5FF;
 
+      }
 
+      .bottom_three{
 
+        background: rgba(0,148,178,0.3);
 
+      }
 
+      .top_four{
 
+        background: rgba(203,203,0,0.5);
 
+        border: 1px solid #BFBF00;
 
+      }
 
+      .bottom_four{
 
+        background: rgba(255,255,0,0.3);
 
+
 
+      }
 
+      .top_five{
 
+        background: rgba(217,126,0,0.5);
 
+        border: 1px solid #D97E00;
 
+
 
+      }
 
+      .bottom_five{
 
+        background: rgba(217,126,0,0.3);
 
+      }
 
+
 
+      .top{
 
+        width: 72px;
 
+        height: 24px;
 
+        font-family: Microsoft YaHei;
 
+        font-weight: bold;
 
+        font-size: 13px;
 
+        color: #FFFFFF;
 
+        box-sizing: border-box;
 
+      }
 
+      .bottom{
 
+        width: 72px;
 
+        height: 63px;
 
+
 
+
 
+        .bottom_top{
 
+          height: 50%;
 
+          font-family: YouSheBiaoTiHei;
 
+          font-weight: bold;
 
+          font-size: 16px;
 
+          color: #FFFFFF;
 
+        }
 
+        .bottom_bottom{
 
+          font-family: Microsoft YaHei;
 
+          font-weight: 400;
 
+          font-size: 12px;
 
+          color: #FFFFFF;
 
+        }
 
+      }
 
+
 
+    }
 
+  }
 
+}
 
+</style>

+ 17 - 0
src/service/map.js
View File 

@@ -25,4 +25,21 @@ export function getLegend(url){
 
     return requestInstance_Service_token({
 
         url
 
     })
 
+}
 
+
 
+
 
+export function getMapNum(type,id){
 
+    return requestInstance_Map_token({
 
+        url:'/DataSearch/OneCode/clustering',
 
+        data:{
 
+            "esAggregation":{
 
+                "field":"1111",
 
+                "value":type,
 
+                "size":999
 
+            },
 
+            "businessField": {
 
+                "catalogCode": id
 
+            }
 
+        }
 
+    })
 
 }

+ 4 - 0
src/store/mapStore.js
View File 

@@ -2,7 +2,11 @@ import {defineStore} from "pinia";
 
 export const useMapStore = defineStore('map',{
 
     state:() =>({
 
         layerShow:false,  //服务列表是否开启
 
+        currentLayerType:"mainPage", //当前服务列表类型
 
         currentLayerList:[],  //当前服务列表
 
+        currentNum:null,
 
+        currentLayer:null,
 
+        scale:null,
 
         whiteMoldState:false,   //白模状态
 
         camera:{      //相机信息
 
             heading:null,

+ 27 - 4
src/unit/map/addLayer.js
View File 

@@ -66,12 +66,31 @@ export function FeatureThreeDimension(params){
 
     })
 
 }
 
 
-
 
-//点查询
 
+//区县聚类
 
 export function MapClickByType(status){
 
     invokeParams('MapClickAll', {
 
         "status": status,
 
-        "disableLayerIdList":["districtArea","districtStreet"]
 
+        "disableLayerIdList":["districtArea","districtStreet","bgFeaturelayer"]
 
+    })
 
+}
 
+
 
+//点查询
 
+export function AreaJsonRankShow(params){
 
+    debugger
 
+    invokeParams('AreaJsonRankShow', {
 
+        "type": params.type,  //qx、jz
 
+        "district": null,
 
+        "id": "AreaTextLayer",
 
+        "title": "文本标绘",
 
+        "status": params.status,
 
+        "data": params.data,
 
+        "symbol": {
 
+            "color": [255, 255, 255, 1],
 
+            "backgroundColor": [77, 161, 194, 0.4],
 
+            "font": {
 
+                "size": 12
 
+            }
 
+        },
 
     })
 
 }
 
 
@@ -115,7 +134,11 @@ export async function AddYaoganMapLayer() {
 
     })
 
 }
 
 
-
 
+//关闭图层
 
+export function clearAllLayer() {
 
+    invokeParams('ClearMapLayers',{
 
+    })
 
+}
 
 
 
 export function AddSingleLayer(params){

+ 81 - 4
src/views/c-cpns/Map.vue
View File 

@@ -11,22 +11,99 @@ import CityGis from '../../unit/map/CityGis.Bridge.js';
 
 import {myBridge} from "../../unit/map/map.js";
 
 import {useMapStore} from "../../store/mapStore.js";
 
 import {nextTick,ref,onMounted} from "vue";
 
-import {AddSingleLayer, MapClickByType, SetBackground} from "../../unit/map/addLayer.js";
 
+import {
 
+  AddSingleLayer,
 
+  AreaJsonRankShow,
 
+  FeatureThreeDimension,
 
+  MapClickByType,
 
+  SetBackground
 
+} from "../../unit/map/addLayer.js";
 
+import {getMapNum} from "@/service/map.js";
 
 let bridge;
 
 export default {
 
   name: "Map",
 
   setup(){
 
+    const mapStore = useMapStore();
 
     onMounted(()=>{
 
       myBridge.bridgeContent =  bridge = new CityGis.Bridge({
 
         id: "i_map",
 
-        url: 'https://cimweb.zjw.sh.cegn.cn:2007/VUE-Map-Tool-Widget/#/jk_map?theme=dark&type=3D', //建科发布
 
-        //url: 'http://localhost:8081/#/jk_map?theme=dark&type=3D',
 
+        url: 'https://cimweb.zjw.sh.cegn.cn:2007/VUE-Map-Tool-Widget/#/jk_map?theme=dark_hyjcsjk&type=3D', //建科发布
 
+        //url: 'http://localhost:8081/#/jk_map?theme=dark_hyjcsjk&type=3D',
 
         onReady: function () {
 
           console.log("地图创建完成")
 
         }
 
       })
 
       MapClickByType('show');
 
-      SetBackground()
 
+      SetBackground();
 
+      bridge.addEventListener(arg => {
 
+        switch (arg.action) {
 
+          case "MapExtentChanged":
 
+            let scale = arg.data.scale;
 
+            if(mapStore.currentNum){
 
+              if(scale > 100000 && mapStore.scale  <= 100000){
 
+                getMapNum('county',mapStore.currentNum).then(res =>{
 
+                  debugger
 
+                  let data = res.data.data;
 
+                  let zxCount = 0;
 
+                  let zxList = ['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区']
 
+                  data.forEach(item =>{
 
+                    if(zxList.indexOf(item.name) > -1){
 
+                      zxCount += item.value * 1;
 
+                    }
 
+                  })
 
+                  data.push({
 
+                    name:"中心城区",
 
+                    value:zxCount
 
+                  })
 
+                  debugger
 
+                  AreaJsonRankShow({
 
+                    type:"zx",
 
+                    status:"show",
 
+                    data:data
 
+                  });
 
+                })
 
+              }else if(scale > 80000 && mapStore.scale  <= 80000 ){
 
+                debugger
 
+                getMapNum('county',mapStore.currentNum).then(res =>{
 
+                  debugger
 
+                  let data = res.data.data
 
+                  AreaJsonRankShow({
 
+                    type:"qx",
 
+                    status:"show",
 
+                    data:data
 
+                  });
 
+                })
 
+              }else if(scale < 70000 && mapStore.scale  >= 70000){
 
+                getMapNum('street',mapStore.currentNum).then(res =>{
 
+                  debugger
 
+                  let data = res.data.data
 
+                  AreaJsonRankShow({
 
+                    type:"jz",
 
+                    status:"show",
 
+                    data:data
 
+                  });
 
+                })
 
+              }
 
+              if(scale < 6000 && mapStore.scale  >= 6000){
 
+                debugger
 
+                FeatureThreeDimension({
 
+                  url:mapStore.currentLayer.ADDRESS,
 
+                  token:mapStore.currentLayer.TOKEN,
 
+                  status:"show"
 
+                });
 
+              }else if(scale > 6000 && mapStore.scale  <= 6000){
 
+                debugger
 
+                FeatureThreeDimension({
 
+                  url:mapStore.currentLayer.ADDRESS,
 
+                  token:mapStore.currentLayer.TOKEN,
 
+                  status:"hide"
 
+                });
 
+              }
 
+            }
 
+            mapStore.scale = scale;
 
+            break;
 
+        }
 
+      })
 
     })
 
   }
 
 }

+ 231 - 51
src/views/c-cpns/ServiceTree.vue
View File 

@@ -2,27 +2,61 @@
 
   <div id="serviceTree" v-show="mapStore.layerShow" :class="[mapStore.left_board?'switch-left-active':'switch-left']">
 
     <div class="common-title">
 
       <span>图层</span>
 
+      <div class="title-right">
 
+        <el-switch
 
+            v-model="layerModel"
 
+            size="middle"
 
+            @change="changeLayerModel"
 
+            active-text="图层"
 
+            inactive-text="聚类"
 
+        />
 
+      </div>
 
+
 
     </div>
 
     <div class="tree-content scroll">
 
-      <el-tree
 
-          :data="treeData"
 
-          @check="changeChange"
 
-          ref="treeRef"
 
-          show-checkbox
 
-      >
 
-        <template #default="{ node, data }">
 
-          <span  class="custom-tree-label">{{ node.label }}</span>
 
-          <span  v-if="node.isLeaf" class="custom-tree-gl-icon" @click="showLayerGL(data)">
 
+      <template v-if="layerModel">
 
+        <el-tree
 
+            :data="treeData"
 
+            @check="changeChange"
 
+            ref="treeRef"
 
+            show-checkbox
 
+        >
 
+          <template #default="{ node, data }">
 
+            <span  class="custom-tree-label">{{ node.label }}</span>
 
+            <span  v-if="node.isLeaf" class="custom-tree-gl-icon" @click="showLayerGL(data)">
 
             <OfficeBuilding />
 
           </span>
 
-          <span  v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
 
+            <span  v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
 
             <Document />
 
           </span>
 
-          <span  v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
 
+            <span  v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
 
             <Edit />
 
           </span>
 
-        </template>
 
-      </el-tree>
 
+          </template>
 
+        </el-tree>
 
+      </template>
 
+      <template v-else>
 
+        <el-tree
 
+            :data="treeData"
 
+            node-key="labelId"
 
+            @check-change="handleCheckChange"
 
+            ref="treeRef"
 
+            show-checkbox
 
+        >
 
+          <template #default="{ node, data }">
 
+            <span  class="custom-tree-label">{{ node.label }}</span>
 
+            <span  v-if="node.isLeaf" class="custom-tree-gl-icon" @click="showLayerGL(data)">
 
+            <OfficeBuilding />
 
+          </span>
 
+            <span  v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
 
+            <Document />
 
+          </span>
 
+            <span  v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
 
+            <Edit />
 
+          </span>
 
+          </template>
 
+        </el-tree>
 
+      </template>
 
     </div>
 
   </div>
 
 </template>
 
@@ -31,23 +65,57 @@
 
 import {onMounted, ref, watch} from "vue";
 
 import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 
 import {getServiceTree} from "@/service/http.js";
 
-import {AddSingleLayer, FeatureThreeDimension} from "@/unit/map/addLayer.js";
 
+import {AddSingleLayer, AreaJsonRankShow, clearAllLayer, FeatureThreeDimension} from "@/unit/map/addLayer.js";
 
 import {useMapStore} from "@/store/mapStore.js";
 
-import {Edit,Document,OfficeBuilding} from "@element-plus/icons-vue";
 
+import {Edit, Document, OfficeBuilding, Aim} from "@element-plus/icons-vue";
 
+import {getMapNum} from "@/service/map.js";
 
 export default {
 
   name: "ServiceTree",
 
-  components: {CommonTitle,Edit,Document,OfficeBuilding},
 
+  components: {Aim, CommonTitle,Edit,Document,OfficeBuilding},
 
   setup(){
 
     const mapStore = useMapStore()
 
     let treeData = ref([]);
 
     const treeRef = ref(null);
 
     const showGL = ref(false);
 
+    const showGroup = ref(false);
 
     const GLLayer = ref('');
 
-    function getTreeData(){
 
+    const GroupLayer = ref('');
 
+    const layerModel = ref(false);
 
+    function changeLayerModel(item){
 
+      clearAllLayer()
 
+      mapStore.currentLayerList = []
 
+      AreaJsonRankShow({
 
+        status:"hide"
 
+      });
 
+    }
 
+    watch(() => mapStore.currentLayerType,(val) => {
 
+      debugger
 
+      changeLayerModel();
 
+      mapStore.currentNum = null;
 
+      mapStore.currentLayer = null;
 
+      FeatureThreeDimension({
 
+        status:"hide"
 
+      });
 
+      AreaJsonRankShow({
 
+        status:"hide"
 
+      });
 
+      if(mapStore.currentLayerType === "mainPage"){  //首页
 
+        getTreeData("1318");
 
+      }else if(mapStore.currentLayerType === "houseBuilding"){  //房屋建筑
 
+        getTreeData("1319");
 
+      }else{   //市政设施
 
+        getTreeData("1324");
 
+      }
 
+    },{
 
+      immediate:true,
 
+      deep:true
 
+    })
 
+    function getTreeData(labelId){
 
       getServiceTree({
 
         TYPE:"",
 
-        labelId:"1318"
 
+        labelId:labelId
 
       }).then(res =>{
 
+        debugger
 
         let resData =res.data.data.Rows[0].children;
 
         treeData.value = resData;
 
       })
 
@@ -81,52 +149,149 @@ export default {
 
     }
 
     function changeChange(){
 
       let nowChecked = treeRef.value.getCheckedNodes(true);
 
-      //找到原来有现在没有的删除
 
-      for(let i = 0; i < mapStore.currentLayerList.length; i++){
 
-        if(nowChecked.findIndex(i2 =>i2.CODE === mapStore.currentLayerList[i].CODE) == -1){
 
-          AddSingleLayer({
 
-            type:mapStore.currentLayerList[i].TYPE,
 
-            id:mapStore.currentLayerList[i].S_CODE,
 
-            visible:false,
 
-            url:mapStore.currentLayerList[i].ADDRESS,
 
-            opacity:100,
 
-            title:mapStore.currentLayerList[i].label,
 
-            wkid:mapStore.currentLayerList[i].COORDINATE_SYSTEM,
 
-            token:mapStore.currentLayerList[i].TOKEN
 
-          })
 
-          mapStore.currentLayerList.splice(i,1);
 
-          i--;
 
+      //如果是图层
 
+      if(layerModel.value){
 
+        //找到原来有现在没有的删除
 
+        for(let i = 0; i < mapStore.currentLayerList.length; i++){
 
+          if(nowChecked.findIndex(i2 =>i2.CODE === mapStore.currentLayerList[i].CODE) == -1){
 
+            debugger
 
+            AddSingleLayer({
 
+              type:mapStore.currentLayerList[i].TYPE,
 
+              id:mapStore.currentLayerList[i].CODE,
 
+              visible:false,
 
+              url:mapStore.currentLayerList[i].ADDRESS,
 
+              opacity:100,
 
+              title:mapStore.currentLayerList[i].label,
 
+              wkid:mapStore.currentLayerList[i].COORDINATE_SYSTEM,
 
+              token:mapStore.currentLayerList[i].TOKEN
 
+            })
 
+            mapStore.currentLayerList.splice(i,1);
 
+            i--;
 
+          }
 
+        }
 
+        //找到原来没有，现在有的新增
 
+        for(let i = 0; i < nowChecked.length; i++){
 
+          if(mapStore.currentLayerList.findIndex(i2 =>i2.CODE === nowChecked[i].CODE) == -1){
 
+            mapStore.currentLayerList.push(nowChecked[i]);
 
+            debugger
 
+            AddSingleLayer({
 
+              type:nowChecked[i].TYPE,
 
+              id:nowChecked[i].CODE,
 
+              visible:true,
 
+              url:nowChecked[i].ADDRESS,
 
+              opacity:100,
 
+              title:nowChecked[i].label,
 
+              wkid:nowChecked[i].COORDINATE_SYSTEM,
 
+              token:nowChecked[i].TOKEN
 
+            })
 
+          }
 
         }
 
       }
 
-      //找到原来没有，现在有的新增
 
-      for(let i = 0; i < nowChecked.length; i++){
 
-        if(mapStore.currentLayerList.findIndex(i2 =>i2.CODE === nowChecked[i].CODE) == -1){
 
-          mapStore.currentLayerList.push(nowChecked[i]);
 
-          debugger
 
-          AddSingleLayer({
 
-            type:nowChecked[i].TYPE,
 
-            id:nowChecked[i].S_CODE,
 
-            visible:true,
 
-            url:nowChecked[i].ADDRESS,
 
-            opacity:100,
 
-            title:nowChecked[i].label,
 
-            wkid:nowChecked[i].COORDINATE_SYSTEM,
 
-            token:nowChecked[i].TOKEN
 
+    }
 
+    function handleCheckChange(data,checked,indeterminate){
 
+      clearAllLayer();
 
+      if (checked) {
 
+        // 获取所有已选中的节点
 
+        debugger
 
+        const checkedNodes = treeRef.value.getCheckedNodes(true);
 
+        data = checkedNodes[checkedNodes.length -1];
 
+        mapStore.currentNum = data.UUID;
 
+        mapStore.currentLayer = data;
 
+        AddSingleLayer({
 
+          type:data.TYPE,
 
+          id:data.CODE,
 
+          visible:true,
 
+          url:data.ADDRESS,
 
+          opacity:100,
 
+          title:data.label,
 
+          wkid:data.COORDINATE_SYSTEM,
 
+          token:data.TOKEN
 
+        })
 
+        // 只保留当前选中的节点
 
+        // checkedNodes.forEach(node => {
 
+        //   debugger
 
+        //   if (node.labelId !== data.labelId) {
 
+        //     treeRef.value.setChecked(node.labelId,false,true)
 
+        //   }
 
+        // });
 
+        if (checkedNodes.length > 1) {
 
+          treeRef.value.setCheckedKeys([data.labelId])
 
+        }
 
+        if(mapStore.scale > 100000){
 
+          getMapNum('county',mapStore.currentNum).then(res =>{
 
+            debugger
 
+            let data = res.data.data;
 
+            let zxCount = 0;
 
+            let zxList = ['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区']
 
+            data.forEach(item =>{
 
+              if(zxList.indexOf(item.name) > -1){
 
+                zxCount += item.value * 1;
 
+              }
 
+            })
 
+            data.push({
 
+              name:"中心城区",
 
+              value:zxCount
 
+            })
 
+            debugger
 
+            AreaJsonRankShow({
 
+              type:"zx",
 
+              status:"show",
 
+              data:data
 
+            });
 
+          })
 
+        }else if(mapStore.scale > 80000){
 
+          getMapNum('county',mapStore.currentNum).then(res =>{
 
+            debugger
 
+            let data = res.data.data
 
+            AreaJsonRankShow({
 
+              type:"qx",
 
+              status:"show",
 
+              data:data
 
+            });
 
           })
 
+        }else{
 
+          getMapNum('street',mapStore.currentNum).then(res =>{
 
+            debugger
 
+            let data = res.data.data
 
+            AreaJsonRankShow({
 
+              type:"jz",
 
+              status:"show",
 
+              data:data
 
+            });
 
+          })
 
+        }
 
+        if(mapStore.scale < 6000){
 
+          FeatureThreeDimension({
 
+            url:mapStore.currentLayer.ADDRESS,
 
+            token:mapStore.currentLayer.TOKEN,
 
+            status:"show"
 
+          });
 
         }
 
+      }else{
 
+        mapStore.currentNum = null;
 
+        mapStore.currentLayer = null;
 
+        FeatureThreeDimension({
 
+          status:"hide"
 
+        });
 
+        AreaJsonRankShow({
 
+          status:"hide"
 
+        });
 
       }
 
     }
 
-    onMounted(()=>{
 
-      getTreeData()
 
-    })
 
+    // onMounted(()=>{
 
+    //   getTreeData()
 
+    // })
 
     return {
 
       mapStore,
 
       treeData,
 
       changeChange,
 
+      handleCheckChange,
 
       treeRef,
 
       applyData,
 
       showLayerGL,
 
-      showDetailDialog
 
+      showDetailDialog,
 
+      layerModel,
 
+      changeLayerModel
 
     }
 
   }
 
 }
 
@@ -142,6 +307,13 @@ export default {
 
   .custom-tree-label{
 
     font-size: 16px;
 
   }
 
+  .custom-tree-group-icon{
 
+    position: absolute;
 
+    right: 100px;
 
+    width: 16px;
 
+    height: 16px;
 
+    font-size: 10px;
 
+  }
 
   .custom-tree-gl-icon{
 
     position: absolute;
 
     right: 70px;
 
@@ -179,6 +351,11 @@ export default {
 
     height: 37px;
 
     background: url("@/assets/imgs/tkxbt.png") no-repeat;
 
     background-size: 100% 100%;
 
+    display: flex;
 
+    flex-direction: row;
 
+    flex-wrap: nowrap;
 
+    justify-content: space-between;
 
+    align-items: stretch;
 
     span {
 
       font-family: YouSheBiaoTiHei;
 
       font-weight: 400;
 
@@ -190,6 +367,9 @@ export default {
 
       -webkit-background-clip: text;
 
       -webkit-text-fill-color: transparent;
 
     }
 
+    .title-right{
 
+      padding-right: 60px;
 
+    }
 
   }
 
   .tree-content{
 
     width: 100%;

+ 1 - 1
src/views/c-cpns/VisualizationBottom.vue
View File 

@@ -34,7 +34,7 @@ export default {
 
         id:"03",
 
         name:"municipalFacilities",
 
         chosen:false,
 
-        label:"历史"
 
+        label:"历史库"
 
       }
 
     ])
 
     function changePath(item){

+ 6 - 3
src/views/c-cpns/VisualizationHeader.vue
View File 

@@ -2,7 +2,7 @@
 
   <div id="visualizationHeader">
 
     <div class="left-title">
 
       <span>
 
-         上海市住建行业基础数据应用系统
 
+         上海市住建行业基础数据库应用系统
 
       </span>
 
     </div>
 
     <div class="top-menu">
 
@@ -22,8 +22,8 @@
 
 import {ref} from "vue";
 
 import router from "@/router/index.js";
 
 import {useUserStore} from "@/store/userStore.js";
 
+import {useMapStore} from "@/store/mapStore.js";
 
 import {User,SwitchButton} from "@element-plus/icons-vue";
 
-
 
 export default {
 
   name: "VisualizationHeader",
 
   components:{
 
@@ -32,6 +32,7 @@ export default {
 
   },
 
   setup(){
 
     let userStore = useUserStore();
 
+    let mapStore = useMapStore();
 
     let menuList = ref([
 
       {
 
         id:"01",
 
@@ -58,6 +59,8 @@ export default {
 
       menuList.value.forEach((i)=>{
 
         if(i.name == item.name){
 
           i.chosen = true;
 
+          debugger
 
+          mapStore.currentLayerType = item.name;
 
           router.push({name:item.name})
 
         }else{
 
           i.chosen = false;
 
@@ -161,4 +164,4 @@ export default {
 
     }
 
   }
 
 }
 
-</style>
 
+</style>

+ 15 - 15
src/views/c-views/visualizationPart/houseBuilding/HouseBuilding.vue
View File 

@@ -1,23 +1,23 @@
 
 <template>
 
-	<div id="houseBuilding">
 
-		<HouseBuildingLeft />
 
-		<HouseBuildingRight />
 
-	</div>
 
+  <div id="houseBuilding">
 
+    <HouseBuildingLeft />
 
+    <HouseBuildingRight />
 
+  </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";
 
-	export default {
 
-		name: "HouseBuilding",
 
-		components: {HouseBuildingLeft, HouseBuildingRight}
 
-	}
 
+import HouseBuildingLeft from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingLeft/HouseBuildingLeft.vue";
 
+import HouseBuildingRight from "@/views/c-views/visualizationPart/houseBuilding/HouseBuildingRight/HouseBuildingRight.vue";
 
+export default {
 
+  name: "HouseBuilding",
 
+  components: {HouseBuildingLeft, HouseBuildingRight}
 
+}
 
 </script>
 
 
 <style scoped lang="scss">
 
-	#houseBuilding {
 
-		position: absolute;
 
-		width: 100%;
 
-		z-index: 2;
 
-	}
 
+#houseBuilding {
 
+  position: absolute;
 
+  width: 100%;
 
+  z-index: 2;
 
+}
 
 </style>

+ 35 - 35
src/views/c-views/visualizationPart/houseBuilding/HouseBuildingLeft/HouseBuildingLeft.vue
View File 

@@ -1,43 +1,43 @@
 
 <template>
 
-	<div id="mainPageLeft" :class="[useMapStore().left_board?'switch-left-active':'switch-left']">
 
-		<!-- 建筑概览 -->
 
-		<BuildingOverview></BuildingOverview>
 
-		<!-- 房屋风险 -->
 
-		<HousingRisk></HousingRisk>
 
-		<!-- 抗震加固 -->
 
-		<SeismicReinforcement></SeismicReinforcement>
 
-		<!-- 房屋安全 -->
 
-		<HousingSecurity></HousingSecurity>
 
-		<!-- 城镇房屋设防烈度 -->
 
-		<FortificationIntensity></FortificationIntensity>
 
-	</div>
 
+  <div id="mainPageLeft" :class="[useMapStore().left_board?'switch-left-active':'switch-left']">
 
+    <!-- 建筑概览 -->
 
+    <BuildingOverview></BuildingOverview>
 
+    <!-- 房屋风险 -->
 
+    <HousingRisk></HousingRisk>
 
+    <!-- 抗震加固 -->
 
+    <SeismicReinforcement></SeismicReinforcement>
 
+    <!-- 房屋安全 -->
 
+    <HousingSecurity></HousingSecurity>
 
+    <!-- 城镇房屋设防烈度 -->
 
+    <FortificationIntensity></FortificationIntensity>
 
+  </div>
 
 </template>
 
 
 <script setup>
 
-	import HousingRisk from '@/components/HousingRisk.vue'
 
-	import SeismicReinforcement from '@/components/SeismicReinforcement.vue'
 
-	import HousingSecurity from '@/components/HousingSecurity.vue'
 
-	import BuildingOverview from '@/components/BuildingOverview.vue'
 
-	import FortificationIntensity from '@/components/FortificationIntensity.vue'
 
-  import {useMapStore} from "@/store/mapStore.js";
 
+import HousingRisk from '@/components/HousingRisk.vue'
 
+import SeismicReinforcement from '@/components/SeismicReinforcement.vue'
 
+import HousingSecurity from '@/components/HousingSecurity.vue'
 
+import BuildingOverview from '@/components/BuildingOverview.vue'
 
+import FortificationIntensity from '@/components/FortificationIntensity.vue'
 
+import {useMapStore} from "@/store/mapStore.js";
 
 </script>
 
 
 <style scoped lang="scss">
 
-	#mainPageLeft {
 
-		position: absolute;
 
-		left: 20px;
 
-		top: 87px;
 
-		width: 420px;
 
-		height: 973px;
 
-		background-color: rgba(0, 22, 52, 0.75);
 
-	}
 
-  .switch-left-active{
 
-    transition-property: transform;
 
-    transition-duration:1s;
 
-  }
 
-  .switch-left{
 
-    transition-property: transform;
 
-    transition-duration:1s;
 
-    transform: translateX(-480px);
 
-  }
 
+#mainPageLeft {
 
+  position: absolute;
 
+  left: 20px;
 
+  top: 87px;
 
+  width: 420px;
 
+  height: 973px;
 
+  background-color: rgba(0, 22, 52, 0.75);
 
+}
 
+.switch-left-active{
 
+  transition-property: transform;
 
+  transition-duration:1s;
 
+}
 
+.switch-left{
 
+  transition-property: transform;
 
+  transition-duration:1s;
 
+  transform: translateX(-480px);
 
+}
 
 </style>

+ 18 - 18
src/views/c-views/visualizationPart/mainPage/MainPage.vue
View File 

@@ -1,26 +1,26 @@
 
 <template>
 
-	<div id="mainPage">
 
-		<MainPageLeft />
 
-		<MainPageRight />
 
-	</div>
 
+  <div id="mainPage">
 
+    <MainPageLeft />
 
+    <MainPageRight />
 
+  </div>
 
 </template>
 
 
 <script>
 
-	import MainPageLeft from "@/views/c-views/visualizationPart/mainPage/mainPageLeft/MainPageLeft.vue";
 
-	import MainPageRight from "@/views/c-views/visualizationPart/mainPage/mainPageRight/MainPageRight.vue";
 
-	export default {
 
-		name: "MainPage",
 
-		components: {
 
-			MainPageRight,
 
-			MainPageLeft
 
-		}
 
-	}
 
+import MainPageLeft from "@/views/c-views/visualizationPart/mainPage/mainPageLeft/MainPageLeft.vue";
 
+import MainPageRight from "@/views/c-views/visualizationPart/mainPage/mainPageRight/MainPageRight.vue";
 
+export default {
 
+  name: "MainPage",
 
+  components: {
 
+    MainPageRight,
 
+    MainPageLeft
 
+  }
 
+}
 
 </script>
 
 
 <style scoped lang="scss">
 
-	#mainPage {
 
-		position: absolute;
 
-		width: 100%;
 
-		z-index: 2;
 
-	}
 
+#mainPage {
 
+  position: absolute;
 
+  width: 100%;
 
+  z-index: 2;
 
+}
 
 </style>

+ 35 - 35
src/views/c-views/visualizationPart/mainPage/mainPageLeft/MainPageLeft.vue
View File 

@@ -1,43 +1,43 @@
 
 <template>
 
-	<div id="mainPageLeft" :class="[useMapStore().left_board?'switch-left-active':'switch-left']" >
 
-		<!-- 建筑概览 -->
 
-		<BuildingOverview></BuildingOverview>
 
-		<!-- 房屋风险 -->
 
-		<HousingRisk></HousingRisk>
 
-		<!-- 抗震加固 -->
 
-		<SeismicReinforcement></SeismicReinforcement>
 
-		<!-- 房屋安全 -->
 
-		<HousingSecurity></HousingSecurity>
 
-		<!-- 城镇房屋设防烈度 -->
 
-		<FortificationIntensity></FortificationIntensity>
 
-	</div>
 
+  <div id="mainPageLeft" :class="[useMapStore().left_board?'switch-left-active':'switch-left']" >
 
+    <!-- 建筑概览 -->
 
+    <BuildingOverview></BuildingOverview>
 
+    <!-- 房屋风险 -->
 
+    <HousingRisk></HousingRisk>
 
+    <!-- 抗震加固 -->
 
+    <SeismicReinforcement></SeismicReinforcement>
 
+    <!-- 房屋安全 -->
 
+    <HousingSecurity></HousingSecurity>
 
+    <!-- 城镇房屋设防烈度 -->
 
+    <FortificationIntensity></FortificationIntensity>
 
+  </div>
 
 </template>
 
 
 <script setup>
 
-	import HousingRisk from '@/components/HousingRisk.vue'
 
-	import SeismicReinforcement from '@/components/SeismicReinforcement.vue'
 
-	import HousingSecurity from '@/components/HousingSecurity.vue'
 
-	import BuildingOverview from '@/components/BuildingOverview.vue'
 
-	import FortificationIntensity from '@/components/FortificationIntensity.vue'
 
-	import {useMapStore} from "@/store/mapStore.js";
 
+import HousingRisk from '@/components/HousingRisk.vue'
 
+import SeismicReinforcement from '@/components/SeismicReinforcement.vue'
 
+import HousingSecurity from '@/components/HousingSecurity.vue'
 
+import BuildingOverview from '@/components/BuildingOverview.vue'
 
+import FortificationIntensity from '@/components/FortificationIntensity.vue'
 
+import {useMapStore} from "@/store/mapStore.js";
 
 </script>
 
 
 <style scoped lang="scss">
 
-	#mainPageLeft {
 
-		position: absolute;
 
-		left: 20px;
 
-		top: 87px;
 
-		width: 420px;
 
-		height: 973px;
 
-		background-color: rgba(0, 22, 52, 0.75);
 
-	}
 
-  .switch-left-active{
 
-    transition-property: transform;
 
-    transition-duration:1s;
 
-  }
 
-  .switch-left{
 
-    transition-property: transform;
 
-    transition-duration:1s;
 
-    transform: translateX(-480px);
 
-  }
 
+#mainPageLeft {
 
+  position: absolute;
 
+  left: 20px;
 
+  top: 87px;
 
+  width: 420px;
 
+  height: 973px;
 
+  background-color: rgba(0, 22, 52, 0.75);
 
+}
 
+.switch-left-active{
 
+  transition-property: transform;
 
+  transition-duration:1s;
 
+}
 
+.switch-left{
 
+  transition-property: transform;
 
+  transition-duration:1s;
 
+  transform: translateX(-480px);
 
+}
 
 </style>

+ 38 - 38
src/views/c-views/visualizationPart/mainPage/mainPageRight/MainPageRight.vue
View File 

@@ -1,48 +1,48 @@
 
 <template>
 
-	<div id="mainPageRight" :class="[useMapStore().right_board?'switch-right-active':'switch-right']">
 
-		<!-- 市政设施类型 -->
 
-		<MunicipalFacilities></MunicipalFacilities>
 
-		<!-- 道路预警 -->
 
-		<RoadWarnings></RoadWarnings>
 
-		<!-- 桥梁隐患 -->
 
-		<BridgeHazards></BridgeHazards>
 
-		<!-- 供水管线敷设方式 -->
 
-		<PipelineLaying></PipelineLaying>
 
-		<!-- 供水管线风险 -->
 
-		<PipelineRisk></PipelineRisk>
 
-		
-		
-		
-	</div> 
+  <div id="mainPageRight" :class="[useMapStore().right_board?'switch-right-active':'switch-right']">
 
+    <!-- 市政设施类型 -->
 
+    <MunicipalFacilities></MunicipalFacilities>
 
+    <!-- 道路预警 -->
 
+    <RoadWarnings></RoadWarnings>
 
+    <!-- 桥梁隐患 -->
 
+    <BridgeHazards></BridgeHazards>
 
+    <!-- 供水管线敷设方式 -->
 
+    <PipelineLaying></PipelineLaying>
 
+    <!-- 供水管线风险 -->
 
+    <PipelineRisk></PipelineRisk>
 
+
 
+
 
+
 
+  </div>
 
 </template>
 
 
 <script setup>
 
-	import MunicipalFacilities from '@/components/MunicipalFacilities.vue'
 
-	import RoadWarnings from '@/components/RoadWarnings.vue'
 
-	import BridgeHazards from '@/components/BridgeHazards.vue'
 
-	import PipelineLaying from '@/components/PipelineLaying.vue'
 
-	import PipelineRisk from '@/components/PipelineRisk.vue'
 
-  import {useMapStore} from "@/store/mapStore.js";
 
+import MunicipalFacilities from '@/components/MunicipalFacilities.vue'
 
+import RoadWarnings from '@/components/RoadWarnings.vue'
 
+import BridgeHazards from '@/components/BridgeHazards.vue'
 
+import PipelineLaying from '@/components/PipelineLaying.vue'
 
+import PipelineRisk from '@/components/PipelineRisk.vue'
 
+import {useMapStore} from "@/store/mapStore.js";
 
 
 
 </script>
 
 
 <style scoped lang="scss">
 
-	#mainPageRight {
 
-		position: absolute;
 
-		right: 20px;
 
-		top: 87px;
 
-		width: 420px;
 
-		height: 973px;
 
-		background-color: rgba(0,22,52,0.75);
 
-	}
 
-  .switch-right-active{
 
-    transition-property: transform;
 
-    transition-duration:1s;
 
-  }
 
-  .switch-right{
 
-    transition-property: transform;
 
-    transition-duration:1s;
 
-    transform: translateX(480px);
 
-  }
 
+#mainPageRight {
 
+  position: absolute;
 
+  right: 20px;
 
+  top: 87px;
 
+  width: 420px;
 
+  height: 973px;
 
+  background-color: rgba(0,22,52,0.75);
 
+}
 
+.switch-right-active{
 
+  transition-property: transform;
 
+  transition-duration:1s;
 
+}
 
+.switch-right{
 
+  transition-property: transform;
 
+  transition-duration:1s;
 
+  transform: translateX(480px);
 
+}
 
 </style>

+ 37 - 37
src/views/c-views/visualizationPart/municipalFacilities/MunicipalFacilitiesRight/MunicipalFacilitiesRight.vue
View File 

@@ -1,45 +1,45 @@
 
 <template>
 
-	<div id="mainPageRight"  :class="[useMapStore().right_board?'switch-right-active':'switch-right']">
 
-		<!-- 桥梁类别 -->
 
-		<BridgeCategory></BridgeCategory>
 
-		<!-- 桥梁隐患 -->
 
-		<BridgeHazards></BridgeHazards>
 
-		<!-- 供水管线敷设方式 -->
 
-		<PipelineLaying></PipelineLaying>
 
-		<!-- 供水管线沿线灾害隐患 -->
 
-		<DisasterHazards></DisasterHazards>
 
-		<!-- 供水管线风险 -->
 
-		<PipelineRisk></PipelineRisk>
 
-		
-		
-	</div> 
+  <div id="mainPageRight"  :class="[useMapStore().right_board?'switch-right-active':'switch-right']">
 
+    <!-- 桥梁类别 -->
 
+    <BridgeCategory></BridgeCategory>
 
+    <!-- 桥梁隐患 -->
 
+    <BridgeHazards></BridgeHazards>
 
+    <!-- 供水管线敷设方式 -->
 
+    <PipelineLaying></PipelineLaying>
 
+    <!-- 供水管线沿线灾害隐患 -->
 
+    <DisasterHazards></DisasterHazards>
 
+    <!-- 供水管线风险 -->
 
+    <PipelineRisk></PipelineRisk>
 
+
 
+
 
+  </div>
 
 </template>
 
 
 <script setup>
 
-	import BridgeCategory from '@/components/BridgeCategory.vue'
 
-	import BridgeHazards from '@/components/BridgeHazards.vue'
 
-	import PipelineLaying from '@/components/PipelineLaying.vue'
 
-	import DisasterHazards from '@/components/DisasterHazards.vue'
 
-	import PipelineRisk from '@/components/PipelineRisk.vue'
 
-  import {useMapStore} from "@/store/mapStore.js";
 
+import BridgeCategory from '@/components/BridgeCategory.vue'
 
+import BridgeHazards from '@/components/BridgeHazards.vue'
 
+import PipelineLaying from '@/components/PipelineLaying.vue'
 
+import DisasterHazards from '@/components/DisasterHazards.vue'
 
+import PipelineRisk from '@/components/PipelineRisk.vue'
 
+import {useMapStore} from "@/store/mapStore.js";
 
 </script>
 
 
 <style scoped lang="scss">
 
-	#mainPageRight {
 
-		position: absolute;
 
-		right: 20px;
 
-		top: 87px;
 
-		width: 420px;
 
-		height: 973px;
 
-		background-color: rgba(0,22,52,0.75);
 
-	}
 
-  .switch-right-active{
 
-    transition-property: transform;
 
-    transition-duration:1s;
 
-  }
 
-  .switch-right{
 
-    transition-property: transform;
 
-    transition-duration:1s;
 
-    transform: translateX(480px);
 
-  }
 
+#mainPageRight {
 
+  position: absolute;
 
+  right: 20px;
 
+  top: 87px;
 
+  width: 420px;
 
+  height: 973px;
 
+  background-color: rgba(0,22,52,0.75);
 
+}
 
+.switch-right-active{
 
+  transition-property: transform;
 
+  transition-duration:1s;
 
+}
 
+.switch-right{
 
+  transition-property: transform;
 
+  transition-duration:1s;
 
+  transform: translateX(480px);
 
+}
 
 </style>