图层编辑功能

WX

2023-08-18 415ec3c6e33a74c0259af64d726c58070ac119e8

图层编辑功能

 src/api/api.js

@@ -42,4 +42,7 @@
  return request.get("/perms/selectLayers", { params: params });
}


//资源列表-分页查询并返回记录数
export function res_selectByPageAndCount(params) {
  return request.get("/res/selectByPageAndCount", { params: params });
}

 src/assets/js/Map/config.js

@@ -1,5 +1,5 @@
//是否为生产环境
const isWeb = true;
const isWeb = false;
//是否为生产环境
const webUrl = isWeb ? "/web" : "";
//配置文件地址
@@ -16,7 +16,7 @@
  //Wmtsserver
  moonWmts:
    "http://172.16.2.10:50001/sj_raster/v6/wmts/service/system/10000201/3?ak=mf72ff9295c740ec0f37e61433e8a3ad8d&srs=ESRI:104903",
  proxy: 'http://192.168.20.83:8088/MoonServer',
  proxy: "http://192.168.20.83:8088/MoonServer",
  //地形
  moonTerrain: "http://172.16.2.10:50001/sj_raster/v6/terrain_mesh/10013901/45",
  BASE_URL: "http://192.168.20.83:8088/MoonServer",

 src/assets/js/Map/server.js

