Bladeren bron

no message

DESKTOP-GBVU60Q\dell 2 jaren geleden
bovenliggende
commit
3eea65dd88

+ 1 - 1
.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'

+ 1 - 1
.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

+ 70 - 35
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/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,
+						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;
-		
+
 	}
 
 	//分屏样式

+ 2 - 2
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;

+ 341 - 176
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>

+ 83 - 75
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);