图层编辑功能调整

WX

2023-08-16 42355ad48b7e33bbd288314f14191c4f2be44ae7

图层编辑功能调整

 src/utils/request.js

@@ -48,7 +48,7 @@
    if (response.data.code !== 200) {
      // ElMessage.error(response.data.msg);
    }
    if (response.data.code !== 200 && response.data.result == "用户未登录") {
    if (response.data.code !== 200 && response.data.msg == "用户未登录") {
      ElMessage.error("登录过期，请重新登录");
      router.push({ path: "/login" });
    }

 src/views/layer/js/layerManage.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,91 @@

export const serve_type = [
    {
        name: 'URL',
        value: 0

    }, {
        name: 'TMS',
        value: 1

    }, {
        name: 'WMTS',
        value: 2

    }, {
        name: 'WMS',
        value: 3

    }, {
        name: 'WFS',
        value: 4

    }, {
        name: 'Tileset',
        value: 5

    },
]

export const data_type = [
    {
        name: '数字正射影像图',
        value: 1,
        children: [0, 1, 2, 3]

    },
    {
        name: '场景地形数据',
        value: 2,
        children: [0, 1]

    }, {
        name: '数字高程模型（晕渲图）',
        value: 3,
        children: [0, 1, 2, 3]

    }, {
        name: '单波段栅格数据',
        value: 4,
        children: [0, 1, 2, 3]

    }, {
        name: '多光谱栅格数据',
        value: 5,
        children: [0, 1, 2, 3]
    }, {
        name: '高光谱栅格数据',
        value: 6,
        children: [0, 1, 2, 3]
    }, {
        name: '矢量图层',
        value: 7,
        children: [0, 3, 4]
    }, {
        name: '三维模型',
        value: 8,
        children: [0, 5]
    }
]


export const category_type = [

    {
        name: 'GisServer',
        value: 1

    }, {
        name: 'GeoServer',
        value: 2

    }, {
        name: '数简',
        value: 3

    }, {
        name: '其他',
        value: 0

    }
]

 src/views/layer/layerManage.vue

@@ -1,22 +1,13 @@
<template>
  <div
    v-drag
    class="layerBox"
  >
  <div v-drag class="layerBox">
    <div class="layerTitle">
      <div class="tileLeft">
        <div
          @click="setCloseLayer"
          class="titleImg"
        >
        <div @click="setCloseLayer" class="titleImg">
          <ArrowLeft />
        </div>
        <div class="titleLable">图层管理</div>
      </div>
      <div
        class="titleImg set"
        @click="layerSetBox"
      >
      <div class="titleImg set" @click="layerSetBox">
        <Setting />
      </div>
    </div>
@@ -43,10 +34,7 @@
                Delete
              </a>
            </span> -->
            <span
              class="button"
              v-if="data.isLayer == 1"
            >
            <span class="button" v-if="data.isLayer == 1">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <el-icon class="el-icon--right">
@@ -55,8 +43,12 @@
                </span>
                <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 @click.native="clickdropdown(1, data)"
                      >详细</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="clickdropdown(2, data)"
                      >属性</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
@@ -67,7 +59,7 @@
    </div>
  </div>
  <layer-set
    v-if="layerSetIsshow"
    v-show="layerSetIsshow"
    @SETstate="SETstate"
    :layerTree="treeData"
    @addlayer="addlayer"

 src/views/layer/layerSet.vue

@@ -20,51 +20,14 @@
          @node-click="handleNodeClick"
          ref="treeRef"
        />

        <!-- <div class="contentBox" v-for="(item, i) in menuOption" :key="i">
          <div
            class="contentTile"
            @click.stop="selectList(item)"
            :class="{ highlight: item.id == selectedNodeId }"
          >
            <div class="contentLeft">
              <div class="contentImg"></div>
              <div class="contentLabel">{{ item.name }}</div>
            </div>
            <div class="contentRight">
              <div>
                <div
                  @click="handlIsShow(item.name)"
                  class="contentUP"
                  :class="{ accordion: item.isShow }"
                ></div>
              </div>
            </div>
          </div>

          <div class="content" v-show="item.isShow">
            <div
              class="layer_box"
              v-for="(v, k) in item.children"
              :key="k"
              @click.stop="selectList(v)"
              :class="{ highlight: v.id == selectedNodeId }"
            >
              <div class="contentLeft">
                <div class="contentImg"></div>
                <div class="contentLabel">{{ v.name }}</div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="edit_box">
      <div class="edit_box_btn btnstyle">
        <el-button type="primary" :icon="Plus" @click="added('t')"
        <el-button type="primary" :icon="Plus" @click="insertLayerData(1)"
          >新增同级</el-button
        >
        <el-button type="primary" :icon="Plus" @click="added('z')"
        <el-button type="primary" :icon="Plus" @click="insertLayerData(2)"
          >新增子级</el-button
        >
        <el-button
@@ -82,44 +45,168 @@
        >
      </div>
      <div class="edit_box_form">
        <el-form :model="form" label-width="120px">
        <el-form :model="formInline" label-width="120px">
          <el-form-item label="选中图层">
            <el-select style="width: 100%" v-model="formInline.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            </el-select>
          </el-form-item>
          <!-- æœåŠ¡èµ„源-->
          <el-form-item v-show="formInline.isLayer == 1" label="服务资源">
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('0')"
              key="0"
              :class="{ serviceActive: !serviceActive }"
              >否</el-button
            >
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('1')"
              key="1"
              :class="{ serviceActive: serviceActive }"
              >是</el-button
            >
          </el-form-item>

          <el-form-item label="图层名称">
            <el-input
              v-model="form.selectName"
              disabled
              placeholder="点击图层树选择"
              v-model="formInline.cnName"
              placeholder="请输入图层名称"
            />
          </el-form-item>
          <el-form-item label="图层名称">
            <el-input v-model="form.name" placeholder="请输入图层名称" />
          </el-form-item>
          <el-form-item label="图层类型">
          <!-- æ•°æ®ç±»åž‹ -->
          <el-form-item v-show="formInline.isLayer == 1" label="数据类型">
            <el-select
              style="width: 100%"
              v-model="form.region"
              placeholder="请选择图层类型"
              v-model="formInline.data"
              :disabled="serviceActive"
              @change="setFromDataTypeClick"
            >
              <el-option
                v-for="(e, i) in stretchOptions"
                :label="e.label"
                :value="e.value"
                :key="i"
              />
                v-for="item in serveType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- æ•°æ®ç±»åž‹ -->
          <el-form-item v-show="formInline.isLayer == 1" label="服务类型">
            <el-select
              style="width: 100%"
              v-model="formInline.type"
              :disabled="serviceActive"
            >
              <el-option
                v-for="item in dataType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务地址">
            <el-input v-model="form.layerUrl" placeholder="请输入服务地址" />
          <el-form-item label="服务地址" v-show="formInline.isLayer == 1">
            <el-input
              v-model="formInline.serviceUrl"
              placeholder="请输入服务地址"
              :disabled="serviceActive"
            />
          </el-form-item>
          <el-form-item>
            <!-- <div class="btnstyle editBtn">
            <div class="btnstyle editBtn">
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button class="delbtn">取消</el-button>
            </div> -->
              <el-button class="delbtn" @click="updateRest">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog title="新增" v-model:visible="dialogVisible" width="50%">
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <el-form :model="formInline" label-width="120px">
          <el-form-item label="选中图层">
            <el-select style="width: 100%" v-model="formInline.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            </el-select>
          </el-form-item>
          <!-- æœåŠ¡èµ„源-->
          <el-form-item v-show="formInline.isLayer == 1" label="服务资源">
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('0')"
              key="0"
              :class="{ serviceActive: !serviceActive }"
              >否</el-button
            >
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('1')"
              key="1"
              :class="{ serviceActive: serviceActive }"
              >是</el-button
            >
          </el-form-item>

          <el-form-item label="图层名称">
            <el-input
              v-model="formInline.cnName"
              placeholder="请输入图层名称"
            />
          </el-form-item>
          <!-- æ•°æ®ç±»åž‹ -->
          <el-form-item v-show="formInline.isLayer == 1" label="数据类型">
            <el-select
              style="width: 100%"
              v-model="formInline.data"
              @change="setFromDataTypeClick"
            >
              <el-option
                v-for="item in serveType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- æ•°æ®ç±»åž‹ -->
          <el-form-item v-show="formInline.isLayer == 1" label="服务类型">
            <el-select style="width: 100%" v-model="formInline.type">
              <el-option
                v-for="item in dataType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务地址" v-show="formInline.isLayer == 1">
            <el-input
              v-model="formInline.serviceUrl"
              placeholder="请输入服务地址"
            />
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button class="delbtn" @click="updateRest">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

@@ -134,6 +221,8 @@
} from "vue";
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { serve_type, data_type } from "./js/layerManage.js";
import { removeToken, getToken } from "@/utils/auth";
const stretchValue = ref("");
const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
//defineProps æ¥æŽ¥æ”¶ç»„件的传值
@@ -165,21 +254,134 @@
  },
];

