Merge branch 'ZHNY_DCF' into ZHNY_WW

.env.development

@@ -5,4 +5,4 @@ VITE_APP_TITLE = 金田基础框架
 VITE_APP_ENV = 'development'
 
 # 金田基础框架/开发环境
-VITE_API_URL = 'http://218.59.194.82:13292/'
+VITE_API_URL = 'http://218.59.194.82:13186'

.env.production

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 金田基础框架
 VITE_APP_ENV = 'production'
 
 # 金田基础框架/生产环境
-VITE_API_URL = 'http://218.59.194.82:13292/'
+VITE_API_URL = 'http://218.59.194.82:13186/'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip

src/store/index.ts

@@ -22,6 +22,7 @@ export const Store = defineStore({
 			keepAlives: ['Map3DMain'],//控制加载缓存页面
 			userport: '',
 			jt3d: {},//地图实例
+			isflyto:false
 		}
 	},
 	getters: {

src/views/Main/components/map.vue

@@ -15,12 +15,26 @@
 
 	let jt3d = undefined;
 	export default {
+		watch: {
+			isflyto: {
+				handler(newVal, oldVal) {
+					console.log('监听', newVal, oldVal)
+					if (newVal) {
+						this.flyto()
+					}
+				},
+				immediate: true,
+				deep: true // 可以深度检测到 person 对象的属性值的变化
+			}
+		},
 
 		/* 数据 */
 		data() {
 			return {
 				LocateId: 'locate_ID_remove', //标记定位所用ID
-				entity: ''
+				entity1: '',
+				entity: '',
+				isflyto: false
 			}
 		},
 
@@ -60,7 +74,9 @@
 									// 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)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
+									scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1,
+										2400, 0
+									) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
 								}
 							});
 							jt3d._viewer.entities.add(that.entity, {
@@ -110,36 +126,9 @@
 				this.$emit("onload", jt3d);
 				// console.log(this.$parent)
 				this.$parent.jtMap3DOnload(jt3d);
-				
-				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)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
-					}
-					// point:{
-					// 	pixelSize:20,
-					// 	color:Cesium.Color.RED,
-					// }
-				});
-				var entity = jt3d._viewer.entities.add(that.entity1, {
-					// range: 1000
-				});
-				setTimeout(res=>{
-					jt3d.LocateUtil.flyToEntity(that.entity)
-				},6000)
-				
+
+
+
 
 				//单击事件
 				// this.clickEntity(jt3d);
@@ -161,6 +150,24 @@
 				});
 			},
 
+			/* flyto定位 */
+			flyto() {
+				let that = this
+				if (!that.entity) {
+					that.entity = jt3d._viewer.entities.add(that.entity1, {
+						range: 1000,
+					});
+				}
+				// that.entity = jt3d._viewer.entities.add(that.entity1, {
+				// 	range: 1000,
+				// });
+				jt3d.LocateUtil.flyToEntity(that.entity1,{
+					range:400
+				}).then(res1 => {
+					console.log('定位成功？' + JSON.stringify(res1))
+				})
+			},
+
 			/**
 			 * 单击事件
 			 */
@@ -333,6 +340,34 @@
 		},
 
 		mounted() {
+			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)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
+				}
+			});
+			setInterval(res => {
+				this.isflyto = store.isflyto
+				if (this.isflyto) {
+					setTimeout(res => {
+						this.isflyto = false
+						store.isflyto = false
+					})
+				}
+			}, 1000)
 
 			this.init("cesiumContainer");
 			// if (store.userport == 'APP') {
@@ -351,8 +386,8 @@
 	.lk-status-bar {
 		font-size: 16rem !important;
 	}
