月球大数据地理空间分析展示平台-【前端】-月球2期前端
surprise
2023-11-29 36fbd1e5a40e319e6ac5f43d11c99ba4b66e93a3
src/views/layer/layerManage.vue
@@ -12,20 +12,9 @@
      </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>
@@ -44,31 +33,21 @@
                </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-item v-if="data.shpType == 'temporaryLayer'" @click.native="clickdTemporary(4, data)">下载
                      [ Shp ]</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
@@ -78,18 +57,9 @@
      </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"
    @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>
@@ -104,6 +74,7 @@
  nextTick,
  watch,
} from "vue";
import $ from "jquery";
import layerSet from "./layerSet";
import attributeList from "./attributeList";
import layerDetail from "./layerDetail";
@@ -114,12 +85,14 @@
  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(); // 该方法用于返回store 实例
const stretchValue = ref("");
const emits = defineEmits(["setCloseLayer"]);
@@ -200,11 +173,11 @@
    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);
@@ -219,8 +192,56 @@
      return ElMessage(data.cnName + "图层没有勾选,无法进行定位");
    }
    temporaryTool.locationTemporaryLayer(data);
  } else if (res == 4) {
    var name = null;
    if (res.type == 'label') {
        name = data.text;
    } else {
      name = data.cnName;
    }
    var obj = {
      bak: null,
      fillColor: data.material,
      id: data.sid,
      name: name,
      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、json、jsonp、script、text
    contentType: "application/json", // "application/x-www-form-urlencoded"
    success: (rs) => {
      if (rs && rs.code == 200) {
        var a = document.createElement("a"); // 创建一个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) => {
  layerAttributeIsshow.value = false;
@@ -400,7 +421,16 @@
      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 };
@@ -426,6 +456,7 @@
      estreeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
    }
  }
  estreeRef.value.setCheckedKeys(checkid, true);
};
//删除图层树
const delLayer = (res) => {
@@ -434,7 +465,20 @@
  // });
  // 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)
    }
  }
  estreeRef.value.setCheckedKeys([], true);
  nextTick(() => {
    estreeRef.value.setCheckedKeys(std, true);
  })
}
const setRestLayerData = () => {
  let son = estreeRef.value.getCheckedNodes().reverse();
@@ -481,13 +525,20 @@
    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({
      cnName: "临时图层",
      cnName: "自定义图层",
      level: 1,
      pid: 0,
      isLayer: 0,
@@ -548,7 +599,6 @@
}
const addTemporaryLayer = async (res) => {
  var obj = {
    id: res.id,
    name: res.cnName,
    wkt: JSON.stringify(res),
  };
@@ -558,15 +608,15 @@
  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]);
      }
    }
@@ -619,6 +669,7 @@
  () => store.state.restLayer,
  (nVal, oVal) => {
    if (nVal) {
      setRestLayerData();
    }
  },
@@ -628,6 +679,7 @@
  () => store.state.temporaryLayer,
  (nVal, oVal) => {
    if (nVal) {
      addTemporaryLayer(nVal);
    }
  },
@@ -637,6 +689,7 @@
  () => store.state.editTemporarName,
  (nVal, oVal) => {
    if (nVal) {
      editTemporaryLayerName(nVal);
    }
  },
@@ -646,6 +699,7 @@
  () => store.state.editTemporaryback,
  (nVal, oVal) => {
    if (nVal) {
      editTemporaryBackById(nVal);
    }
  },
@@ -777,7 +831,7 @@
  padding: 8px;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
/deep/ .el-tree-node:focus>.el-tree-node__content {
  background: transparent;
}
@@ -795,10 +849,7 @@
  }
}
/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;
}