zzy + 样式修改、图层接入

src/components/BuildingHeight.vue

@@ -14,11 +14,15 @@
 		nextTick
 	} from 'vue'
 	import {
-		setEchartsNSolidBar,NoffsetX,NoffsetY,NCubeLeft,NCubeRight,NCubeTop,nxAxisData,nSeriesData,nColorArr
+		setEchartsNSolidBar
 	} from '../echarts/option.js'
   import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
+  import {selectJzgdCount} from "@/service/http.js";
 	onMounted(() => {
-		setEchartsNSolidBar(document.getElementById("chartFour"))
+    selectJzgdCount().then(res =>{
+      let data = res.data.data.Rows;
+      setEchartsNSolidBar(document.getElementById("chartFour"),data)
+    });
 	})
 </script>
 

src/components/BuildingOverview.vue

@@ -118,7 +118,7 @@
 			num.value = total.toFixed()
 			arr.value.forEach(item=>{
 				item["per"] = ((Number(item.num)/num.value)*100).toFixed(2) + '%';
-        item["per_show"] = ((Number(item.num)/num.value)*100 + 5).toFixed(2) + '%'
+        item["per_show"] = ((Number(item.num)/num.value)*100 + 1).toFixed(2) + '%'
 			})
 		})
 		

src/components/FortificationIntensity.vue

@@ -110,28 +110,26 @@
 				width: 100%;
 				display: flex;
 				justify-content: space-between;
-				height: 15px;
-				margin-top: 14px;
+				height: 30px;
+				margin-top: 10px;
 				.left{
 					width: 70px;
-					height: 15px;
 					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%);
+					//text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
+					background: linear-gradient(0deg, #5FB3DD 0%, #FFFFFF 100%);
 					-webkit-background-clip: text;
 					-webkit-text-fill-color: transparent;
 				}
 				.right{
 					min-width: 75px;
-					height: 13px;
 					font-family: YouSheBiaoTiHei;
 					font-weight: bold;
 					font-size: 18px;
 					color: #3DA6FE;
-					text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
+					//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;
@@ -142,7 +140,7 @@
 				height: 7px;
 				display: flex;
 				justify-content: flex-start;
-				margin-top: 17px;
+				margin-top: 10px;
 				.bg{
 					height: 7px;
 					margin-right: 2px;
@@ -155,10 +153,12 @@
 				margin-top: 15px;
 				display: flex;
 				flex-wrap: wrap;
-				
+				justify-content: flex-start;
+        align-items: center;
 				.item{
-					width: 33.3%;
-					height: 33.3%;
+					width: 31%;
+          padding-left: 2%;
+					height: 31%;
 					box-sizing: border-box;
 					
 					.item_top{

src/components/HousingSecurity.vue

@@ -49,7 +49,7 @@
 		nextTick
 	} from 'vue'
 	import {
-		setEchartsPie,getParametricEquation,getPie3D,option
+		setEchartsPie
 	} from '../echarts/option.js'
 	import {
 		getSelectNcfwAqjdCount
@@ -81,7 +81,7 @@
 					item["className2"] = "color4"
 				}
 			})
-			//setEchartsPie(document.getElementById("chartOne"))
+			setEchartsPie(document.getElementById("chartOne"),arr.value)
 		})
 		
 	})
@@ -105,12 +105,13 @@
 			display: flex;
 			
 			align-items: center;
-	
+
 			#chartOne {
 				width: 50%;
-				height: 70%;
-				background: url("@/assets/imgs/bpdt.png") no-repeat;
-			}
+				height: 90%;
+        background-size: 183px 75px;
+        background: url("@/assets/imgs/bpdt.png") center 90% no-repeat;
+      }
 			.right{
 				width: 50%;
 				height: 100%;
@@ -122,7 +123,7 @@
 						font-weight: bold;
 						font-size: 14px;
 						color: #FFFFFF;
-						text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
+						//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;
@@ -133,7 +134,7 @@
 						font-weight: bold;
 						font-size: 18px;
 						color: #3DA6FE;
-						text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
+						//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;

src/components/MunicipalFacilities.vue

@@ -19,7 +19,7 @@
 				</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>
@@ -129,10 +129,15 @@
 
 				.item_bottom {
 					height: 4px;
-					//border: 1px solid skyblue;
-					//background: linear-gradient(270deg, #388BFC);
-
-					//margin-top: 10px;
+          margin-top: 6px;
+          position: relative;
+          img{
+            width: 12px;
+            height: 12px;
+            position: absolute;
+            bottom: -4px;
+            right: -6px;
+          }
 				}
 			}
 		}

src/components/RoadGrade.vue

@@ -48,9 +48,9 @@
 		onMounted,
 		nextTick
 	} from 'vue'
-	import {
-		setEchartsPie,getParametricEquation,getPie3D,option,optionArr
-	} from '../echarts/option.js'
+  import {
+    setEchartsPie, setRoadEchartsPie
+  } from '../echarts/option.js'
 	import {
 		getSelectDldjCount
 	} from '../service/http.js'
@@ -81,7 +81,7 @@
 					item["className2"] = "color4"
 				}
 			})
-			setEchartsPie(document.getElementById("chartOne"))
+      setRoadEchartsPie(document.getElementById("chartOne"),arr.value)
 		})
 		
 	})
@@ -120,9 +120,10 @@
 			align-items: center;
 	
 			#chartOne {
-				width: 45%;
-				height: 70%;
-				background: url("@/assets/imgs/bpdt.png") no-repeat;
+        width: 45%;
+        height: 90%;
+        background-size: 183px 75px;
+        background: url("@/assets/imgs/bpdt.png") center 90% no-repeat;
 			}
 			.right{
 				width: 55%;
@@ -135,7 +136,7 @@
 						font-weight: bold;
 						font-size: 14px;
 						color: #FFFFFF;
-						text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
+						//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;
@@ -146,7 +147,7 @@
 						font-weight: bold;
 						font-size: 18px;
 						color: #3DA6FE;
-						text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
+						//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;

src/components/StructureType.vue

@@ -18,7 +18,7 @@
 					</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>
@@ -164,7 +164,16 @@
 			
 				.item_bottom {
 					height: 4px;
-					margin-top: 10px;
+          margin-top: 2px;
+          margin-bottom: 4px;
+          position: relative;
+          img{
+            width: 12px;
+            height: 12px;
+            position: absolute;
+            bottom: -4px;
+            right: -6px;
+          }
 				}
 			}
 		}

src/components/StructureTypeStatistics.vue

@@ -14,7 +14,7 @@
 		nextTick
 	} from 'vue'
 	import {
-		setEchartsSBar,NoffsetX,NoffsetY,NCubeLeft,NCubeRight,NCubeTop,nxAxisData,nSeriesData,nColorArr
+		setEchartsSBar
 	} from '../echarts/option.js'
   import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 	

src/service/http.js

@@ -179,4 +179,14 @@ export function getSelectJzcsCount(){
 			
 		}
     })
+}
+
+//建筑高度
+export function selectJzgdCount(){
+    return requestPost({
+        url:'/fwzt/selectJzgdCount',
+        data:{
+
+        }
+    })
 }