-	
-	.back{
+
+	.back {
 		background: url('@/assets/images/backImgshort.png') no-repeat;
 		background-size: 100% 100%;
 		height: 100%;
@@ -373,7 +408,7 @@
 		overflow: hidden;
 		background-color: blue;
 		border: 0rem solid red;
-		
+
 	}
 
 	//分屏样式

src/views/Map3d/Map3DMain.vue

@@ -94,7 +94,7 @@
 			<ggsbtj ref="_ggsbtj"></ggsbtj>
 		</jt-popup2>
 
-		<jt-popup2 title="设备运行检测" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="sbyxjc">
+		<jt-popup2 title="设备运行监测" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="sbyxjc">
 			<sbyxjc ref="_sbyxjc"></sbyxjc>
 		</jt-popup2>
 
@@ -409,7 +409,7 @@
 <style lang="scss" scoped>
 	.jt-mapMain {
 		z-index: 15;
-		position: absolute;
+		// position: absolute;
 		width: 100%;
 		height: 100%;
 		top: 0;

src/views/Map3d/components/qtnhzb.vue

@@ -1,5 +1,5 @@
 <template>
-	<jt-echarts style="width: 330rem;height: 270rem;margin:10rem 0 0 0;" :chartData="option"></jt-echarts>
+	<jt-echarts style="width: 330rem;height: 270rem;margin:0 0 10rem 10rem;" :chartData="option"></jt-echarts>
 </template>
 
 <script>
@@ -14,203 +14,368 @@
 
 		},
 		mounted() {
-			const categories = (function() {
-				let now = new Date();
-				let res = [];
-				let len = 10;
-				while (len--) {
-					res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
-					now = new Date(+now - 2000);
-				}
-				return res;
-			})();
-			const categories2 = (function() {
-				let res = [];
-				let len = 10;
-				while (len--) {
-					res.push(10 - len - 1);
-				}
-				return res;
-			})();
-			const data = (function() {
-				let res = [];
-				let len = 10;
-				while (len--) {
-					res.push(Math.round(Math.random() * 1000));
-				}
-				return res;
-			})();
-			const data2 = (function() {
-				let res = [];
-				let len = 0;
-				while (len < 10) {
-					res.push(+(Math.random() * 10 + 5).toFixed(1));
-					len++;
-				}
-				return res;
-			})();
+			// const categories = (function() {
+			// 	let now = new Date();
+			// 	let res = [];
+			// 	let len = 10;
+			// 	while (len--) {
+			// 		res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+			// 		now = new Date(+now - 2000);
+			// 	}
+			// 	return res;
+			// })();
+			// const categories2 = (function() {
+			// 	let res = [];
+			// 	let len = 10;
+			// 	while (len--) {
+			// 		res.push(10 - len - 1);
+			// 	}
+			// 	return res;
+			// })();
+			// const data = (function() {
+			// 	let res = [];
+			// 	let len = 10;
+			// 	while (len--) {
+			// 		res.push(Math.round(Math.random() * 1000));
+			// 	}
+			// 	return res;
+			// })();
+			// const data2 = (function() {
+			// 	let res = [];
+			// 	let len = 0;
+			// 	while (len < 10) {
+			// 		res.push(+(Math.random() * 10 + 5).toFixed(1));
+			// 		len++;
+			// 	}
+			// 	return res;
+			// })();
+			// this.option = {
+			// 	title: {
+			// 		// text: '水位监测信息'
+			// 	},
+			// 	tooltip: {
+			// 		trigger: 'axis',
+			// 		axisPointer: {
+			// 			type: 'cross',
+			// 			label: {
+			// 				backgroundColor: '#283b56'
+			// 			}
+			// 		}
+			// 	},
+			// 	legend: {
+			// 		// 图例文字颜色
+			// 		textStyle: {
+			// 			color: "#fff",
+			// 		},
+			// 	},
+			// 	toolbox: {
+			// 		show: true,
+			// 		feature: {
+			// 			// dataView: {
+			// 			// 	readOnly: false
+			// 			// },
+			// 			// restore: {},
+			// 			// saveAsImage: {}
+			// 		}
+			// 	},
+			// 	dataZoom: {
+			// 		show: false,
+			// 		start: 0,
+			// 		end: 100
+			// 	},
+			// 	xAxis: [{
+			// 			type: 'category',
+			// 			boundaryGap: true,
+			// 			data: categories,
+			// 			axisLabel: {
+			// 				//x轴文字的配置
+			// 				show: true,
+			// 				textStyle: {
+			// 					color: "rgba(255,225,255,1)",
+			// 				},
+			// 			},
+			// 			splitLine: {
+			// 				show: false,
+			// 				lineStyle: {
+			// 					type: 'dashed',
+			// 					color: '#113d5e'
+			// 				}
+			// 			},
+
+			// 		},
+			// 		{
+			// 			type: 'category',
+			// 			boundaryGap: true,
+			// 			data: categories2,
+			// 			axisLabel: {
+			// 				//x轴文字的配置
+			// 				show: true,
+			// 				textStyle: {
+			// 					color: "rgba(255,225,255,1)",
+			// 				},
+			// 			},
+			// 			splitLine: {
+			// 				show: true,
+			// 				lineStyle: {
+			// 					type: 'dashed',
+			// 					color: '#113d5e'
+			// 				}
+			// 			},
+			// 		}
+			// 	],
+			// 	yAxis: [{
+			// 			type: 'value',
+			// 			scale: true,
+			// 			name: '水位/m',
+			// 			axisLabel: {
+			// 				//x轴文字的配置
+			// 				show: true,
+			// 				textStyle: {
+			// 					color: "rgba(255,225,255,1)",
+			// 				},
+			// 			},
+			// 			nameTextStyle: {
+			// 				//y轴上方单位的颜色
+			// 				color: "#fff",
+			// 			},
+			// 			nameGap: 25,
+			// 			max: 30,
+			// 			min: 0,
+			// 			boundaryGap: [0.2, 0.2],
+			// 			splitLine: {
+			// 				show: false,
+			// 			},
+			// 		},
+			// 		{
+			// 			type: 'value',
+			// 			scale: true,
+			// 			name: '预警/m',
+			// 			max: 1200,
+			// 			nameGap: 25,
+			// 			min: 0,
+			// 			boundaryGap: [0.2, 0.2],
+			// 			nameTextStyle: {
+			// 				//y轴上方单位的颜色
+			// 				color: "#fff",
+			// 			},
+			// 			axisLabel: {
+			// 				//x轴文字的配置
+			// 				show: true,
+			// 				textStyle: {
+			// 					color: "rgba(255,225,255,1)",
+			// 				},
+			// 			},
+			// 			splitLine: {
+			// 				show: false,
+			// 			},
+			// 		}
+			// 	],
+			// 	series: [{
+			// 			name: '水位高度',
+			// 			type: 'bar',
+			// 			xAxisIndex: 1,
+			// 			yAxisIndex: 1,
+			// 			data: data
+			// 		},
+			// 		{
+			// 			name: '水位预警',
+			// 			type: 'line',
+			// 			data: data2
+			// 		}
+			// 	]
+			// };
+			// this.app.count = 11;
+			// let _this = this
+			// setInterval(function() {
+			// 	let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
+			// 	data.shift();
+			// 	data.push(Math.round(Math.random() * 1000));
+			// 	data2.shift();
+			// 	data2.push(+(Math.random() * 10 + 5).toFixed(1));
+			// 	categories.shift();
+			// 	categories.push(axisData);
+			// 	categories2.shift();
+			// 	categories2.push(_this.app.count++);
+			// 	_this.option.xAxis = [{
+			// 			data: categories
+			// 		},
+			// 		{
+			// 			data: categories2
+			// 		}
+			// 	]
+			// 	_this.option.series = [{
+			// 			data: data
+			// 		},
+			// 		{
+			// 			data: data2
+			// 		}
+			// 	]
+			// }, 2100);
 			this.option = {
-				title: {
-					// text: '水位监测信息'
-				},
-				tooltip: {
-					trigger: 'axis',
-					axisPointer: {
-						type: 'cross',
-						label: {
-							backgroundColor: '#283b56'
-						}
-					}
-				},
 				legend: {
-					// 图例文字颜色
+					/*这里是四个指标，（去年同期和本月是柱状，增减百分比是折线，平衡点是在柱状上的横线）*/
+					data: ['预警高度', '低预警高度'],
 					textStyle: {
-						color: "#fff",
+						color: '#fff',
 					},
+					itemHeight:1
 				},
-				toolbox: {
-					show: true,
-					feature: {
-						// dataView: {
-						// 	readOnly: false
-						// },
-						// restore: {},
-						// saveAsImage: {}
-					}
-				},
-				dataZoom: {
-					show: false,
-					start: 0,
-					end: 100
+				grid: {
+					borderWidth: 1
 				},
 				xAxis: [{
-						type: 'category',
-						boundaryGap: true,
-						data: categories,
-						axisLabel: {
-							//x轴文字的配置
-							show: true,
-							textStyle: {
-								color: "rgba(255,225,255,1)",
-							},
-						},
-						splitLine: {
-							show: false,
-							lineStyle: {
-								type: 'dashed',
-								color: '#113d5e'
-							}
-						},
-
+					type: 'category',
+					data: ['机井水位', '田间水位', '地下水水位', '水库水位', '河湖水位'],
+					name: '监测点',
+					nameGap: 25,
+					nameTextStyle: {
+						//y轴上方单位的颜色
+						color: "#fff",
+						padding:[0,0,0,-20]
 					},
-					{
-						type: 'category',
-						boundaryGap: true,
-						data: categories2,
-						axisLabel: {
-							//x轴文字的配置
-							show: true,
-							textStyle: {
-								color: "rgba(255,225,255,1)",
-							},
-						},
-						splitLine: {
-							show: true,
-							lineStyle: {
-								type: 'dashed',
-								color: '#113d5e'
-							}
-						},
-					}
-				],
-				yAxis: [{
-						type: 'value',
-						scale: true,
-						name: '水位/m',
-						axisLabel: {
-							//x轴文字的配置
-							show: true,
-							textStyle: {
-								color: "rgba(255,225,255,1)",
-							},
-						},
-						nameTextStyle: {
-							//y轴上方单位的颜色
+					axisLabel: {
+						//x轴文字的配置
+						show: true,
+						interval: 0,
+						rotate: -30, //倾斜的程度
+						textStyle: {
 							color: "#fff",
 						},
-						nameGap: 25,
-						max: 30,
-						min: 0,
-						boundaryGap: [0.2, 0.2],
-						splitLine: {
-							show: false,
-						},
 					},
-					{
-						type: 'value',
-						scale: true,
-						name: '预警/m',
-						max: 1200,
-						nameGap: 25,
-						min: 0,
-						boundaryGap: [0.2, 0.2],
-						nameTextStyle: {
-							//y轴上方单位的颜色
+
+				}, {
+					type: 'category',
+					axisLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					},
+					axisLabel: {
+						show: false
+					},
+					splitArea: {
+						show: false
+					},
+					splitLine: {
+						show: false
+					},
+					data: ['机井水位', '田间水位', '地下水水位', '水库水位', '河湖水位']
+				}, {
+					type: 'category',
+					axisLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					},
+					axisLabel: {
+						show: false
+					},
+					splitArea: {
+						show: false
+					},
+					splitLine: {
+						show: false
+					},
+					data: ['机井水位', '田间水位', '地下水水位', '水库水位', '河湖水位']
+				}, ],
+				yAxis: {
+					type: 'value',
+					name: '水位/m',
+					nameGap: 25,
+					nameTextStyle: {
+						//y轴上方单位的颜色
+						color: "#fff",
+					},
+					axisLabel: {
+						//x轴文字的配置
+						show: true,
+						textStyle: {
 							color: "#fff",
 						},
-						axisLabel: {
-							//x轴文字的配置
-							show: true,
-							textStyle: {
-								color: "rgba(255,225,255,1)",
-							},
-						},
-						splitLine: {
-							show: false,
-						},
-					}
-				],
+					},
+					splitLine: {
+						show: true,
+						lineStyle: {
+							type: 'dashed',
+							color: 'rgba(255,255,255,0.4)'
+						}
+					},
+				},
 				series: [{
-						name: '水位高度',
+						data: [120, {
+							value: 200,
+							itemStyle: {
+								color: 'rgba(255,0, 0,0.5)'
+							}
+						}, 150, 80, 130],
+						type: 'bar',
+						showBackground: true,
+						backgroundStyle: {
+							color: 'rgba(180, 180, 180, 0.2)'
+						}
+					}, {
+						/*这个bar是撑起横线的高度，并设置透明*/
+						// name: "预警高度",
+						stack: 'breakevenEleGroup',
+						/*盈亏点数据组，需要设置才能将两个bar堆积在一起*/
 						type: 'bar',
 						xAxisIndex: 1,
-						yAxisIndex: 1,
-						data: data
+						itemStyle: {
+							normal: {
+								color: 'rgba(255,0, 0,0)',
+								/*设置bar为隐藏，撑起下面横线*/
+							}
+						},
+						data: [170, 180, 190, 185, 177],
 					},
 					{
-						name: '水位预警',
-						type: 'line',
-						data: data2
-					}
-				]
-			};
-			this.app.count = 11;
-			let _this = this
-			setInterval(function() {
-				let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
-				data.shift();
-				data.push(Math.round(Math.random() * 1000));
-				data2.shift();
-				data2.push(+(Math.random() * 10 + 5).toFixed(1));
-				categories.shift();
-				categories.push(axisData);
-				categories2.shift();
-				categories2.push(_this.app.count++);
-				_this.option.xAxis = [{
-						data: categories
+						/*这个bar是横线的显示*/
+						name: "预警高度",
+						stack: 'breakevenEleGroup',
+						/*盈亏点数据组，需要设置才能将两个bar堆积在一起*/
+						type: 'bar',
+						xAxisIndex: 1,
+						barGap: "0",
+						itemStyle: {
+							normal: {
+								color: 'rgba(255,0, 0,1)'
+							}
+						},
+						data: [2, 2, 2, 2, 2],
+					}, {
+						/*这个bar是撑起横线的高度，并设置透明*/
+						// name: "低预警高度",
+						stack: 'breakevenEleGroup2',
+						/*盈亏点数据组，需要设置才能将两个bar堆积在一起*/
+						type: 'bar',
+						xAxisIndex: 2,
+						itemStyle: {
+							normal: {
+								color: 'rgba(255,0, 0,0)',
+								/*设置bar为隐藏，撑起下面横线*/
+							}
+						},
+						data: [60, 40, 30, 55, 50],
 					},
 					{
-						data: categories2
-					}
-				]
-				_this.option.series = [{
-						data: data
+						/*这个bar是横线的显示*/
+						name: "低预警高度",
+						stack: 'breakevenEleGroup2',
+						/*盈亏点数据组，需要设置才能将两个bar堆积在一起*/
+						type: 'bar',
+						xAxisIndex: 2,
+						barGap: "0",
+						itemStyle: {
+							normal: {
+								color: 'rgba(245, 220, 27,1)'
+							}
+						},
+						data: [2, 2, 2, 2, 2],
 					},
-					{
-						data: data2
-					}
 				]
-			}, 2100);
+			}
 		}
 	}
 </script>

