四情模块设置子路由，图层加载

src/router/index.js

@@ -30,15 +30,15 @@ export const constantRoutes = [
 	{
 		path: '/home',
 		component: () => import('/src/views/Main/MainView.vue'),
-		children: [ {
-				path: 'table',//一张图
+		children: [{
+				path: 'table', //一张图
 				name: 'table',
 				component: () => import('../views/Table/Table.vue'),
 				meta: {
 					keepAlive: false // 不需要缓存
 				}
-			},{
-				path: 'Map3d',
+			}, {
+				path: 'Map3d', //灌溉设备
 				name: 'Map3d',
 				component: () => import('../views/Map3d/Map3DMain.vue'),
 				meta: {
@@ -52,12 +52,50 @@ export const constantRoutes = [
 					keepAlive: false // 不需要缓存
 				}
 			}, {
-				path: 'test',//四情
-				name: 'test',
-				component: () => import('../views/test/test.vue'),
+				
+				path: 'siqing', //四情
+				name: 'siqing',
+				component: () => import('../views/siqing/siqing.vue'),
+				children: [{
+					path: 'chongqing',
+					name: 'chongqing',
+					component: () => import('../views/test/test.vue'),
+					meta: {
+						keepAlive: false // 不需要缓存
+					}
+				}, {
+					path: 'miaoqing',
+					name: 'miaoqing',
+					component: () => import('../views/miaoqing/miaoqing.vue'),
+					meta: {
+						keepAlive: false // 不需要缓存
+					}
+				}, {
+					path: 'turang',
+					name: 'turang',
+					component: () => import('../views/turang/turang.vue'),
+					meta: {
+						keepAlive: false // 不需要缓存
+					}
+				}, {
+					path: 'qixiang',
+					name: 'qixiang',
+					component: () => import('../views/qixiang/qixiang.vue'),
+					meta: {
+						keepAlive: false // 不需要缓存
+					}
+				}, {
+					path: '',
+					name: 'chongqing',
+					component: () => import('../views/test/test.vue'),
+					meta: {
+						keepAlive: false // 不需要缓存
+					}
+				}],
 				meta: {
 					keepAlive: false // 不需要缓存
-				}
+				},
+				
 			}, {
 				path: '',
 				name: 'map',
@@ -99,7 +137,7 @@ router.beforeEach((to, from, next) => {
 	NProgress.start();
 
 	// token存在的情况
-	if (store.roleId || to.path=="/login") {
+	if (store.roleId || to.path == "/login") {
 		next();
 		NProgress.done();
 	} else {

src/views/Main/components/ZhHeader.vue

@@ -13,7 +13,7 @@
 			<div :class="[yztTitle?'YztTitle':'YztXzTitle']" @click="slideTitle('YztTitle')"></div>
 		</router-link>
 
-		<router-link to="/home/test">
+		<router-link to="/home/siqing">
 			<div :class="[sqTitle?'SqTitle':'SqXzTitle']" @click="slideTitle('SqTitle')"></div>
 		</router-link>
 

src/views/Main/components/layer.vue

@@ -309,6 +309,7 @@
 				await new Promise((resolve, reject) => {
 					switch (data.loadtype) {
 						case "GeoJsonPoint": //GeoJsonPoint
+							console.log(checked)
 							if (checked) {
 								data.isinit = '1';
 
@@ -336,9 +337,11 @@
 								});
 
 							} else {
+								console.log('移除图层')
 								jt3d.layer.removeDataSources({
 									serviceId: _serviceId,
 								}).then(res => {
+									console.log('移除图层')
 									data.isinit = '0';
 								});
 							}

src/views/Map3d/components/sbyxjc.vue

@@ -149,7 +149,7 @@
 						let popup = new that.jt3dSDK.PopupWindow.HtmlWindow(window["viewer"], [120.623,
 							36.9157
 						], "设备信息", html, 50);
-						this.createCircle()
+						// this.createCircle()
 						// Drawtools._createCircle( Cesium.Cartesian3.fromDegrees(120.623, 36.9157),'dynamicCircle')
 					})
 				})
@@ -167,28 +167,29 @@
 			},
 			//创建动态圆
 			createCircle() {
-				let entity = window.viewer.entities.add({
-					position: Cesium.Cartesian3.fromDegrees(120.623,
-						36.9157),
+
+				//定义中心和半径
+				let entity = jt3d._viewer.entities.add({
+					position: Cesium.Cartesian3.fromDegrees(120.623, 36.9157),
 					name: 'Dynamic Circle',
 					description: 'A dynamic circle.',
 				});
 
-				// 添加动态圆形
-				var radius = 2000;
-				var divisions = 100;
+				// // 添加动态圆形
+				// 添加静态圆形
+				var radius = 100;
+				var vertexFormat = Cesium.VertexFormat.POSITION_ONLY;
 
 				var circleGeometry = new Cesium.CircleGeometry({
-					center: entity.position.getValue(), // 动态圆心位置
+					center: entity.position.getValue(), // 圆心位置
 					radius: radius,
-					vertexFormat: Cesium.VertexFormat.POSITION_AND_ST
+					vertexFormat: vertexFormat
 				});
 
+				var geometry = Cesium.CircleGeometry.createGeometry(circleGeometry);
+
 				entity.polygon = new Cesium.PolygonGraphics();
-				entity.polygon.hierarchy = new Cesium.CallbackProperty(function() {
-					var geometry = circleGeometry.createGeometry(Cesium.Ellipsoid.WGS84);
-					return geometry.hierarchy;
-				}, false);
+				entity.polygon.hierarchy = new Cesium.PolygonHierarchy(geometry);
 				entity.polygon.material = Cesium.Material.fromType(Cesium.Material.ColorType);
 				entity.polygon.material.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 0.5);
 			}

src/views/miaoqing/components/BasicInfor.vue

@@ -0,0 +1,142 @@
+<template>
+
+	<div class="Background">
+		<div class="imgback"></div>
+		<div class="ref000" style="font-size: 10rem; ">
+			系统建设应坚持“先进、可靠、实用、落地”的原则，实行“整体规划、分步实施；统一标准、加强管理；先进实用、政策落地”的建设方针。
+		</div>
+	</div>
+
+	<div class="Titles">
+		<div class="leftTitle">
+			<div class='topIcon'>
+				<div class="fontInfo">100</div>
+				<div class="font">地块数量(块)</div>
+			</div>
+			<div class='bottomIcon'>
+				<div class="fontInfo">20.4</div>
+				<div class="font">投资额度(万元)</div>
+				
+			</div>
+
+		</div>
+		<div class="rightTitle">
+			<div class='topRightIcon'>
+				<div class="fontInfo">121.94</div>
+				<div class="font">已完成(亩)</div>
+			</div>
+			<div class='bottomRightIcon'>
+				<div class="fontInfo">112.92</div>
+				<div class="font">累计面积(亩)</div>
+			</div>
+
+		</div>
+	</div>
+
+</template>
+
+<script>
+</script>
+<style scoped>
+	.imgback {
+		background: url('@/assets/images/basic.png') no-repeat;
+		background-size: 100% 100%;
+		width: 100rem;
+		height: 100rem;
+		display: inline-block;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
+	.Background {
+		margin-top: 10rem;
+		margin-left: 5rem;
+		font-size: 14rem;
+		height: 100rem;
+		width: 345rem;
+		position: relative;
+	}
+
+	.ref000 {
+		position: absolute;
+		height: 100rem;
+		width: 235rem;
+		right: 0;
+		top: 0;
+		text-indent: 30rem;
+		/* margin-left: 100rem; */
+		display: inline-block;
+		text-align: left;
+		font-size: 14rem !important;
+		overflow-y:auto
+	}
+	.Titles{
+		width: 100%;
+		
+		
+	}
+
+	.leftTitle {
+		
+		width: 170rem;
+		display: inline-block;
+	}
+
+	.topIcon {
+		margin-top: 15rem;
+		
+		height: 44rem;
+		width: 170rem;
+		background: url('@/assets/images/icon.png') no-repeat;
+		background-size: 30%, 30%;
+	}
+
+	.bottomIcon {
+		
+		margin-top: 15rem;
+		height: 44rem;
+		width: 170rem;
+		background: url('@/assets/images/bottom.png') no-repeat;
+		background-size: 30%, 30%;
+	}
+
+	.topRightIcon {
+		
+		margin-top: 15rem;
+		height: 44rem;
+		width: 170rem;
+		background: url('@/assets/images/rightTop.png') no-repeat;
+		background-size: 30%, 30%;
+	}
+
+	.bottomRightIcon {
+		
+		margin-top: 15rem;
+		height: 44rem;
+		width: 170rem;
+		background: url('@/assets/images/rightBottom.png') no-repeat;
+		background-size: 30%, 30%;
+	}
+
+	.rightTitle {
+		width: 170rem;
+		float: right;
+		display: inline-block
+	}
+
+	.fontInfo {
+		height: 60%;
+		font-size: 24rem;
+		color: rgb(200, 250, 255);
+		margin-left: 40rem;
+		font-weight: bold;
+
+	}
+
+	.font {
+		font-size: 16rem;
+		color: rgb(200, 250, 255);
+		margin-left: 40rem;
+	}
+</style>

src/views/miaoqing/components/TianluEngin.vue

@@ -0,0 +1,402 @@
+<template>
+	<div class="Chart">
+		<div class="fonts">
+			100%
+		</div>
+		<div class="bottomFonts">
+			道路通达率
+		</div>
+		
+	</div>
+	<div class="text">
+		<div class="left">
+			<div class="leftTop">11.2km</div>
+			<div class="leftMid">田路总长度</div>
+			<div class="leftTop">0.8km</div>
+			<div class="leftMid">机耕路长度</div>
+		</div>
+		<div class="right">
+			<div class="rightTop">1.8km</div>
+			<div class="rightMid">主路长度</div>
+			<div class="rightTop">0.4km</div>
+			<div class="rightMid">生产路长度</div>
+		</div>
+
+	</div>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				option: {},
+				value: 50,
+				angle: 30
+			}
+		},
+		created() {
+
+		},
+		mounted() {
+			
+		},
+		methods: {
+			/* getCirlPoint(x0, y0, r, angle) {
+				let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
+				let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
+				return {
+					x: x1,
+					y: y1
+				}
+			},
+			typeCharts() {
+				this.option = this.getOption();
+				// var chartDom = document.getElementById('echarts');
+				// var myChart = echarts.init(chartDom);
+				// myChart.setOption(option, true);
+			},
+			getOption(data) {
+				let angle = 30;
+				let option = {
+					title: {
+						text: '{a|' + '企业' + '}',
+						x: 'center',
+						y: 'center',
+						textStyle: {
+							rich: {
+								a: {
+									fontSize: 20,
+									color: '#29EEF3'
+					   },
+
+								c: {
+									fontSize: 16,
+									color: '#ffffff',
+									// padding: [5,0]
+								}
+							}
+						}
+					},
+					series: [{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								return {
+									type: 'arc',
+									shape: {
+										cx: api.getWidth() / 2,
+										cy: api.getHeight() / 2,
+										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+										startAngle: (0 + angle) * Math.PI / 180,
+										endAngle: (90 + angle) * Math.PI / 180
+									},
+									style: {
+										stroke: "#0CD3DB",
+										fill: "transparent",
+										lineWidth: 1.5
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								return {
+									type: 'arc',
+									shape: {
+										cx: api.getWidth() / 2,
+										cy: api.getHeight() / 2,
+										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+										startAngle: (180 + angle) * Math.PI / 180,
+										endAngle: (270 + angle) * Math.PI / 180
+									},
+									style: {
+										stroke: "#0CD3DB",
+										fill: "transparent",
+										lineWidth: 1.5
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								return {
+									type: 'arc',
+									shape: {
+										cx: api.getWidth() / 2,
+										cy: api.getHeight() / 2,
+										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
+										startAngle: (270 + -angle) * Math.PI / 180,
+										endAngle: (40 + -angle) * Math.PI / 180
+									},
+									style: {
+										stroke: "#0CD3DB",
+										fill: "transparent",
+										lineWidth: 1.5
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								return {
+									type: 'arc',
+									shape: {
+										cx: api.getWidth() / 2,
+										cy: api.getHeight() / 2,
+										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
+										startAngle: (90 + -angle) * Math.PI / 180,
+										endAngle: (220 + -angle) * Math.PI / 180
+									},
+									style: {
+										stroke: "#0CD3DB",
+										fill: "transparent",
+										lineWidth: 1.5
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5",
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								let x0 = api.getWidth() / 2;
+								let y0 = api.getHeight() / 2;
+								let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
+								let point = {
+									x:30,
+									y:40
+								}
+								return {
+									type: 'circle',
+									shape: {
+										cx: point.x,
+										cy: point.y,
+										r: 4
+									},
+									style: {
+										stroke: "#0CD3DB", //粉
+										fill: "#0CD3DB"
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: "ring5", //绿点
+							type: 'custom',
+							coordinateSystem: "none",
+							renderItem: function(params, api) {
+								let x0 = api.getWidth() / 2;
+								let y0 = api.getHeight() / 2;
+								let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
+								let point = {
+									x:30,
+									y:40
+								}
+								return {
+									type: 'circle',
+									shape: {
+										cx: point.x,
+										cy: point.y,
+										r: 4
+									},
+									style: {
+										stroke: "#0CD3DB", //绿
+										fill: "#0CD3DB"
+									},
+									silent: true
+								};
+							},
+							data: [0]
+						},
+						{
+							name: '覆盖率',
+							type: 'pie',
+							radius: ['58%', '45%'],
+							silent: true,
+							clockwise: true,
+							startAngle: 90,
+							z: 0,
+							zlevel: 0,
+							label: {
+								normal: {
+									position: "center",
+
+								}
+							},
+							data: [{
+									value: 79,
+									name: "",
+									itemStyle: {
+										normal: {
+											color: { // 完成的圆环的颜色
+												colorStops: [{
+													offset: 0,
+													color: '#4FADFD' // 0% 处的颜色
+												}, {
+													offset: 1,
+													color: '#28E8FA' // 100% 处的颜色
+												}]
+											},
+										}
+									}
+								},
+								{
+									value: 100 - this.value,
+									name: "",
+									label: {
+										normal: {
+											show: false
+										}
+									},
+									itemStyle: {
+										normal: {
+											color: "#173164"
+										}
+									}
+								}
+							]
+						},
+						{
+							name: "",
+							type: "gauge",
+							radius: "58%",
+							center: ['50%', '50%'],
+							startAngle: 0,
+							endAngle: 359.9,
+							splitNumber: 8,
+							hoverAnimation: true,
+							axisTick: {
+								show: false
+							},
+							splitLine: {
+								length: 60,
+								lineStyle: {
+									width: 5,
+									color: "#061740"
+								}
+							},
+							axisLabel: {
+								show: false
+							},
+							pointer: {
+								show: false
+							},
+							axisLine: {
+								lineStyle: {
+									opacity: 0
+								}
+							},
+							detail: {
+								show: false
+							},
+							data: [{
+								value: 0,
+								name: ""
+							}]
+						},
+
+					]
+
+				};
+				return option;
+			} */
+
+		},
+
+	}
+</script>
+
+<style scoped>
+	.Chart {
+
+		height: 130rem;
+		width: 130rem;
+		background:url("@/assets/images/tongda.png") no-repeat;
+		background-size: 100% 100%;
+		display: inline-block;
+		margin-top: 40rem;
+		margin-right: 200rem;
+		position: absolute;
+	}
+	.fonts{
+		font-size: 24rem;
+		text-align: center;
+		color: rgb(200, 250, 255);
+		
+	}
+	.bottomFonts{
+		margin-top: 90rem;
+		font-size: 18rem;
+		color: rgb(200, 250, 255);
+	}
+
+	.text {
+		margin-top: 10rem;
+		height: 170rem;
+		width: 200rem;
+		margin-left: 130rem;
+		display: inline-block;
+		position: relative;
+	}
+
+	.left {
+		
+		width: 50%;
+		float: left;
+		
+		
+
+	}
+
+	.leftTop {
+		margin-top: 30rem;
+		color: rgb(200, 250, 255);
+		font-size: 24rem;
+		font-weight: bold;
+	}
+
+	.leftMid {
+		color: rgb(200, 250, 255);
+		font-size: 16rem;
+	}
+
+	.right {
+		
+		width: 50%;
+		float: right;
+	}
+	.rightTop {
+		margin-top: 30rem;
+		color: rgb(200, 250, 255);
+		font-size: 24rem;
+		font-weight: bold;
+	}
+	
+	.rightMid {
+		color: rgb(200, 250, 255);
+		font-size: 16rem;
+	}
+	
+</style>

src/views/miaoqing/components/WaterLevelChart.vue

@@ -0,0 +1,140 @@
+<template>
+  	<div style="display: inline-block;float:left ;height: 170rem;width: 160rem;">
+  		<jt-echarts style="width: 100%;height: 100%;margin-top:25rem" :chartData="option"></jt-echarts>
+  	</div>
+  	<div class="text">
+  		<div class="left">
+  			<div class="leftTop">15.7亩</div>
+  			<div class="leftMid">灌溉面积</div>
+  			<div class="leftTop">180个</div>
+  			<div class="leftMid">灌溉井数</div>
+  			<div class="leftTop">15.4km</div>
+  			<div class="leftMid">灌溉管网</div>
+  		</div>
+  		<div class="right">
+  			<div class="leftTop">280个</div>
+  			<div class="leftMid">覆盖地块</div>
+  			<div class="leftTop">83条</div>
+  			<div class="leftMid">灌溉水渠</div>
+  			<div class="leftTop">8.9km</div>
+  			<div class="leftMid">排水管网</div>
+  		</div>
+
+  	</div>
+  </template>
+
+  <script>
+  	export default {
+  		data() {
+  			return {
+  				option: {}
+  			}
+  		},
+  		created() {},
+  		mounted() {
+  			this.typeCharts()
+  		},
+  		methods: {
+  			typeCharts() {
+  				this.option = this.getOption();
+  				// var chartDom = document.getElementById('echarts');
+  				// var myChart = echarts.init(chartDom);
+  				// myChart.setOption(option, true);
+  			},
+  			getOption(data) {
+  				let option = {
+  					tooltip: {
+  						show: true
+  					},
+  					series: [{
+  						name: '完成',
+  						type: 'liquidFill',
+  						radius: '130rem',
+  						data: [0.80],
+  						label: {
+  							normal: {
+  								color: '#27e5f1',
+  								insideColor: '#fff',
+  								textStyle: {
+  									fontSize: "40rem",
+  									fontWeight: 'bold',
+  								}
+  							}
+  						},
+  						color: [{
+  							type: 'linear',
+  							x: 0,
+  							y: 1,
+  							x2: 0,
+  							y2: 0,
+  							colorStops: [{
+  								offset: 1,
+  								color: ['#6a7feb'], // 0% 处的颜色
+  							}, {
+  								offset: 0,
+  								color: ['#27e5f1'], // 100% 处的颜色
+  							}],
+  							global: false // 缺省为 false
+  						}],
+  						outline: {
+  							show: true,
+  							borderDistance: 5,
+  							itemStyle: {
+  								borderColor: '#27e5f1',
+  								borderWidth: 3
+  							}
+  						}
+  					}]
+
+  				};
+  				return option;
+  			}
+
+  		},
+
+  	}
+  </script>
+
+  <style scoped>
+  	.text {
+  		margin-top: 10rem;
+  		height: 170rem;
+  		width: 165rem;
+
+  		display: inline-block;
+  	}
+
+  	.left {
+		width: 50%;
+  		float: left;
+
+  	}
+
+  	.leftTop {
+  		margin-top: 10rem;
+  		color: rgb(200, 250, 255);
+  		font-size: 24rem;
+  		font-weight: bold;
+  	}
+
+  	.leftMid {
+  		color: rgb(200, 250, 255);
+		font-size: 16rem;
+  	}
+
+  	.right {
+		width: 50%;
+  		float: right;
+  	}
+	.rightTop {
+		margin-top: 10rem;
+		color: rgb(200, 250, 255);
+		font-size: 24rem;
+		font-weight: bold;
+	}
+	
+	.rightMid {
+		color: rgb(200, 250, 255);
+		font-size: 16rem;
+	}
+  </style>

src/views/miaoqing/components/dsnl.vue

@@ -0,0 +1,131 @@
+<script setup>
+
+</script>
+
+<template>
+	<el-row>
+		<el-col :span="12">
+			<div class="main">
+				<div class="shape">
+					<!-- <span style="color: rgb(200, 250, 255);margin-left: -73rem;">耕地质量</span> -->
+					<div class="shape2">
+						<img src="@/assets/images/dengji1.png" style="width: 46rem;vertical-align: -20%;"/>
+						<span style="margin-left: 20rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">23063</span>
+						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
+					</div>
+					<div class="shape3">
+						<img src="@/assets/images/dengji2.png" style="width: 46rem;vertical-align: -20%;"/>
+						<span style="margin-left: 20rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">53150</span>
+						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
+					</div>
+					<div class="shape4">
+						<img src="@/assets/images/dengji3.png" style="width: 46rem;vertical-align: -20%;"/>
+						<span style="margin-left: 20rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">75005</span>
+						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
+					</div>
+					<div class="shape4">
+						<img src="@/assets/images/dengji4.png" style="width: 46rem;vertical-align: -20%;"/>
+						<span style="margin-left: 20rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">21247</span>
+						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
+					</div>
+					<div class="shape4">
+						<img src="@/assets/images/dengji5.png" style="width: 46rem;vertical-align: -20%;"/>
+						<span style="margin-left: 20rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">3764</span>
+						<span style="font-size: 10rem;margin-left: 9rem;color: rgb(200, 250, 255);">公顷</span>
+					</div>
+				</div>
+			</div>
+		</el-col>
+		<el-col :span="12">
+			<div class="main2">
+				<div class="shape">
+					<span style="color: rgb(200, 250, 255);margin-left: -73rem;font-size: 25rem;font-weight: 300;">提升面积</span>
+					<div class="shape5">
+						<span style="font-weight: 400;font-size: 30rem;margin-left: -55rem;color: rgb(200, 250, 255);">53</span>
+						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
+						<span style="font-size: 10rem;color: rgb(200, 250, 255);">(比上一年)</span>
+					</div>
+					<div class="shape6">
+					<div style="color: rgb(200, 250, 255);margin-left: -73rem;font-size: 25rem;margin-bottom: 6rem;font-weight: 300;">土地价格</div>
+					<span style="font-weight: 400;font-size: 30rem;margin-left: -48rem;color: rgb(200, 250, 255);">826</span>
+					<span style="font-size: 10rem;color: rgb(200, 250, 255);">元</span>
+					<span style="font-size: 10rem;color: rgb(200, 250, 255);">(增长15%)</span>
+				</div>
+				</div>
+			</div>
+		</el-col>
+	</el-row>
+
+
+</template>
+
+<script>
+	let jt3d = undefined;
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+		width: 90%;
+		// height: 97%;
+		display: flex;
+		flex: 2;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		flex-direction: row;
+		// color: rgba(29,191,205,1);
+		margin-left: 20rem;
+		margin-top: 10rem;
+
+		.shape {
+			margin-top: 0rem;
+
+			.shape2 {
+				margin-top: 10rem;
+			}
+
+			.shape3 {
+				margin-top: 10rem;
+			}
+
+			.shape4 {
+				margin-top: 10rem;
+			}
+		}
+	}
+	.main2 {
+		width: 90%;
+		// height: 97%;
+		display: flex;
+		flex: 2;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		flex-direction: row;
+		// color: rgba(29,191,205,1);
+		margin-left: 30rem;
+		margin-top: 20rem;
+	
+		.shape {
+			margin-top: 0rem;
+	
+			.shape5 {
+				margin-top: 10rem;
+			}
+			.shape6 {
+				margin-top: 10rem;
+			}
+		}
+	}
+</style>

src/views/miaoqing/components/spdgc.vue

@@ -0,0 +1,82 @@
+<script setup>
+
+</script>
+
+<template>
+	<el-row> <el-col :span="13">
+			<div class="main">
+				<div class="shape">
+					<span style="font-size: 20rem;font-weight: 300;color: rgb(200, 250, 255);">变电设施&nbsp;&nbsp;</span>
+					<span style="font-size: 28rem;font-weight: 400;color: rgb(200, 250, 255);;">26</span>
+					<span style="font-weight: 300;color: rgb(200, 250, 255);">套</span>
+					<div class="shape2">
+						<span style="font-size: 20rem;font-weight: 300;color: rgb(200, 250, 255);">配电设施&nbsp;&nbsp;</span>
+						<span style="font-size: 28rem;font-weight: 400;color: rgb(200, 250, 255);">37</span>
+						<span style="font-weight: 300;color: rgb(200, 250, 255);">套</span>
+					</div>
+					<div class="shape3">
+						<span style="font-size: 20rem;margin-left: 6rem;font-weight: 300;color: rgb(200, 250, 255);">高压线路&nbsp;&nbsp;</span>
+						<span style="font-size: 28rem;font-weight: 400;color: rgb(200, 250, 255);">73</span>
+						<span style="font-weight: 300;color: rgb(200, 250, 255);">km</span>
+					</div>
+					<div class="shape4">
+						<span style="font-size: 20rem;margin-left: 18rem;font-weight: 300;color: rgb(200, 250, 255);">低压线路&nbsp;&nbsp;</span>
+						<span style="font-size: 28rem;font-weight: 400;color: rgb(200, 250, 255);">120</span>
+						<span style="font-weight: 300;color: rgb(200, 250, 255);">km</span>
+					</div>
+				</div>
+			</div>
+		</el-col> <el-col :span="11">
+		    <el-row><el-col :span='24' style="margin-top: 38rem;font-size: 25rem;font-weight: 400;color: rgb(200, 250, 255);">100%</el-col></el-row>
+			<el-row><el-col :span='24' style="margin-top: -26rem;"><img src="@/assets/images/tongda.png"/></el-col></el-row>
+			<el-row><el-col :span='24' style="margin-top: -13rem;font-size: 20rem;font-weight: 300;color: rgb(200, 250, 255);">井灌区配电率</el-col></el-row>
+		</el-col> </el-row>
+	
+</template>
+
+<script>
+	let jt3d = undefined;
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+		width: 100%;
+		height: 97%;
+		display: flex;
+		flex: 2;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		flex-direction: row;
+		// color: rgba(29,191,205,1);
+		margin-left: 10rem;
+		margin-top: 25rem;
+
+		.shape {
+			margin-top: -10rem;
+
+			.shape2 {
+				margin-top: 10rem;
+			}
+
+			.shape3 {
+				margin-top: 10rem;
+			}
+
+			.shape4 {
+				margin-top: 10rem;
+			}
+		}
+	}
+</style>

src/views/miaoqing/components/zksb.vue

@@ -0,0 +1,97 @@
+<script setup>
+	
+</script>
+
+<template>
+	<div class="main">
+		<div class="shape">
+			<div class="number">23</div>
+			<div class="title">水肥一体</div>
+		</div>
+		<div class="shape">
+			<div class="number">2742</div>
+			<div class="title">灌溉设备</div>
+		</div>
+		<div class="shape">
+			<div class="number">3</div>
+			<div class="title">环境监测</div>
+		</div>
+		<div class="shape">
+			<div class="number">40</div>
+			<div class="title">井电双控</div>
+		</div>
+		<div class="shape">
+			<div class="number">9</div>
+			<div class="title">虫情监测</div>
+		</div>
+		<div class="shape">
+			<div class="number">10</div>
+			<div class="title">气象监测</div>
+		</div>
+		<div class="shape">
+			<div class="number">2</div>
+			<div class="title">土壤墒情</div>
+		</div>
+		<div class="shape">
+			<div class="number">15</div>
+			<div class="title">视频监控</div>
+		</div>
+		<div class="shape">
+			<div class="number">5</div>
+			<div class="title">水位监测</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	let jt3d = undefined;
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.number{
+		// color: rgba(29,191,205,1);
+		color: rgb(200, 250, 255);
+		font-weight: 400;
+		margin-top: 11rem;
+		font-size: 25rem;
+		margin-left: -8rem;
+	}
+	.title{
+		color: rgb(200, 250, 255);
+		font-size: 15rem;
+		font-weight: 300;
+		// text-shadow: 0 0 2rem 2rem rgba(29,191,205,1);
+		margin-top: 8rem;
+		margin-left: -9rem;
+	}
+	
+	.main{
+		width:90%;
+		height:97%;
+		display:flex;
+		margin-left: 25rem;
+		margin-top: 2rem;
+		flex:2;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		.shape{
+			background:url('@/assets/images/sbbjt.png') no-repeat;
+			background-size:90% 80%;
+			width: 100rem;
+			height: 56rem;
+			
+		}
+	}
+</style>

src/views/miaoqing/miaoqing.vue

@@ -0,0 +1,78 @@
+<script setup>
+	import BasicInfor from "../Table/components/BasicInfor.vue"
+	import WaterLeveChart from "../Table/components/WaterLevelChart.vue"
+	import TianluEngin from "../Table/components/TianluEngin.vue"
+
+	import spdgc from "./components/spdgc.vue"; 
+	import zksb from "./components/zksb.vue"; 
+	import dsnl from "./components/dsnl.vue"; 
+	
+
+</script>
+
+<template>
+	
+	<jt-popup2 title="项目基本信息" ref="BasicInfor">
+		<BasicInfor></BasicInfor>
+	</jt-popup2>
+
+	<jt-popup2 title="田路工程" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="RoadProject">
+		<TianluEngin></TianluEngin>
+	</jt-popup2>
+
+	<jt-popup2 title="水利工程" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="WaterProject">
+		<WaterLeveChart></WaterLeveChart>
+	</jt-popup2>
+
+
+	<!-- <jt-popup3 title="用水量统计" ref="ysltj">
+
+	</jt-popup3>
+
+	<jt-popup3 title="能耗同比统计" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="nhtbtj">
+
+	</jt-popup3>
+
+	<jt-popup3 title="智能监控" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="znjk"> -->
+	
+
+	
+	<jt-popup3  title="输配电工程" ref="spdgc">
+		<spdgc ref="_spdgc"></spdgc>
+	</jt-popup3>
+	
+	<jt-popup3  title="智控设备" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="zksb">
+		<zksb ref="_zksb"></zksb>
+	</jt-popup3>
+	
+	<jt-popup3  title="耕地质量" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="dsnl">
+		<dsnl ref="_dsnl"></dsnl>
+	</jt-popup3>
+</template>
+
+<script>
+	export default {
+		name: 'Test',
+
+		/* 数据 */
+		data() {
+			return {
+
+			}
+		},
+
+		/* 方法 */
+		methods: {
+
+		},
+		// ?tableName=map_region&sqlWhere=&orderByField=
+		/* 初始化 */
+		mounted() {
+
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>

src/views/qixiang/qixiang.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/views/siqing/siqing.vue

@@ -0,0 +1,110 @@
+<template>
+	<router-view v-slot="{ Component }">
+		<keep-alive>
+			<component :is=" Component" v-if="$route.meta.keepAlive" />
+		</keep-alive>
+		<component :is="Component" v-if="!$route.meta.keepAlive" />
+	</router-view>
+	
+	<router-link to="/home/siqing">
+		<div class="layerButtoncq" @click="layerIsShow"></div>
+	</router-link>
+	<router-link to="/home/siqing/miaoqing">
+		<div class="layerButtonmq" @click="layerIsShow"></div>
+	</router-link>
+	<router-link to="/home/siqing/turang">
+		<div class="layerButtontr" @click="layerIsShow"></div>
+	</router-link>
+	<router-link to="/home/siqing/qixiang">
+		<div class="layerButtonqx" @click="layerIsShow"></div>
+	</router-link>
+	
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			layerIsShow() {
+
+			}
+		},
+		mounted() {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.layerButtoncq {
+		background: url('@/assets/images/siqing/cq.png') no-repeat;
+		background-size: 100% 100%;
+		font-family: "TTTGB-Medium", sans-serif !important;
+		position: fixed;
+		left: 750rem;
+		bottom: 40rem;
+		width: 80rem;
+		height: 90rem;
+		/* background-color: rgba(255,255,255,0.5); */
+		color: #000;
+		line-height: 40rem;
+		cursor: pointer;
+		z-index: 11;
+		user-select: none;
+	}
+
+	.layerButtonmq {
+		background: url('@/assets/images/siqing/mq.png') no-repeat;
+		background-size: 100% 100%;
+		font-family: "TTTGB-Medium", sans-serif !important;
+		position: fixed;
+		left: 950rem;
+		bottom: 40rem;
+		width: 80rem;
+		height: 90rem;
+		/* background-color: rgba(255,255,255,0.5); */
+		color: #000;
+		line-height: 40rem;
+		cursor: pointer;
+		z-index: 11;
+		user-select: none;
+	}
+
+	.layerButtontr {
+		background: url('@/assets/images/siqing/tr.png') no-repeat;
+		background-size: 100% 100%;
+		font-family: "TTTGB-Medium", sans-serif !important;
+		position: fixed;
+		left: 1150rem;
+		bottom: 40rem;
+		width: 80rem;
+		height: 90rem;
+		/* background-color: rgba(255,255,255,0.5); */
+		color: #000;
+		line-height: 40rem;
+		cursor: pointer;
+		z-index: 11;
+		user-select: none;
+	}
+
+	.layerButtonqx {
+		background: url('@/assets/images/siqing/qx.png') no-repeat;
+		background-size: 100% 100%;
+		font-family: "TTTGB-Medium", sans-serif !important;
+		position: fixed;
+		left: 1350rem;
+		bottom: 40rem;
+		width: 80rem;
+		height: 90rem;
+		/* background-color: rgba(255,255,255,0.5); */
+		color: #000;
+		line-height: 40rem;
+		cursor: pointer;
+		z-index: 11;
+		user-select: none;
+	}
+</style>

src/views/turang/turang.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>