图层管理修改

surprise

2023-10-30 ecf3ad202a851caa39660ddfaa16e1bf16565b2e

 src/views/layer/layerManage.vue

@@ -12,9 +12,20 @@
      </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>
@@ -23,7 +34,7 @@
              <a style="margin-left: 8px" @click="remove(node, data)">
                Delete
              </a>
            </span> -->
            </span>-->
            <span class="button" v-if="!data.isTemporaryLayer">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
@@ -33,19 +44,31 @@
                </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>
@@ -55,9 +78,18 @@
      </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-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>
</template>

@@ -76,11 +108,18 @@
import attributeList from "./attributeList";
import layerDetail from "./layerDetail";
import { useStore } from "vuex"; // 引入useStore 方法
import { perms_selectLayers, mark_selectByPageAndCount, mark_insert, mark_deletes, mark_update } 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(); // 该方法用于返回store 实例
const stretchValue = ref("");
const emits = defineEmits(["setCloseLayer"]);
@@ -119,9 +158,9 @@
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+"图层没有勾选,无法进行编辑");
    let son = estreeRef.value.getCheckedKeys();
    if (son.indexOf(data.id) < 0) {
      return ElMessage(data.cnName + "图层没有勾选,无法进行编辑");
    }
    if (store.state.editTemporaryId) {
      var id = store.state.editTemporaryId;
@@ -134,49 +173,50 @@
    store.state.editTemporaryId = data.id;
    sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id);
    sgworld.Creator.SimpleGraphic.edit(true, {
      editProp: false, tipText: {
        ActiveText: '点击激活编辑'
      }, enableDelete: false
      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
    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();
    const checkedKeys = [];
    for (var i in keys) {
      checkedKeys.push(keys[i])
    }
    var val = treeData.value[0].children;
    for (var i = 0; i < val.length; i++) {
      if (val[i].id == data.id) {
        val.splice(i, 1);
      }
    }
    if (checkedKeys.indexOf(data.id) > -1) {
      checkedKeys.splice(checkedKeys.indexOf(data.id), 1)
    }
    if (checkedKeys.indexOf(temporary.value) > -1) {
      checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1)

    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]);
      }
    }
    estreeRef.value.setCheckedKeys([], true);
    console.log(data.id);
    nextTick(() => {
      var layerIds = [];
      for (var i in checkedKeys) {

        var val = estreeRef.value.getNode(checkedKeys[i]).data;
        if (val.isLayer == 1) {
          layerIds.push(checkedKeys[i]);
        }
      }
      estreeRef.value.setCheckedKeys(layerIds, true);
    })
  } else if(res == 3){
    let son = estreeRef.value.getCheckedKeys()
    if(son.indexOf(data.id)<0){
         return ElMessage(data.cnName+"图层没有勾选,无法进行定位");
      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);
  }
@@ -185,60 +225,59 @@
const handleCheckChange = (data, checked) => {
  layerAttributeIsshow.value = false;
  layerDetailIsshow.value = false;
  let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
  nextTick(() => {
    let son = estreeRef.value.getCheckedNodes();
    store.commit("SET_CHECKLAYER", son);
  });
  if (isCheck) {
    if (data.isLayer == 0) {
      let son = estreeRef.value.getCheckedNodes().reverse();
      for (var i in son) {
        var layerArr = son[i];
        layerArr.checked = true;
        if (layerArr.shpType && layerArr.shpType == 'temporaryLayer') {//临时图层添加
          temporaryTool.addTemporaryTool(layerArr);
  // let isCheck = checked.checkedKeys.indexOf(data.id) > -1;

  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 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);
        }
      }
    } else {
      if (data.shpType && data.shpType == 'temporaryLayer') {//临时图层添加
        temporaryTool.addTemporaryTool(data);
      } else {
        let son = estreeRef.value.getCheckedNodes().reverse();
        for (var i in son) {
          var layerArr = son[i];
          layerArr.checked = true;
          if (layerArr.shpType && layerArr.shpType == 'temporaryLayer') {//临时图层添加

          } else {
            server.addTreeData(layerArr);
          }
        }
      }
    }
  } else {
    if (data.isLayer == 0) {
      var layers = data.children;
      for (var i in layers) {
        if (layers[i].shpType && layers[i].shpType == 'temporaryLayer') {//临时图层添加
          temporaryTool.removeTemporaryLayer(layers[i]);
        } else {
          server.delLayer(layers[i].id)
        }
      }
    } else {

      if (data.shpType && data.shpType == 'temporaryLayer') {//临时图层添加
        temporaryTool.removeTemporaryLayer(data);
      } else {
        server.delLayer(data.id)
      }
    }

  }
 
  if (setGeoWms.length > 0) {
    server.addGeoServerMmsLayers(setGeoWms, geoUrl);
  }

  menuTool.setImageLayerChange();
};
const setVisiable = (treeNode, checked) => {
  if (checked !== undefined) {
@@ -287,8 +326,8 @@
      layerDetailIsshow.value = true;
      store.state.layerGroups = {
        id: e.id,
        layerIds: layerId
      }
        layerIds: layerId,
      };
    } else {
      var val = estreeRef.value!.getCheckedKeys(false);
      if (val.indexOf(e.id) > -1) {
@@ -297,38 +336,54 @@
        return ElMessage.error("请先勾选图层");
      }
    }
  })

  });
};
const getCheckedLayerPID = (res, result) => {
  var temp = [];
  var ids = result
  var ids = result;

  let forFn = (data) => {
    if (data.children) {
      data.children.forEach(item => {
      data.children.forEach((item) => {
        if (item.children) {
          forFn(item)
          forFn(item);
        } else {
          if (ids.indexOf(item.id) > -1) {
            temp.push(item.id)
            temp.push(item);
          }
        }
      })
      });
    } else {

      if (ids.indexOf(data.id) > -1) {
        temp.push(data.id)
        temp.push(data);
      }
    }
  };

  }
  
  forFn(res);
  return temp;
};
const setSpatialClose = (res) => {

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) => {
@@ -379,24 +434,29 @@
  // });
  // treeData = handleTree(menuOption, "id", "pid", "children");
};