src/views/Map3d/components/sbyxjc.vue

@@ -24,8 +24,7 @@
 					<label style="color:'#ecec66';">200A</label>
 					<label>150kpa</label>
 					<label>80m³/h</label>
-					<button @click="flyto(1)"
-						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">正常</button>
+					<button @click="flyto(1)" class="bluebutton">正常</button>
 				</div>
 			</div>
 			<div class="chushuikou3">
@@ -34,8 +33,7 @@
 					<label style="color:'#ecec66';">10A</label>
 					<label>100kpa</label>
 					<label>10m³/h</label>
-					<button @click="flyto(2)"
-						style="background-color:  rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">异常</button>
+					<button @click="flyto(2)" class="redbutton">异常</button>
 				</div>
 			</div>
 			<div class="chushuikou4">
@@ -44,8 +42,7 @@
 					<label style="color:'#ecec66';">200A</label>
 					<label>150kpa</label>
 					<label>80m³/h</label>
-					<button @click="flyto(3)"
-						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
+					<button @click="flyto(3)" class="bluebutton">正常</button>
 				</div>
 			</div>
 			<div class="chushuikou5">
@@ -54,8 +51,7 @@
 					<label style="color:'#ecec66';">200A</label>
 					<label>150kpa</label>
 					<label>80m³/h</label>