@@ -11,37 +11,37 @@
    }
    //判断是否为代理
    if (treeNode.proxy) {
      this.addProxyAddress(treeNode);//有代理
      this.addProxyAddress(treeNode); //有代理
    } else {
      this.addUrlAddress(treeNode);//无代理
      this.addUrlAddress(treeNode); //无代理
    }
  },
  //代理地址
  addProxyAddress(res) {
    //判断数据类型
    switch (res.data) {
      case 1://数字正射影像图
      case 1: //数字正射影像图
        this.setDataType(res);
        break;
      case 2://场景地形数据
      case 2: //场景地形数据
        this.setTerrainData(res);
        break;
      case 3://数字高程模型（晕渲图）
      case 3: //数字高程模型（晕渲图）
        this.setDataType(res);
        break;
      case 4://单波段栅格数据
      case 4: //单波段栅格数据
        this.setDataType(res);
        break;
      case 5://多光谱栅格数据
      case 5: //多光谱栅格数据
        this.setDataType(res);
        break;
      case 6://高光谱栅格数据
      case 6: //高光谱栅格数据
        this.setDataType(res);
        break;
      case 7://矢量图层
      case 7: //矢量图层
        this.setVectorData(res);
        break;
      case 8://三维模型
      case 8: //三维模型
        this.setModelData(res);
        break;
    }
@@ -49,94 +49,86 @@
  //普通地址
  addUrlAddress(res) {
    switch (res.category) {
      case 0://其他

      case 0: //其他
        break;
      case 1://GisServer
      case 1: //GisServer
        this.addProxyAddress(res);
        break;
      case 2://GeoServer
      case 2: //GeoServer
        this.addGeoServerAddress(res);
        break;
      case 3://数简
      case 3: //数简
        this.addProxyAddress(res);
        break;
    }

  },
  //Geoserver服务
  addGeoServerAddress(res) {
    //判断数据类型
    switch (res.data) {
      case 1://数字正射影像图
      case 1: //数字正射影像图
        this.setGeoDataType(res);
        break;
      case 2://场景地形数据
      case 2: //场景地形数据
        this.setTerrainData(res);
        break;
      case 3://数字高程模型（晕渲图）
      case 3: //数字高程模型（晕渲图）
        this.setGeoDataType(res);
        break;
      case 4://单波段栅格数据
      case 4: //单波段栅格数据
        this.setGeoDataType(res);
        break;
      case 5://多光谱栅格数据
      case 5: //多光谱栅格数据
        this.setGeoDataType(res);
        break;
      case 6://高光谱栅格数据
      case 6: //高光谱栅格数据
        this.setGeoDataType(res);
        break;
      case 7://矢量图层
      case 7: //矢量图层
        this.setGeoVectorData(res);
        break;
      case 8://三维模型
      case 8: //三维模型
        this.setModelData(res);
        break;
    }
  },
  setGeoDataType(res) {
    switch (res.type) {
      case 0://URL
      case 0: //URL
        break;
      case 1://TMS
      case 1: //TMS
        this.setAddTmsLayer(res);
        break;
      case 2://WMTS
      case 2: //WMTS
        this.setAddWmtsLayer(res);
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddGeoWmsLayer(res);
        break;
    }
  },
  setGeoVectorData(res) {
    switch (res.type) {
      case 0://URL
      case 0: //URL
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddGeoWmsLayer(res);
        break;
      case 4://WFS

      case 4: //WFS
        break;
    }
  },





  setDataType(res) {
    switch (res.type) {
      case 0://URL
      case 0: //URL
        break;
      case 1://TMS
      case 1: //TMS
        this.setAddTmsLayer(res);
        break;
      case 2://WMTS
      case 2: //WMTS
        this.setAddWmtsLayer(res);
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddWmsLayer(res);
        break;
    }
@@ -144,37 +136,34 @@

  setTerrainData(res) {
    switch (res.type) {
      case 0://URL
        this.setAddTearrinLayer(res)
      case 0: //URL
        this.setAddTearrinLayer(res);
        break;
      case 1://TMS
      case 1: //TMS
        this.setAddTearrinLayer(res);
        break;
    }
  },
  setVectorData(res) {
    switch (res.type) {
      case 0://URL

      case 0: //URL
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddWmsLayer(res);
        break;
      case 4://WFS

      case 4: //WFS
        break;
    }
  },
  setModelData(res) {
    switch (res.type) {
      case 0://Tileset
      case 0: //Tileset
        this.setAddModelLayer(res);
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddModelLayer(res);
        break;
      case 5://WFS

      case 5: //WFS
        break;
    }
  },
@@ -182,16 +171,16 @@
  getLayrUrl(res) {
    var url;
    if (res.proxy) {
      const token = getToken()
      url = config.proxy + res.proxy.replaceAll("{token}", token)
      const token = getToken();
      url = config.proxy + res.proxy.replaceAll("{token}", token);
    } else {
      url = res.url;
    }
    return url
    return url;
  },
  //加载TMS服务
  setAddTmsLayer(res) {
    var url = this.getLayrUrl(res)
    var url = this.getLayrUrl(res);
    let img_layer = earthCtrl.Creator.createUrlTemplateImageryProvider(
      "tms服务",
      {
@@ -206,7 +195,7 @@
  },
  //加载WMTS服务
  setAddWmtsLayer(res) {
    var url = this.getLayrUrl(res)
    var url = this.getLayrUrl(res);
    var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
      sourceType: "wmts",
      url: url,
@@ -248,30 +237,37 @@
  //加载地形服务
  setAddTearrinLayer(res) {
    this.setChangeTearrinLayer();
    var url = this.getLayrUrl(res)
    var url = this.getLayrUrl(res);
    window.terrainLayer = new Cesium.CesiumTerrainProvider({
      url: url
      url: url,
    });
    Viewer.terrainProvider = window.terrainLayer
    this.layerList.push({ id: res.id, type: "dem", });
    Viewer.terrainProvider = window.terrainLayer;
    this.layerList.push({ id: res.id, type: "dem" });
  },
  //加载WMS服务
  setAddWmsLayer(res) {
    var url = this.getLayrUrl(res)
    var img_layer = sgworld.Creator.createImageryProvider('giserver', "wms", {
      url: url,
      layers: '',
      parameters: {
        format: "image/png",
        transparent: true,
      }
    }, "0", undefined, true, "");
    var url = this.getLayrUrl(res);
    var img_layer = sgworld.Creator.createImageryProvider(
      "giserver",
      "wms",
      {
        url: url,
        layers: "",
        parameters: {
          format: "image/png",
          transparent: true,
        },
      },
      "0",
      undefined,
      true,
      ""
    );
    this.layerList.push({
      id: res.id,
      layerData: img_layer,
      type: "wmts",
    });

  },
  //加载模型服务
  setAddModelLayer(res) {
@@ -298,7 +294,6 @@
        dynamicScreenSpaceErrorFactor: 2, // 动态屏幕空间误差的系数
        dynamicScreenSpaceError: true, // 减少离相机较远的屏幕空间错误：false，全屏加载完之后才清晰化房屋
      })

    );
    tileset.readyPromise.then((tileset) => {
      tileset.id = res.id;
@@ -315,7 +310,7 @@
          this.layerList.splice(i, 1);
          break;
      }
    })
    });
  },

  //清除图层

 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

