<template>
|
<div
|
v-drag="true"
|
class="spatialBox"
|
>
|
<!-- v-resizable="'right, bottom'" -->
|
<div class="spatialTitle">
|
<label>空间查询</label>
|
<el-icon
|
@click="setSpatialClose"
|
:size="20"
|
>
|
<Close />
|
</el-icon>
|
</div>
|
<div class="spatialContentBox">
|
<div class="spatialMenu">
|
<ul>
|
<li
|
v-for="item in menuList"
|
@click="setMenuListClick(item)"
|
:class="{'isActive':isActive==item.id}"
|
>{{ item.cnName }}</li>
|
</ul>
|
</div>
|
<div class="spatialContent">
|
<div>
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<el-input
|
v-model="listData.filter"
|
type="text"
|
placeholder="请选择..."
|
disabled
|
/>
|
</el-col>
|
<el-col :span="8">
|
<el-button
|
:icon="Plus"
|
type="success"
|
@click="dialogVisible = true"
|
>高级查询</el-button>
|
<el-button
|
:icon="Refresh"
|
type="info"
|
@click="setdialogRefresh"
|
>重置</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="spatialTable">
|
|
<el-table
|
:data="tableData"
|
style="width: 100%; height: 73%;"
|
>
|
<el-table-column
|
v-for="(item, index) in attributeData"
|
:key="index"
|
:label="item.alias"
|
:prop="item.field"
|
show-overflow-tooltip
|
align="center"
|
:fit="true"
|
width="120"
|
></el-table-column>
|
|
</el-table>
|
<div class="spatialBottom">
|
<el-pagination
|
v-model:current-page="listData.pageIndex"
|
v-model:page-size="listData.pageSize"
|
:page-sizes="[10, 20, 100, 200]"
|
small="small"
|
:disabled="false"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="listData.count"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
<!-- 高级查询 -->
|
<el-dialog
|
v-model="dialogVisible"
|
title="高级查询"
|
width="30%"
|
:show-close="false"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
>
|
<div>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-select
|
v-model="formSql.field"
|
class="m-2"
|
placeholder="Select"
|
@change="setFieldChange($event)"
|
>
|
<el-option
|
v-for="item in fieldOption"
|
:key="item.id"
|
:label="item.alias"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="8">
|
<el-select
|
v-model="formSql.type"
|
class="m-2"
|
placeholder="Select"
|
>
|
<el-option
|
v-for="item in condOption"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="8">
|
<el-input v-model="formSql.value"></el-input>
|
</el-col>
|
|
</el-row>
|
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button
|
type="primary"
|
@click="setInsertDialog"
|
> 添加 </el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
nextTick,
|
} from "vue";
|
import config from "@/assets/js/Map/config";
|
import { User, Lock, Plus, Refresh } from "@element-plus/icons-vue";
|
import { dataQuery_selectByPage, dataQuery_selectFields } from "@/api/api";
|
import { ElMessage } from "element-plus";
|
import store from "@/store";
|
|
const emits = defineEmits(["SETspatialClose"]);
|
const setSpatialClose = () => {
|
emits("SETspatialClose", false);
|
};
|
const dialogVisible = ref(false);
|
const listData = ref({
|
pageIndex: 1,
|
pageSize: 10,
|
count: 0,
|
wkt: null,
|
hasGeom: 1,
|
filter: "",
|
name: "",
|
});
|
const condOption = ref([]);
|
const fieldOption = ref([]);
|
const attributeData = ref([]);
|
const tableData = ref([]);
|
const menuList = ref([]);
|
const formSql = ref({
|
field: "",
|
type: "",
|
value: "",
|
cut: "",
|
});
|
const isActive = ref(null);
|
const handleSizeChange = (res) => {
|
listData.value.pageSize = res;
|
setQueySpatialData();
|
};
|
const handleCurrentChange = (res) => {
|
listData.value.pageIndex = res;
|
setQueySpatialData();
|
};
|
const setMenuListClick = (res) => {
|
listData.value.name = res.name;
|
isActive.value = res.id;
|
listData.value.filter = "";
|
listData.value.pageIndex = 1;
|
listData.value.pageSize = 10;
|
setQueySpatialFields();
|
};
|
const setInsertDialog = () => {
|
if (!formSql.value.value) {
|
return ElMessage.error("请输入要查询的参数");
|
}
|
dialogVisible.value = false;
|
if (listData.value.filter != "") {
|
listData.value.filter += " and ";
|
}
|
const val = null;
|
if (formSql.value.cut === "long" || formSql.value.cut === "integer") {
|
val = parseInt(formSql.value.value);
|
} else if (formSql.value.cut === "double") {
|
if (formSql.value.value.indexOf(".") != -1) {
|
val = parseInt(formSql.value.value);
|
} else {
|
val = parseFloat(formSql.value.value).toFixed(1);
|
}
|
} else if (formSql.value.cut == "date" || formSql.value.cut == "datetime") {
|
var time = new Date(formSql.value.value);
|
var m = time.getMonth() + 1;
|
var d = time.getDate();
|
var y = time.getFullYear();
|
val = "'" + y + "-" + add0(m) + "-" + add0(d) + "'";
|
} else {
|
val = "'" + formSql.value.value + "'";
|
}
|
listData.value.filter +=
|
formSql.value.field + " " + formSql.value.type + " " + val;
|
|
var res = attributeData.value[0];
|
conditionChange(res);
|
setQueySpatialData();
|
};
|
|
const setdialogRefresh = () => {
|
listData.value.filter = "";
|
listData.value.pageIndex = 1;
|
listData.value.pageSize = 10;
|
|
var res = attributeData.value[0];
|
conditionChange(res);
|
setQueySpatialData();
|
};
|
|
//格式化时间
|
const add0 = (m) => {
|
return m < 10 ? "0" + m : m;
|
};
|
//查询列表数据
|
const setQueySpatialData = async () => {
|
const data = await dataQuery_selectByPage(listData.value);
|
if (data.code != 200) {
|
return ElMessage.error("空间查询失败");
|
}
|
listData.value.count = data.count;
|
tableData.value = data.result;
|
};
|
|
const setQueySpatialFields = async () => {
|
const data = await dataQuery_selectFields({ name: listData.value.name });
|
if (data.code != 200) {
|
return ElMessage.error("字段查询失败");
|
}
|
attributeData.value = data.result;
|
fieldOption.value = data.result;
|
conditionChange(data.result[0]);
|
setQueySpatialData();
|
};
|
const setFieldChange = (res) => {
|
const val = fieldOption.value;
|
const str = [];
|
for (var i in val) {
|
if (val[i].id === res) {
|
str.push(val[i]);
|
}
|
}
|
if (str.length > 0) {
|
conditionChange(str[0]);
|
}
|
};
|
const conditionChange = (res) => {
|
formSql.value.value = "";
|
formSql.value.field = res.field;
|
formSql.value.cut = res.type;
|
const type = res.type;
|
|
var std = [];
|
if (type == "text" || type == "blob") {
|
std = config.conditions[0];
|
} else if (type == "date" || type == "datetime") {
|
std = config.conditions[2];
|
} else {
|
std = config.conditions[1];
|
}
|
var str = [];
|
for (var i in std) {
|
str.push({
|
label: std[i],
|
value: std[i],
|
});
|
}
|
condOption.value = str;
|
formSql.value.type = std[0];
|
};
|
|
//页面初始化
|
const startQueryData = () => {
|
var std = store.state.chekNowLayers;
|
if (std.length <= 0) {
|
ElMessage.error("请选择要查询的图层");
|
setSpatialClose();
|
return;
|
}
|
var str = std.filter((res) => {
|
if (res.type == 2) {
|
return res;
|
}
|
});
|
|
menuList.value = str;
|
listData.value.wkt = store.state.spatialQueryData.wkt;
|
listData.value.name = menuList.value[0].name;
|
isActive.value = menuList.value[0].id;
|
|
listData.value.hasGeom = 1;
|
//
|
setQueySpatialFields();
|
};
|
onMounted(() => {
|
startQueryData();
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.spatialBox {
|
width: 900px;
|
height: 400px;
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
bottom: 5%;
|
right: 5%;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
z-index: 10;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
.spatialTitle {
|
padding: 10px;
|
width: calc(100% - 20px);
|
height: 66px;
|
color: #d6e4ff;
|
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 30px;
|
label {
|
font-size: 16px;
|
}
|
}
|
.spatialContentBox {
|
height: calc(100% - 40px);
|
width: 100%;
|
display: flex;
|
}
|
.spatialMenu {
|
width: calc(20% - 20px);
|
height: calc(100% - 26px);
|
padding: 10px;
|
border-right: 1px solid #d6e4ff;
|
overflow: auto;
|
font-family: Source Han Sans SC;
|
ul {
|
li {
|
color: #d6e4ff;
|
font-size: 12px;
|
height: 20px;
|
border-bottom: 1px solid #409eff;
|
box-shadow: inset 0px 5px 20px 5px rgba(38, 47, 71, 1);
|
padding: 10px 10px;
|
display: flex;
|
align-items: center;
|
}
|
li :hover {
|
color: #409eff;
|
}
|
}
|
.isActive {
|
color: #409eff;
|
}
|
}
|
.spatialContent {
|
height: calc(100% - 10px);
|
width: calc(80% - 20px);
|
padding: 10px;
|
|
.spatialTable {
|
margin-top: 10px;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
|
.el-table /deep/ .el-table__header-wrapper tr th {
|
background-color: rgba(38, 47, 71, 1) !important;
|
color: #d6e4ff;
|
}
|
// 修改每行样式：
|
.el-table /deep/ .el-table__row {
|
background-color: rgba(38, 47, 71, 1) !important;
|
color: #d6e4ff;
|
}
|
.el-table /deep/ .el-table__body tr.current-row > td {
|
background-color: rgba(38, 47, 71, 1) !important;
|
}
|
.el-table /deep/ .el-table__body tr:hover > td {
|
background-color: rgba(38, 47, 71, 1) !important;
|
}
|
// 修改表格每行边框的样式：
|
.el-table /deep/ td,
|
.el-table /deep/ th.is-leaf {
|
// border-bottom: 1px solid #409eff;
|
// border-right: 1px solid #409eff;
|
}
|
.el-table /deep/ .el-table__cell {
|
padding: 8px 0;
|
}
|
// 设置表格每行的高度：
|
.el-table /deep/ .el-table__header tr,
|
.el-table /deep/ .el-table__header th {
|
height: 50px;
|
}
|
.el-table__body tr,
|
.el-table__body td {
|
height: 50px;
|
padding: 0;
|
}
|
// 设置表格边框颜色：
|
|
.el-table--border::after,
|
.el-table--group::after {
|
width: 0;
|
}
|
.el-table::before {
|
height: 0;
|
}
|
}
|
}
|
.spatialBottom {
|
padding: 10px;
|
height: 40px;
|
}
|
|
/deep/.el-pagination button {
|
background: transparent;
|
color: #d6e4ff;
|
}
|
/deep/.el-pager li {
|
background: transparent;
|
color: #d6e4ff;
|
}
|
/deep/.el-pager li.is-active {
|
color: #409eff;
|
}
|
/deep/.el-pagination__total {
|
color: #d6e4ff;
|
}
|
/deep/.el-pagination__goto {
|
color: #d6e4ff;
|
}
|
/deep/.el-pagination__classifier {
|
color: #d6e4ff;
|
}
|
/deep/.el-input.is-disabled .el-input__wrapper {
|
background: transparent !important;
|
color: #d6e4ff;
|
}
|
/deep/.el-input.is-disabled .el-input__inner {
|
color: #d6e4ff !important;
|
}
|
/deep/ .el-dialog {
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
z-index: 10;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
}
|
/deep/.el-dialog__title {
|
color: #d6e4ff !important;
|
}
|
/* 修改滚动条的宽度为10px，颜色为白色 */
|
::-webkit-scrollbar {
|
width: 5px;
|
height: 10px;
|
background: rgba(38, 47, 71, 0);
|
border-radius: 10px;
|
}
|
|
/* 修改滚动条的轨道和滑块颜色 */
|
::-webkit-scrollbar-track {
|
background: rgba(38, 47, 71, 0);
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #d6e4ff;
|
}
|
|
/* hover时滚动条轨道和滑块变色 */
|
::-webkit-scrollbar-thumb:hover {
|
background: #d6e4ff;
|
}
|
|
::-webkit-scrollbar-track:hover {
|
background: rgba(38, 47, 71, 0);
|
}
|
}
|
</style>
|
<style lang="less" >
|
.el-scrollbar {
|
background: rgba(7, 8, 14) !important;
|
border: 1px solid #4472cb;
|
color: #d6e4ff !important;
|
box-shadow: inset 0px 1px 40px 1px rgba(38, 47, 71, 1);
|
// .el-dropdown-menu {
|
// background: rgba(7, 8, 14, 0.8) !important;
|
// }
|
.el-select-dropdown__item {
|
color: #d6e4ff;
|
}
|
.el-select-dropdown__item:hover {
|
background: rgba(38, 47, 71, 1) !important;
|
}
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
background: rgba(38, 47, 71, 1) !important;
|
}
|
}
|
.el-table__header-wrapper {
|
border: 1px siolid #409eff;
|
}
|
</style>
|
