JT-CIM/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)
						})

						//高亮显示并定位显示详细信息
						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; //设置显示的数据，可以是标签．

							});

						});
					}

					resolve(1)
				})
			},

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

<style lang="scss">
	.jt-queryResult {
		overflow: hidden;

		//左侧树
		&>div:nth-child(1) {
			width: 220rem;
			height: 380rem;
			float: left;
			overflow: auto;
			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) {
			width: calc(100% - 240rem);
			height: calc(100% - 0rem);
			float: left;
			margin-left: 10rem;
			font-size: 14rem;
			padding-top: 5rem;

			table {
				border-collapse: collapse;
				margin: 0 auto;
				text-align: center;
				width: 100%;
			}

			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>