-					<button @click="flyto(4)"
-						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
+					<button @click="flyto(4)" class="bluebutton">正常</button>
 				</div>
 			</div>
 			<div class="chushuikou4">
@@ -64,8 +60,7 @@
 					<label style="color:'#ecec66';">200A</label>
 					<label>150kpa</label>
 					<label>80m³/h</label>
-					<button @click="flyto(5)"
-						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
+					<button @click="flyto(5)" class="bluebutton">正常</button>
 				</div>
 			</div>
 			<div class="chushuikou5">
@@ -74,8 +69,7 @@
 					<label style="color:'#ecec66';">200A</label>
 					<label>150kpa</label>
 					<label>80m³/h</label>
-					<button @click="flyto(6)"
-						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">正常</button>
+					<button @click="flyto(6)" class="bluebutton">正常</button>
 				</div>
 			</div>
 			<div class="chushuikou4">
@@ -84,8 +78,7 @@
 					<label style="color:'#ecec66';">200A</label>
 					<label>150kpa</label>
 					<label>80m³/h</label>
-					<button @click="flyto(7)"
-						style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">正常</button>
+					<button @click="flyto(7)" class="bluebutton">正常</button>
 				</div>
 			</div>
 			<div class="chushuikou5">
@@ -94,8 +87,7 @@
 					<label style="color:'#ecec66';">20A</label>
 					<label>10kpa</label>
 					<label>10m³/h</label>