const setRestLayerData = () => {
  let son = estreeRef.value.getCheckedNodes().reverse();

  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);
        // url = layerArr.url;
        server.addTreeData(layerArr);
        setGeoWms.push(layerArr.tab);
        geoUrl = layerArr.url;
        // server.addTreeData(layerArr);
      }
    } else {
      server.addTreeData(layerArr);
    }
  }
  // if (setGeoWms.length > 0) {
  //   server.addGeoServerMmsLayers(setGeoWms, url);
  // }
  if (setGeoWms.length > 0) {
    server.addGeoServerMmsLayers(setGeoWms, geoUrl);
  }
  store.commit("SET_CHECKLAYER", son);
};
const getLayer = async () => {
@@ -404,13 +464,12 @@
  // 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;
    });
@@ -418,13 +477,13 @@
      pageIndex: 1,
      pageSize: 100000,
      name: null,
    })
    });
    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)
        children.push(slayer);
      }
    }
    treeData.value.unshift({
@@ -463,7 +522,7 @@

    nextTick(() => {
      let son = estreeRef.value.getCheckedNodes();
      setRestLayerData()
      setRestLayerData();
      store.commit("SET_CHECKLAYER", son);
    });
  }
@@ -491,22 +550,28 @@
  var obj = {
    id: res.id,
    name: res.cnName,
    wkt: JSON.stringify(res)
  }
    wkt: JSON.stringify(res),
  };
  var checkedKeys = estreeRef.value.getCheckedKeys();
  const data = await mark_insert(obj);
  if (data.code != 200 || !data.result) return
  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();
    if (checkedKeys.indexOf(temporary.value) > -1) {
      checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1)
    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]);
      }
    }
    checkedKeys.push(id);
    estreeRef.value.setCheckedKeys(checkedKeys, true);
    estreeRef.value.setCheckedKeys([], true);
    estreeRef.value.setCheckedKeys(std, true);
    temporaryTool.addTemporaryTool(res);
  });
};
@@ -518,7 +583,7 @@
  for (var i = 0; i < val.length; i++) {
    if (val[i].id == id) {
      val[i].cnName = res;
      setEditLayerChange(val[i])
      setEditLayerChange(val[i]);
    }
  }
  defaultExpanded.value = [treeData.value[0].id];
@@ -528,13 +593,13 @@
  var val = treeData.value[0].children;
  var checkedKeys = estreeRef.value.getCheckedKeys();
  if (checkedKeys.indexOf(temporary.value) > -1) {
    checkedKeys.splice(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)
      setEditLayerChange(obj);
    }
  }
  nextTick(() => {
@@ -545,11 +610,11 @@
  var obj = {
    id: res.sid,
    name: res.cnName,
    wkt: JSON.stringify(res)
  }
  const data = await mark_update(obj)
  if (data.code != 200) return
}
    wkt: JSON.stringify(res),
  };
  const data = await mark_update(obj);
  if (data.code != 200) return;
};
watch(
  () => store.state.restLayer,
  (nVal, oVal) => {
@@ -712,7 +777,7 @@
  padding: 8px;
}

/deep/ .el-tree-node:focus>.el-tree-node__content {
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background: transparent;
}

@@ -730,7 +795,10 @@
  }
}

/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;
}