|
|
@@ -2,27 +2,61 @@
|
|
|
<div id="serviceTree" v-show="mapStore.layerShow" :class="[mapStore.left_board?'switch-left-active':'switch-left']">
|
|
|
<div class="common-title">
|
|
|
<span>图层</span>
|
|
|
+ <div class="title-right">
|
|
|
+ <el-switch
|
|
|
+ v-model="layerModel"
|
|
|
+ size="middle"
|
|
|
+ @change="changeLayerModel"
|
|
|
+ active-text="图层"
|
|
|
+ inactive-text="聚类"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
<div class="tree-content scroll">
|
|
|
- <el-tree
|
|
|
- :data="treeData"
|
|
|
- @check="changeChange"
|
|
|
- ref="treeRef"
|
|
|
- show-checkbox
|
|
|
- >
|
|
|
- <template #default="{ node, data }">
|
|
|
- <span class="custom-tree-label">{{ node.label }}</span>
|
|
|
- <span v-if="node.isLeaf" class="custom-tree-gl-icon" @click="showLayerGL(data)">
|
|
|
+ <template v-if="layerModel">
|
|
|
+ <el-tree
|
|
|
+ :data="treeData"
|
|
|
+ @check="changeChange"
|
|
|
+ ref="treeRef"
|
|
|
+ show-checkbox
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="custom-tree-label">{{ node.label }}</span>
|
|
|
+ <span v-if="node.isLeaf" class="custom-tree-gl-icon" @click="showLayerGL(data)">
|
|
|
<OfficeBuilding />
|
|
|
</span>
|
|
|
- <span v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
|
|
|
+ <span v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
|
|
|
<Document />
|
|
|
</span>
|
|
|
- <span v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
|
|
|
+ <span v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
|
|
|
<Edit />
|
|
|
</span>
|
|
|
- </template>
|
|
|
- </el-tree>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-tree
|
|
|
+ :data="treeData"
|
|
|
+ node-key="labelId"
|
|
|
+ @check-change="handleCheckChange"
|
|
|
+ ref="treeRef"
|
|
|
+ show-checkbox
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="custom-tree-label">{{ node.label }}</span>
|
|
|
+ <span v-if="node.isLeaf" class="custom-tree-gl-icon" @click="showLayerGL(data)">
|
|
|
+ <OfficeBuilding />
|
|
|
+ </span>
|
|
|
+ <span v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
|
|
|
+ <Document />
|
|
|
+ </span>
|
|
|
+ <span v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
|
|
|
+ <Edit />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -31,23 +65,56 @@
|
|
|
import {onMounted, ref, watch} from "vue";
|
|
|
import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
|
|
|
import {getServiceTree} from "@/service/http.js";
|
|
|
-import {AddSingleLayer, FeatureThreeDimension} from "@/unit/map/addLayer.js";
|
|
|
+import {AddSingleLayer, AreaJsonRankShow, clearAllLayer, FeatureThreeDimension} from "@/unit/map/addLayer.js";
|
|
|
import {useMapStore} from "@/store/mapStore.js";
|
|
|
-import {Edit,Document,OfficeBuilding} from "@element-plus/icons-vue";
|
|
|
+import {Edit, Document, OfficeBuilding, Aim} from "@element-plus/icons-vue";
|
|
|
+import {getMapNum} from "@/service/map.js";
|
|
|
export default {
|
|
|
name: "ServiceTree",
|
|
|
- components: {CommonTitle,Edit,Document,OfficeBuilding},
|
|
|
+ components: {Aim, CommonTitle,Edit,Document,OfficeBuilding},
|
|
|
setup(){
|
|
|
const mapStore = useMapStore()
|
|
|
let treeData = ref([]);
|
|
|
const treeRef = ref(null);
|
|
|
const showGL = ref(false);
|
|
|
+ const showGroup = ref(false);
|
|
|
const GLLayer = ref('');
|
|
|
- function getTreeData(){
|
|
|
+ const GroupLayer = ref('');
|
|
|
+ const layerModel = ref(false);
|
|
|
+ function changeLayerModel(item){
|
|
|
+ clearAllLayer()
|
|
|
+ mapStore.currentLayerList = []
|
|
|
+ AreaJsonRankShow({
|
|
|
+ status:"hide"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ watch(() => mapStore.currentLayerType,(val) => {
|
|
|
+ changeLayerModel();
|
|
|
+ mapStore.currentNum = null;
|
|
|
+ mapStore.currentLayer = null;
|
|
|
+ FeatureThreeDimension({
|
|
|
+ status:"hide"
|
|
|
+ });
|
|
|
+ AreaJsonRankShow({
|
|
|
+ status:"hide"
|
|
|
+ });
|
|
|
+ if(mapStore.currentLayerType === "mainPage"){ //首页
|
|
|
+ getTreeData("1318");
|
|
|
+ }else if(mapStore.currentLayerType === "houseBuilding"){ //房屋建筑
|
|
|
+ getTreeData("1319");
|
|
|
+ }else{ //市政设施
|
|
|
+ getTreeData("1324");
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ immediate:true,
|
|
|
+ deep:true
|
|
|
+ })
|
|
|
+ function getTreeData(labelId){
|
|
|
getServiceTree({
|
|
|
TYPE:"",
|
|
|
- labelId:"1318"
|
|
|
+ labelId:labelId
|
|
|
}).then(res =>{
|
|
|
+ debugger
|
|
|
let resData =res.data.data.Rows[0].children;
|
|
|
treeData.value = resData;
|
|
|
})
|
|
|
@@ -81,52 +148,149 @@ export default {
|
|
|
}
|
|
|
function changeChange(){
|
|
|
let nowChecked = treeRef.value.getCheckedNodes(true);
|
|
|
- //找到原来有现在没有的删除
|
|
|
- for(let i = 0; i < mapStore.currentLayerList.length; i++){
|
|
|
- if(nowChecked.findIndex(i2 =>i2.CODE === mapStore.currentLayerList[i].CODE) == -1){
|
|
|
- AddSingleLayer({
|
|
|
- type:mapStore.currentLayerList[i].TYPE,
|
|
|
- id:mapStore.currentLayerList[i].S_CODE,
|
|
|
- visible:false,
|
|
|
- url:mapStore.currentLayerList[i].ADDRESS,
|
|
|
- opacity:100,
|
|
|
- title:mapStore.currentLayerList[i].label,
|
|
|
- wkid:mapStore.currentLayerList[i].COORDINATE_SYSTEM,
|
|
|
- token:mapStore.currentLayerList[i].TOKEN
|
|
|
- })
|
|
|
- mapStore.currentLayerList.splice(i,1);
|
|
|
- i--;
|
|
|
+ //如果是图层
|
|
|
+ if(layerModel.value){
|
|
|
+ //找到原来有现在没有的删除
|
|
|
+ for(let i = 0; i < mapStore.currentLayerList.length; i++){
|
|
|
+ if(nowChecked.findIndex(i2 =>i2.CODE === mapStore.currentLayerList[i].CODE) == -1){
|
|
|
+ debugger
|
|
|
+ AddSingleLayer({
|
|
|
+ type:mapStore.currentLayerList[i].TYPE,
|
|
|
+ id:mapStore.currentLayerList[i].CODE,
|
|
|
+ visible:false,
|
|
|
+ url:mapStore.currentLayerList[i].ADDRESS,
|
|
|
+ opacity:100,
|
|
|
+ title:mapStore.currentLayerList[i].label,
|
|
|
+ wkid:mapStore.currentLayerList[i].COORDINATE_SYSTEM,
|
|
|
+ token:mapStore.currentLayerList[i].TOKEN
|
|
|
+ })
|
|
|
+ mapStore.currentLayerList.splice(i,1);
|
|
|
+ i--;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //找到原来没有，现在有的新增
|
|
|
+ for(let i = 0; i < nowChecked.length; i++){
|
|
|
+ if(mapStore.currentLayerList.findIndex(i2 =>i2.CODE === nowChecked[i].CODE) == -1){
|
|
|
+ mapStore.currentLayerList.push(nowChecked[i]);
|
|
|
+ debugger
|
|
|
+ AddSingleLayer({
|
|
|
+ type:nowChecked[i].TYPE,
|
|
|
+ id:nowChecked[i].CODE,
|
|
|
+ visible:true,
|
|
|
+ url:nowChecked[i].ADDRESS,
|
|
|
+ opacity:100,
|
|
|
+ title:nowChecked[i].label,
|
|
|
+ wkid:nowChecked[i].COORDINATE_SYSTEM,
|
|
|
+ token:nowChecked[i].TOKEN
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- //找到原来没有，现在有的新增
|
|
|
- for(let i = 0; i < nowChecked.length; i++){
|
|
|
- if(mapStore.currentLayerList.findIndex(i2 =>i2.CODE === nowChecked[i].CODE) == -1){
|
|
|
- mapStore.currentLayerList.push(nowChecked[i]);
|
|
|
- debugger
|
|
|
- AddSingleLayer({
|
|
|
- type:nowChecked[i].TYPE,
|
|
|
- id:nowChecked[i].S_CODE,
|
|
|
- visible:true,
|
|
|
- url:nowChecked[i].ADDRESS,
|
|
|
- opacity:100,
|
|
|
- title:nowChecked[i].label,
|
|
|
- wkid:nowChecked[i].COORDINATE_SYSTEM,
|
|
|
- token:nowChecked[i].TOKEN
|
|
|
+ }
|
|
|
+ function handleCheckChange(data,checked,indeterminate){
|
|
|
+ clearAllLayer();
|
|
|
+ if (checked) {
|
|
|
+ // 获取所有已选中的节点
|
|
|
+ debugger
|
|
|
+ const checkedNodes = treeRef.value.getCheckedNodes(true);
|
|
|
+ data = checkedNodes[checkedNodes.length -1];
|
|
|
+ mapStore.currentNum = data.UUID;
|
|
|
+ mapStore.currentLayer = data;
|
|
|
+ AddSingleLayer({
|
|
|
+ type:data.TYPE,
|
|
|
+ id:data.CODE,
|
|
|
+ visible:true,
|
|
|
+ url:data.ADDRESS,
|
|
|
+ opacity:100,
|
|
|
+ title:data.label,
|
|
|
+ wkid:data.COORDINATE_SYSTEM,
|
|
|
+ token:data.TOKEN
|
|
|
+ })
|
|
|
+ // 只保留当前选中的节点
|
|
|
+ // checkedNodes.forEach(node => {
|
|
|
+ // debugger
|
|
|
+ // if (node.labelId !== data.labelId) {
|
|
|
+ // treeRef.value.setChecked(node.labelId,false,true)
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ if (checkedNodes.length > 1) {
|
|
|
+ treeRef.value.setCheckedKeys([data.labelId])
|
|
|
+ }
|
|
|
+ if(mapStore.scale > 100000){
|
|
|
+ getMapNum('county',mapStore.currentNum).then(res =>{
|
|
|
+ debugger
|
|
|
+ let data = res.data.data;
|
|
|
+ let zxCount = 0;
|
|
|
+ let zxList = ['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区']
|
|
|
+ data.forEach(item =>{
|
|
|
+ if(zxList.indexOf(item.name) > -1){
|
|
|
+ zxCount += item.value * 1;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ data.push({
|
|
|
+ name:"中心城区",
|
|
|
+ value:zxCount
|
|
|
+ })
|
|
|
+ debugger
|
|
|
+ AreaJsonRankShow({
|
|
|
+ type:"zx",
|
|
|
+ status:"show",
|
|
|
+ data:data
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }else if(mapStore.scale > 80000){
|
|
|
+ getMapNum('county',mapStore.currentNum).then(res =>{
|
|
|
+ debugger
|
|
|
+ let data = res.data.data
|
|
|
+ AreaJsonRankShow({
|
|
|
+ type:"qx",
|
|
|
+ status:"show",
|
|
|
+ data:data
|
|
|
+ });
|
|
|
})
|
|
|
+ }else{
|
|
|
+ getMapNum('street',mapStore.currentNum).then(res =>{
|
|
|
+ debugger
|
|
|
+ let data = res.data.data
|
|
|
+ AreaJsonRankShow({
|
|
|
+ type:"jz",
|
|
|
+ status:"show",
|
|
|
+ data:data
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(mapStore.scale < 6000){
|
|
|
+ FeatureThreeDimension({
|
|
|
+ url:mapStore.currentLayer.ADDRESS,
|
|
|
+ token:mapStore.currentLayer.TOKEN,
|
|
|
+ status:"show"
|
|
|
+ });
|
|
|
}
|
|
|
+ }else{
|
|
|
+ mapStore.currentNum = null;
|
|
|
+ mapStore.currentLayer = null;
|
|
|
+ FeatureThreeDimension({
|
|
|
+ status:"hide"
|
|
|
+ });
|
|
|
+ AreaJsonRankShow({
|
|
|
+ status:"hide"
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
- onMounted(()=>{
|
|
|
- getTreeData()
|
|
|
- })
|
|
|
+ // onMounted(()=>{
|
|
|
+ // getTreeData()
|
|
|
+ // })
|
|
|
return {
|
|
|
mapStore,
|
|
|
treeData,
|
|
|
changeChange,
|
|
|
+ handleCheckChange,
|
|
|
treeRef,
|
|
|
applyData,
|
|
|
showLayerGL,
|
|
|
- showDetailDialog
|
|
|
+ showDetailDialog,
|
|
|
+ layerModel,
|
|
|
+ changeLayerModel
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -142,6 +306,13 @@ export default {
|
|
|
.custom-tree-label{
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
+ .custom-tree-group-icon{
|
|
|
+ position: absolute;
|
|
|
+ right: 100px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
.custom-tree-gl-icon{
|
|
|
position: absolute;
|
|
|
right: 70px;
|
|
|
@@ -179,6 +350,11 @@ export default {
|
|
|
height: 37px;
|
|
|
background: url("@/assets/imgs/tkxbt.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: stretch;
|
|
|
span {
|
|
|
font-family: YouSheBiaoTiHei;
|
|
|
font-weight: 400;
|
|
|
@@ -190,6 +366,9 @@ export default {
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
+ .title-right{
|
|
|
+ padding-right: 60px;
|
|
|
+ }
|
|
|
}
|
|
|
.tree-content{
|
|
|
width: 100%;
|
