<template>
|
<div class="query" id="query">
|
<div class="tool-title">
|
<!-- <img src="@/assets/img/right/head.png" /> -->
|
<label>空间查询</label>
|
</div>
|
<hr />
|
<div class="queryTools">
|
<div
|
@click="pointSelect_SQL"
|
:class="isOpen['dx'] ? 'active queryTool' : 'queryTool'"
|
>
|
<el-button>
|
<img src="@/assets/img/right/cx/dx1.png" />
|
<label>点选</label>
|
</el-button>
|
</div>
|
<div
|
@click="rectangleSelect_SQL"
|
:class="isOpen['kx'] ? 'active queryTool' : 'queryTool'"
|
>
|
<el-button>
|
<img src="@/assets/img/right/cx/kx1.png" />
|
<label>框选</label>
|
</el-button>
|
</div>
|
</div>
|
<!-- <div class="closeTool" title="收缩" @click="close">
|
<el-button>
|
<img src="@/assets/img/right/ss.png" />
|
</el-button>
|
</div> -->
|
</div>
|
</template>
|
|
<style scoped>
|
.el-button:focus,
|
.el-button:hover {
|
background: transparent;
|
}
|
.query {
|
/* position: absolute;
|
background: #fff; */
|
width: 270px;
|
height: 160px;
|
/* left: -220px;
|
top: -50px; */
|
}
|
.queryTool {
|
padding: 5px 0;
|
padding-left: 35px;
|
}
|
|
.queryTool:hover {
|
background: rgba(0, 168, 255, 0.16);
|
}
|
hr {
|
margin: 10px 0;
|
width: 111%;
|
margin-left: -15px;
|
}
|
.tool-title {
|
margin: 1px 10px;
|
}
|
.tool-title label {
|
vertical-align: top;
|
}
|
.query label {
|
margin-left: 10px;
|
font-size: 17px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
/* color: #3d3d3d; */
|
color: white;
|
}
|
.el-button {
|
padding: 0 !important;
|
font-size: 24px;
|
border: unset;
|
float: unset;
|
display: block;
|
background: rgba(0, 0, 0, 0);
|
}
|
.el-button label {
|
font-size: 14px;
|
}
|
.closeTool {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
}
|
.active {
|
background: rgba(0, 168, 255, 0.16);
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.26);
|
}
|
</style>
|
|
<script>
|
import common from "@/components/common";
|
import axios from "axios";
|
|
let pointSelect, dResultToolTip;
|
let kToolTipArr = {};
|
window.closeResultToolTip = function (id) {
|
if (id && id !== "undefined") {
|
kToolTipArr[id].show(false);
|
return;
|
}
|
dResultToolTip && dResultToolTip.show(false);
|
};
|
export default {
|
name: "query",
|
data() {
|
return {
|
status: false,
|
isOpen: {
|
dx: false,
|
kx: false,
|
},
|
};
|
},
|
mounted() {},
|
methods: {
|
// 清除高亮
|
clearActive() {
|
this.isOpen.dx = false;
|
this.isOpen.kx = false;
|
},
|
close() {
|
this.$parent.isShowQuery = false;
|
},
|
//获取查询表数据
|
getQueryData() {
|
let queryData = {};
|
if (window.ProjectTree) {
|
let checkNodes = ProjectTree.getCheckedNodes();
|
let SQL_Data = checkNodes.filter((item) => {
|
return item.SQL;
|
});
|
SQL_Data.forEach((item) => {
|
let SQL = item.SQL;
|
let tableData = {
|
name: item.name,
|
table: SQL.search_table,
|
tableData: [],
|
attr: {},
|
parameter: "",
|
};
|
for (let key in SQL) {
|
if (key !== "//" && key !== "search_table") {
|
tableData.parameter !== "" && (tableData.parameter += ",");
|
tableData.parameter += key;
|
tableData.attr[key] = SQL[key];
|
}
|
}
|
queryData[SQL.search_table] = tableData;
|
});
|
}
|
return queryData;
|
},
|
//查询参数
|
getQueryParams(geom, data) {
|
let params = {
|
geom: geom,
|
tableData: [],
|
};
|
for (let item in data) {
|
params.tableData.push({
|
tableName: item,
|
parameter: data[item].parameter,
|
});
|
}
|
params = JSON.stringify(params);
|
|
return params;
|
},
|
//显示查询结果
|
showResultToolTop(geom, degree) {
|
let loading = this.$loading({
|
lock: true,
|
text: "请稍后...",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.5)",
|
});
|
let queryData = this.getQueryData();
|
let params = this.getQueryParams(geom, queryData);
|
axios({
|
headers: {
|
"Content-Type": "application/json;charset=UTF-8",
|
},
|
method: "post",
|
url: common.space_query,
|
data: params,
|
})
|
.then((response) => {
|
loading.close();
|
let query_data = response.data;
|
if (!query_data.length) {
|
this.$message({
|
showClose: true,
|
message: "查询结果为空！",
|
});
|
return;
|
}
|
query_data.forEach((data) => {
|
let table = queryData[data.tablename];
|
let featureData = {};
|
for (let key in table.attr) {
|
featureData[table.attr[key]] = data[key] || "无";
|
}
|
featureData.geom=data["st_astext"];
|
table.tableData.push(featureData);
|
});
|
let tem = this;
|
this.$parent.$parent.$parent.updataQueryData(queryData);
|
})
|
.catch((error) => {
|
loading.close();
|
console.log(error);
|
this.$message({
|
showClose: true,
|
message: "查询失败！",
|
});
|
});
|
},
|
pointSelect_SQL() {
|
this.$parent.$parent.$parent.closeAllHighLight("query");
|
if (this.isOpen["dx"]) {
|
this.isOpen["dx"] = false;
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end("cancel"));
|
return;
|
}
|
// 清除所有的高亮样式
|
this.clearActive();
|
|
// this.$parent.closeAll();
|
this.$parent.$parent.$parent.closeAll();
|
if (!pointSelect) {
|
//结束之前操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end("cancel"));
|
|
// 点选操作高亮显示
|
this.isOpen["dx"] = true;
|
let viewer = Viewer;
|
|
let pickHandler = new Cesium.ScreenSpaceEventHandler(
|
viewer.scene.canvas
|
);
|
dResultToolTip = sgworld.Core.CreateResultTooltip(Viewer, {
|
color: "white",
|
});
|
sgworld._core.mouse(
|
Viewer.container,
|
1,
|
window.SmartEarthRootUrl + "Workers/image/cursor/draw.cur"
|
);
|
|
//点选事件
|
pickHandler.setInputAction((movement) => {
|
dResultToolTip && dResultToolTip.show(false);
|
|
let degrees = sgworld.Navigate.getMouseDegrees(movement);
|
let geom = `POINT(${degrees.lon} ${degrees.lat})`;
|
this.showResultToolTop(geom, degrees);
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
pointSelect = pickHandler;
|
this.$message({
|
showClose: true,
|
message: "开启点选",
|
});
|
sgworld.drawObj = {
|
drawHandler: pickHandler,
|
end: () => {
|
this.isOpen["dx"] = false;
|
pointSelect.destroy();
|
pointSelect = undefined;
|
this.$message({
|
showClose: true,
|
message: "关闭点选",
|
});
|
sgworld._core.mouse(Viewer.container, 0);
|
sgworld.drawObj.end = undefined;
|
},
|
};
|
} else {
|
//结束之前操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
}
|
},
|
//框选
|
rectangleSelect_SQL() {
|
this.$parent.$parent.$parent.closeAllHighLight("query");
|
if (this.isOpen["kx"]) {
|
this.isOpen["kx"] = false;
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end("cancel"));
|
this.$message({
|
showClose: true,
|
message: "关闭框选",
|
});
|
return;
|
}
|
// 清除所有的高亮样式
|
this.clearActive();
|
this.$parent.$parent.$parent.closeAll();
|
//结束之前操作
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
this.isOpen["kx"] = true;
|
|
this.$message({
|
showClose: true,
|
message: "开启框选",
|
});
|
this.drawRectangleAndQuery();
|
},
|
drawRectangleAndQuery() {
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
sgworld.drawObj = sgworld.Creator.createSimpleGraphic(
|
"rectangle",
|
{},
|
(entity) => {
|
sgworld.drawObj = undefined;
|
Viewer.entities.remove(entity);
|
if (entity && this.isOpen["kx"]) {
|
sgworld.Creator.SimpleGraphic.remove(entity.id);
|
layer.closeAll();
|
let rectangle = entity.rectangle.coordinates.getValue();
|
let point1 = {
|
lon: Cesium.Math.toDegrees(rectangle.west),
|
lat: Cesium.Math.toDegrees(rectangle.south),
|
};
|
let point2 = {
|
lon: Cesium.Math.toDegrees(rectangle.east),
|
lat: Cesium.Math.toDegrees(rectangle.north),
|
};
|
let geom = `POLYGON((${point1.lon} ${point1.lat},${point2.lon} ${point1.lat},${point2.lon} ${point2.lat},${point1.lon} ${point2.lat},${point1.lon} ${point1.lat}))`;
|
this.showResultToolTop(geom, point1);
|
}
|
this.isOpen["kx"] && this.drawRectangleAndQuery();
|
if (!this.isOpen["kx"]) {
|
this.$message({
|
showClose: true,
|
message: "关闭框选",
|
});
|
}
|
}
|
);
|
},
|
},
|
};
|
</script>
|
