From 9f9ae3e0253f2d657b6b337d62d269394d04ee09 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期五, 17 十一月 2023 14:29:08 +0800
Subject: [PATCH] 版本更新
---
src/views/layer/layerManage.vue | 962 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 747 insertions(+), 215 deletions(-)
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index 0474750..dfbe13c 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -2,7 +2,7 @@
<div v-drag class="layerBox">
<div class="layerTitle">
<div class="tileLeft">
- <div class="titleImg">
+ <div @click="setCloseLayer" class="titleImg">
<ArrowLeft />
</div>
<div class="titleLable">鍥惧眰绠＄悊</div>
@@ -12,67 +12,55 @@
</div>
</div>
<div class="layerContent">
- <div class="contentBox" v-for="(item, i) in menuOption" :key="i">
- <div class="contentTile">
- <div class="contentLeft">
- <div class="contentImg"></div>
- <div class="contentLabel">{{ item.name }}</div>
- </div>
- <div class="contentRight">
- <div class="contentCheck">
- <el-checkbox
- @change="handlCheckAllChange(item)"
- v-model="item.checkedAll"
- >鍏ㄩ儴閫変腑</el-checkbox
- >
- </div>
- <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">
- <div class="check_box">
- <el-checkbox
- @change="handlCheckAllChange(item)"
- v-model="v.layerState"
- >{{ v.layerName }}</el-checkbox
- >
- <img src="../../assets/img/layer.png" alt="" />
- </div>
- <div class="slider-demo-block">
- <div class="demonstration">閫忔槑搴�</div>
- <el-slider v-model="transparence" />
- <div class="demonstration">{{ transparence }}%</div>
- </div>
- <div class="selectBox">
- <div class="selectTile demonstration">鎷変几鏂瑰紡</div>
- <el-select
- v-model="stretchValue"
- class="m-2"
- placeholder="Select"
- size="small"
- >
- <el-option
- v-for="item in stretchOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </div>
- </div>
- </div>
- </div>
+ <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>
+ <!-- <span>
+ <a @click="append(data)"> Append </a>
+ <a style="margin-left: 8px" @click="remove(node, data)">
+ Delete
+ </a>
+ </span>-->
+ <span class="button" v-if="!data.isTemporaryLayer">
+ <el-dropdown trigger="click">
+ <span class="el-dropdown-link">
+ <el-icon class="el-icon--right">
+ <MoreFilled />
+ </el-icon>
+ </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">鍒犻櫎</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)">涓嬭浇鎴恠hp</el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </span>
+ </span>
+ </template>
+ </el-tree>
</div>
</div>
- <layer-set v-show="layerSetIsshow" @SETstate="SETstate"></layer-set>
+ <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>
<script lang="ts" setup>
@@ -83,63 +71,48 @@
reactive,
defineProps,
defineEmits,
+ nextTick,
+ watch,
} from "vue";
import layerSet from "./layerSet";
+import attributeList from "./attributeList";
+import layerDetail from "./layerDetail";
+import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
+import {
+ perms_selectLayers,
+ mark_selectByPageAndCount,
+ mark_insert,
+ mark_deletes,
+ mark_update,
+} from "@/api/api";
+import server from "@/assets/js/Map/server";
+import { ElMessage } from "element-plus";
+import temporaryTool from "@/assets/js/Map/temporaryTools";
+import json from "@/assets/js/colorValue";
+import menuTool from "@/assets/js/Map/menuTool";
+const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const stretchValue = ref("");
-
-const stretchOptions = [
- {
- value: "Option1",
- label: "Option1",
- },
- {
- value: "Option2",
- label: "Option2",
- },
- {
- value: "Option3",
- label: "Option3",
- },
- {
- value: "Option4",
- label: "Option4",
- },
- {
- value: "Option5",
- label: "Option5",
- },
-];
+const emits = defineEmits(["setCloseLayer"]);
+let estreeRef = ref();
+const setLayer = ref();
const transparence = ref(0);
-let menuOption = reactive([
- {
- name: "娴嬭瘯",
- isShow: false,
- checkedAll: false,
- children: [
- {
- layerState: false,
- layerName: "鍥惧眰鍚嶇О",
- layerUrl: "",
- },
- ],
- },
- {
- name: "娴嬭瘯1",
- isShow: false,
- checkedAll: true,
- layerState: false,
- },
-]);
+var treeData = ref([]);
+var layerListData = ref([]);
+let menuOption = reactive([]);
+const defaultExpanded = ref([]);
const layerSetIsshow = ref(false);
-
-const handlCheckAllChange = (res) => {};
-const handlIsShow = (res: string) => {
- menuOption.forEach((e) => {
- if (e.name == res) {
- e.isShow = !e.isShow;
- }
- });
+const layerAttributeIsshow = ref(false);
+const layerDetailIsshow = ref(false);
+const props = {
+ label: "cnName",
+ children: "children",
};
+const layerObjData = ref(null);
+// 褰撳墠閫変腑鐨勮妭鐐� id
+const selectedNodeId = ref(null as any); //鍋氱被鍨嬫柇瑷�澶勭悊
+
+//榛樿閫変腑id
+const DefaultId = ref([]);
//鍥惧眰璁剧疆寮规
const layerSetBox = () => {
layerSetIsshow.value = !layerSetIsshow.value;
@@ -148,6 +121,545 @@
const SETstate = (res) => {
layerSetIsshow.value = res;
};
+const setCloseLayer = () => {
+ store.state.setLayerManager = false;
+ emits("setCloseLayer", false);
+};
+const temporary = ref(new Date().getTime());
+const clickdTemporary = async (res, data) => {
+ if (res == 1) {
+ let son = estreeRef.value.getCheckedKeys();
+ if (son.indexOf(data.id) < 0) {
+ return ElMessage(data.cnName + "鍥惧眰娌℃湁鍕鹃��,鏃犳硶杩涜缂栬緫");
+ }
+ if (store.state.editTemporaryId) {
+ var id = store.state.editTemporaryId;
+ var edit_id = sgworld.Creator.SimpleGraphic.SimpleGraphicObj.indexOf(id);
+ if (edit_id > -1) {
+ sgworld.Creator.SimpleGraphic.SimpleGraphicObj.splice(edit_id, 1);
+ store.state.editTemporaryId = null;
+ }
+ }
+ store.state.editTemporaryId = data.id;
+ sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id);
+ sgworld.Creator.SimpleGraphic.edit(true, {
+ editProp: false,
+ tipText: {
+ ActiveText: "鐐瑰嚮婵�娲荤紪杈�",
+ },
+ enableDelete: false,
+ });
+ } else if (res == 2) {
+ var layerId = [];
+ layerId.push(data.sid);
+ const data1 = await mark_deletes({ ids: layerId.toString() });
+ if (data1.code != 200) return;
+ temporaryTool.removeTemporaryLayer(data);
+
+ // estreeRef.value.setCheckedKeys(checkedKeys, true);
+ // for (var i in keys) {
+ // checkedKeys.push(keys[i]);
+ // }
+ var keys = estreeRef.value.getCheckedKeys();
+ var val = treeData.value[0].children;
+ for (var i = 0; i < val.length; i++) {
+ if (val[i].id == data.id) {
+ val.splice(i, 1);
+ }
+ }
+
+ var std = [];
+ for (var i in keys) {
+ 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);
+ console.log(data.id);
+ nextTick(() => {
+ console.log(std);
+ estreeRef.value.setCheckedKeys(std, true);
+ });
+ } else if (res == 3) {
+ let son = estreeRef.value.getCheckedKeys();
+ if (son.indexOf(data.id) < 0) {
+ return ElMessage(data.cnName + "鍥惧眰娌℃湁鍕鹃��,鏃犳硶杩涜瀹氫綅");
+ }
+ temporaryTool.locationTemporaryLayer(data);
+ } else if (res == 4) {
+debugger
+ }
+};
+//閫夋嫨鍥惧眰
+const handleCheckChange = (data, checked) => {
+ layerAttributeIsshow.value = false;
+ layerDetailIsshow.value = false;
+ // let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
+
+ let son = estreeRef.value.getCheckedNodes();
+ store.commit("SET_CHECKLAYER", son);
+ temporaryTool.removeTemporaryLayerAll();
+ server.delLayerAll();
+ var alphaGroup = [];
+ var idGroup = [];
+ for (var i in server.layerList) {
+ const layerData = server.layerList[i];
+ if (layerData.layerData && layerData.id != server.wmsLayerId) {
+ alphaGroup.push(layerData.layerData.alpha);
+ idGroup.push(layerData.layerData.id);
+ }
+ }
+ server.delLayerAll();
+
+ var setGeoWms = [];
+ var geoUrl = null;
+ var layerTreeDate = estreeRef.value.getCheckedNodes().reverse();
+ for (var i in layerTreeDate) {
+ var layerArr = layerTreeDate[i];
+ if (layerArr.shpType && layerArr.shpType == "temporaryLayer") {
+ temporaryTool.addTemporaryTool(layerArr);
+ } else {
+ if (layerArr.isLayer == 1) {
+ if (layerArr.category == 2 && layerArr.type == 3) {
+ if (layerArr.tab != "moon:geo_mappable_unit") {
+ var id = layerArr.id;
+ if (idGroup.indexOf(id) > -1) {
+ var alpha = alphaGroup[idGroup.indexOf(id)];
+ if (alpha == 1) {
+ setGeoWms.push(layerArr.tab);
+ geoUrl = layerArr.url;
+ } else {
+ server.setAddGeoWmsLayer(layerArr, alpha);
+ }
+ } else {
+ setGeoWms.push(layerArr.tab);
+ geoUrl = layerArr.url;
+ }
+ }
+ } else {
+ server.addTreeData(layerArr);
+ }
+ }
+ }
+ }
+ if (setGeoWms.length > 0) {
+ server.addGeoServerMmsLayers(setGeoWms, geoUrl);
+ }
+
+ menuTool.setImageLayerChange();
+};
+const setVisiable = (treeNode, checked) => {
+ if (checked !== undefined) {
+ treeNode.checked = checked;
+ } else {
+ treeNode.checked = !treeNode.checked;
+ }
+
+ if (treeNode.children) {
+ treeNode.children.forEach((item) => {
+ setVisiable(item, treeNode.checked);
+ });
+ return;
+ }
+
+ if (!treeNode.isAdd) {
+ // server.addTreeData(treeNode);
+ return;
+ }
+};
+const defaultLayer = (val) => {
+ val.forEach((e) => {
+ DefaultId.value.forEach((v) => {
+ if (e.id == v) {
+ setVisiable(e, true);
+ // return;
+ }
+ });
+ });
+};
+const clickdropdown = (res, e) => {
+ layerAttributeIsshow.value = false;
+ layerDetailIsshow.value = false;
+ nextTick(() => {
+ layerObjData.value = e;
+ store.state.spatialTitle = e.cnName;
+ if (res == 2) {
+ layerAttributeIsshow.value = true;
+ store.state.tab = e;
+ } else if (res == 3) {
+ let son = estreeRef.value.getCheckedKeys();
+ var layerId = getCheckedLayerPID(e, son);
+ if (layerId.length <= 0) {
+ return ElMessage.error("璇峰厛鍕鹃�夊浘灞�");
+ }
+ layerDetailIsshow.value = true;
+ store.state.layerGroups = {
+ id: e.id,
+ layerIds: layerId,
+ };
+ } else {
+ var val = estreeRef.value!.getCheckedKeys(false);
+ if (val.indexOf(e.id) > -1) {
+ layerDetailIsshow.value = true;
+ } else {
+ return ElMessage.error("璇峰厛鍕鹃�夊浘灞�");
+ }
+ }
+ });
+};
+const getCheckedLayerPID = (res, result) => {
+ var temp = [];
+ var ids = result;
+
+ let forFn = (data) => {
+ if (data.children) {
+ data.children.forEach((item) => {
+ if (item.children) {
+ forFn(item);
+ } else {
+ if (ids.indexOf(item.id) > -1) {
+ temp.push(item);
+ }
+ }
+ });
+ } else {
+ if (ids.indexOf(data.id) > -1) {
+ temp.push(data);
+ }
+ }
+ };
+
+ forFn(res);
+ return temp;
+};
+
+const getCheckedLayerChildren = (res) => {
+ var temp2 = [];
+ let forFn = (data) => {
+ if (data.children) {
+ data.children.forEach((item) => {
+ if (item.children) {
+ forFn(item);
+ } else {
+ temp2.push(item);
+ }
+ });
+ } else {
+ temp2.push(data);
+ }
+ };
+ forFn(res);
+ return temp2;
+};
+
+const setSpatialClose = (res) => {
+ layerAttributeIsshow.value = res;
+};
+const detailClose = (res) => {
+ if (res.type == 0) {
+ estreeRef.value.getNode(store.state.layerGroups.id).data.alpha = res.val;
+ }
+ layerDetailIsshow.value = res.flag;
+};
+//缂栬緫鍥惧眰鏍�
+const addlayer = (res) => {
+ let node;
+ layerListData.value.forEach((e) => {
+ if (e.id == res.id) {
+ 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 };
+ if (res.type === 1) {
+ // 涓婄Щ
+ if (node.previousSibling) {
+ // 鍒犻櫎鍘熷厛鐨刵ode
+ estreeRef.value.remove(node.data);
+ // 鎷垮埌copy鐨刵ode
+ // nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode"));
+ // 澶嶅埗璇ode鍒版寚瀹氫綅缃�(鍙傛暟锛�1. 瑕佸鍔犵殑鑺傜偣鐨� data 2. 瑕佸鍔犵殑鑺傜偣鐨勫悗涓�涓妭鐐圭殑 data銆乲ey 鎴栬�� node)
+
+ estreeRef.value.insertBefore(
+ copyNode.data,
+ copyNode.previousSibling.data
+ );
+ // window.sessionStorage.removeItem("menuNode");
+ }
+ } else {
+ // 涓嬬Щ
+ if (node.nextSibling) {
+ estreeRef.value.remove(node.data);
+ estreeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
+ }
+ }
+ estreeRef.value.setCheckedKeys(checkid, true);
+};
+//鍒犻櫎鍥惧眰鏍�
+const delLayer = (res) => {
+ // menuOption = menuOption.filter((item) => {
+ // return item.id != res;
+ // });
+ // 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();
+
+ var setGeoWms = [];
+ var geoUrl = null;
+ for (var i in son) {
+ var layerArr = son[i];
+ console.log(layerArr.isLayer);
+ layerArr.checked = true;
+ if (layerArr.category == 2 && layerArr.type == 3) {
+ if (layerArr.tab != "moon:geo_mappable_unit") {
+ setGeoWms.push(layerArr.tab);
+ geoUrl = layerArr.url;
+ // server.addTreeData(layerArr);
+ }
+ } else {
+ server.addTreeData(layerArr);
+ }
+ }
+ if (setGeoWms.length > 0) {
+ server.addGeoServerMmsLayers(setGeoWms, geoUrl);
+ }
+ store.commit("SET_CHECKLAYER", son);
+};
+const getLayer = async () => {
+ store.state.restLayer = false;
+ // server.delLayerAll();
+ const dt = await perms_selectLayers();
+ if (dt.code == 200) {
+ var va_data = dt.result.filter((res) => {
+ if (res.isLayer == 0) {
+ res.alpha = 1;
+ }
+ return res;
+ });
+ treeData.value = setTreeData(va_data).sort(function (a, b) {
+ return a.orderNum - b.orderNum;
+ });
+ const comperLayer = await mark_selectByPageAndCount({
+ pageIndex: 1,
+ pageSize: 100000,
+ name: null,
+ });
+ var children = [];
+ if (comperLayer.code == 200 && comperLayer.result) {
+ for (var i in comperLayer.result) {
+ 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: "鑷畾涔夊浘灞�",
+ level: 1,
+ pid: 0,
+ isLayer: 0,
+ type: 6,
+ id: temporary.value,
+ isTemporaryLayer: true,
+ children: children,
+ });
+
+ var std = [];
+ var terrainId = null;
+ var adLayer = [];
+ dt.result.filter((res) => {
+ if (res.isLayer == 1 && res.isShow == 1) {
+ if (res.type == 1 && res.data == 2) {
+ if (!terrainId) {
+ terrainId = res.id;
+ std.push(res.id);
+ adLayer.push(res);
+ }
+ } else {
+ std.push(res.id);
+ adLayer.push(res);
+ }
+ }
+ });
+ DefaultId.value = std;
+
+ //娣诲姞榛樿閫変腑鍥惧眰
+ layerListData.value = dt.result;
+ defaultLayer(dt.result);
+
+ nextTick(() => {
+ let son = estreeRef.value.getCheckedNodes();
+ setRestLayerData();
+ store.commit("SET_CHECKLAYER", son);
+ });
+ }
+};
+
+//鏋勯�犳爲
+function setTreeData(source) {
+ let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+ return cloneData.filter((father) => {
+ // 寰幆鎵�鏈夐」
+ let branchArr = cloneData.filter((child) => father.id == child.pid);
+ if (branchArr.length > 0) {
+ branchArr.sort(function (a, b) {
+ return a.orderNum - b.orderNum;
+ });
+ }
+
+ branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭ｄ箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 a.c.d 涔熸槸=2锛�
+ // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
+ return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+ });
+}
+const addTemporaryLayer = async (res) => {
+ var obj = {
+ name: res.cnName,
+ wkt: JSON.stringify(res),
+ };
+ var checkedKeys = estreeRef.value.getCheckedKeys();
+ const data = await mark_insert(obj);
+ if (data.code != 200 || !data.result) return;
+ 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') {
+ std.push(checkedKeys[i]);
+ } else if (layer_res.isLayer == 1) {
+ std.push(checkedKeys[i]);
+ }
+ }
+ estreeRef.value.setCheckedKeys([], true);
+ estreeRef.value.setCheckedKeys(std, true);
+ temporaryTool.addTemporaryTool(res);
+ });
+};
+const editTemporaryLayerName = (res) => {
+ if (!store.state.editTemporaryId) return;
+ var id = store.state.editTemporaryId;
+ var val = treeData.value[0].children;
+
+ for (var i = 0; i < val.length; i++) {
+ if (val[i].id == id) {
+ val[i].cnName = res;
+ setEditLayerChange(val[i]);
+ }
+ }
+ defaultExpanded.value = [treeData.value[0].id];
+};
+const editTemporaryBackById = (res) => {
+ var obj = temporaryTool.getEntityObj(res);
+ var val = treeData.value[0].children;
+ var checkedKeys = estreeRef.value.getCheckedKeys();
+ if (checkedKeys.indexOf(temporary.value) > -1) {
+ checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1);
+ }
+ for (var i = 0; i < val.length; i++) {
+ if (val[i].id == res) {
+ obj.sid = val[i].sid;
+ val[i] = obj;
+ setEditLayerChange(obj);
+ }
+ }
+ nextTick(() => {
+ estreeRef.value.setCheckedKeys(checkedKeys, true);
+ });
+};
+const setEditLayerChange = async (res) => {
+ var obj = {
+ id: res.sid,
+ name: res.cnName,
+ wkt: JSON.stringify(res),
+ };
+ const data = await mark_update(obj);
+ if (data.code != 200) return;
+};
+watch(
+ () => store.state.restLayer,
+ (nVal, oVal) => {
+ if (nVal) {
+
+ setRestLayerData();
+ }
+ },
+ { deep: true }
+);
+watch(
+ () => store.state.temporaryLayer,
+ (nVal, oVal) => {
+ if (nVal) {
+
+ addTemporaryLayer(nVal);
+ }
+ },
+ { deep: true }
+);
+watch(
+ () => store.state.editTemporarName,
+ (nVal, oVal) => {
+ if (nVal) {
+
+ editTemporaryLayerName(nVal);
+ }
+ },
+ { deep: true }
+);
+watch(
+ () => store.state.editTemporaryback,
+ (nVal, oVal) => {
+ if (nVal) {
+
+ editTemporaryBackById(nVal);
+ }
+ },
+ { deep: true }
+);
+
+onMounted(() => {
+ window.setLayer = getLayer;
+});
</script>
<style lang="less" scoped>
@@ -155,6 +667,9 @@
width: 359px;
height: 680px;
background: rgba(7, 8, 14, 0.8);
+ box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+ z-index: 40;
+
.layerTitle {
width: calc(100% - 27px);
height: 42px;
@@ -166,18 +681,20 @@
padding-left: 7px;
padding-right: 20px;
color: white;
+
.tileLeft {
height: 100%;
display: flex;
align-items: center;
.titleLable {
- font-size: 24px;
+ font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
}
+
.titleImg {
width: 20px;
height: 100%;
@@ -185,129 +702,144 @@
align-items: center;
color: rgba(104, 156, 255, 1);
}
+
.set {
cursor: pointer;
}
}
+
.layerContent {
+ height: 625px;
padding: 0 8px;
+ overflow: auto;
+ overflow-y: auto;
}
- .contentBox {
- margin-top: 3px;
- .content {
- }
+
+ .layerContent::-webkit-scrollbar {
+ width: 8px;
}
- .contentTile {
+
+ .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);
+ }
+
+ .el-tree {
width: 100%;
- height: 42px;
- background: #0d131d;
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .contentLeft {
- display: flex;
- justify-content: center;
- align-items: center;
- .contentImg {
- width: 22px;
- height: 22px;
- background: url("../../assets/img/leftBtn/鐭╁舰 8 鎷疯礉 3.png") no-repeat;
- margin-left: 16px;
- }
- .contentLabel {
- font-size: 20px;
- font-family: Source Han Sans CN;
- font-weight: 300;
- color: #ffffff;
- margin-left: 7px;
- }
- }
- .contentRight {
- margin-right: 32px;
- display: flex;
- align-items: center;
- .contentCheck {
- margin-right: 12px;
- }
- .contentUP {
- width: 18px;
- height: 11px;
- background: url("../../assets/img/leftBtn/绠ご-宸� 鎷疯礉.png") no-repeat
- center;
- background-size: 100% 100%;
-
- cursor: pointer;
- }
- .accordion {
- transform: rotate(180deg);
- }
- .contentDown {
- width: 18px;
- height: 11px;
- background: url("../../assets/img/leftBtn/绠ご-宸� 鎷疯礉 4.png");
- }
- }
+ overflow-y: auto;
}
- .content {
- background: #1e2a3d;
- padding: 10px;
+
+ .layerContent .el-tree-node__content {
+ overflow: hidden;
}
- .check_box {
+
+ .layerContent .custom-tree-node {
+ overflow: hidden;
+ flex-shrink: 1;
+ flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
- padding-right: 50px;
- img {
- width: 22px;
- height: 19px;
- }
- }
- .check_box .el-checkbox {
font-size: 16px;
- color: #ffffff;
+ padding-right: 8px;
}
- .check_box /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
- background-color: rgba(13, 255, 0, 1);
- border-color: rgba(41, 109, 255, 1);
+
+ .layerContent .custom-tree-node .label {
+ flex-shrink: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
- .check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+
+ .layerContent .custom-tree-node .button {
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
+}
+
+.dropdown_box {
+ position: relative;
+}
+
+/deep/.el-select-dropdown__item {
+ font-size: 12px !important;
+}
+
+.el-tree {
+ background: transparent;
+}
+
+/deep/ .el-tree-node {
+ background: #0d131d;
+ color: #ffffff;
+ font-size: 20px;
+ font-weight: 300;
+ margin-top: 3px;
+ padding: 8px;
+}
+
+/deep/ .el-tree-node:focus>.el-tree-node__content {
+ background: transparent;
+}
+
+/deep/ .el-tree-node__content:hover {
+ background: #0d131d;
+}
+
+/deep/ .el-tree-node__children {
+ background: #1e2a3d;
+
+ .el-tree-node {
+ background: #1e2a3d;
+ margin-top: 0;
+ padding: 4px;
+ }
+}
+
+/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+ background: rgba(104, 156, 255, 0.5) !important;
+}
+
+.highlight {
+ background: rgba(104, 156, 255, 0.5) !important;
+}
+
+// .custom-tree-node {
+// flex: 1;
+// display: flex;
+// align-items: center;
+// justify-content: space-between;
+// font-size: 16px;
+// padding-right: 8px;
+// }
+
+.el-dropdown-menu {
+ background: rgba(7, 8, 14, 0.8);
+ box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+ color: #fff;
+ border: 0;
+
+ /deep/ .el-dropdown-menu__item {
color: #fff;
}
- .slider-demo-block {
- margin-top: 22px;
- }
- .demonstration {
- font-size: 12px;
- font-weight: 300;
- color: #d6e4ff;
- }
- /deep/ .el-slider__runway {
- height: 2px;
+}
- background: #73a1fa;
- }
- /deep/ .el-slider__bar {
- height: 2px;
+/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
+ background-color: rgba(104, 156, 255, 0.5);
- background: #73a1fa;
- }
- /deep/ .el-slider__button {
- width: 17px;
- height: 18px;
- border: 0;
- background: url("../../assets/img/DBX.png") no-repeat center;
- background-size: 100% 100%;
- border-radius: 0;
- }
- .selectBox {
- margin-top: 24px;
- .selectTile {
- padding-bottom: 6px;
- }
- .el-select {
- width: 100%;
- }
- }
+ color: #fff;
+}
+</style>
+<style>
+.el-popper.is-light {
+ border: 1px solid rgba(7, 8, 14, 0.8) !important;
+}
+
+.el-scrollbar {
+ border: 0 !important;
}
</style>
--
Gitblit v1.9.3