@@ -1,91 +1,88 @@

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

    },
]
  {
    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]
    }
]

  {
    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

    }
]
  {
    name: "GisServer",
    value: 1,
  },
  {
    name: "GeoServer",
    value: 2,
  },
  {
    name: "数简",
    value: 3,
  },
  {
    name: "其他",
    value: 0,
  },
];

 src/views/layer/layerManage.vue

@@ -59,7 +59,7 @@
    </div>
  </div>
  <layer-set
    v-show="layerSetIsshow"
    v-if="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,300 @@
        >
      </div>
      <div class="edit_box_form">
        <el-form :model="form" label-width="120px">
          <el-form-item label="选中图层">
        <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.category"
              :disabled="serviceActive"
            >
              <el-option
                v-for="(e, i) in stretchOptions"
                :label="e.label"
                :value="e.value"
                :key="i"
              />
                v-for="item in category_type"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表名称" v-show="formInline.category == 2">
            <el-input
              v-model="formInline.tab"
              placeholder="请输入表名称"
              :disabled="serviceActive"
            />
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item v-show="formInline.isLayer == 1" label="数据类型">
            <el-select
              style="width: 100%"
              v-model="formInline.data"
              :disabled="serviceActive"
              @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"
              :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="dialogVisible" width="50%">
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <el-form :model="insertData" label-width="120px">
          <el-form-item label="图层类型">
            <el-select style="width: 100%" v-model="insertData.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="insertData.isLayer == 1" label="服务资源">
            <el-button
              size="small"
              class="serviceButton"
              @click="setInsertServiceChange('0')"
              key="0"
              :class="{ serviceActive: !insertServiceActive }"
              >否</el-button
            >
            <el-button
              size="small"
              class="serviceButton"
              @click="setInsertServiceChange('1')"
              key="1"
              :class="{ serviceActive: insertServiceActive }"
              >是</el-button
            >
          </el-form-item>

          <el-form-item label="图层名称">
            <el-input
              v-model="insertData.cnName"
              placeholder="请输入图层名称"
            />
          </el-form-item>
          <!-- 服务类别 -->
          <el-form-item v-show="insertData.isLayer == 1" label="服务类别">
            <el-select
              style="width: 100%"
              v-model="insertData.category"
              :disabled="insertServiceActive"
            >
              <el-option
                v-for="item in category_type"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="表名称" v-show="insertData.category == 2">
            <el-input
              v-model="insertData.tab"
              placeholder="请输入表名称"
              :disabled="insertServiceActive"
            />
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item v-show="insertData.isLayer == 1" label="数据类型">
            <el-select
              style="width: 100%"
              v-model="insertData.data"
              @change="setFromDataTypeClick"
              :disabled="insertServiceActive"
            >
              <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="insertData.isLayer == 1" label="服务类型">
            <el-select
              style="width: 100%"
              v-model="insertData.type"
              :disabled="insertServiceActive"
            >
              <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="insertData.isLayer == 1">
            <el-input
              v-model="insertData.serviceUrl"
              placeholder="请输入服务地址"
              :disabled="insertServiceActive"
            />
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
              <el-button type="primary" size="small" @click="added()"
                >确定</el-button
              >
              <el-button
                class="delbtn"
                type="info"
                size="small"
                @click="submitCancel()"
                >取消</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogService" width="50%" :show-close="false">
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <div
          style="display: flex; justify-content: space-between"
          class="tableForm"
        >
          <div>
            <el-input size="small" v-model="listData.name">
              <template #suffix>
                <el-icon
                  class="el-input__icon el-icon-search"
                  @click="setServiceQuery"
                  ><search
                /></el-icon>
              </template>
            </el-input>
          </div>
          <div class="btnstyle">
            <el-button type="info" size="small" @click="setServiceRest">
              重置
            </el-button>

            <el-button type="primary" size="small" @click="setServiceConfirm">
              确认
            </el-button>
            <el-button
              type="info"
              size="small"
              @click="setServiceCanel"
              class="delbtn"
            >
              取消
            </el-button>
          </div>
        </div>
        <el-table ref="multipleTable" :data="tableData" @select="selectChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="70px"
          />
          <el-table-column align="center" prop="cnName" label="资源名称" />

          <el-table-column
            align="center"
            prop="category"
            label="服务类型"
            :formatter="setResCategory"
          />
          <el-table-column
            align="center"
            prop="type"
            label="数据类型"
            :formatter="setResType"
          />
        </el-table>
        <div class="pagination_box" style="margin-top: 15px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listData.pageIndex"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="listData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listData.count"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