-					<button @click="flyto(8)"
-						style="background-color: rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">异常</button>
+					<button @click="flyto(8)" class="redbutton">异常</button>
 				</div>
 			</div>
 		</div>
@@ -105,72 +97,66 @@
 <script>
 	let jt3d = undefined;
 	import map_xzqh_zj from '@/assets/dataFile/map_xzqh_zj.json';
+	import {
+		Store
+	} from '@/store/index'
+	let store = Store();
 	export default {
 		data() {
 			return {
-				// viewersName: '', //视角标签名称
-				// ImgurlList: [], //截图地址列表
-				entity: '',
+				entity1: '',
 			}
 		},
 		methods: {
 			flyto(num) {
-				return
-				let terrainProvider = jt3d._viewer.terrainProvider;
-				//异步函数
-				let lon = 116.30
-				let lat = 36.88
-				let that = this
-				if (that.entity) {
-					jt3d._viewer.entities.remove(that.entity)
-				}
-				// if that.entity && jt3d._viewer.entities.remove(that.entity)
-				// console.log('高度', updatedPositions)
-				let height = 1000
+				store.isflyto = true
+				console.log(store.isflyto)
+				// 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)
+				// });
+
 
-				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)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
-					}
-					// point:{
-					// 	pixelSize:20,
-					// 	color:Cesium.Color.RED,
-					// }
-				});
-				var entity = jt3d._viewer.entities.add(that.entity1, {
-					// range: 1000
-				});
-				jt3d.LocateUtil.flyToEntity(that.entity)
-				setTimeout(res=>{
-					console.log('定位')
-					console.log('实体', entity)
-					jt3d.LocateUtil.flyToEntity(that.entity)
-					jt3d._viewer.flyTo(entity,{
-						duration:5.0,
-						maximumHeight:1500
-					}).then(res=>{
-						console.log('定位结束' + res)
-					}).catch(err=>{
-						console.log("err" + err);
-					})
-					// jt3d._viewer.camera.flyTo({
-					//     destination : Cesium.Cartesian3.fromDegrees(120.623, 36.9157, 1500)
-					// });
-				},2000)
-				
 				// let lng = Number(114.22) + Number(num)
 				// this.entity = new Cesium.Entity({
 				// 	name: "add billboard",
