|
@@ -0,0 +1,361 @@
|
|
|
|
+<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;
|
|
|
|
+ console.log('查询',treeNode)
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+
|
|
|
|
+ if (treeNode.parentid != 'CIM') {
|
|
|
|
+ console.log('查询11',treeNode.data.geometry)
|
|
|
|
+ //清除高亮显示
|
|
|
|
+ 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)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ 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);
|
|
|
|
+ console.log('查询12',treeNode)
|
|
|
|
+ // let flyToEntity = jt3d.LocateUtil.flyToEntity(locationEntity, options);
|
|
|
|
+ // flyToEntity.then(function(flag) {
|
|
|
|
+ //详细信息
|
|
|
|
+ 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>
|