Merge branch 'ZHNY_DCF' into ZHNY_WW

src/App.vue

@@ -10,6 +10,15 @@
 </script>
 
 <style lang="scss">
+	@charset "UTF-8";
+	@font-face {
+		font-family: "TTTGB-Medium";
+		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
+			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
+		font-weight: normal;
+		font-style: normal;
+	}
 	.lk-status-bar{
 		z-index: 15;
 	}

src/components/jt-popup/jt-popup.vue

@@ -17,8 +17,8 @@
 			<div :class="longheader?'header long':'header'">
 				<div style="width: 20rem;"></div>
 				<span>{{title}}</span>
-				<i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'"
-					@click="closebasicLayer" style="font-size: 16rem;" />
+				<!-- <i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'"
+					@click="closebasicLayer" style="font-size: 16rem;" /> -->
 			</div>
 			<div class="middle">
 				<slot></slot>
@@ -158,7 +158,7 @@
 		font-size: 16rem;
 		color: white;
 		user-select: none;
-		animation-name: slide-right;
+		animation-name: slide-bottom;
 		animation-duration: .8s;
 
 		//头部背景图
@@ -240,7 +240,7 @@
 			height: calc(100vh - 200rem);
 			padding: 10rem;
 			border: 1rem solid #008aff70 !important;
-			background-color: rgba(5, 45, 115, 0.7) !important;
+			background-color: rgba(5, 45, 115, 0.5) !important;
 			box-shadow: 0 4rem 15rem 1rem #02213bb3;
 
 
