From 23aac3cf9903d404eb86310d502a0eeb5a68b407 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 14 七月 2023 16:45:03 +0800
Subject: [PATCH] 11
---
src/views/layer/layerManage.vue | 300 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 194 insertions(+), 106 deletions(-)
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index fdc1e49..9bef0eb 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -13,52 +13,67 @@
</div>
<div class="layerContent">
<el-tree
+ node-key="id"
:props="props"
:highlight-current="false"
:current-node-key="selectedNodeId"
- :data="menuOption"
+ :data="treeData"
:expand-on-click-node="false"
show-checkbox
@check="handleCheckChange"
ref="estreeRef"
+ v-if="treeData.length"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
- <span>{{ node.label }}</span>
+ <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> -->
- <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 @click.native="clickdropdown(1, data)"
- >璇︾粏</el-dropdown-item
- >
- <el-dropdown-item @click.native="clickdropdown(2, data)"
- >灞炴��</el-dropdown-item
- >
- </el-dropdown-menu>
- </template>
- </el-dropdown>
+ <span class="button" v-if="data.type == 2">
+ <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 @click.native="clickdropdown(1, data)"
+ >璇︾粏</el-dropdown-item
+ >
+ <el-dropdown-item @click.native="clickdropdown(2, data)"
+ >灞炴��</el-dropdown-item
+ >
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </span>
</span>
</template>
</el-tree>
</div>
</div>
- <layer-set v-show="layerSetIsshow" @SETstate="SETstate"></layer-set>
+ <layer-set
+ v-show="layerSetIsshow"
+ @SETstate="SETstate"
+ :layerTree="treeData"
+ @addlayer="addlayer"
+ @delLayer="delLayer"
+ ></layer-set>
<attribute-list
v-show="layerAttributeIsshow"
:layerData="layerObjData"
@spatialClose="setSpatialClose"
></attribute-list>
+ <layer-detail
+ :layerData="layerObjData"
+ v-if="layerDetailIsshow"
+ @detailClose="detailClose"
+ ></layer-detail>
</template>
<script lang="ts" setup>
@@ -72,7 +87,9 @@
} from "vue";
import layerSet from "./layerSet";
import attributeList from "./attributeList";
+import layerDetail from "./layerDetail";
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
+import { layer_selectAll } from "@/api/api";
const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const stretchValue = ref("");
@@ -100,61 +117,63 @@
},
];
const transparence = ref(0);
+var treeData = ref([]);
let menuOption = reactive([
{
+ id: 1,
name: "娴嬭瘯",
isShow: false,
checkedAll: false,
type: 1,
- children: [
- {
- layerState: false,
- name: "鍥惧眰鍚嶇О",
- layerUrl: "",
- type: 2,
- },
- {
- layerState: false,
- name: "鍥惧眰鑿滃崟",
- layerUrl: "",
- type: 1,
- children: [
- {
- layerState: false,
- name: "鍥惧眰鍚嶇О11",
- layerUrl: "",
- type: 2,
- },
- ],
- },
- ],
+ parentId: null,
},
{
+ id: 2,
+ layerState: false,
+ name: "鍥惧眰鍚嶇О",
+ layerUrl: "",
+ type: 2,
+ parentId: 1,
+ },
+ {
+ id: 3,
+ layerState: false,
+ name: "鍥惧眰鑿滃崟",
+ layerUrl: "",
+ type: 1,
+ parentId: 1,
+ },
+ {
+ id: 5,
+ layerState: false,
+ name: "鍥惧眰鍚嶇О11",
+ layerUrl: "",
+ type: 2,
+ parentId: 3,
+ },
+ {
+ id: 4,
name: "娴嬭瘯1",
isShow: false,
checkedAll: true,
layerState: false,
type: 1,
+ parentId: null,
},
]);
+
const layerSetIsshow = ref(false);
const layerAttributeIsshow = ref(false);
+const layerDetailIsshow = ref(false);
const props = {
- label: "name",
+ label: "cnName",
children: "children",
};
const layerObjData = ref(null);
// 褰撳墠閫変腑鐨勮妭鐐� id
const selectedNodeId = ref(null as any); //鍋氱被鍨嬫柇瑷�澶勭悊
const emits = defineEmits(["setCloseLayer"]);
-const handlCheckAllChange = (res) => {};
-const handlIsShow = (res: string) => {
- menuOption.forEach((e) => {
- if (e.name == res) {
- e.isShow = !e.isShow;
- }
- });
-};
+
//鍥惧眰璁剧疆寮规
const layerSetBox = () => {
layerSetIsshow.value = !layerSetIsshow.value;
@@ -166,36 +185,72 @@
const setCloseLayer = () => {
emits("setCloseLayer", false);
};
-// 澶勭悊鑺傜偣鐐瑰嚮浜嬩欢
-function handleNodeClick(data: any) {
- console.log(data);
- if (data.id === selectedNodeId.value) {
- // 濡傛灉褰撳墠鑺傜偣宸茬粡閫変腑锛屽垯鍙栨秷閫変腑
- selectedNodeId.value = null;
- console.log(selectedNodeId.value, "鍙栨秷閫変腑");
- } else {
- // 鍚﹀垯閫変腑褰撳墠鑺傜偣
- selectedNodeId.value = data.id;
- // form.selectName = data.name;
- console.log(selectedNodeId.value, "褰撳墠閫変腑鐨勮妭鐐�");
- }
-}
+//閫夋嫨鍥惧眰
const handleCheckChange = (data, checked) => {
let son = estreeRef.value.getCheckedNodes();
- console.log(son); //閫変腑鐨勬暟鎹�
store.commit("SET_CHECKLAYER", son);
};
const clickdropdown = (res, e) => {
+ layerAttributeIsshow.value = false;
+ layerDetailIsshow.value = false;
+ layerObjData.value = e;
if (res == 2) {
layerAttributeIsshow.value = true;
- layerObjData.value = e;
+ } else {
+ layerDetailIsshow.value = true;
}
- console.log(res, e);
};
const setSpatialClose = (res) => {
layerAttributeIsshow.value = res;
};
+const detailClose = (res) => {
+ layerDetailIsshow.value = res;
+};
+//缂栬緫鍥惧眰鏍�
+const addlayer = (res) => {
+ menuOption.push(res);
+ treeData.value = handleTree(menuOption, "id", "pid", "children");
+};
+//鍒犻櫎鍥惧眰鏍�
+const delLayer = (res) => {
+ menuOption = menuOption.filter((item) => {
+ return item.id != res;
+ });
+ console.log(res);
+ console.log(menuOption);
+ // treeData = handleTree(menuOption, "id", "pid", "children");
+};
+
+const getLayer = async () => {
+ const dt = await layer_selectAll();
+ treeData.value = setTreeData(dt.result);
+ treeData.value = JSON.parse(JSON.stringify(treeData.value));
+
+ console.log(treeData.value);
+};
+
+//鏋勯�犳爲
+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; // 杩斿洖涓�绾ц彍鍗�
+ });
+}
+onMounted(() => {
+ getLayer();
+});
</script>
<style lang="less" scoped>
@@ -239,46 +294,56 @@
}
}
.layerContent {
+ height: 635px;
padding: 0 8px;
+ overflow: auto;
+ overflow-y: auto;
}
-
- .slider-demo-block {
- margin-top: 22px;
+ .layerContent::-webkit-scrollbar {
+ width: 8px;
}
- .demonstration {
- font-size: 12px;
- font-weight: 300;
- color: #d6e4ff;
+ .layerContent::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: rgba(0, 0, 0, 0.2);
}
- /deep/ .el-slider__runway {
- height: 2px;
-
- background: #73a1fa;
- }
- /deep/ .el-slider__bar {
- height: 2px;
-
- 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%;
+ .layerContent::-webkit-scrollbar-track {
border-radius: 0;
+ background: rgba(0, 0, 0, 0);
+ }
+ .el-tree {
+ width: 100%;
+ overflow-y: auto;
+ }
+ .layerContent .el-tree-node__content {
+ overflow: hidden;
}
- .selectBox {
- margin-top: 24px;
- .selectTile {
- padding-bottom: 6px;
- }
- .el-select {
- width: 100%;
- }
+ .layerContent .custom-tree-node {
+ overflow: hidden;
+ flex-shrink: 1;
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 16px;
+ padding-right: 8px;
+ }
+
+ .layerContent .custom-tree-node .label {
+ flex-shrink: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .layerContent .custom-tree-node .button {
+ flex-grow: 0;
+ flex-shrink: 0;
}
}
+.dropdown_box {
+ position: relative;
+}
+
/deep/.el-select-dropdown__item {
font-size: 12px !important;
}
@@ -316,12 +381,35 @@
.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;
+// .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;
+ }
+}
+/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
+ background-color: rgba(104, 156, 255, 0.5);
+
+ 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