@@ -134,6 +353,10 @@
} from "vue";
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { serve_type, data_type, category_type } from "./js/layerManage.js";
import { removeToken, getToken } from "@/utils/auth";
import { res_selectByPageAndCount } from "@/api/api";
import { Search } from "@element-plus/icons-vue";
const stretchValue = ref("");
const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
//defineProps 来接收组件的传值
@@ -141,7 +364,7 @@
  layerTree: Array,
});
let treeRef = ref();

let multipleTable = ref();
const stretchOptions = [
  {
    value: "目录",
@@ -165,21 +388,299 @@
  },
];

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);
let dialogService = 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);
let listData = ref({
  pageIndex: 1,
  pageSize: 10,
  count: 0,
  name: "",
});
let tableData = ref([]);
let multipleSelection = ref([]);
let insertServiceActive = ref(false);
let addlocation = 0;
let checkedStaste = false;
const insertStart = () => {
  var data = serveType.value[0].value;
  setInsertDataTypeChange(serveType.value[0].value);
  var type = dataType.value[0].value;
  insertData.value = {
    cnName: null,
    serveType: null,
    url: null,
    dataType: null,
    bak: null,
    isShow: "1",
    isProject: "0",
    enName: "",
    isLayer: null,
    category: null,
    service: "0",
    status: "1",
    type: type,
    data: data,
  };
};
// 新增取消
const submitCancel = () => {
  dialogVisible.value = false;
  insertStart();
};

