| | |
| | | </span> --> |
| | | <span |
| | | class="button" |
| | | v-if="data.type == 2 || data.type == 3" |
| | | v-if="data.isLayer == 1" |
| | | > |
| | | <el-dropdown trigger="click"> |
| | | <span class="el-dropdown-link"> |
| | |
| | | <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 == 3" |
| | | @click.native="clickdropdown(2, data)" |
| | | >属性</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </template> |
| | | </el-dropdown> |
| | |
| | | @delLayer="delLayer" |
| | | ></layer-set> |
| | | <attribute-list |
| | | v-show="layerAttributeIsshow" |
| | | v-if="layerAttributeIsshow" |
| | | :layerData="layerObjData" |
| | | @spatialClose="setSpatialClose" |
| | | ></attribute-list> |
| | |
| | | defineProps, |
| | | defineEmits, |
| | | nextTick, |
| | | watch, |
| | | } from "vue"; |
| | | import layerSet from "./layerSet"; |
| | | import attributeList from "./attributeList"; |
| | |
| | | import { ElMessage } from "element-plus"; |
| | | const store = useStore(); // 该方法用于返回store 实例 |
| | | const stretchValue = ref(""); |
| | | |
| | | const emits = defineEmits(["setCloseLayer"]); |
| | | let estreeRef = ref(); |
| | | |
| | | const setLayer = ref(); |
| | | const transparence = ref(0); |
| | | var treeData = ref([]); |
| | | var layerListData = 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, |
| | | }, |
| | | ]); |
| | | let menuOption = reactive([]); |
| | | |
| | | const layerSetIsshow = ref(false); |
| | | const layerAttributeIsshow = ref(false); |
| | |
| | | const layerObjData = ref(null); |
| | | // 当前选中的节点 id |
| | | const selectedNodeId = ref(null as any); //做类型断言处理 |
| | | const emits = defineEmits(["setCloseLayer"]); |
| | | |
| | | //默认选中id |
| | | const DefaultId = ref([15]); |
| | | const DefaultId = ref([]); |
| | | //图层设置弹框 |
| | | const layerSetBox = () => { |
| | | layerSetIsshow.value = !layerSetIsshow.value; |
| | |
| | | layerSetIsshow.value = res; |
| | | }; |
| | | const setCloseLayer = () => { |
| | | store.state.setLayerManager = false; |
| | | emits("setCloseLayer", false); |
| | | }; |
| | | //选择图层 |
| | |
| | | let isCheck = checked.checkedKeys.indexOf(data.id) > -1; |
| | | // this.setVisiable(data, isCheck); |
| | | |
| | | let son = estreeRef.value.getCheckedNodes(); |
| | | let son = estreeRef.value.getCheckedNodes().reverse(); |
| | | 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; |
| | | } |
| | | } else { |
| | | server.addTreeData(layerArr); |
| | | } |
| | | } |
| | | if (setGeoWms.length > 0) { |
| | | server.addGeoServerMmsLayers(setGeoWms.reverse(), url); |
| | | } |
| | | store.commit("SET_CHECKLAYER", son); |
| | | setVisiable(data, isCheck); |
| | | // setVisiable(data, isCheck); |
| | | |
| | | // server.addLayer(layerArr, isCheck); |
| | | // |
| | | }; |
| | | const setVisiable = (treeNode, checked) => { |
| | | if (checked !== undefined) { |
| | |
| | | } |
| | | |
| | | if (!treeNode.isAdd) { |
| | | server.addTreeData(treeNode); |
| | | // server.addTreeData(treeNode); |
| | | return; |
| | | } |
| | | }; |
| | |
| | | DefaultId.value.forEach((v) => { |
| | | if (e.id == v) { |
| | | setVisiable(e, true); |
| | | } else { |
| | | if (e.children) { |
| | | defaultLayer(e.children); |
| | | } |
| | | // return; |
| | | } |
| | | }); |
| | | }); |
| | | }; |
| | | const clickdropdown = (res, e) => { |
| | | if (!e.checked) { |
| | | return ElMessage.error("请先勾选图层"); |
| | | } |
| | | 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 { |
| | | layerDetailIsshow.value = true; |
| | | var val = estreeRef.value!.getCheckedKeys(false); |
| | | if (val.indexOf(e.id) > -1) { |
| | | layerDetailIsshow.value = true; |
| | | } else { |
| | | return ElMessage.error("请先勾选图层"); |
| | | } |
| | | } |
| | | }; |
| | | const setSpatialClose = (res) => { |
| | |
| | | // menuOption = menuOption.filter((item) => { |
| | | // return item.id != res; |
| | | // }); |
| | | // console.log(res); |
| | | // console.log(menuOption); |
| | | // treeData = handleTree(menuOption, "id", "pid", "children"); |
| | | }; |
| | | const setRestLayerData = () => { |
| | | let son = estreeRef.value.getCheckedNodes().reverse(); |
| | | 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; |
| | | } |
| | | } else { |
| | | server.addTreeData(layerArr); |
| | | } |
| | | } |
| | | if (setGeoWms.length > 0) { |
| | | server.addGeoServerMmsLayers(setGeoWms, url); |
| | | } |
| | | store.commit("SET_CHECKLAYER", son); |
| | | }; |
| | | const getLayer = async () => { |
| | | store.state.restLayer = false; |
| | | server.delLayerAll(); |
| | | 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; |
| | | 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(treeData.value); |
| | | 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(); |
| | | |
| | |
| | | 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; |
| | | }); |
| | | } |
| | | |
| | |
| | | return father.pid == 0; // 返回一级菜单 |
| | | }); |
| | | } |
| | | getLayer(); |
| | | onMounted(() => {}); |
| | | |
| | | watch( |
| | | () => store.state.restLayer, |
| | | (nVal, oVal) => { |
| | | if (nVal) { |
| | | setRestLayerData(); |
| | | } |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | |
| | | onMounted(() => { |
| | | window.setLayer = getLayer; |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | |
| | | 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; |