From f6dd93cb0d1b0fe17674e948f0daf6ceb792bb55 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 13 七月 2023 18:59:01 +0800
Subject: [PATCH] 分屏对比，等高线，坡度图，坐标定位功能添加
---
src/views/query/SpatialQuery.vue | 211 +++++++++++++++++++++++++++++++++++++---------------
1 files changed, 151 insertions(+), 60 deletions(-)
diff --git a/src/views/query/SpatialQuery.vue b/src/views/query/SpatialQuery.vue
index 4a2e843..a71c363 100644
--- a/src/views/query/SpatialQuery.vue
+++ b/src/views/query/SpatialQuery.vue
@@ -13,64 +13,75 @@
<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 class="spatialContentBox">
+ <div class="spatialMenu">
+ <ul>
+ <li
+ v-for="item in menuList"
+ @click="setMenuListClick(item)"
+ :class="{'isActive':isActive==item.id}"
+ >{{ item.name }}</li>
+ </ul>
</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 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>
+ <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>
<!-- 楂樼骇鏌ヨ -->
@@ -168,12 +179,14 @@
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();
@@ -182,7 +195,14 @@
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("璇疯緭鍏ヨ鏌ヨ鐨勫弬鏁�");
@@ -290,8 +310,23 @@
//椤甸潰鍒濆鍖�
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 = "lunarplacenane";
+ listData.value.name = menuList.value[0].name;
+ isActive.value = menuList.value[0].id;
+
listData.value.hasGeom = 1;
//
setQueySpatialFields();
@@ -303,7 +338,7 @@
<style lang="less" scoped>
.spatialBox {
- width: 800px;
+ width: 900px;
height: 400px;
display: flex;
flex-direction: column;
@@ -328,15 +363,46 @@
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(100% - 20px);
+ width: calc(80% - 20px);
padding: 10px;
.spatialTable {
margin-top: 10px;
width: 100%;
- height: calc(100% - 35px);
+ height: 100%;
position: relative;
.el-table /deep/ .el-table__header-wrapper tr th {
@@ -425,6 +491,31 @@
/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" >
--
Gitblit v1.9.3