From b1e9c826c1ba48c3dc263039699636ed2ba3be4e Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期一, 27 十一月 2023 11:16:06 +0800 Subject: [PATCH] 版本更新,图层管理添加矢量数据下载,视角高度增加放大限制 --- src/views/layer/layerManage.vue | 792 +++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 583 insertions(+), 209 deletions(-) diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue index b33a066..3cf7acf 100644 --- a/src/views/layer/layerManage.vue +++ b/src/views/layer/layerManage.vue @@ -12,18 +12,9 @@ </div> </div> <div class="layerContent"> - <el-tree - node-key="id" - :props="props" - :highlight-current="false" - :current-node-key="selectedNodeId" - :data="treeData" - :expand-on-click-node="false" - show-checkbox - @check="handleCheckChange" - ref="estreeRef" - v-if="treeData.length" - > + <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> @@ -32,8 +23,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 +33,21 @@ </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-item v-if="data.shpType == 'temporaryLayer'" + @click.native="clickdTemporary(4, data)">涓嬭浇鎴恠hp</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> @@ -57,23 +57,10 @@ </el-tree> </div> </div> - <layer-set - v-show="layerSetIsshow" - @SETstate="SETstate" - :layerTree="treeData" - @addlayer="addlayer" - @delLayer="delLayer" - ></layer-set> - <attribute-list - v-show="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> @@ -84,85 +71,38 @@ reactive, defineProps, defineEmits, + nextTick, + watch, } from "vue"; +import $ from "jquery"; 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, + comprehensive_downloadShp, +} 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"; +import { removeToken, getToken } from "@/utils/auth"; 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); @@ -173,8 +113,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; @@ -184,24 +125,174 @@ 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(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) { + + var obj = { + bak: null, + fillColor: data.material, + id: data.sid, + name: data.cnName, + opacity: data.materialAlpha, + type: data.type, + wkt: temporaryTool.getWKT(data), + } + downLoadShp(obj) + + } +}; +const downLoadShp = (res) => { + + $.ajax({ + url: config.proxy + "/comprehensive/downloadShp?token=" + getToken(), + type: "POST", + data: JSON.stringify([res]), + dataType: "json", // html銆乯son銆乯sonp銆乻cript銆乼ext + contentType: "application/json", // "application/x-www-form-urlencoded" + success: (rs) => { + if (rs && rs.code == 200) { + var a = document.createElement("a"); // 鍒涘缓涓�涓猘鏍囩鍏冪礌 + a.style.display = "none"; // 璁剧疆鍏冪礌涓嶅彲瑙� + + a.href = + config.proxy + + "/comprehensive/downloadFile?token=" + + getToken() + + "&guid=" + + rs.result; + + document.body.appendChild(a); // 鍔犲叆 + a.click(); // 瑙﹀彂鐐瑰嚮,涓嬭浇 + document.body.removeChild(a); // 閲婃斁 + } + }, + error: function (e) { }, + }); + +} //閫夋嫨鍥惧眰 const handleCheckChange = (data, checked) => { - let isCheck = checked.checkedKeys.indexOf(data.id) > -1; - // this.setVisiable(data, isCheck); + layerAttributeIsshow.value = false; + layerDetailIsshow.value = false; + // let isCheck = checked.checkedKeys.indexOf(data.id) > -1; let son = estreeRef.value.getCheckedNodes(); - store.commit("SET_CHECKLAYER", son); - setVisiable(data, isCheck); - let layerArr = []; - son.forEach((e) => { - if (e.type == 2) { - layerArr.push(e); + 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.addLayer(layerArr, isCheck); + } + 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) { @@ -215,118 +306,271 @@ setVisiable(item, treeNode.checked); }); return; - } else if (treeNode._children) { - if (treeNode.thisView === "ewzj") { - treeNode._children[0].checked = treeNode.checked; - if (treeNode._children[0].children) { - treeNode._children[0].children.forEach((item) => { - item.checked = treeNode.checked; - server.addTreeData(item); - }); - } else { - server.addTreeData(treeNode._children[0]); - } - } else if (treeNode.thisView === "swzj") { - for (let i = 1; i < treeNode._children.length; i++) { - treeNode._children[i].checked = treeNode.checked; - } - treeNode._children.forEach((item, index) => { - index !== 0 && server.addTreeData(item); - }); - } else if (!treeNode.thisView) { - treeNode._children.forEach((item, index) => { - item.checked = treeNode.checked; - if (item.children) { - item.children.forEach((_item) => { - _item.checked = item.checked; - server.addTreeData(_item); - }); - } else { - server.addTreeData(item); - } - }); - } - return; } if (!treeNode.isAdd) { - server.addTreeData(treeNode); + // server.addTreeData(treeNode); return; } - - // let data = _getTreeData(treeNode.id); - // if (data) { - // data.item && - // data.item.setVisibility && - // data.item.setVisibility(treeNode.checked); - // data.item && data.item.setVisible && data.item.setVisible(treeNode.checked); - // data.item && - // data.item.show !== undefined && - // (data.item.show = treeNode.checked); - // if (data.datatype === "particle") { - // data.item.forEach((item) => { - // item.show = treeNode.checked; - // }); - // } - // } else { - // if (treeNode.id && treeNode.id.indexOf && treeNode.id.indexOf("---") > -1) { - // var ids = id.split("---"); - // ids.forEach((item) => { - // sgworld.ProjectTree.setVisibility(item, treeNode.checked); - // }); - // } else { - // sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked); - - // var dd = Viewer.dataSources._dataSources.filter((item) => { - // return item.name == treeNode.id; - // }); - // if (dd && dd.length > 0) { - // dd[0].show = treeNode.checked; - // } - // } - // } }; - +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); + } + }); + + 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 }; + 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); + } + } + estreeRef.value.setCheckedKeys(checkid, true); }; //鍒犻櫎鍥惧眰鏍� 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(); - if (dt.code == 200) { - treeData.value = setTreeData(dt.result); +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); + }) - // 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 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: "鑷畾涔夊浘灞�", + 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); + }); + } }; //鏋勯�犳爲 @@ -347,8 +591,117 @@ return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� }); } +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); + + + 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> @@ -358,6 +711,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; @@ -369,6 +724,7 @@ padding-left: 7px; padding-right: 20px; color: white; + .tileLeft { height: 100%; display: flex; @@ -381,6 +737,7 @@ color: #ffffff; } } + .titleImg { width: 20px; height: 100%; @@ -388,31 +745,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; } @@ -439,6 +803,7 @@ flex-shrink: 0; } } + .dropdown_box { position: relative; } @@ -446,9 +811,11 @@ /deep/.el-select-dropdown__item { font-size: 12px !important; } + .el-tree { background: transparent; } + /deep/ .el-tree-node { background: #0d131d; color: #ffffff; @@ -457,29 +824,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; @@ -494,10 +865,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); @@ -508,6 +881,7 @@ .el-popper.is-light { border: 1px solid rgba(7, 8, 14, 0.8) !important; } + .el-scrollbar { border: 0 !important; } -- Gitblit v1.9.3