From 25ad6779e118f2f01e9cda45c67f7b27d55a984a Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期二, 17 十月 2023 18:04:43 +0800
Subject: [PATCH] 图层管理临时图层，sdk包更新
---
src/views/layer/layerManage.vue | 286 +++++++++++++++++++++++++++++---------------------------
1 files changed, 147 insertions(+), 139 deletions(-)
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index e22f2b5..b5be958 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -1,40 +1,20 @@
<template>
- <div
- v-drag
- class="layerBox"
- >
+ <div v-drag class="layerBox">
<div class="layerTitle">
<div class="tileLeft">
- <div
- @click="setCloseLayer"
- class="titleImg"
- >
+ <div @click="setCloseLayer" class="titleImg">
<ArrowLeft />
</div>
<div class="titleLable">鍥惧眰绠＄悊</div>
</div>
- <div
- class="titleImg set"
- @click="layerSetBox"
- >
+ <div class="titleImg set" @click="layerSetBox">
<Setting />
</div>
</div>
<div class="layerContent">
- <el-tree
- node-key="id"
- :props="props"
- :highlight-current="false"
- :current-node-key="selectedNodeId"
- :data="treeData"
- :default-expanded-keys="defaultExpanded"
- :expand-on-click-node="false"
- show-checkbox
- @check="handleCheckChange"
- ref="estreeRef"
- v-if="treeData.length"
- :default-checked-keys="DefaultId"
- >
+ <el-tree node-key="id" :props="props" :highlight-current="false" :current-node-key="selectedNodeId" :data="treeData"
+ :default-expanded-keys="defaultExpanded" :expand-on-click-node="false" show-checkbox @check="handleCheckChange"
+ ref="estreeRef" v-if="treeData.length" :default-checked-keys="DefaultId">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span class="label">{{ node.label }}</span>
@@ -44,10 +24,7 @@
Delete
</a>
</span> -->
- <span
- class="button"
- v-if="!data.isTemporaryLayer"
- >
+ <span class="button" v-if="!data.isTemporaryLayer">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
<el-icon class="el-icon--right">
@@ -56,27 +33,17 @@
</span>
<template #dropdown>
<el-dropdown-menu>
- <el-dropdown-item
- v-if="data.type != 6 && data.isLayer ==1"
- @click.native="clickdropdown(1, data)"
- >璇︾粏</el-dropdown-item>
- <el-dropdown-item v-if="data.type == 6 && data.isLayer ==1">鍒犻櫎</el-dropdown-item>
- <el-dropdown-item
- v-if="data.type == 3 && data.isLayer ==1"
- @click.native="clickdropdown(2, data)"
- >灞炴��</el-dropdown-item>
- <el-dropdown-item
- v-if="data.isLayer ==0"
- @click.native="clickdropdown(3, data)"
- >閫忔槑搴�</el-dropdown-item>
- <el-dropdown-item
- v-if="data.shpType =='temporaryLayer'"
- @click.native="clickdTemporary(1, data)"
- >缂栬緫</el-dropdown-item>
- <el-dropdown-item
- v-if="data.shpType =='temporaryLayer'"
- @click.native="clickdTemporary(2, data)"
- >鍒犻櫎</el-dropdown-item>
+ <el-dropdown-item v-if="data.type != 6 && data.isLayer == 1"
+ @click.native="clickdropdown(1, data)">璇︾粏</el-dropdown-item>
+ <el-dropdown-item v-if="data.type == 6 && data.isLayer == 1">鍒犻櫎</el-dropdown-item>
+ <el-dropdown-item v-if="data.type == 3 && data.isLayer == 1"
+ @click.native="clickdropdown(2, data)">灞炴��</el-dropdown-item>
+ <el-dropdown-item v-if="data.isLayer == 0"
+ @click.native="clickdropdown(3, data)">閫忔槑搴�</el-dropdown-item>
+ <el-dropdown-item v-if="data.shpType == 'temporaryLayer'"
+ @click.native="clickdTemporary(1, data)">缂栬緫</el-dropdown-item>
+ <el-dropdown-item v-if="data.shpType == 'temporaryLayer'"
+ @click.native="clickdTemporary(2, data)">鍒犻櫎</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -86,23 +53,10 @@
</el-tree>
</div>
</div>
- <layer-set
- v-if="layerSetIsshow"
- @SETstate="SETstate"
- :layerTree="treeData"
- @addlayer="addlayer"
- @delLayer="delLayer"
- ></layer-set>
- <attribute-list
- v-if="layerAttributeIsshow"
- :layerData="layerObjData"
- @spatialClose="setSpatialClose"
- ></attribute-list>
- <layer-detail
- :layerData="layerObjData"
- v-if="layerDetailIsshow"
- @detailClose="detailClose"
- ></layer-detail>
+ <layer-set v-if="layerSetIsshow" @SETstate="SETstate" :layerTree="treeData" @addlayer="addlayer"
+ @delLayer="delLayer"></layer-set>
+ <attribute-list v-if="layerAttributeIsshow" :layerData="layerObjData" @spatialClose="setSpatialClose"></attribute-list>
+ <layer-detail :layerData="layerObjData" v-if="layerDetailIsshow" @detailClose="detailClose"></layer-detail>
</template>
<script lang="ts" setup>
@@ -159,6 +113,7 @@
store.state.setLayerManager = false;
emits("setCloseLayer", false);
};
+const temporary = ref(new Date().getTime());
const clickdTemporary = (res, data) => {
if (res == 1) {
if (store.state.editTemporaryId) {
@@ -174,22 +129,24 @@
sgworld.Creator.SimpleGraphic.edit(true, { editProp: false });
} else if (res == 2) {
temporaryTool.removeTemporaryLayer(data);
-
- var checkedKeys = estreeRef.value.getCheckedKeys();
- if (checkedKeys.indexOf(data.id) > -1) {
- var index_id = checkedKeys.indexOf(data.id);
- var std = checkedKeys.slice(index_id, 1);
-
- estreeRef.value.setCheckedKeys(std, true);
+ var keys = estreeRef.value.getCheckedKeys();
+ const checkedKeys = [];
+ for (var i in keys) {
+ checkedKeys.push(keys[i])
}
var val = treeData.value[0].children;
-
for (var i = 0; i < val.length; i++) {
if (val[i].id == data.id) {
val.splice(i, 1);
- treeData.value = [...treeData.value];
}
}
+ if (checkedKeys.indexOf(data.id) > -1) {
+ checkedKeys.splice(checkedKeys.indexOf(data.id), 1)
+ }
+ if (checkedKeys.indexOf(temporary.value) > -1) {
+ checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1)
+ }
+ estreeRef.value.setCheckedKeys(checkedKeys, true);
}
};
//閫夋嫨鍥惧眰
@@ -198,32 +155,30 @@
layerDetailIsshow.value = false;
let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
+ if (isCheck) {
+ let son = estreeRef.value.getCheckedNodes().reverse();
+ var setGeoWms = [];
+ var url = null;
+ for (var i in son) {
+ var layerArr = son[i];
+ layerArr.checked = true;
+ if (layerArr.category == 2 && layerArr.type == 3) {
- let son = estreeRef.value.getCheckedNodes().reverse();
- server.delLayerAll();
+ if (layerArr.tab != "moon:geo_mappable_unit") {
- var setGeoWms = [];
- var url = null;
- for (var i in son) {
- var layerArr = son[i];
- layerArr.checked = true;
- if (layerArr.category == 2 && layerArr.type == 3) {
- if (layerArr.tab != "moon:geo_mappable_unit") {
- setGeoWms.push(layerArr.tab);
-
- url = layerArr.url;
+ server.addTreeData(layerArr)
+ }
+ } else {
+ server.addTreeData(layerArr);
}
- } else {
- server.addTreeData(layerArr);
}
- }
- if (setGeoWms.length > 0) {
- server.addGeoServerMmsLayers(setGeoWms.reverse(), url);
- }
- store.commit("SET_CHECKLAYER", son);
- // setVisiable(data, isCheck);
- //
+ store.commit("SET_CHECKLAYER", son);
+ } else {
+
+ server.delLayer(data.id)
+ }
+
};
const setVisiable = (treeNode, checked) => {
if (checked !== undefined) {
@@ -257,21 +212,48 @@
const clickdropdown = (res, e) => {
layerAttributeIsshow.value = false;
layerDetailIsshow.value = false;
- layerObjData.value = e;
+ nextTick(() => {
+ layerObjData.value = e;
+ store.state.spatialTitle = e.cnName;
+ if (res == 2) {
+ layerAttributeIsshow.value = true;
+ store.state.tab = e;
+ } else if (res == 3) {
+ let son = estreeRef.value.getCheckedNodes()
+ var layerId = getCheckedLayerID(e, son);
+ if (layerId.length <= 0) {
+ return ElMessage.error("璇峰厛鍕鹃�夊浘灞�");
+ }
- store.state.spatialTitle = e.cnName;
- if (res == 2) {
- layerAttributeIsshow.value = true;
- store.state.tab = e;
- } else if (res == 3) {
- } else {
- var val = estreeRef.value!.getCheckedKeys(false);
- if (val.indexOf(e.id) > -1) {
- layerDetailIsshow.value = true;
+ // layerDetailIsshow.value = true;
+ // store.state.tab = e;
+
} else {
- return ElMessage.error("璇峰厛鍕鹃�夊浘灞�");
+ var val = estreeRef.value!.getCheckedKeys(false);
+ if (val.indexOf(e.id) > -1) {
+ layerDetailIsshow.value = true;
+ } else {
+ return ElMessage.error("璇峰厛鍕鹃�夊浘灞�");
+ }
}
+ })
+
+};
+const getCheckedLayerID = (res, result) => {
+ var temp = [];
+ let forFn = (data) => {
+ data.children.forEach(item => {
+ if (item.children) {
+ forFn(item)
+ } else {
+ if (result.indexOf(item.id) > -1) {
+ temp.push(item.id)
+ }
+ }
+ })
}
+ forFn(res);
+ return temp;
};
const setSpatialClose = (res) => {
layerAttributeIsshow.value = res;
@@ -323,7 +305,7 @@
};
const setRestLayerData = () => {
let son = estreeRef.value.getCheckedNodes().reverse();
- server.delLayerAll();
+ // server.delLayerAll();
var setGeoWms = [];
var url = null;
@@ -332,21 +314,22 @@
layerArr.checked = true;
if (layerArr.category == 2 && layerArr.type == 3) {
if (layerArr.tab != "moon:geo_mappable_unit") {
- setGeoWms.push(layerArr.tab);
- url = layerArr.url;
+ // setGeoWms.push(layerArr.tab);
+ // url = layerArr.url;
+ server.addTreeData(layerArr);
}
} else {
server.addTreeData(layerArr);
}
}
- if (setGeoWms.length > 0) {
- server.addGeoServerMmsLayers(setGeoWms, url);
- }
+ // if (setGeoWms.length > 0) {
+ // server.addGeoServerMmsLayers(setGeoWms, url);
+ // }
store.commit("SET_CHECKLAYER", son);
};
const getLayer = async () => {
store.state.restLayer = false;
- server.delLayerAll();
+ // server.delLayerAll();
const dt = await perms_selectLayers();
if (dt.code == 200) {
treeData.value = setTreeData(dt.result).sort(function (a, b) {
@@ -359,7 +342,7 @@
pid: 0,
isLayer: 0,
type: 6,
- id: new Date().getTime(),
+ id: temporary.value,
isTemporaryLayer: true,
children: [],
});
@@ -386,27 +369,28 @@
//娣诲姞榛樿閫変腑鍥惧眰
layerListData.value = dt.result;
defaultLayer(dt.result);
- var setGeoWms = [];
- var url = null;
+ // var setGeoWms = [];
+ // var url = null;
- for (var i in adLayer) {
- var layer = adLayer[i];
- if (layer.category == 2 && layer.type == 3) {
- if (layer.tab != "moon:geo_mappable_unit") {
- setGeoWms.push(layer.tab);
- url = layer.url;
- }
- } else {
- server.addTreeData(layer);
- }
- }
- if (setGeoWms.length > 0) {
- server.addGeoServerMmsLayers(setGeoWms, url);
- }
+ // for (var i in adLayer) {
+ // var layer = adLayer[i];
+ // if (layer.category == 2 && layer.type == 3) {
+ // if (layer.tab != "moon:geo_mappable_unit") {
+ // // setGeoWms.push(layer.tab);
+ // // url = layer.url;
+ // server.addTreeData(layer);
+ // }
+ // } else {
+ // server.addTreeData(layer);
+ // }
+ // }
+ // if (setGeoWms.length > 0) {
+ // server.addGeoServerMmsLayers(setGeoWms, url);
+ // }
//;
nextTick(() => {
let son = estreeRef.value.getCheckedNodes();
-
+ setRestLayerData()
store.commit("SET_CHECKLAYER", son);
});
}
@@ -434,8 +418,12 @@
store.state.temporaryLayer = null;
treeData.value[0].children.push(res);
var id = res.id;
+
nextTick(() => {
var checkedKeys = estreeRef.value.getCheckedKeys();
+ if (checkedKeys.indexOf(temporary.value) > -1) {
+ checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1)
+ }
checkedKeys.push(id);
estreeRef.value.setCheckedKeys(checkedKeys, true);
temporaryTool.addTemporaryTool(res);
@@ -513,6 +501,7 @@
background: rgba(7, 8, 14, 0.8);
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
z-index: 40;
+
.layerTitle {
width: calc(100% - 27px);
height: 42px;
@@ -524,6 +513,7 @@
padding-left: 7px;
padding-right: 20px;
color: white;
+
.tileLeft {
height: 100%;
display: flex;
@@ -536,6 +526,7 @@
color: #ffffff;
}
}
+
.titleImg {
width: 20px;
height: 100%;
@@ -543,31 +534,38 @@
align-items: center;
color: rgba(104, 156, 255, 1);
}
+
.set {
cursor: pointer;
}
}
+
.layerContent {
height: 625px;
padding: 0 8px;
overflow: auto;
overflow-y: auto;
}
+
.layerContent::-webkit-scrollbar {
width: 8px;
}
+
.layerContent::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
+
.layerContent::-webkit-scrollbar-track {
border-radius: 0;
background: rgba(0, 0, 0, 0);
}
+
.el-tree {
width: 100%;
overflow-y: auto;
}
+
.layerContent .el-tree-node__content {
overflow: hidden;
}
@@ -594,6 +592,7 @@
flex-shrink: 0;
}
}
+
.dropdown_box {
position: relative;
}
@@ -601,9 +600,11 @@
/deep/.el-select-dropdown__item {
font-size: 12px !important;
}
+
.el-tree {
background: transparent;
}
+
/deep/ .el-tree-node {
background: #0d131d;
color: #ffffff;
@@ -612,29 +613,33 @@
margin-top: 3px;
padding: 8px;
}
-/deep/ .el-tree-node:focus > .el-tree-node__content {
+
+/deep/ .el-tree-node:focus>.el-tree-node__content {
background: transparent;
}
+
/deep/ .el-tree-node__content:hover {
background: #0d131d;
}
+
/deep/ .el-tree-node__children {
background: #1e2a3d;
+
.el-tree-node {
background: #1e2a3d;
margin-top: 0;
padding: 4px;
}
}
-/deep/
- .el-tree--highlight-current
- .el-tree-node.is-current
- > .el-tree-node__content {
+
+/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background: rgba(104, 156, 255, 0.5) !important;
}
+
.highlight {
background: rgba(104, 156, 255, 0.5) !important;
}
+
// .custom-tree-node {
// flex: 1;
// display: flex;
@@ -649,10 +654,12 @@
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
color: #fff;
border: 0;
+
/deep/ .el-dropdown-menu__item {
color: #fff;
}
}
+
/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
background-color: rgba(104, 156, 255, 0.5);
@@ -663,6 +670,7 @@
.el-popper.is-light {
border: 1px solid rgba(7, 8, 14, 0.8) !important;
}
+
.el-scrollbar {
border: 0 !important;
}
--
Gitblit v1.9.3