|
@@ -58,70 +58,113 @@
|
|
|
})
|
|
|
|
|
|
//高亮显示并定位显示详细信息
|
|
|
- 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>";
|
|
|
- }
|
|
|
+ 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);
|
|
|
}
|
|
|
- });
|
|
|
-
|
|
|
- strHtml += "</tbody>";
|
|
|
- strHtml += "</table>";
|
|
|
-
|
|
|
- let divb = document.getElementById('detailDiv')
|
|
|
- divb.innerHTML = strHtml; //设置显示的数据,可以是标签.
|
|
|
-
|
|
|
+
|
|
|
+ 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);
|
|
|
+
|
|
|
+ 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; //设置显示的数据,可以是标签.
|
|
|
+
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
mounted() {}
|
|
@@ -130,49 +173,61 @@
|
|
|
|
|
|
<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;
|
|
|
+ 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: "";
|
|
@@ -184,12 +239,12 @@
|
|
|
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: "";
|
|
@@ -201,20 +256,20 @@
|
|
|
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;
|
|
@@ -222,58 +277,64 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
//右侧基本信息
|
|
|
&>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;
|
|
@@ -282,7 +343,7 @@
|
|
|
/* 当垂直内容超出显示高度时以滚动条形式展示 */
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
table>tbody>tr {
|
|
|
/* 将tr设置为table元素,以此达到内容沾满table的效果 */
|
|
|
display: table;
|
|
@@ -291,7 +352,7 @@
|
|
|
/* 设置table-layout为fixed以达到首行和内容行对其的效果 */
|
|
|
table-layout: fixed;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
table>tbody>tr>td {
|
|
|
border-right: 2rem solid #ddd;
|
|
|
}
|