JT-CIM-LHYT/src/views/Map3d/components/queryResult - 副本.vue

<script setup>
	import {
		formattingTime
	} from '@/assets/js/localtime.js';

	import {
		inject
	} from "vue";
	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>
<template>
	<div class="jt-queryResult">
		<div class="_left">
			<el-tree class="tree-line queryResultTree" ref="tree" node-key="id" :data="treeData" :default-expanded-keys="expandedKeys" :current-node-key="currentKey" @node-click="handleNodeClick" highlight-current />
		</div>
		<div class="_right">
			<div id="detailDiv"></div>
		</div>
	</div>
</template>

<script>
	let jt3d = undefined;

	export default {
		props: {
			tree: {
				type: Object,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				treeData: this.tree,
				currentKey: "",
				expandedKeys: [], //对应要展开的节点id
			}
		},
		methods: {
			/**
			 * 树单击事件
			 */
			handleNodeClick(treeNode) {

				let _self = this;

				return new Promise((resolve, reject) => {

					if (treeNode.parentid != 'CIM') {

						//清除高亮显示
						let list = jt3d._dataSources.getByName("单击高亮显示")
						list.forEach(res => {
							jt3d._dataSources.remove(res)
						})

						//高亮显示并定位显示详细信息
						if (treeNode.data.geometry.type == 'Point') {
							let strHtml = "";
							strHtml += "<table style='z-index:100;width:98%';border:2px solid #fff;>";
							strHtml += "<thead>";
							strHtml += "<tr>";
							strHtml += "<th>属性名</th>";
							strHtml += "<th>属性值</th>";
							strHtml += "</tr> ";
							strHtml += " </thead>";
							strHtml += "<tbody>";

							var field = treeNode.field;
							var properties = treeNode.data.properties
							field.forEach(itemField => {
								if (itemField.isDisplay === 1) {
									var fieldDesc = itemField.fieldDescription || itemField
										.fieldName;
									var fieldVals = properties[itemField.fieldName];

									//日期格式
									if (itemField.fieldType === 1) {
										let time = new Date(fieldVals).getTime();
										fieldVals = formattingTime(time);
									}

									if (fieldVals != null && fieldVals != "" && fieldVals !=
										undefined) {
										strHtml += "<tr>";
										strHtml += "<td>" + fieldDesc + "</td>";
										strHtml += "<td>" + fieldVals + "</td>";
										strHtml += "</tr>";
									}
								}
							});
							strHtml += "</tbody>";
							strHtml += "</table>";
							let divb = document.getElementById('detailDiv')
							divb.innerHTML = strHtml; //设置显示的数据，可以是标签．
						} else if (treeNode.data.geometry.type == "MultiPolygon") {
							this.polygon(treeNode)
						} else if (treeNode.data.geometry.type == "MultiLineString") {
							debugger
							this.polygon(treeNode)
						}
					}

					resolve(1)
				})
			},

			polygon(treeNode) {
				jt3d.PolygonObject.generatePolygonByPoints(treeNode.data.geometry.coordinates[0][0], {
					color: [255, 0, 255, 0],
					outline: true,
					outlineWidth: 5,
					outlineColor: [0, 255, 180, 1]
				}).then((locationEntity) => {
					// 初始化定位参数
					let options = {};
					options.duration = Cesium.defaultValue(options.duration, 2);
					options.heading = Cesium.defaultValue(options.heading, 0);
					options.pitch = Cesium.defaultValue(options.pitch, -60);
					options.range = Cesium.defaultValue(options.range, 800.0);

					let flyToEntity = jt3d.LocateUtil.flyToEntity(locationEntity, options);
					flyToEntity.then(function(flag) {
						//详细信息
						let strHtml = "";
						strHtml += "<table>";
						strHtml += "<thead>";
						strHtml += "<tr>";
						strHtml += "<th>属性名</th>";
						strHtml += "<th>属性值</th>";
						strHtml += "</tr> ";
						strHtml += " </thead>";
						strHtml += "<tbody>";

						var field = treeNode.field;
						var properties = treeNode.data.properties
						field.forEach(itemField => {
							if (itemField.isDisplay === 1) {
								var fieldDesc = itemField.fieldDescription || itemField
									.fieldName;
								var fieldVals = properties[itemField.fieldName];

								//日期格式
								if (itemField.fieldType === 1) {
									let time = new Date(fieldVals).getTime();
									fieldVals = formattingTime(time);
								}

								if (fieldVals != null && fieldVals != "" && fieldVals !=
									undefined) {
									strHtml += "<tr>";
									strHtml += "<td>" + fieldDesc + "</td>";
									strHtml += "<td>" + fieldVals + "</td>";
									strHtml += "</tr>";
								}
							}
						});

						strHtml += "</tbody>";
						strHtml += "</table>";

						let divb = document.getElementById('detailDiv')
						divb.innerHTML = strHtml; //设置显示的数据，可以是标签．

					});
				});
			},

			//信息展示
			createContent(treeNode) {
				let strHtml = "";
				strHtml += "<table style='z-index:100;width:98%';border:2px solid #fff;>";
				strHtml += "<thead>";
				strHtml += "<tr>";
				strHtml += "<th>属性名</th>";
				strHtml += "<th>属性值</th>";
				strHtml += "</tr> ";
				strHtml += " </thead>";
				strHtml += "<tbody>";

				var field = treeNode.field;
				var properties = treeNode.data.properties
				field.forEach(itemField => {
					if (itemField.isDisplay === 1) {
						var fieldDesc = itemField.fieldDescription || itemField.fieldName;
						var fieldVals = properties[itemField.fieldName];

						//日期格式
						if (itemField.fieldType === 1) {
							let time = new Date(fieldVals).getTime();
							fieldVals = formattingTime(time);
						}

						if (fieldVals != null && fieldVals != "" && fieldVals != undefined) {
							strHtml += "<tr>";
							strHtml += "<td>" + fieldDesc + "</td>";
							strHtml += "<td>" + fieldVals + "</td>";
							strHtml += "</tr>";
						}
					}
				});
				strHtml += "</tbody>";
				strHtml += "</table>";
				let divb = document.getElementById('detailDiv')
				divb.innerHTML = strHtml; //设置显示的数据，可以是标签．
			}

		},
		mounted() {}
	}
