<template>
|
<el-drawer
|
title="查询结果"
|
:visible.sync="showQueryData"
|
direction="btt"
|
size="344"
|
:modal="true"
|
:withHeader="false"
|
:wrapperClosable="false"
|
:append-to-body="true"
|
:destroy-on-close="true"
|
:close-on-press-escape="false"
|
style="width: 99%; margin: 0 auto"
|
>
|
<div class="closeButton" @click="close"><i class="el-icon-close"></i></div>
|
<el-tabs v-model="activeName">
|
<el-tab-pane
|
v-for="data in tableList"
|
:key="data.table"
|
:label="data.name"
|
:name="data.table"
|
>
|
<el-table :data="data.tableData" @row-click="clickData" height="250">
|
<el-table-column
|
v-for="key in data.attr"
|
:key="key"
|
:property="key"
|
:label="key"
|
>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</el-drawer>
|
</template>
|
<style scoped>
|
/* 设置el-drawer弹出的界面的背景颜色(黑色透明)设置上内边距 */
|
div /deep/ .el-drawer {
|
background-color: rgba(0, 0, 0, 0.6);
|
padding: 0 30px 0 0;
|
}
|
/* 去除点击el-drawer中的内容时，出现的白色边框线 */
|
div /deep/ .el-drawer:focus {
|
outline: none;
|
}
|
|
/* 去除点击遮罩层,最外层出现的黑色边框线 */
|
div /deep/ :focus {
|
outline: 0;
|
}
|
|
/* 设置el-tabs的外边距和背景色透明 */
|
.el-tabs {
|
margin: 20px 20px;
|
background-color: transparent;
|
}
|
|
/* 设置表格的背景色透明 */
|
.el-table {
|
background-color: transparent;
|
}
|
|
/* 设置表格中th和tr的背景色和文字的颜色 */
|
.el-table /deep/ th,
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: white;
|
}
|
|
/* 设置当鼠标悬停表格的行时,背景色的改变 */
|
.el-table /deep/ tbody tr:hover > td {
|
background-color: rgba(0, 0, 0, 0.4) !important;
|
}
|
|
/* 设置右上方关闭按钮的位置等信息 */
|
.closeButton {
|
position: absolute;
|
top: 0;
|
right: 0;
|
cursor: pointer;
|
padding: 10px 12px;
|
z-index: 999;
|
}
|
.el-icon-close {
|
font-size: 28px;
|
color: white;
|
}
|
</style>
|
|
<script>
|
var polygon = null;
|
export default {
|
name: "querydata",
|
data() {
|
return {
|
// el-tabs默认选中
|
activeName: "",
|
// 是否打开el-drawer的参数
|
showQueryData: false,
|
// 表格中的数据
|
tableList: [],
|
polygon: null,
|
};
|
},
|
methods: {
|
// 关闭按钮事件,关闭el-drawer弹窗
|
close() {
|
if (polygon != null) {
|
sgworld.Viewer.entities.remove(polygon);
|
}
|
this.showQueryData = false;
|
},
|
// 展示数据在表格中
|
updataTable(queryData) {
|
this.tableList = queryData;
|
this.activeName = queryData[0].table;
|
},
|
clickData(row, event, column) {
|
let geom = row.geom;
|
let geom1 = geom.split("(");
|
let geom2 = geom1[geom1.length - 1];
|
let geom3 = geom2.split(")");
|
let geom4 = geom3[0];
|
let geom5 = geom4.split(",");
|
var geometry = [];
|
var pArray = [];
|
var hierarchy;
|
for (let i = 0; i < geom5.length; i++) {
|
let geom6 = geom5[i].split(" ");
|
let xy = { x: geom6[0], y: geom6[1], z: 0 };
|
geometry.push(xy);
|
pArray.push(geom6[0], geom6[1]);
|
hierarchy = Cesium.Cartesian3.fromDegreesArray(pArray);
|
}
|
if (polygon != null) {
|
sgworld.Viewer.entities.remove(polygon);
|
}
|
polygon = sgworld.Viewer.entities.add({
|
polygon: {
|
hierarchy: new Cesium.PolygonHierarchy(hierarchy),
|
material: Cesium.Color.RED.withAlpha(0.5),
|
classificationType: Cesium.ClassificationType.BOTH,
|
},
|
});
|
var options = {
|
maximumHeight: 30,
|
offset: new Cesium.HeadingPitchRange(
|
sgworld.Viewer.camera.heading,
|
-90,
|
30
|
),
|
};
|
sgworld.Viewer.flyTo(polygon, options);
|
// sgworld.Navigate.flyToObj(polygon);
|
},
|
},
|
mounted() {},
|
};
|
</script>
|