@@ -188,7 +174,7 @@
 				// 		scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 2400, 0) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
 				// 	}
 				// });
-				
+
 				// jt3d._viewer.entities.add(this.entity, {
 				// 	range: 1000
 				// });
@@ -208,6 +194,28 @@
 </script>
 
 <style lang="scss" scoped>
+	.redbutton {
+		background-color: rgb(238, 80, 80);
+		width: 50rem;
+		height: 20rem;
+		color: #fff;
+		font-size: 14rem;
+		border: 0;
+		font-weight: 500;
+		margin-top: -4rem
+	}
+
+	.bluebutton {
+		background-color: rgb(40, 170, 230);
+		width: 50rem;
+		height: 20rem;
+		color: #fff;
+		font-size: 14rem;
+		border: 0;
+		font-weight: 500;
+		margin-top: -4rem
+	}
+
 	#main5 {
 		width: calc(100% - 20rem);
 		height: calc(100% - 20rem);

src/views/Table/Table.vue

@@ -10,7 +10,7 @@
 </script>
 
 <template>
-	<jt-popup2 title="农田基本信息" ref="BasicInfor">
+	<jt-popup2 title="项目基本信息" ref="BasicInfor">
 		<BasicInfor></BasicInfor>
 	</jt-popup2>
 

src/views/Table/components/BasicInfor.vue

@@ -1,59 +1,82 @@
 <template>
 
 	<div class="Background">
-		<p>
+		<div class="imgback"></div>
+		<div class="ref000" style="font-size: 10rem; ">
 			系统建设应坚持“先进、可靠、实用、落地”的原则，实行“整体规划、分步实施；统一标准、加强管理；先进实用、政策落地”的建设方针。
