<template>
|
<div
|
v-drag="true"
|
class="spatialBox"
|
>
|
<!-- v-resizable="'right, bottom'" -->
|
<div class="spatialTitle">
|
<label>{{store.state.spatialTitle }}</label>
|
<el-icon
|
@click="setSpatialClose"
|
:size="20"
|
style="cursor: pointer"
|
>
|
<Close />
|
</el-icon>
|
</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: 75%"
|
>
|
<el-table-column
|
align="center"
|
type="index"
|
label="序号"
|
width="70"
|
/>
|
<el-table-column
|
label="定位"
|
width="100"
|
align="center"
|
>
|
<template #default="scope">
|
<el-button
|
class="el-icon-map"
|
size="small"
|
@click.prevent="spaceLocation(scope.$index, scope.row)"
|
>
|
</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-for="(item, index) in attributeData"
|
:key="index"
|
:label="item.alias"
|
:prop="item.field"
|
show-overflow-tooltip
|
align="center"
|
:fit="true"
|
min-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>
|
<!-- 高级查询 -->
|
<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.field"
|
:label="item.alias"
|
:value="item.field"
|
/>
|
</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,
|
watch,
|
} from "vue";
|
// import config from "../../../public/config/config.js";
|
import { User, Lock, Plus, Location } from "@element-plus/icons-vue";
|
import { dataQuery_selectByPage, dataQuery_selectFields } from "@/api/api";
|
import { ElMessage } from "element-plus";
|
import store from "@/store";
|
import menuTool from "@/assets/js/Map/menuTool";
|
import WKT from "terraformer-wkt-parser";
|
const emits = defineEmits(["spatialClose"]);
|
const setSpatialClose = () => {
|
menuTool.setClearLocation("空间查询");
|
emits("spatialClose", 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 formSql = ref({
|
field: "",
|
type: "",
|
value: "",
|
cut: "",
|
});
|
//定位显示
|
const spaceLocation = (index, row) => {
|
var geom = menuTool.decr(row.geom);
|
|
var wkt = WKT.parse(geom);
|
menuTool.spaceLocation(wkt);
|
};
|
//defineProps 来接收组件的传值
|
const props = defineProps({
|
layerData: Object,
|
});
|
const setdialogRefresh = () => {
|
listData.value.filter = "";
|
listData.value.pageIndex = 1;
|
listData.value.pageSize = 10;
|
|
var res = attributeData.value[0];
|
conditionChange(res);
|
setQueySpatialData();
|
};
|
const handleSizeChange = (res) => {
|
listData.value.pageSize = res;
|
setQueySpatialData();
|
};
|
const handleCurrentChange = (res) => {
|
listData.value.pageIndex = res;
|
setQueySpatialData();
|
};
|
|
//查询列表数据
|
const setQueySpatialData = async () => {
|
listData.value.name = listData.value.name.replaceAll("_", "");
|
const data = await dataQuery_selectByPage(listData.value);
|
if (data.code != 200) {
|
return ElMessage.error("空间查询失败");
|
}
|
listData.value.count = data.count;
|
|
var val = data.result.filter((res) => {
|
if (res.apprTime) {
|
res.apprTime = format(res.apprTime);
|
}
|
if (res.createtime) {
|
res.apprTime = format(res.createtime);
|
}
|
if (res.updatetime) {
|
res.apprTime = format(res.updatetime);
|
}
|
return res;
|
});
|
tableData.value = val;
|
};
|
//格式化时间
|
const format = (shijianchuo) => {
|
//shijianchuo是整数，否则要parseInt转换
|
var time = new Date(shijianchuo);
|
var y = time.getFullYear();
|
var m = time.getMonth() + 1;
|
var d = time.getDate();
|
var h = time.getHours();
|
var mm = time.getMinutes();
|
var s = time.getSeconds();
|
return y + "-" + add0(m) + "-" + add0(d) + " " + h + ":" + mm + ":" + s;
|
};
|
//格式化时间
|
const add0 = (m) => {
|
return m < 10 ? "0" + m : m;
|
};
|
const setQueySpatialFields = async () => {
|
const data = await dataQuery_selectFields({
|
ns: "mn",
|
tab: listData.value.name,
|
});
|
if (data.code != 200) {
|
return ElMessage.error("字段查询失败");
|
}
|
var std = data.result.filter((res) => {
|
if (res.showtype > 0) {
|
return res;
|
}
|
});
|
var val = std.filter((res) => {
|
if (res.field.indexOf("_") > -1) {
|
var str = res.field.split("_");
|
res.field = str[0] + str[1][0].toUpperCase() + str[1].slice(1);
|
return res;
|
} else {
|
return res;
|
}
|
});
|
attributeData.value = val;
|
fieldOption.value = val;
|
conditionChange(data.result[0]);
|
setQueySpatialData();
|
};
|
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 conditionChange = (res) => {
|
formSql.value.value = "";
|
formSql.value.field = res.field;
|
formSql.value.cut = res.type;
|
var 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 = () => {
|
if (store.state.tab) {
|
listData.value.wkt = "";
|
listData.value.name = store.state.tab.tab.replaceAll("moon:", "");
|
listData.value.hasGeom = 1;
|
|
setQueySpatialFields();
|
}
|
};
|
|
watch(
|
() => props.layerData,
|
(nVal, oVal) => {
|
startQueryData();
|
},
|
{ deep: true }
|
);
|
onMounted(() => {
|
startQueryData();
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.spatialBox {
|
width: 800px;
|
height: 400px;
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
bottom: 5%;
|
left: 100%;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
z-index: 31;
|
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;
|
}
|
}
|
.spatialContent {
|
height: calc(100% - 10px);
|
width: calc(100% - 20px);
|
padding: 10px;
|
|
.spatialTable {
|
margin-top: 10px;
|
width: 100%;
|
height: calc(100% - 35px);
|
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;
|
}
|
.el-icon-map {
|
background: url("../../assets/img/location.png") center no-repeat;
|
background-size: 100% 100%;
|
border: transparent;
|
}
|
.el-icon-map:before {
|
content: "定位";
|
font-size: 0;
|
visibility: hidden;
|
}
|
/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;
|
}
|
}
|
</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>
|