const form = reactive({
  name: "",
  region: "",
  selectName: "",
  layerUrl: "",
  children: [],
const formInline = ref({
  cnName: null,
  type: null,
  serveType: null,
  url: null,
  dataType: null,
  bak: null,
  isShow: "1",
  isProject: "0",
  enName: "",
  isLayer: null,
  category: null,
  status: null,
  service: "0",
  serviceUrl: null,
});
const insertData = ref({
  cnName: null,
  type: null,
  serveType: null,
  url: null,
  dataType: null,
  bak: null,
  isShow: "1",
  isProject: "0",
  enName: "",
  isLayer: null,
  category: null,
  status: null,
  service: "0",
  serviceUrl: null,
});
const props = {
  label: "cnName",
  children: "children",
};
let dialogVisible = ref(false);
// å½“前选中的节点 id
const selectedNodeId = ref(null as any); //做类型断言处理
const selectedObj = ref(null);
let menuOption = ref([]);
let serviceActive = ref(false);
let dataType = ref(null);
let serveType = ref(null);
let backUpData = ref(null);
const insertLayerData = (res) => {
  // if (res == 1) {
  //   //新增同级
  //   id = this.formInline.pid;
  //   let pchildNodes = this.$refs.tree.getNode(this.newNode.id).parent
  //     .childNodes;
  //   orderNum = this.getMaxOrderNum(pchildNodes);
  //   lever = this.formInline.level;
  // } else if (res == 2) {
  //   //新增子级
  //   id = this.formInline.id;
  //   let pchildNodes = this.$refs.tree.getNode(this.newNode.id).childNodes;
  //   orderNum = this.getMaxOrderNum(pchildNodes);
  //   lever = this.formInline.level + 1;
  // }
  // this.insertData.pid = id;
  // this.insertData.level = lever;
  // this.insertData.orderNum = orderNum;

  dialogVisible.value = true;
};
//修改重置
const updateRest = () => {
  var res = JSON.parse(backUpData.value);
  formInline.value = res;
  formInline.value.isLayer = res.isLayer.toString();

  formInline.value.status = res.status.toString();
  // this.formInline.isProject = res.isProject.toString();
};
//下拉菜单初始化
const optionsStart = () => {
  var std = [];
  var ste = [];
  for (var i in serve_type) {
    ste.push({
      value: serve_type[i].value,
      label: serve_type[i].name,
    });
  }
  serveType.value = std;
  for (var i in data_type) {
    std.push({
      value: data_type[i].value,
      label: data_type[i].name,
      children: data_type[i].children,
    });
  }
  dataType.value = ste;
};
const setInsertDataTypeChange = (res) => {
  var filter = serveType.value.filter((rs) => {
    if (rs.value == res) {
      return rs;
    }
  });
  if (filter.length <= 0) return;
  var std = [];
  var data = filter[0].children;
  for (var i in data) {
    for (var j in serve_type) {
      if (serve_type[j].value == data[i]) {
        std.push({
          value: serve_type[j].value,
          label: serve_type[j].name,
        });
      }
    }
  }
  dataType.value = std;
};
const setFromDataTypeClick = (res) => {
  setInsertDataTypeChange(res);
  formInline.value.type = dataType.value[0].value;
};
const setServiceChange = (res) => {
  if (res == "1") {
    // this.setServiceRest()
  } else {
    serviceActive.value = false;
    formInline.value.resid = 0;
  }
};
const handleCheckChange = (
  data: Tree,
  checked: boolean,
@@ -194,14 +396,35 @@
// å¤„理节点点击事件
function handleNodeClick(data: any) {
  console.log(data);
  console.log(formInline.value);
  if (data.id === selectedNodeId.value) {
    // å¦‚果当前节点已经选中，则取消选中
    selectedNodeId.value = null;
  } else {
    // å¦åˆ™é€‰ä¸­å½“前节点
    selectedNodeId.value = data.id;
    form.selectName = data.cnName;
    selectedObj.value = data;
    backUpData.value = JSON.stringify(data);
    // this.currentData = JSON.stringify(result)
    formInline.value = data;
    formInline.value.isLayer = data.isLayer.toString();
    if (data.resid && data.resid > 0) {
      serviceActive.value = true;
    } else {
      serviceActive.value = false;
    }
    var url;
    if (!serviceActive.value) {
      url = data.url;
    } else if (serviceActive.value) {
      var token = getToken();
      if (data.url.indexOf("{token}") > -1) {
        url = BASE_URL + data.url.replaceAll("{token}", token);
      } else {
        url = data.url;
      }
    }
    formInline.value.serviceUrl = url;
  }
}
//新增
@@ -212,14 +435,17 @@
  }
  var addObj = {
    id: id,
    cnName: form.name,
    region: form.region,
    layerUrl: form.layerUrl,
    cnName: formInline.value.name,
    region: formInline.value.region,
    url: formInline.value.layerUrl,
    children: [],
    type: 2,
    parentId: null,
    type: 2, //数据类型
    proxy: null,
    data: 0,
    tab: "", //Geoserver åç§°ï¼Œ
    category: "", //服务类别 Geoserver ,
  };
  if (form.region == "目录") {
  if (formInline.value.region == "目录") {
    addObj.type = 1;
  }

@@ -288,6 +514,7 @@
  }
  emits("addlayer", { type: type, id: selectedObj.value.id });
};
optionsStart();
</script>

<style lang="less" scoped>
@@ -343,7 +570,8 @@
  width: 359px;
  height: 615px;
  background: rgba(7, 8, 14, 0.8);

  // padding-bottom: 60px;
  box-sizing: border-box;
  .layerTitle {
    width: calc(100% - 27px);
    height: 42px;
@@ -378,6 +606,19 @@
  }
  .layerContent {
    padding: 0 8px;
    height: 92%;
    overflow: auto;
  }
  .layerContent::-webkit-scrollbar {
    width: 8px;
  }
  .layerContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }
  .layerContent::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }
  .contentBox {
    margin-top: 3px;
@@ -473,6 +714,7 @@
    }
  }
}

.editBtn {
  width: 100%;
  display: flex;
@@ -518,4 +760,13 @@
.highlight {
  background: rgba(104, 156, 255, 0.5) !important;
}
.serviceButton {
  background: transparent !important;
  color: #dcdfe6;
}
.serviceActive {
  background: transparent !important;
  color: #46a6ff;
  border: 1px solid #46a6ff;
}
</style>