From 9f9ae3e0253f2d657b6b337d62d269394d04ee09 Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期五, 17 十一月 2023 14:29:08 +0800 Subject: [PATCH] 版本更新 --- src/views/layer/layerManage.vue | 477 ++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 327 insertions(+), 150 deletions(-) diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue index d1a12d9..dfbe13c 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> @@ -43,11 +23,8 @@ <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a> - </span> --> - <span - class="button" - v-if="!data.isTemporaryLayer" - > + </span>--> + <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,21 @@ </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-item v-if="data.shpType == 'temporaryLayer'" + @click.native="clickdTemporary(3, data)">瀹氫綅</el-dropdown-item> + <el-dropdown-item v-if="data.shpType == 'temporaryLayer'" + @click.native="clickdTemporary(4, data)">涓嬭浇鎴恠hp</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> @@ -86,23 +57,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" + @onSubmit="editLayer"></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> @@ -120,10 +78,18 @@ import attributeList from "./attributeList"; import layerDetail from "./layerDetail"; import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶 -import { perms_selectLayers } 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"]); @@ -159,8 +125,13 @@ store.state.setLayerManager = false; emits("setCloseLayer", false); }; -const clickdTemporary = (res, data) => { +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); @@ -171,58 +142,114 @@ } store.state.editTemporaryId = data.id; sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id); - sgworld.Creator.SimpleGraphic.edit(true, { editProp: false }); + 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); - 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); - } + // 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); - treeData.value = [...treeData.value]; } } + + var std = []; + for (var i in keys) { + var layer_res = estreeRef.value.getNode(keys[i]).data; + if (layer_res.shpType && layer_res.shpType == 'temporaryLayer') { + std.push(keys[i]); + } else if (layer_res.isLayer == 1) { + std.push(keys[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); + } else if (res == 4) { +debugger } }; //閫夋嫨鍥惧眰 const handleCheckChange = (data, checked) => { layerAttributeIsshow.value = false; layerDetailIsshow.value = false; + // let isCheck = checked.checkedKeys.indexOf(data.id) > -1; - let isCheck = checked.checkedKeys.indexOf(data.id) > -1; - - let son = estreeRef.value.getCheckedNodes().reverse(); + 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 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; - } + 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 { - server.addTreeData(layerArr); + 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.reverse(), url); + server.addGeoServerMmsLayers(setGeoWms, geoUrl); } - store.commit("SET_CHECKLAYER", son); - // setVisiable(data, isCheck); - // + menuTool.setImageLayerChange(); }; const setVisiable = (treeNode, checked) => { if (checked !== undefined) { @@ -256,27 +283,86 @@ const clickdropdown = (res, e) => { layerAttributeIsshow.value = false; layerDetailIsshow.value = false; - layerObjData.value = e; - - 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) { + 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 { - return ElMessage.error("璇峰厛鍕鹃�夊浘灞�"); + 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) => { @@ -286,7 +372,16 @@ node = estreeRef.value.getNode(e); } }); + + var checKey = estreeRef.value.getCheckedKeys(); + let checkid = []; + for (var i in checKey) { + if (estreeRef.value.getNode(checKey[i]).data.isLayer == 1) { + checkid.push(checKey[i]) + } + } // 灏嗗彉鍔ㄤ箣鍓嶇殑node澶囦唤 + estreeRef.value.setCheckedKeys([], true); let copyNode = { ...node }; copyNode.previousSibling = { ...node.previousSibling }; copyNode.nextSibling = { ...node.nextSibling }; @@ -312,6 +407,7 @@ estreeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data); } } + estreeRef.value.setCheckedKeys(checkid, true); }; //鍒犻櫎鍥惧眰鏍� const delLayer = (res) => { @@ -320,47 +416,87 @@ // }); // treeData = handleTree(menuOption, "id", "pid", "children"); }; +const editLayer = () => { + var layer = store.state.chekNowLayers; + var std = []; + for (var i in layer) { + if (layer[i].isLayer == 1) { + std.push(layer[i].id) + } + } + estreeRef.value.setCheckedKeys([], true); + nextTick(() => { + estreeRef.value.setCheckedKeys(std, true); + }) + +} const setRestLayerData = () => { let son = estreeRef.value.getCheckedNodes().reverse(); - server.delLayerAll(); var setGeoWms = []; - var url = null; + 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); - url = layerArr.url; + geoUrl = layerArr.url; + // server.addTreeData(layerArr); } } else { server.addTreeData(layerArr); } } if (setGeoWms.length > 0) { - server.addGeoServerMmsLayers(setGeoWms, url); + server.addGeoServerMmsLayers(setGeoWms, geoUrl); } 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) { + 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 layer = comperLayer.result[i] + if (layer.wkt && layer.wkt.indexOf("shpType") > -1 && layer.wkt.indexOf("shpType") > -1) { + + var slayer = JSON.parse(comperLayer.result[i].wkt); + + slayer.sid = comperLayer.result[i].id; + children.push(slayer); + + } + } + } treeData.value.unshift({ - cnName: "涓存椂鍥惧眰", + cnName: "鑷畾涔夊浘灞�", level: 1, pid: 0, isLayer: 0, type: 6, - id: new Date().getTime(), + id: temporary.value, isTemporaryLayer: true, - children: [], + children: children, }); var std = []; @@ -385,27 +521,10 @@ //娣诲姞榛樿閫変腑鍥惧眰 layerListData.value = dt.result; defaultLayer(dt.result); - 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); - } - //; nextTick(() => { let son = estreeRef.value.getCheckedNodes(); - + setRestLayerData(); store.commit("SET_CHECKLAYER", son); }); } @@ -429,14 +548,31 @@ return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� }); } -const addTemporaryLayer = (res) => { +const addTemporaryLayer = async (res) => { + var obj = { + 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); - var id = res.id; + + nextTick(() => { - var checkedKeys = estreeRef.value.getCheckedKeys(); - checkedKeys.push(id); - estreeRef.value.setCheckedKeys(checkedKeys, true); + 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); }); }; @@ -448,7 +584,7 @@ for (var i = 0; i < val.length; i++) { if (val[i].id == id) { val[i].cnName = res; - treeData.value = [...treeData.value]; + setEditLayerChange(val[i]); } } defaultExpanded.value = [treeData.value[0].id]; @@ -456,17 +592,35 @@ 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; - treeData.value = [...treeData.value]; + 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(); } }, @@ -476,6 +630,7 @@ () => store.state.temporaryLayer, (nVal, oVal) => { if (nVal) { + addTemporaryLayer(nVal); } }, @@ -485,6 +640,7 @@ () => store.state.editTemporarName, (nVal, oVal) => { if (nVal) { + editTemporaryLayerName(nVal); } }, @@ -494,6 +650,7 @@ () => store.state.editTemporaryback, (nVal, oVal) => { if (nVal) { + editTemporaryBackById(nVal); } }, @@ -512,6 +669,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; @@ -523,6 +681,7 @@ padding-left: 7px; padding-right: 20px; color: white; + .tileLeft { height: 100%; display: flex; @@ -535,6 +694,7 @@ color: #ffffff; } } + .titleImg { width: 20px; height: 100%; @@ -542,31 +702,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; } @@ -593,6 +760,7 @@ flex-shrink: 0; } } + .dropdown_box { position: relative; } @@ -600,9 +768,11 @@ /deep/.el-select-dropdown__item { font-size: 12px !important; } + .el-tree { background: transparent; } + /deep/ .el-tree-node { background: #0d131d; color: #ffffff; @@ -611,29 +781,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; @@ -648,10 +822,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); @@ -662,6 +838,7 @@ .el-popper.is-light { border: 1px solid rgba(7, 8, 14, 0.8) !important; } + .el-scrollbar { border: 0 !important; } -- Gitblit v1.9.3