JT-CIM-ZHNY/src/views/Map3d/components/sbyxjc.vue

<script setup>
	import {
		inject
	} from "vue";
	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div id="main5">
		<div class="chushuikou">
			<div class="chushuikou1">
				<div class="chushuikou1-1">
					<label>区域</label>
					<label>水泵电流</label>
					<label>机井压力</label>
					<label>实时流量</label>
					<label>运行状态</label>
				</div>
			</div>
			<div class="chushuikou2">
				<div class="chushuikou2-1">
					<label>1号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(1)" class="bluebutton">正常</button>
				</div>
			</div>
			<div class="chushuikou3">
				<div class="chushuikou2-1">
					<label>2号机井</label>
					<label style="color:'#ecec66';">10A</label>
					<label>100kpa</label>
					<label>10m³/h</label>
					<button @click="flyto(2)" class="redbutton">异常</button>
				</div>
			</div>
			<div class="chushuikou4">
				<div class="chushuikou2-1">
					<label>3号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(3)" class="bluebutton">正常</button>
				</div>
			</div>
			<div class="chushuikou5">
				<div class="chushuikou2-1">
					<label>4号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(4)" class="bluebutton">正常</button>
				</div>
			</div>
			<div class="chushuikou4">
				<div class="chushuikou2-1">
					<label>5号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(5)" class="bluebutton">正常</button>
				</div>
			</div>
			<div class="chushuikou5">
				<div class="chushuikou2-1">
					<label>6号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(6)" class="bluebutton">正常</button>
				</div>
			</div>
			<div class="chushuikou4">
				<div class="chushuikou2-1">
					<label>7号机井</label>
					<label style="color:'#ecec66';">200A</label>
					<label>150kpa</label>
					<label>80m³/h</label>
					<button @click="flyto(7)" class="bluebutton">正常</button>
				</div>
			</div>
			<div class="chushuikou5">
				<div class="chushuikou2-1">
					<label>8号机井</label>
					<label style="color:'#ecec66';">20A</label>
					<label>10kpa</label>
					<label>10m³/h</label>
					<button @click="flyto(8)" class="redbutton">异常</button>
				</div>
			</div>
		</div>
	</div>
</template>

<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 {
				entity1: '',
			}
		},
		methods: {
			flyto(num) {
				let that = this
				let PointObject = new this.jt3dSDK.PointObject(window.viewer);
				var LocateUtil = new this.jt3dSDK.LocateUtil(window["viewer"]);
				let Drawtools = new this.jt3dSDK.DrawTools(window.viewer)
				//_createCircle
				PointObject.addBillboard([117.47349486,36.33949225, 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 => {
						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"], [117.47349486,36.33949225], "设备信息", html, 50);
						let circleObject = new this.jt3dSDK.CircleObject(jt3d._viewer);
						circleObject.drawCircle([117.47349486,36.33949225], 50, {
							// color: [255, 255, 0, 0.8]
							color: [255, 0, 0, 1],
							outline: true,
							outlineColor: [255, 255, 255, 1],
							outlineWidth: 20,
							CircleType: 'DynamicCircle',
							count: 2,
							duration: 4000
						})
					})
				})

				//====实现
				/* 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;

				// var circleGeometry = new Cesium.CircleGeometry({
				// 	center: entity.position.getValue(), // 圆心位置
				// 	radius: radius,
				// 	vertexFormat: vertexFormat
				// });

				// 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() {
			// jt3d.PolylineObject.drawPolylineByGeoJson(map_xzqh_zj, {
			// 	width: 5,
			// 	color: '#04FFFF',
			// 	isImageAlpha: true, //用图片自带颜色
			// 	duration: 3000,
			// 	imgUrl: "/jt3dSDK/imgs/polylinematerial/spriteline1.png"
			// });
		}
	}
</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);
		margin: 10rem;

		.chushuikou {
			width: 100%;
			height: 175rem;
			margin-top: 10rem;
			// margin-left: 5rem;
		}

		.chushuikou1 {
			width: 100%;
			height: 35rem;
			background-color: rgba(61, 198, 255, 0.4);
			display: flex;
			align-items: center;
		}

		.chushuikou1-1 {
			font-family: SimHei;
			font-size: 14rem;
			color: #C8daf5;
			width: 100%;
			height: 13rem;
			display: flex;
			justify-content: space-around;
			margin: auto;
		}

		.chushuikou2-1 {
			font-family: SimHei;
			font-size: 13rem;
			color: #C8daf5;
			width: 100%;
			height: 13rem;
			display: flex;
			justify-content: space-around;
			margin: auto;
			// margin-left: 30rem;
		}

		.chushuikou2-2 {
			font-family: SimHei;
			font-size: 13rem;
			color: #C8daf5;
			width: 100%;
			height: 13rem;
			display: flex;
			justify-content: space-between;
			margin: auto;
			// margin-left: 30rem;
		}

		.chushuikou2 {
			width: 100%;
			height: 35rem;
			display: flex;
			align-items: center;
		}

		.chushuikou3 {
			width: 100%;
			height: 35rem;
			background-color: rgba(0, 37, 98, 0.4);
			display: flex;
			align-items: center;
		}

		.chushuikou4 {
			width: 100%;
			height: 35rem;
			display: flex;
			align-items: center;
		}

		.chushuikou5 {
			width: 100%;
			height: 35rem;
			background-color: rgba(0, 37, 98, 0.4);
			display: flex;
			align-items: center;
		}

	}
</style>