const handleCurrentChange = (val) => {
  listData.value.pageIndex = val;
  getServiceData();
};
const handleSizeChange = (val) => {
  listData.value.pageSize = val;
  getServiceData();
};
const setResType = (row, column) => {
  switch (row.type) {
    case 0:
      return "URL";
    case 1:
      return "TMS";
    case 2:
      return "WMTS";
    case 3:
      return "WMS";
    case 4:
      return "WFS";
    case 5:
      return "Tileset";
    default:
      return "";
  }
};
const setResCategory = (row, column) => {
  switch (row.category) {
    case 0:
      return "其他";
    case 1:
      return "GisServer";
    case 2:
      return "GeoServer";
    case 3:
      return "数简";
    default:
      return "";
  }
};
const selectChange = (selection, row) => {
  multipleSelection.value = row;
  if (selection.length > 1) {
    let del_row = selection.shift();
    multipleTable.value.toggleRowSelection(del_row, false);
  }
};
const setServiceCanel = () => {
  dialogService.value = false;
  multipleSelection.value = [];
  tableData.value = [];
  listData.value = {
    pageIndex: 1,
    pageSize: 10,
    count: 0,
    name: "",
  };
};
const setServiceConfirm = () => {
  if (multipleSelection.value.length <= 0) {
    return ElMessage("未选择资源数据");
  }
  var url, serviceUrl;
  if (multipleSelection.value.status == 1) {
    serviceUrl = multipleSelection.value.url;
    url = multipleSelection.value.url;
  } else if (multipleSelection.value.status == 2) {
    var token = getToken();
    if (
      multipleSelection.value.proxy &&
      multipleSelection.value.proxy.indexOf("{token}") > -1
    ) {
      serviceUrl =
        BASE_URL + multipleSelection.value.proxy.replaceAll("{token}", token);
    } else {
      serviceUrl = multipleSelection.value.url;
    }

    url = multipleSelection.value.proxy;
  }
  if (dialogVisible.value) {
    setInsertDataTypeChange(multipleSelection.value.data);
    insertData.value.cnName = multipleSelection.value.cnName;
    insertData.value.enName = multipleSelection.value.enName;
    insertData.value.type = multipleSelection.value.type;
    insertData.value.resid = multipleSelection.value.id;
    insertData.value.serviceUrl = serviceUrl;
    insertData.value.url = url;
    insertData.value.data = multipleSelection.value.data;
    insertData.value.tab = multipleSelection.value.tab;
    insertData.value.category = multipleSelection.value.category;
    insertServiceActive.value = true;
  } else {
    formInline.value.cnName = multipleSelection.value.cnName;
    formInline.value.enName = multipleSelection.value.enName;
    formInline.value.type = multipleSelection.value.type;
    formInline.value.resid = multipleSelection.value.id;
    formInline.value.serviceUrl = serviceUrl;
    formInline.value.data = multipleSelection.value.data;
    formInline.value.tab = multipleSelection.value.tab;
    formInline.value.url = url;
    serviceActive.value = true;
    // this.formInline.status = '1';
  }
  dialogService.value = false;
};
const setServiceRest = () => {
  listData.value = {
    pageIndex: 1,
    pageSize: 10,
    count: 0,
    name: "",
  };
  getServiceData();
};
const setServiceQuery = () => {
  listData.value.pageIndex = 1;
  listData.value.pageSize = 10;
  listData.value.count = 0;
  getServiceData();
};
const getServiceData = async () => {
  const data = await res_selectByPageAndCount(listData.value);
  tableData.value = data.result;
  listData.value.count = data.count;
  dialogService.value = true;
};

const insertLayerData = (res) => {
  if (!checkedStaste) {
    return ElMessage.warning("请先点击选中相应图层");
  }
  addlocation = res;

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

    formInline.value.status = res.status.toString();
  }
  dialogVisible.value = false;
  // 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 setInsertServiceChange = (res) => {
  if (res == "1") {
    setServiceRest();
  } else {
    insertServiceActive.value = false;
    insertData.value.resid = 0;
  }
};
const setServiceChange = (res) => {
  if (res == "1") {
    setServiceRest();
  } else {
    serviceActive.value = false;
    formInline.value.resid = 0;
  }
};
const handleCheckChange = (
  data: Tree,
  checked: boolean,
@@ -188,55 +689,125 @@
  console.log(data, checked, indeterminate);
};
const onSubmit = () => {
  console.log("submit!");
  // selectedObj.value = formInline.value;
  let node = treeRef.value.getNode(selectedObj.value);
  // 将变动之前的node备份
  let copyNode = { ...node };
  copyNode.previousSibling = { ...node.previousSibling };
  copyNode.nextSibling = { ...node.nextSibling };
  copyNode.parent = { ...node.parent };

  // console.log(1111111111111, copyNode.previousSibling);
  // console.log(2222222222222, copyNode.nextSibling);
  // console.log(3333333333333, copyNode.parent);
  if (Object.keys(copyNode.previousSibling).length !== 0) {
    // 删除原先的node
    treeRef.value.remove(node.data);
    // 复制该node到指定位置(参数：1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)
    treeRef.value.insertAfter(formInline.value, copyNode.previousSibling.data);

    return;
  } else if (Object.keys(copyNode.nextSibling).length !== 0) {
    // 删除原先的node
    treeRef.value.remove(node.data);
    treeRef.value.insertBefore(formInline.value, copyNode.nextSibling.data);

    return;
  } else if (Object.keys(copyNode.parent).length !== 0) {
    // 删除原先的node
    treeRef.value.remove(node.data);
    treeRef.value.append(
      formInline.value,
      treeRef.value.getNode(copyNode.parent.data)
    );

    return;
  }
  ElMessage({
    message: "修改成功",
    type: "success",
  });
  dialogVisible.value = false;
};

