| | |
| | | </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> |
| | |
| | | </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" |
| | | @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.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> |
| | |
| | | </el-tree> |
| | | </div> |
| | | </div> |
| | | <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-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> |
| | | |
| | |
| | | |
| | | 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]); |
| | | 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); |
| | |
| | | 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]) |
| | | } |
| | | 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); |
| | |
| | | // }); |
| | | // 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) |
| | | 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); |
| | | }) |
| | | |
| | | estreeRef.value.setCheckedKeys([], true); |
| | | nextTick(() => { |
| | | estreeRef.value.setCheckedKeys(std, true); |
| | | }) |
| | | |
| | | } |
| | | const setRestLayerData = () => { |
| | | let son = estreeRef.value.getCheckedNodes().reverse(); |
| | |
| | | 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); |
| | | 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({ |
| | |
| | | } |
| | | const addTemporaryLayer = async (res) => { |
| | | var obj = { |
| | | id: res.id, |
| | | name: res.cnName, |
| | | wkt: JSON.stringify(res), |
| | | }; |
| | |
| | | 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'){ |
| | | if (layer_res.shpType && layer_res.shpType == 'temporaryLayer') { |
| | | std.push(checkedKeys[i]); |
| | | }else if(layer_res.isLayer == 1){ |
| | | } else if (layer_res.isLayer == 1) { |
| | | std.push(checkedKeys[i]); |
| | | } |
| | | } |
| | |
| | | () => store.state.restLayer, |
| | | (nVal, oVal) => { |
| | | if (nVal) { |
| | | |
| | | |
| | | setRestLayerData(); |
| | | } |
| | | }, |
| | |
| | | () => store.state.temporaryLayer, |
| | | (nVal, oVal) => { |
| | | if (nVal) { |
| | | |
| | | |
| | | addTemporaryLayer(nVal); |
| | | } |
| | | }, |
| | |
| | | () => store.state.editTemporarName, |
| | | (nVal, oVal) => { |
| | | if (nVal) { |
| | | |
| | | |
| | | editTemporaryLayerName(nVal); |
| | | } |
| | | }, |
| | |
| | | () => store.state.editTemporaryback, |
| | | (nVal, oVal) => { |
| | | if (nVal) { |
| | | |
| | | |
| | | editTemporaryBackById(nVal); |
| | | } |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | |
| | | |
| | | onMounted(() => { |
| | | window.setLayer = getLayer; |
| | | }); |
| | |
| | | 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--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; |
| | | } |
| | | |