</script>

<style lang="scss">
	.jt-queryResult {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 100000;

		// overflow-y: hidden;
		._right {
			// overflow-y: hidden;
		}

		//左侧树
		&>div:nth-child(1) {
			position: absolute;
			left: 0;
			top: 0;
			width: 220rem;
			height: 380rem;
			float: left;
			overflow: auto !important;
			border-right: 5rem solid #ddd;

			.el-tree {
				background: rgb(28 59 112 / 0%);
				height: calc(100% - 2rem);
				color: #fff;
				--el-tree-node-hover-bg-color: #2a67c3;
				--el-font-size-base: 14rem;

				.overflowtext {
					width: auto !important;
					padding: 0;
				}
			}



			.tree-line {
				.el-tree-node {
					position: relative;
				}

				.el-tree-node__children {
					padding-left: 16rem !important; // 缩进量

					.el-tree-node__content {
						padding-left: 18rem !important;
					}
				}

				//高亮显示选中样式
				.el-tree-node.is-current>.el-tree-node__content {
					background: #2a67c3;
				}

				// 竖线
				.el-tree-node::before {
					content: "";
					height: 100%;
					width: 1rem;
					position: absolute;
					left: -3rem;
					top: -26rem;
					border-width: 1rem;
					border-left: 1rem dashed rgba(255, 255, 255, .8);
				}

				// 当前层最后一个节点的竖线高度固定
				.el-tree-node:last-child::before {
					height: 38rem; // 可以自己调节到合适数值
				}

				// 横线
				.el-tree-node::after {
					content: "";
					width: 24rem;
					height: 20rem;
					position: absolute;
					left: -3rem;
					top: 12rem;
					border-width: 1rem;
					border-top: 1rem dashed rgba(255, 255, 255, .8);
				}

				// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
				&>.el-tree-node::after {
					border-top: none;
				}

				&>.el-tree-node::before {
					border-left: none;
				}

				// 展开关闭的icon
				.el-tree-node__expand-icon {
					font-size: 16rem;

					// 叶子节点（无子节点）
					&.is-leaf {
						color: transparent;
						display: none; // 也可以去掉
					}
				}
			}

		}

		//右侧基本信息
		&>div:nth-child(2) {
			position: absolute;
			left: 220rem;
			top: 0;
			width: calc(100% - 240rem);
			height: calc(100% - 0rem);
			float: left;
			margin-left: 10rem;
			font-size: 14rem;
			padding-top: 5rem;
			overflow: auto;

			table {
				border-collapse: collapse;
				margin: 0 auto;
				text-align: center;
				width: 100%;
				height: 100%;
				border-right: 2px solid rgb(221, 221, 221);
			}

			table td,
			table th {
				// border: 1rem solid #ddd;
				color: #fff;
				height: 30rem;
			}

			table thead th {
				background-color: rgb(28 59 112 / 100%);
				border: 2rem solid #ddd;
			}

			table tr:nth-child(odd) {
				background: rgb(40 89 172 / 60%);
				border-left: 2rem solid #ddd;
				border-right: 2rem solid #ddd;
				border-bottom: 1rem solid #ddd;
			}

			table tr:nth-child(even) {
				background: rgb(28 59 112 / 60%);
				border-left: 2rem solid #ddd;
				border-right: 2rem solid #ddd;
				border-bottom: 1rem solid #ddd;
			}

			// thead 表头固定，tbody 滚动
			table>thead>tr {
				display: table;
				width: 100%;
				table-layout: fixed;
			}

			table>tbody {
				display: block;
				height: 340rem;
				/* 隐藏水平溢出内容 */
				overflow-x: hidden;
				/* 当垂直内容超出显示高度时以滚动条形式展示 */
				overflow-y: auto;
			}

			table>tbody>tr {
				/* 将tr设置为table元素,以此达到内容沾满table的效果 */
				display: table;
				/* 将tr宽度设置为100%,以此达到内容沾满table的效果 */
				width: 100%;
				/* 设置table-layout为fixed以达到首行和内容行对其的效果 */
				table-layout: fixed;
			}

			table>tbody>tr>td {
				border-right: 2rem solid #ddd;
			}
		}
	}
</style>