// 处理节点点击事件
function handleNodeClick(data: any) {
  console.log(data);

  if (data.id === selectedNodeId.value) {
    // 如果当前节点已经选中，则取消选中
    selectedNodeId.value = null;
    checkedStaste = false;
  } else {
    checkedStaste = true;
    // 否则选中当前节点
    selectedNodeId.value = data.id;
    form.selectName = data.cnName;
    selectedObj.value = data;
    backUpData.value = JSON.stringify(data);
    // this.currentData = JSON.stringify(result)
    formInline.value = JSON.parse(backUpData.value);
    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;
  }
}
//新增
const added = (t) => {
const added = () => {
  var id = "";
  for (var i = 0; i < 7; i++) {
    id += Math.floor(Math.random() * 10);
  }
  var addObj = {
    isLayer: insertData.value.isLayer.toString(),
    id: id,
    cnName: form.name,
    region: form.region,
    layerUrl: form.layerUrl,
    children: [],
    type: 2,
    parentId: null,
    cnName: insertData.value.cnName,
    url: insertData.value.serviceUrl,
    type: insertData.value.type, //数据类型
    proxy: null,
    data: insertData.value.data, //数据类型
    tab: insertData.value.tab, //Geoserver 名称，
    category: insertData.value.category, //服务类别 Geoserver , 1 GisServer 2 GeoServer 3数简
  };
  if (form.region == "目录") {
    addObj.type = 1;
  }

  if (t == "t") {
    // console.log(treeRef.value.getNode(selectedObj.value));
    // addObj.parentId = selectedObj.value.parentId;
  if (addlocation == 1) {
    //新增同级
    treeRef.value.insertAfter(addObj, treeRef.value.getNode(selectedObj.value));
  } else {
    // addObj.parentId = selectedNodeId.value;
  } else if (addlocation == 2) {
    //新增子级
    treeRef.value.append(addObj, treeRef.value.getNode(selectedObj.value));
  }
  dialogVisible.value = false;
  ElMessage({
    message: "添加成功",
    type: "success",
  });
};
//删除
const delLayer = () => {
  console.log(selectedObj.value);
  console.log(treeRef.value.getNode(selectedObj.value));
  if (!selectedObj.value) {
    return ElMessage.warning("请先点击选中相应图层");
  }

  treeRef.value.remove(treeRef.value.getNode(selectedObj.value));
  ElMessage({
    message: "删除成功",
    type: "success",
  });
  // emits("delLayer", selectedNodeId.value);
};
//图层设置弹框
@@ -288,6 +859,7 @@
  }
  emits("addlayer", { type: type, id: selectedObj.value.id });
};
optionsStart();
</script>

<style lang="less" scoped>
@@ -343,7 +915,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 +951,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 +1059,7 @@
    }
  }
}

.editBtn {
  width: 100%;
  display: flex;
@@ -518,4 +1105,63 @@
.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;
}
/deep/ .el-dialog {
  background-color: rgba(7, 8, 14, 1) !important;
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1) !important;
  border: 1px solid #d6e4ff !important;
  .el-dialog__title {
    color: #dcdfe6;
  }
  .el-form-item__label {
    color: #fff;
  }
}
.tableForm {
  margin-bottom: 20px;
}
.el-table {
  background: rgba(7, 8, 14, 1);
}
.el-table /deep/ td {
  background-color: rgba(7, 8, 14, 1);
  color: white;
}

.el-table /deep/ th {
  background-color: rgba(7, 8, 14, 1);
  color: white;
}
/deep/ .el-table__header th,
/deep/ .el-table__header tr,
.el-table /deep/ th.el-table__cell,
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: rgba(7, 8, 14, 1);
}

/deep/ .el-table tr:hover > td {
  background-color: rgba(7, 8, 14, 1) !important;
}
.el-table /deep/ tbody tr:hover {
  background-color: rgba(7, 8, 14, 1) !important;
}
.el-pagination {
  /deep/ .btn-prev,
  /deep/ .btn-next,
  /deep/ .number {
    background-color: transparent;
    color: #fff;
  }
  /deep/ .is-active {
    color: #409eff;
  }
}
</style>