From 415ec3c6e33a74c0259af64d726c58070ac119e8 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 18 八月 2023 15:25:25 +0800
Subject: [PATCH] 图层编辑功能
---
src/utils/request.js | 2
src/api/api.js | 5
src/assets/js/Map/server.js | 143 +++---
src/views/layer/js/layerManage.js | 169 ++++----
src/views/layer/layerSet.vue | 820 ++++++++++++++++++++++++++++++++++++----
src/views/layer/layerManage.vue | 2
src/assets/js/Map/config.js | 4
7 files changed, 893 insertions(+), 252 deletions(-)
diff --git a/src/api/api.js b/src/api/api.js
index 35c84ee..174c3ce 100644
--- a/src/api/api.js
+++ b/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 });
+}
diff --git a/src/assets/js/Map/config.js b/src/assets/js/Map/config.js
index 55edf79..24aad91 100644
--- a/src/assets/js/Map/config.js
+++ b/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",
diff --git a/src/assets/js/Map/server.js b/src/assets/js/Map/server.js
index e26f9a9..6d38d9b 100644
--- a/src/assets/js/Map/server.js
+++ b/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, // 鍑忓皯绂荤浉鏈鸿緝杩滅殑灞忓箷绌洪棿閿欒锛歠alse锛屽叏灞忓姞杞藉畬涔嬪悗鎵嶆竻鏅板寲鎴垮眿
})
-
);
tileset.readyPromise.then((tileset) => {
tileset.id = res.id;
@@ -315,7 +310,7 @@
this.layerList.splice(i, 1);
break;
}
- })
+ });
},
//娓呴櫎鍥惧眰
diff --git a/src/utils/request.js b/src/utils/request.js
index 989b44e..6c597b8 100644
--- a/src/utils/request.js
+++ b/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" });
}
diff --git a/src/views/layer/js/layerManage.js b/src/views/layer/js/layerManage.js
index de6040e..3893462 100644
--- a/src/views/layer/js/layerManage.js
+++ b/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
-
- }
-]
\ No newline at end of file
+ {
+ name: "GisServer",
+ value: 1,
+ },
+ {
+ name: "GeoServer",
+ value: 2,
+ },
+ {
+ name: "鏁扮畝",
+ value: 3,
+ },
+ {
+ name: "鍏朵粬",
+ value: 0,
+ },
+];
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index fda3210..58901e8 100644
--- a/src/views/layer/layerManage.vue
+++ b/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"
diff --git a/src/views/layer/layerSet.vue b/src/views/layer/layerSet.vue
index 3908cd2..5155785 100644
--- a/src/views/layer/layerSet.vue
+++ b/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) {
+ // 鍒犻櫎鍘熷厛鐨刵ode
+ treeRef.value.remove(node.data);
+ // 澶嶅埗璇ode鍒版寚瀹氫綅缃�(鍙傛暟锛�1. 瑕佸鍔犵殑鑺傜偣鐨� data 2. 瑕佸鍔犵殑鑺傜偣鐨勫悗涓�涓妭鐐圭殑 data銆乲ey 鎴栬�� node)
+ treeRef.value.insertAfter(formInline.value, copyNode.previousSibling.data);
+
+ return;
+ } else if (Object.keys(copyNode.nextSibling).length !== 0) {
+ // 鍒犻櫎鍘熷厛鐨刵ode
+ treeRef.value.remove(node.data);
+ treeRef.value.insertBefore(formInline.value, copyNode.nextSibling.data);
+
+ return;
+ } else if (Object.keys(copyNode.parent).length !== 0) {
+ // 鍒犻櫎鍘熷厛鐨刵ode
+ 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>
--
Gitblit v1.9.3