From ecf3ad202a851caa39660ddfaa16e1bf16565b2e Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期一, 30 十月 2023 13:51:38 +0800 Subject: [PATCH] 图层管理修改 --- src/views/layer/layerManage.vue | 640 ++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 534 insertions(+), 106 deletions(-) diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue index 9bef0eb..651d215 100644 --- a/src/views/layer/layerManage.vue +++ b/src/views/layer/layerManage.vue @@ -18,11 +18,13 @@ :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"> @@ -32,8 +34,8 @@ <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a> - </span> --> - <span class="button" v-if="data.type == 2"> + </span>--> + <span class="button" v-if="!data.isTemporaryLayer"> <el-dropdown trigger="click"> <span class="el-dropdown-link"> <el-icon class="el-icon--right"> @@ -42,12 +44,31 @@ </span> <template #dropdown> <el-dropdown-menu> - <el-dropdown-item @click.native="clickdropdown(1, data)" - >璇︾粏</el-dropdown-item - > - <el-dropdown-item @click.native="clickdropdown(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-item + v-if="data.shpType == 'temporaryLayer'" + @click.native="clickdTemporary(3, data)" + >瀹氫綅</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> @@ -58,22 +79,18 @@ </div> </div> <layer-set - v-show="layerSetIsshow" + v-if="layerSetIsshow" @SETstate="SETstate" :layerTree="treeData" @addlayer="addlayer" @delLayer="delLayer" ></layer-set> <attribute-list - v-show="layerAttributeIsshow" + v-if="layerAttributeIsshow" :layerData="layerObjData" @spatialClose="setSpatialClose" ></attribute-list> - <layer-detail - :layerData="layerObjData" - v-if="layerDetailIsshow" - @detailClose="detailClose" - ></layer-detail> + <layer-detail :layerData="layerObjData" v-if="layerDetailIsshow" @detailClose="detailClose"></layer-detail> </template> <script lang="ts" setup> @@ -84,84 +101,35 @@ reactive, defineProps, defineEmits, + nextTick, + watch, } from "vue"; import layerSet from "./layerSet"; import attributeList from "./attributeList"; import layerDetail from "./layerDetail"; import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶 -import { layer_selectAll } from "@/api/api"; +import { + perms_selectLayers, + mark_selectByPageAndCount, + mark_insert, + mark_deletes, + mark_update, +} from "@/api/api"; +import server from "@/assets/js/Map/server"; +import { ElMessage } from "element-plus"; +import temporaryTool from "@/assets/js/Map/temporaryTools"; +import json from "@/assets/js/colorValue"; +import menuTool from "@/assets/js/Map/menuTool"; const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥 const stretchValue = ref(""); - +const emits = defineEmits(["setCloseLayer"]); let estreeRef = ref(); -const stretchOptions = [ - { - value: "Option1", - label: "Option1", - }, - { - value: "Option2", - label: "Option2", - }, - { - value: "Option3", - label: "Option3", - }, - { - value: "Option4", - label: "Option4", - }, - { - value: "Option5", - label: "Option5", - }, -]; +const setLayer = ref(); const transparence = ref(0); var treeData = ref([]); -let menuOption = reactive([ - { - id: 1, - name: "娴嬭瘯", - isShow: false, - checkedAll: false, - type: 1, - parentId: null, - }, - { - id: 2, - layerState: false, - name: "鍥惧眰鍚嶇О", - layerUrl: "", - type: 2, - parentId: 1, - }, - { - id: 3, - layerState: false, - name: "鍥惧眰鑿滃崟", - layerUrl: "", - type: 1, - parentId: 1, - }, - { - id: 5, - layerState: false, - name: "鍥惧眰鍚嶇О11", - layerUrl: "", - type: 2, - parentId: 3, - }, - { - id: 4, - name: "娴嬭瘯1", - isShow: false, - checkedAll: true, - layerState: false, - type: 1, - parentId: null, - }, -]); - +var layerListData = ref([]); +let menuOption = reactive([]); +const defaultExpanded = ref([]); const layerSetIsshow = ref(false); const layerAttributeIsshow = ref(false); const layerDetailIsshow = ref(false); @@ -172,8 +140,9 @@ const layerObjData = ref(null); // 褰撳墠閫変腑鐨勮妭鐐� id const selectedNodeId = ref(null as any); //鍋氱被鍨嬫柇瑷�澶勭悊 -const emits = defineEmits(["setCloseLayer"]); +//榛樿閫変腑id +const DefaultId = ref([]); //鍥惧眰璁剧疆寮规 const layerSetBox = () => { layerSetIsshow.value = !layerSetIsshow.value; @@ -183,51 +152,380 @@ layerSetIsshow.value = res; }; const setCloseLayer = () => { + store.state.setLayerManager = false; emits("setCloseLayer", false); +}; +const temporary = ref(new Date().getTime()); +const clickdTemporary = async (res, data) => { + if (res == 1) { + let son = estreeRef.value.getCheckedKeys(); + if (son.indexOf(data.id) < 0) { + return ElMessage(data.cnName + "鍥惧眰娌℃湁鍕鹃��,鏃犳硶杩涜缂栬緫"); + } + if (store.state.editTemporaryId) { + var id = store.state.editTemporaryId; + var edit_id = sgworld.Creator.SimpleGraphic.SimpleGraphicObj.indexOf(id); + if (edit_id > -1) { + sgworld.Creator.SimpleGraphic.SimpleGraphicObj.splice(edit_id, 1); + store.state.editTemporaryId = null; + } + } + store.state.editTemporaryId = data.id; + sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id); + sgworld.Creator.SimpleGraphic.edit(true, { + editProp: false, + tipText: { + ActiveText: "鐐瑰嚮婵�娲荤紪杈�", + }, + enableDelete: false, + }); + } else if (res == 2) { + var layerId = []; + layerId.push(data.sid); + const data1 = await mark_deletes({ ids: layerId.toString() }); + if (data1.code != 200) return; + temporaryTool.removeTemporaryLayer(data); + + // estreeRef.value.setCheckedKeys(checkedKeys, true); + // for (var i in keys) { + // checkedKeys.push(keys[i]); + // } + var keys = estreeRef.value.getCheckedKeys(); + var val = treeData.value[0].children; + for (var i = 0; i < val.length; i++) { + if (val[i].id == data.id) { + val.splice(i, 1); + } + } + + var std = []; + for (var i in keys) { + var layer_res = estreeRef.value.getNode(checkedKeys[i]).data; + if(layer_res.shpType && layer_res.shpType == 'temporaryLayer'){ + std.push(checkedKeys[i]); + }else if(layer_res.isLayer == 1){ + std.push(checkedKeys[i]); + } + } + estreeRef.value.setCheckedKeys([], true); + console.log(data.id); + nextTick(() => { + console.log(std); + estreeRef.value.setCheckedKeys(std, true); + }); + } else if (res == 3) { + let son = estreeRef.value.getCheckedKeys(); + if (son.indexOf(data.id) < 0) { + return ElMessage(data.cnName + "鍥惧眰娌℃湁鍕鹃��,鏃犳硶杩涜瀹氫綅"); + } + temporaryTool.locationTemporaryLayer(data); + } }; //閫夋嫨鍥惧眰 const handleCheckChange = (data, checked) => { - let son = estreeRef.value.getCheckedNodes(); + layerAttributeIsshow.value = false; + layerDetailIsshow.value = false; + // let isCheck = checked.checkedKeys.indexOf(data.id) > -1; + let son = estreeRef.value.getCheckedNodes(); store.commit("SET_CHECKLAYER", son); + temporaryTool.removeTemporaryLayerAll(); + server.delLayerAll(); + var alphaGroup = []; + var idGroup = []; + for (var i in server.layerList) { + const layerData = server.layerList[i]; + if (layerData.layerData && layerData.id != server.wmsLayerId) { + alphaGroup.push(layerData.layerData.alpha); + idGroup.push(layerData.layerData.id); + } + } + server.delLayerAll(); + + var setGeoWms = []; + var geoUrl = null; + var layerTreeDate = estreeRef.value.getCheckedNodes().reverse(); + for (var i in layerTreeDate) { + var layerArr = layerTreeDate[i]; + if (layerArr.shpType && layerArr.shpType == "temporaryLayer") { + temporaryTool.addTemporaryTool(layerArr); + } else { + if (layerArr.isLayer == 1) { + if (layerArr.category == 2 && layerArr.type == 3) { + if (layerArr.tab != "moon:geo_mappable_unit") { + var id = layerArr.id; + if (idGroup.indexOf(id) > -1) { + var alpha = alphaGroup[idGroup.indexOf(id)]; + if (alpha == 1) { + setGeoWms.push(layerArr.tab); + geoUrl = layerArr.url; + } else { + server.setAddGeoWmsLayer(layerArr, alpha); + } + } else { + setGeoWms.push(layerArr.tab); + geoUrl = layerArr.url; + } + } + } else { + server.addTreeData(layerArr); + } + } + } + } + if (setGeoWms.length > 0) { + server.addGeoServerMmsLayers(setGeoWms, geoUrl); + } + + menuTool.setImageLayerChange(); +}; +const setVisiable = (treeNode, checked) => { + if (checked !== undefined) { + treeNode.checked = checked; + } else { + treeNode.checked = !treeNode.checked; + } + + if (treeNode.children) { + treeNode.children.forEach((item) => { + setVisiable(item, treeNode.checked); + }); + return; + } + + if (!treeNode.isAdd) { + // server.addTreeData(treeNode); + return; + } +}; +const defaultLayer = (val) => { + val.forEach((e) => { + DefaultId.value.forEach((v) => { + if (e.id == v) { + setVisiable(e, true); + // return; + } + }); + }); }; const clickdropdown = (res, e) => { layerAttributeIsshow.value = false; layerDetailIsshow.value = false; - layerObjData.value = e; - if (res == 2) { - layerAttributeIsshow.value = true; - } else { - layerDetailIsshow.value = true; - } + 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.getCheckedKeys(); + var layerId = getCheckedLayerPID(e, son); + if (layerId.length <= 0) { + return ElMessage.error("璇峰厛鍕鹃�夊浘灞�"); + } + layerDetailIsshow.value = true; + store.state.layerGroups = { + id: e.id, + layerIds: layerId, + }; + } else { + var val = estreeRef.value!.getCheckedKeys(false); + if (val.indexOf(e.id) > -1) { + layerDetailIsshow.value = true; + } else { + return ElMessage.error("璇峰厛鍕鹃�夊浘灞�"); + } + } + }); }; +const getCheckedLayerPID = (res, result) => { + var temp = []; + var ids = result; + + let forFn = (data) => { + if (data.children) { + data.children.forEach((item) => { + if (item.children) { + forFn(item); + } else { + if (ids.indexOf(item.id) > -1) { + temp.push(item); + } + } + }); + } else { + if (ids.indexOf(data.id) > -1) { + temp.push(data); + } + } + }; + + forFn(res); + return temp; +}; + +const getCheckedLayerChildren = (res) => { + var temp2 = []; + let forFn = (data) => { + if (data.children) { + data.children.forEach((item) => { + if (item.children) { + forFn(item); + } else { + temp2.push(item); + } + }); + } else { + temp2.push(data); + } + }; + forFn(res); + return temp2; +}; + const setSpatialClose = (res) => { layerAttributeIsshow.value = res; }; const detailClose = (res) => { - layerDetailIsshow.value = res; + if (res.type == 0) { + estreeRef.value.getNode(store.state.layerGroups.id).data.alpha = res.val; + } + layerDetailIsshow.value = res.flag; }; //缂栬緫鍥惧眰鏍� const addlayer = (res) => { - menuOption.push(res); - treeData.value = handleTree(menuOption, "id", "pid", "children"); + let node; + layerListData.value.forEach((e) => { + if (e.id == res.id) { + node = estreeRef.value.getNode(e); + } + }); + // 灏嗗彉鍔ㄤ箣鍓嶇殑node澶囦唤 + let copyNode = { ...node }; + copyNode.previousSibling = { ...node.previousSibling }; + copyNode.nextSibling = { ...node.nextSibling }; + if (res.type === 1) { + // 涓婄Щ + if (node.previousSibling) { + // 鍒犻櫎鍘熷厛鐨刵ode + estreeRef.value.remove(node.data); + // 鎷垮埌copy鐨刵ode + // nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode")); + // 澶嶅埗璇ode鍒版寚瀹氫綅缃�(鍙傛暟锛�1. 瑕佸鍔犵殑鑺傜偣鐨� data 2. 瑕佸鍔犵殑鑺傜偣鐨勫悗涓�涓妭鐐圭殑 data銆乲ey 鎴栬�� node) + + estreeRef.value.insertBefore( + copyNode.data, + copyNode.previousSibling.data + ); + // window.sessionStorage.removeItem("menuNode"); + } + } else { + // 涓嬬Щ + if (node.nextSibling) { + estreeRef.value.remove(node.data); + estreeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data); + } + } }; //鍒犻櫎鍥惧眰鏍� const delLayer = (res) => { - menuOption = menuOption.filter((item) => { - return item.id != res; - }); - console.log(res); - console.log(menuOption); + // menuOption = menuOption.filter((item) => { + // return item.id != res; + // }); // treeData = handleTree(menuOption, "id", "pid", "children"); }; -const getLayer = async () => { - const dt = await layer_selectAll(); - treeData.value = setTreeData(dt.result); - treeData.value = JSON.parse(JSON.stringify(treeData.value)); +const setRestLayerData = () => { + let son = estreeRef.value.getCheckedNodes().reverse(); - console.log(treeData.value); + var setGeoWms = []; + var geoUrl = null; + for (var i in son) { + var layerArr = son[i]; + console.log(layerArr.isLayer); + layerArr.checked = true; + if (layerArr.category == 2 && layerArr.type == 3) { + if (layerArr.tab != "moon:geo_mappable_unit") { + setGeoWms.push(layerArr.tab); + geoUrl = layerArr.url; + // server.addTreeData(layerArr); + } + } else { + server.addTreeData(layerArr); + } + } + if (setGeoWms.length > 0) { + server.addGeoServerMmsLayers(setGeoWms, geoUrl); + } + store.commit("SET_CHECKLAYER", son); +}; +const getLayer = async () => { + store.state.restLayer = false; + // server.delLayerAll(); + const dt = await perms_selectLayers(); + if (dt.code == 200) { + var va_data = dt.result.filter((res) => { + if (res.isLayer == 0) { + res.alpha = 1; + } + return res; + }); + treeData.value = setTreeData(va_data).sort(function (a, b) { + return a.orderNum - b.orderNum; + }); + const comperLayer = await mark_selectByPageAndCount({ + pageIndex: 1, + pageSize: 100000, + name: null, + }); + var children = []; + if (comperLayer.code == 200 && comperLayer.result) { + for (var i in comperLayer.result) { + var slayer = JSON.parse(comperLayer.result[i].wkt); + slayer.sid = comperLayer.result[i].id; + children.push(slayer); + } + } + treeData.value.unshift({ + cnName: "涓存椂鍥惧眰", + level: 1, + pid: 0, + isLayer: 0, + type: 6, + id: temporary.value, + isTemporaryLayer: true, + children: children, + }); + + var std = []; + var terrainId = null; + var adLayer = []; + dt.result.filter((res) => { + if (res.isLayer == 1 && res.isShow == 1) { + if (res.type == 1 && res.data == 2) { + if (!terrainId) { + terrainId = res.id; + std.push(res.id); + adLayer.push(res); + } + } else { + std.push(res.id); + adLayer.push(res); + } + } + }); + DefaultId.value = std; + + //娣诲姞榛樿閫変腑鍥惧眰 + layerListData.value = dt.result; + defaultLayer(dt.result); + + nextTick(() => { + let son = estreeRef.value.getCheckedNodes(); + setRestLayerData(); + store.commit("SET_CHECKLAYER", son); + }); + } }; //鏋勯�犳爲 @@ -248,8 +546,114 @@ return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� }); } +const addTemporaryLayer = async (res) => { + var obj = { + id: res.id, + name: res.cnName, + wkt: JSON.stringify(res), + }; + var checkedKeys = estreeRef.value.getCheckedKeys(); + const data = await mark_insert(obj); + if (data.code != 200 || !data.result) return; + store.state.temporaryLayer = null; + res.sid = data.result; + treeData.value[0].children.push(res); + + + nextTick(() => { + var std = [res.id]; + for (var i in checkedKeys) { + var layer_res = estreeRef.value.getNode(checkedKeys[i]).data; + if(layer_res.shpType && layer_res.shpType == 'temporaryLayer'){ + std.push(checkedKeys[i]); + }else if(layer_res.isLayer == 1){ + std.push(checkedKeys[i]); + } + } + estreeRef.value.setCheckedKeys([], true); + estreeRef.value.setCheckedKeys(std, true); + temporaryTool.addTemporaryTool(res); + }); +}; +const editTemporaryLayerName = (res) => { + if (!store.state.editTemporaryId) return; + var id = store.state.editTemporaryId; + var val = treeData.value[0].children; + + for (var i = 0; i < val.length; i++) { + if (val[i].id == id) { + val[i].cnName = res; + setEditLayerChange(val[i]); + } + } + defaultExpanded.value = [treeData.value[0].id]; +}; +const editTemporaryBackById = (res) => { + var obj = temporaryTool.getEntityObj(res); + var val = treeData.value[0].children; + var checkedKeys = estreeRef.value.getCheckedKeys(); + if (checkedKeys.indexOf(temporary.value) > -1) { + checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1); + } + for (var i = 0; i < val.length; i++) { + if (val[i].id == res) { + obj.sid = val[i].sid; + val[i] = obj; + setEditLayerChange(obj); + } + } + nextTick(() => { + estreeRef.value.setCheckedKeys(checkedKeys, true); + }); +}; +const setEditLayerChange = async (res) => { + var obj = { + id: res.sid, + name: res.cnName, + wkt: JSON.stringify(res), + }; + const data = await mark_update(obj); + if (data.code != 200) return; +}; +watch( + () => store.state.restLayer, + (nVal, oVal) => { + if (nVal) { + setRestLayerData(); + } + }, + { deep: true } +); +watch( + () => store.state.temporaryLayer, + (nVal, oVal) => { + if (nVal) { + addTemporaryLayer(nVal); + } + }, + { deep: true } +); +watch( + () => store.state.editTemporarName, + (nVal, oVal) => { + if (nVal) { + editTemporaryLayerName(nVal); + } + }, + { deep: true } +); +watch( + () => store.state.editTemporaryback, + (nVal, oVal) => { + if (nVal) { + editTemporaryBackById(nVal); + } + }, + { deep: true } +); + onMounted(() => { - getLayer(); + window.setLayer = getLayer; }); </script> @@ -259,6 +663,8 @@ height: 680px; 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; @@ -270,6 +676,7 @@ padding-left: 7px; padding-right: 20px; color: white; + .tileLeft { height: 100%; display: flex; @@ -282,6 +689,7 @@ color: #ffffff; } } + .titleImg { width: 20px; height: 100%; @@ -289,31 +697,38 @@ align-items: center; color: rgba(104, 156, 255, 1); } + .set { cursor: pointer; } } + .layerContent { - height: 635px; + 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; } @@ -340,6 +755,7 @@ flex-shrink: 0; } } + .dropdown_box { position: relative; } @@ -347,9 +763,11 @@ /deep/.el-select-dropdown__item { font-size: 12px !important; } + .el-tree { background: transparent; } + /deep/ .el-tree-node { background: #0d131d; color: #ffffff; @@ -358,29 +776,36 @@ margin-top: 3px; padding: 8px; } + /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 { background: rgba(104, 156, 255, 0.5) !important; } + .highlight { background: rgba(104, 156, 255, 0.5) !important; } + // .custom-tree-node { // flex: 1; // display: flex; @@ -395,10 +820,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); @@ -409,6 +836,7 @@ .el-popper.is-light { border: 1px solid rgba(7, 8, 14, 0.8) !important; } + .el-scrollbar { border: 0 !important; } -- Gitblit v1.9.3