-		</p>
+		</div>
 	</div>
 
-	<div class="leftTitle">
-		<div class='topIcon'>
-			<div class="fontInfo">20.4</div>
-			<div class="font">本年规划(亩)</div>
-		</div>
-		<div class='bottomIcon'>
-			<div class="fontInfo">100</div>
-			<div class="font">地块数量(块)</div>
-		</div>
+	<div class="Titles">
+		<div class="leftTitle">
+			<div class='topIcon'>
+				<div class="fontInfo">20.4</div>
+				<div class="font">本年规划(亩)</div>
+			</div>
+			<div class='bottomIcon'>
+				<div class="fontInfo">100</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 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>
+<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;
-		background: url('@/assets/images/basic.png') no-repeat;
-		background-size: 33% 100%;
+		position: relative;
 	}
 
-	.Background p {
-		margin-top: 0rem;
+	.ref000 {
+		position: absolute;
+		height: 100rem;
+		width: 220rem;
+		right: 0;
+		top: 0;
 		text-indent: 30rem;
-		margin-left: 150rem;
+		/* margin-left: 100rem; */
 		display: inline-block;
 		text-align: left;
-		font-size: 14rem;
+		font-size: 14rem !important;
+		overflow-y:auto
+	}
+	.Titles{
+		margin-top:2%
+		
 	}
 
 	.leftTitle {
-		float: left;
+		
 		width: 200rem;
 		display: inline-block
 	}
@@ -62,32 +85,36 @@
 		margin-top: 15rem;
 		margin-left: 10rem;
 		height: 44rem;
-		width: 130rem;
+		width: 140rem;
 		background: url('@/assets/images/icon.png') no-repeat;
+		background-size: 35%, 100%;
 	}
 
 	.bottomIcon {
 		margin-left: 10rem;
 		margin-top: 15rem;
 		height: 44rem;
-		width: 130rem;
+		width: 140rem;
 		background: url('@/assets/images/bottom.png') no-repeat;
+		background-size: 35%, 100%;
 	}
 
 	.topRightIcon {
 		margin-right: 10rem;
 		margin-top: 15rem;
 		height: 44rem;
-		width: 130rem;
+		width: 140rem;
 		background: url('@/assets/images/rightTop.png') no-repeat;
+		background-size: 35%, 100%;
 	}
 
 	.bottomRightIcon {
 		margin-right: 10rem;
 		margin-top: 15rem;
 		height: 44rem;
-		width: 130rem;
+		width: 140rem;
 		background: url('@/assets/images/rightBottom.png') no-repeat;
+		background-size: 35%, 100%;
 	}
 
 	.rightTitle {
@@ -96,6 +123,7 @@
 	}
 
 	.fontInfo {
+		height: 60%;
 		font-size: 24rem;
 		color: rgb(200, 250, 255);
 		margin-left: 50rem;

src/views/Table/components/TianluEngin.vue

@@ -1,28 +1,399 @@
-  <template>
-	  <div class="Chart"></div>
- 	
- </template>
- 
- <script>
- 	export default {
- 		data() {
- 			return {
- 				option: {}
- 			}
- 		},
- 		created() {},
- 		mounted() {
- 			
- 		},
- 		methods: {
- 
- 		},
- 
- 	}
- </script>
- 
- <style>
+<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: 400rem;
+		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: 165rem;
+		margin-left: 150rem;
+		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>
- 
+</style>

src/views/Table/components/WaterLevelChart.vue

@@ -1,6 +1,6 @@
 <template>
-  	<div style="display: inline-block;float:left">
-  		<jt-echarts style="width: 166rem;height: 166rem;margin-top:25rem" :chartData="option"></jt-echarts>
+  	<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">
@@ -47,9 +47,9 @@
   						show: true
   					},
   					series: [{
-  						name: '睡了',
+  						name: '完成',
   						type: 'liquidFill',
-  						radius: '100%',
+  						radius: '80%',
   						data: [0.80],
   						label: {
   							normal: {
@@ -95,7 +95,7 @@
   	}
   </script>
 
-  <style>
+  <style scoped>
   	.text {
   		margin-top: 10rem;
   		height: 170rem;
@@ -105,6 +105,7 @@
   	}
 
   	.left {
+		width: 50%;
   		float: left;
 
   	}
@@ -118,9 +119,22 @@
 
   	.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>