@@ -312,7 +312,7 @@
 	@keyframes slide-bottom {
 		0% {
 			opacity: 0;
-			transform: translateY(-100%)
+			transform: translateY(100%)
 		}
 
 		100% {

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/MainView.vue

@@ -33,13 +33,13 @@
 			<basicLayer  style="display: none;" ref="basicLayers"></basicLayer>
 			
 			<!-- 图层列表 -->
-			<!-- <jt-popupZHNY width="320rem" height="650rem" title="图层列表" top="300rem" right="800rem" v-show="layershow" class="layerStyle">
+			<jt-popup width="300rem" height="650rem" title="图层列表" top="180rem" right="1240rem" v-show="layershow" class="layerStyle">
 				<layer></layer>
-			</jt-popupZHNY> -->
+			</jt-popup>
 			
-			<div  v-show="layershow" class="layerStyle">
+			<!-- <div  v-show="layershow" class="layerStyle">
 				<layer></layer>
-			</div>
+			</div> -->
 			
 			<!-- 控制路由页面是否缓存 -->
 			<router-view v-slot="{ Component }">
@@ -119,13 +119,13 @@
 	}
 	
 	.layerStyle{
-		position: fixed;
-		left: 400rem;
-		bottom:130rem;
-		width: 320rem;
-		height: 650rem;
+		// position: fixed;
+		// left: 400rem;
+		// bottom:130rem;
+		// width: 320rem;
+		// height: 650rem;
 		overflow: hidden;
-		background-color: rgba(5, 45, 115, 0.5) !important;
+		// background-color: rgba(5, 45, 115, 0.5) !important;
 		z-index: 11;
 		user-select: none;
 		font-family: "TTTGB-Medium", sans-serif !important;
@@ -133,15 +133,16 @@
 	
 	.layerButton{
 		background: url('@/assets/images/layer/selLayer.png') no-repeat;
+		background-size: 100% 100%;
 		font-family: "TTTGB-Medium", sans-serif !important;
 		position: fixed;
 		left: 400rem;
-		bottom:70rem;
+		bottom:80rem;
 		width: 150rem;
-		height: 50rem;
+		height: 40rem;
 		// background-color: rgba(255,255,255,0.5);
 		color: #000;
-		line-height: 50rem;
+		line-height: 40rem;
 		cursor: pointer;
 		z-index: 11;
 		user-select: none;

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/basicLayer.vue

@@ -225,8 +225,8 @@
 							//设置参数
 							let options = {
 								url: item.datasource, //服务地址
-								maximumLevel:12,
-								minimumLevel:4
+								maximumLevel:18,
+								minimumLevel:0
 							};
 							if (item.datasource.indexOf("map.geoq.cn") != -1) {
 								options.CRS = "WGS84";

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';
 
@@ -331,14 +332,16 @@
 								}
 
 
-								jt3d.layer.addBillboardByGeoJson(_options, function(serviceId) {
+								jt3d.layer.addBillboardByJson(_options, function(serviceId) {
 
 								});
 
 							} else {
+								console.log('移除图层')
 								jt3d.layer.removeDataSources({
 									serviceId: _serviceId,
 								}).then(res => {
+									console.log('移除图层')
 									data.isinit = '0';
 								});
 							}

src/views/Main/components/map.vue

@@ -239,7 +239,10 @@
 					isRetainDrawPoint: true, //绘制完成是否保留绘制点
 					iconType: 'blue',
 				});
-				jt3d.DrawMilitaryPlot = new this.jt3dSDK.DrawMilitaryPlot(jt3d._viewer);
+				jt3d.DrawMilitaryPlot = new this.jt3dSDK.DrawMilitaryPlot({
+					viewer: jt3d._viewer,
+					Cesium: Cesium,
+				});
 
 				jt3d.LocateUtil = new this.jt3dSDK.LocateUtil(jt3d._viewer);
 

src/views/Map3d/components/sbyxjc.vue

@@ -109,112 +109,89 @@
 		},
 		methods: {
 			flyto(num) {
-				store.isflyto = true
-				console.log(store.isflyto)
+				let that = this
 				let PointObject = new this.jt3dSDK.PointObject(window.viewer);
-				PointObject.addPoint([120.623, 36.9157,1800]).then(res1 => {
+				var LocateUtil = new this.jt3dSDK.LocateUtil(window["viewer"]);
+				let Drawtools = new this.jt3dSDK.DrawTools(window.viewer)
+				//_createCircle
+				PointObject.addBillboard([120.623, 36.9157, 0], {
+					billboard: {
+						imgUrl: 'jt3dSDK/imgs/jijing1.png',
+						scale: 0.2,
+					}
+				}).then(res1 => {
 					var LocateUtil = new this.jt3dSDK.LocateUtil(window["viewer"]);
 					LocateUtil.flyToEntity(res1).then(res2 => {
-						console.log('定位成功')
+						let html = "";
+						html +=
+							"<div style='text-align: left;backfround-color:rgba(61, 198, 205, 0.6);width:300rem;height:150rem;font-family: TTTGB-Medium, sans-serif !important;'>";
+						html +=
+							"<div style='background-color: rgba(61, 198, 255, 0.4);line-height:30rem;height:30rem;margin:0;'>" +
+							"<span style='width:100rem'>设备名称：</span>" + "<span>机井</span>" +
+							"</div>";
+						html +=
+							"<div style='background-color: rgba(0, 37, 98, 0.4);line-height:30rem;height:30rem;margin:0'>" +
+							"<span style='width:100rem'>设备编号：</span>" + "<span>05</span>" +
+							"</div>";
+						html +=
+							"<div style='background-color: rgba(61, 198, 255, 0.4);line-height:30rem;height:30rem;margin:0'>" +
+							"<span style='width:100rem'>电流：</span>" + "<span>10A</span>" +
+							"</div>";
+						html +=
+							"<div style='background-color: rgba(0, 37, 98, 0.4);line-height:30rem;height:30rem;margin:0'>" +
+							"<span style='width:100rem'>压力：</span>" + "<span>20Kpa</span>" +
+							"</div>";
+						html +=
+							"<div style='background-color: rgba(61, 198, 255, 0.4);line-height:30rem;height:30rem;margin:0'>" +
+							"<span style='width:100rem'>流量：</span>" + "<span>80m³/h</span>" +
+							"</div>";
+						html += "</div>";
+						let popup = new that.jt3dSDK.PopupWindow.HtmlWindow(window["viewer"], [120.623,
+							36.9157
+						], "设备信息", html, 50);
+						// this.createCircle()
+						// Drawtools._createCircle( Cesium.Cartesian3.fromDegrees(120.623, 36.9157),'dynamicCircle')
 					})
 				})
-				// let that = this
-				// that.entity1 = new Cesium.Entity({
-				// 	name: "add billboard",
-				// 	//位置
-				// 	position: Cesium.Cartesian3.fromDegrees(120.623, 36.9157, 100),
-				// 	//图片标签
-				// 	billboard: {
-				// 		image: 'jt3dSDK/imgs/jijing1.png',
-				// 		horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
-				// 		verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
-				// 		// scale: billboard.scale, //尺寸
-				// 		// pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
-				// 		disableDepthTestDistance: Number.POSITIVE_INFINITY,
-				// 		scale: 0.2,
-				// 		scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 2400,
-				// 			1
-				// 		) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
-				// 	}
-				// });
-				// let flytopromise = window.viewer.flyTo(that.entity1, {
-				// 	duration: 5.0,
-				// 	maximumHeight: 1500
-				// })
-				// flytopromise.then(res => {
-				// 	console.log('定位结束' + res)
-				// })
-				// var entity = jt3d._viewer.entities.add(that.entity1, {
-				// 	// range: 1000
-				// });
-				// let terrainProvider = jt3d._viewer.terrainProvider;
-				// //异步函数
-				// let lon = 116.30
-				// let lat = 36.88
-				// let that = this
-				// if (that.entity1) {
-				// 	jt3d._viewer.entities.remove(that.entity1)
-				// }
-				// // if that.entity && jt3d._viewer.entities.remove(that.entity)
-				// // console.log('高度', updatedPositions)
-				// let height = 1000
 
-				// that.entity1 = new Cesium.Entity({
-				// 	name: "add billboard",
-				// 	//位置
-				// 	position: Cesium.Cartesian3.fromDegrees(120.623, 36.9157, 100),
-				// 	//图片标签
-				// 	billboard: {
-				// 		image: 'jt3dSDK/imgs/point/point.png',
-				// 		horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
-				// 		verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
-				// 		// scale: billboard.scale, //尺寸
-				// 		// pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
-				// 		disableDepthTestDistance: Number.POSITIVE_INFINITY,
-				// 		scale: 1,
-				// 		// scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 2400,
-				// 		// 		0
-				// 		// 		) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
-				// 	}
-				// });
-				// // var entity = jt3d._viewer.entities.add(that.entity1, {
-				// // 	// range: 1000
-				// // });
-				// // jt3d.LocateUtil.flyToEntity(that.entity)
-				// let flytopromise = jt3d._viewer.flyTo(that.entity1, {
-				// 	duration: 5.0,
-				// 	maximumHeight: 1500
-				// })
-				// flytopromise.then(res => {
-				// 	console.log('定位结束' + res)
-				// })
-				// jt3d._viewer.camera.flyTo({
-				// 	destination: Cesium.Cartesian3.fromDegrees(120.623, 36.9157, 1500)
-				// });
+				//====实现
+				/* let PointObject = new this.jt3dSDK.PointObject(window.viewer);
+				var LocateUtil = new this.jt3dSDK.LocateUtil(window["viewer"]);
+				PointObject.addPoint([120.623, 36.9157, 1800]).then(res1 => {
+					console.log('res',res1)
+					LocateUtil.flyToEntity(res1).then(res2 => {
+						console.log('定位成功', res2)
+					})
+				}) */
+
+			},
+			//创建动态圆
+			createCircle() {
+
+				//定义中心和半径
+				let entity = jt3d._viewer.entities.add({
+					position: Cesium.Cartesian3.fromDegrees(120.623, 36.9157),
+					name: 'Dynamic Circle',
+					description: 'A dynamic circle.',
+				});
 
+				// // 添加动态圆形
+				// 添加静态圆形
+				var radius = 100;
+				var vertexFormat = Cesium.VertexFormat.POSITION_ONLY;
 
-				// let lng = Number(114.22) + Number(num)
-				// this.entity = new Cesium.Entity({
-				// 	name: "add billboard",
-				// 	//位置
-				// 	position: Cesium.Cartesian3.fromDegrees(116.33, 37.66, 500),
-				// 	//图片标签
-				// 	billboard: {
-				// 		image: 'jt3dSDK/imgs/point/point.png',
-				// 		horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
-				// 		verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
-				// 		// scale: billboard.scale, //尺寸
-				// 		// pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
-				// 		disableDepthTestDistance: Number.POSITIVE_INFINITY,
-				// 		scale: 1,
-				// 		scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 2400, 0) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
-				// 	}
-				// });
+				var circleGeometry = new Cesium.CircleGeometry({
+					center: entity.position.getValue(), // 圆心位置
+					radius: radius,
+					vertexFormat: vertexFormat
+				});
 
-				// jt3d._viewer.entities.add(this.entity, {
-				// 	range: 1000
-				// });
+				var geometry = Cesium.CircleGeometry.createGeometry(circleGeometry);
 
+				entity.polygon = new Cesium.PolygonGraphics();
+				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);
 			}
 		},
 		mounted() {

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/test/test.vue

@@ -35,6 +35,11 @@
 	<jt-popup3  title="土地墒情监测数据" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)">
 		<SoilMoisture></SoilMoisture>
 	</jt-popup3>
+	
+	<div class="layerButtoncq" @click="layerIsShow"></div>
+	<div class="layerButtonmq" @click="layerIsShow"></div>
+	<div class="layerButtontr" @click="layerIsShow"></div>
+	<div class="layerButtonqx" @click="layerIsShow"></div>
 </template>
 
 <script>
@@ -61,6 +66,73 @@
 		width: 100%;
 		height: 100%;
 	}
+	.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>