From 1ff13ceb222d4059252201504cd963df26cafec8 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期三, 23 八月 2023 17:13:43 +0800
Subject: [PATCH] 添加点击矢量图层详细信息展示功能，修改图层管理加载顺序
---
src/views/query/detailsQuery.vue | 241 ++++++++++++++++++++++++++++++++++++++++
src/api/api.js | 17 ++
src/assets/js/Map/server.js | 37 ++++++
src/views/layer/doubleLayer.vue | 4
src/views/layer/layerDetail.vue | 1
src/views/layer/layerManage.vue | 12 +
src/views/Index.vue | 5
src/store/index.ts | 5
8 files changed, 313 insertions(+), 9 deletions(-)
diff --git a/src/api/api.js b/src/api/api.js
index 5bc39ee..e6a93e0 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -53,3 +53,20 @@
export function res_selectByPageAndCount(params) {
return request.get("/res/selectByPageAndCount", { params: params });
}
+
+//鏁版嵁鏌ヨ=>鏍规嵁瀹炰綋鍚嶆煡璇㈣〃鍚�
+export function dataQuery_selectTabByEntity(params) {
+ return request.get('/dataQuery/selectTabByEntity', { params: params });
+}
+//鏁版嵁绠＄悊=>鏁版嵁妫�绱�=>鏌ヨ瀛楁淇℃伅
+export function inquiry_selectFields(params) {
+ return request.get('/inquiry/selectFields', { params: params });
+}
+//鏁版嵁绠＄悊=>鏁版嵁妫�绱�=>鏌ヨ鍊煎煙淇℃伅
+export function inquiry_selectDomains(params) {
+ return request.get('/inquiry/selectDomains', { params: params });
+}
+//鏁版嵁鏌ヨ=>鏍规嵁GID鏌ヨ
+export function dataQuery_selectByGid(params) {
+ return request.get('/dataQuery/selectByGid', { params: params });
+}
diff --git a/src/assets/js/Map/server.js b/src/assets/js/Map/server.js
index 642d15a..65ea768 100644
--- a/src/assets/js/Map/server.js
+++ b/src/assets/js/Map/server.js
@@ -1,7 +1,7 @@
import { getToken } from "@/utils/auth";
//閰嶇疆鏂囦欢鍦板潃
import config from "./config";
-
+import store from "@/store";
const server = {
layerList: [],
addTreeData(treeNode) {
@@ -341,9 +341,16 @@
//鍔犺浇GeoServer-WMS鏈嶅姟
setAddGeoWmsLayer(res) {
var url = this.getLayrUrl(res);
+ var that = this
+ var getFeatureInfoFormat = new SmartEarth.Cesium.GetFeatureInfoFormat("html", null, function (html) {
+ that.getFeatureInfo(html)
+ });
let layer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
url: url,
layers: res.tab,
+ getFeatureInfoParameters: { info_format: 'text/html' },
+ enablePickFeatures: true,
+ getFeatureInfoFormats: [getFeatureInfoFormat],
parameters: {
transparent: true,
format: "image/png",
@@ -357,5 +364,33 @@
let img_layer = window.Viewer.imageryLayers.addImageryProvider(layer);
this.layerList.push({ id: res.id, layerData: img_layer, type: "wmts" });
},
+ getFeatureInfo(html) {
+ store.state.details.showDetails = false;
+ var start = html.indexOf("<caption class=\"featureInfo\">") + "<caption class=\"featureInfo\">".length;
+ var end = html.indexOf("</caption>");
+ var tab = html.substr(start, end - start);
+ var std = html.substr(html.indexOf('<th>'), html.lastIndexOf('</th>') - html.indexOf('<th>') + 5).replaceAll(' ', '').replaceAll('\n', '').split('</th>')
+ var gindex = null;
+ for (var i = 0; i < std.length; i++) {
+ if (std[i].indexOf('gid') > -1) {
+ gindex = i;
+ break;
+ }
+ }
+ if (!gindex) return
+ var str = html.substr(html.indexOf('<td>'), html.lastIndexOf('</td>') - html.indexOf('<td>') + 5).replaceAll(' ', '').replaceAll('\n', '').split('</td>')
+ var gid = parseInt(str[gindex].replaceAll(
+ '<td>', ''
+ ))
+ if (gid && tab) {
+
+ store.state.details = {
+ gid: gid,
+ tab: tab,
+ showDetails: true
+ }
+ }
+
+ },
};
export default server;
diff --git a/src/store/index.ts b/src/store/index.ts
index e9a5441..29cfd72 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -21,6 +21,11 @@
tab: null,
doubleMap: false,
doubleMenu: false,
+ details: {
+ gid: null,
+ tab: null,
+ showDetails: false,
+ },
},
mutations: {
//鑾峰彇鐧诲綍Code
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 0cb8b40..cec7aeb 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -18,9 +18,10 @@
v-if="layerLocationshow"
@SETcoordClose="setCoordLocation"
>
-
</coord-location>
+ <details-query v-if="store.state.details.showDetails">
+ </details-query>
</div>
</template>
@@ -48,6 +49,8 @@
import CoordLocation from "@/views/query/CoordLocation.vue";
//闃村奖鍒嗘瀽
import mapclock from "@/views/mapClock/index.vue";
+//鐭㈤噺鏁版嵁淇℃伅寮圭獥
+import detailsQuery from "@/views/query/detailsQuery.vue";
import router from "@/router";
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
diff --git a/src/views/layer/doubleLayer.vue b/src/views/layer/doubleLayer.vue
index 50ad3e8..ee246a4 100644
--- a/src/views/layer/doubleLayer.vue
+++ b/src/views/layer/doubleLayer.vue
@@ -43,7 +43,7 @@
Delete
</a>
</span> -->
- <span
+ <!-- <span
class="button"
v-if="data.isLayer == 1"
>
@@ -63,7 +63,7 @@
</el-dropdown-menu>
</template>
</el-dropdown>
- </span>
+ </span> -->
</span>
</template>
</el-tree>
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
index 0fba9f8..c55479a 100644
--- a/src/views/layer/layerDetail.vue
+++ b/src/views/layer/layerDetail.vue
@@ -217,6 +217,7 @@
height: 400px;
margin-left: 20px;
margin-top: 40px;
+ min-width: 200px;
z-index: 30;
position: absolute;
.title {
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index 08ec5d9..623181b 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -192,10 +192,12 @@
layerAttributeIsshow.value = true;
store.state.tab = e;
} else {
- if (!e.checked) {
+ var val = estreeRef.value!.getCheckedKeys(false);
+ if (val.indexOf(e.id) > -1) {
+ layerDetailIsshow.value = true;
+ } else {
return ElMessage.error("璇峰厛鍕鹃�夊浘灞�");
}
- layerDetailIsshow.value = true;
}
};
const setSpatialClose = (res) => {
@@ -251,12 +253,12 @@
const dt = await perms_selectLayers();
if (dt.code == 200) {
treeData.value = setTreeData(dt.result).sort(function (a, b) {
- return a.sort - b.sort;
+ return a.orderNum - b.orderNum;
});
var std = [];
var terrainId = null;
dt.result.filter((res) => {
- if (res.isLayer == 1 && res.status == 1) {
+ if (res.isLayer == 1 && res.isShow == 1) {
if (res.type == 1 && res.data == 2) {
if (!terrainId) {
terrainId = res.id;
@@ -288,7 +290,7 @@
let branchArr = cloneData.filter((child) => father.id == child.pid);
if (branchArr.length > 0) {
branchArr.sort(function (a, b) {
- return a.sort - b.sort;
+ return a.orderNum - b.orderNum;
});
}
diff --git a/src/views/query/detailsQuery.vue b/src/views/query/detailsQuery.vue
new file mode 100644
index 0000000..99f7277
--- /dev/null
+++ b/src/views/query/detailsQuery.vue
@@ -0,0 +1,241 @@
+<template>
+ <div
+ v-drag="true"
+ class="showDetailsBox"
+ >
+ <div class="detailsTitles">
+ <div>
+ 灞炴�т俊鎭�
+ </div>
+ <div>
+ <el-icon
+ @click="setDetailsClose"
+ :size="14"
+ >
+ <Close />
+ </el-icon>
+ </div>
+ </div>
+ <div class="detailsContent">
+ <ul>
+ <li
+ v-for="(value,key) in tableData"
+ :key="key"
+ >
+ {{ key }} {{value}}
+ </li>
+ </ul>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ reactive,
+ defineProps,
+ defineEmits,
+ nextTick,
+} from "vue";
+import store from "@/store";
+import {
+ dataQuery_selectTabByEntity,
+ inquiry_selectFields,
+ inquiry_selectDomains,
+ dataQuery_selectByGid,
+} from "@/api/api";
+import { ElMessage } from "element-plus";
+const detailsData = ref({
+ gid: null,
+ name: null,
+});
+const tabByEntity = ref();
+const fieldData = ref([]);
+const domainData = ref([]);
+const attributeData = ref([]);
+const optionData = ref([]);
+const tableData = ref({});
+const setDetailsClose = () => {
+ store.state.details.showDetails = false;
+};
+//鏌ヨ瀹炰綋绫�
+const getTableByEntity = async () => {
+ const res = await dataQuery_selectTabByEntity({
+ name: detailsData.value.name,
+ });
+ if (res.code != 200) {
+ ElMessage.error("鏈煡璇㈠埌瀹炰綋绫�");
+ return;
+ }
+ tabByEntity.value = res.result;
+ getLayerFileds();
+};
+//鏌ヨ瀛楁淇℃伅
+const getLayerFileds = async () => {
+ const data = await inquiry_selectFields({
+ name: detailsData.value.name,
+ });
+ if (data.code != 200) {
+ ElMessage.error("鏈煡璇㈠埌瀛楁淇℃伅");
+ return;
+ }
+ fieldData.value = data.result;
+ getLayerDomains();
+};
+const getLayerDomains = async () => {
+ const data = await inquiry_selectDomains({ name: detailsData.value.name });
+ if (data.code != 200) {
+ ElMessage.error("鏈煡璇㈠埌鍊煎煙淇℃伅");
+ return;
+ }
+ domainData.value = data.result;
+ optionData.value = data.result;
+ getLayerAttribute();
+};
+const getLayerAttribute = () => {
+ for (var i in fieldData.value) {
+ if (fieldData.value[i].showtype == 1) {
+ attributeData.value.push(fieldData.value[i]);
+ }
+ }
+ getLayrData();
+};
+const getLayrData = async () => {
+ const data = await dataQuery_selectByGid(detailsData.value);
+ if (data.code != 200) {
+ ElMessage.error("鏈煡璇㈠埌灞炴�т俊鎭�");
+ return;
+ }
+ var valste = data.result;
+ valste.dirid = valste.dirName;
+ valste.depid = valste.depName;
+ valste.verid = valste.verName;
+ valste.createuser = valste.createName;
+ valste.updateuser = valste.updateName;
+ if (valste.createtime) {
+ valste.createtime = format(valste.createtime);
+ }
+ if (valste.updatetime) {
+ valste.updatetime = format(valste.updatetime);
+ }
+ for (var j in optionData.value) {
+ if (
+ optionData.value[j].domainNa != null &&
+ optionData.value[j].domainNa != undefined
+ ) {
+ valste[optionData.value[j].field] = optionData.value[j].domainNa;
+ }
+ }
+ var arr = {};
+ for (var i = attributeData.value.length - 1; i >= 0; i--) {
+ var vla = attributeData.value[i];
+ if (vla.domainNa) {
+ var val = optionData.value.filter((res) => {
+ if (res.domName == vla.domainNa && res.domCode == valste[vla.field]) {
+ return res;
+ }
+ });
+ var vlue = null;
+ if (val.length > 0) {
+ vlue = val[0].codeDesc;
+ } else {
+ vlue = "";
+ }
+ arr[vla.alias] = vlue;
+ } else {
+ arr[vla.alias] = valste[vla.field];
+ }
+ }
+
+ tableData.value = sortObj(arr);
+};
+const sortObj = (obj) => {
+ var arr = [];
+ for (var i in obj) {
+ arr.push([obj[i], i]);
+ }
+ arr.reverse();
+ var len = arr.length;
+ var obj = {};
+ for (var i = 0; i < len; i++) {
+ obj[arr[i][1]] = arr[i][0];
+ }
+ return obj;
+};
+
+//鏍煎紡鍖栨椂闂�
+const format = (shijianchuo) => {
+ //shijianchuo鏄暣鏁帮紝鍚﹀垯瑕乸arseInt杞崲
+ 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;
+};
+onMounted(() => {
+ detailsData.value.gid = store.state.details.gid;
+ detailsData.value.name = store.state.details.tab.replaceAll("_", "");
+
+ getTableByEntity();
+});
+</script>
+
+<style lang="less" scoped>
+.showDetailsBox {
+ padding: 10px;
+ background: rgba(7, 8, 14, 0.8);
+ border: 1px solid #d6e4ff;
+ z-index: 33;
+ box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+ position: absolute;
+ bottom: 5%;
+ right: 5%;
+ width: 250px;
+ height: 350px;
+ .detailsTitles {
+ padding: 5px;
+ width: calc(100% - 10px);
+ height: 25px;
+ color: #d6e4ff;
+ font-size: 14px;
+ border-bottom: 1px solid #d6e4ff;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .detailsContent {
+ color: #d6e4ff;
+ font-size: 12px;
+ padding: 5px;
+ height: 305px;
+ overflow-y: auto;
+ width: calc(100% - 10px);
+ li {
+ color: #d6e4ff;
+ font-size: 12px;
+ height: 30px;
+ }
+ }
+ ::-webkit-scrollbar {
+ width: 10px;
+ }
+ /* Change the scrollbar background color here */
+ ::-webkit-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0);
+ }
+ /* Change the scrollbar button color and roundedness here */
+ ::-webkit-scrollbar-thumb {
+ background-color: rgba(104, 156, 255, 0.2);
+ border-radius: 0.5rem;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3