From cd09654cd3d8cdcef089ff69c3af8209e0e07ee8 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期三, 12 七月 2023 14:45:54 +0800
Subject: [PATCH] 空间查询
---
src/views/query/SpatialQuery.vue | 388 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 381 insertions(+), 7 deletions(-)
diff --git a/src/views/query/SpatialQuery.vue b/src/views/query/SpatialQuery.vue
index 2bb35d5..5b850cd 100644
--- a/src/views/query/SpatialQuery.vue
+++ b/src/views/query/SpatialQuery.vue
@@ -2,10 +2,10 @@
<div
v-drag="true"
class="spatialBox"
- v-resizable="'right, bottom'"
>
+ <!-- v-resizable="'right, bottom'" -->
<div class="spatialTitle">
- <label>绌洪棿鏌ヨ </label>
+ <label>绌洪棿鏌ヨ</label>
<el-icon
@click="setSpatialClose"
:size="20"
@@ -13,6 +13,119 @@
<Close />
</el-icon>
</div>
+ <div class="spatialContent">
+ <div>
+ <el-row :gutter="20">
+ <el-col :span="18">
+ <el-input
+ v-model="listData.filter"
+ type="text"
+ placeholder="璇烽�夋嫨..."
+ disabled
+ />
+ </el-col>
+ <el-col :span="6">
+ <el-button
+ :icon="Plus"
+ type="success"
+ @click="dialogVisible = true"
+ >楂樼骇鏌ヨ</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>
+
+ <!-- 楂樼骇鏌ヨ -->
+ <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>
@@ -24,13 +137,150 @@
reactive,
defineProps,
defineEmits,
+ nextTick,
} from "vue";
-import { User, Lock } from "@element-plus/icons-vue";
+import config from "@/assets/js/Map/config";
+import { User, Lock, Plus } 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);
};
-onMounted(() => {});
+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 handleSizeChange = (res) => {
+ listData.value.pageSize = res;
+ setQueySpatialData();
+};
+const handleCurrentChange = (res) => {
+ listData.value.pageIndex = res;
+ 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;
+ debugger;
+ // debugger;
+ // setFieldChange(attributeData.value[0]);
+};
+//鏍煎紡鍖栨椂闂�
+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.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 = () => {
+ listData.value.wkt = store.state.spatialQueryData.wkt;
+ listData.value.name = "lunarplacenane";
+ listData.value.hasGeom = 1;
+ //
+ setQueySpatialFields();
+};
+onMounted(() => {
+ startQueryData();
+});
</script>
<style lang="less" scoped>
@@ -38,9 +288,10 @@
width: 800px;
height: 400px;
display: flex;
+ flex-direction: column;
position: absolute;
- top: 5%;
- left: 5%;
+ bottom: 5%;
+ right: 5%;
background: rgba(7, 8, 14, 0.8);
border: 1px solid #d6e4ff;
z-index: 10;
@@ -48,7 +299,9 @@
.spatialTitle {
padding: 10px;
width: calc(100% - 20px);
+ height: 66px;
color: #d6e4ff;
+
display: flex;
justify-content: space-between;
align-items: center;
@@ -57,5 +310,126 @@
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;
+ }
+
+ /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>
\ No newline at end of file
+</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>
\ No newline at end of file
--
Gitblit v1.9.3