From 2f25ea56b2d038812bd22cede46ff74a7ff1cfdd Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期二, 11 七月 2023 17:10:53 +0800
Subject: [PATCH] 图层设置
---
src/assets/css/global.css | 1
src/views/layer/layerSet.vue | 333 +++++++++++++++++++++++++++++++++++++++++-------------
2 files changed, 251 insertions(+), 83 deletions(-)
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index a15c476..3202c07 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -82,6 +82,7 @@
background: rgba(104, 156, 255, 0.2);
border: 1px solid #689cff;
}
+.el-input.is-disabled .el-input__wrapper,
.el-input__wrapper{
background: rgba(13, 19, 29, 0.4);
border: 1px solid rgba(214, 228, 255, 0.4);
diff --git a/src/views/layer/layerSet.vue b/src/views/layer/layerSet.vue
index f99932b..dcba02a 100644
--- a/src/views/layer/layerSet.vue
+++ b/src/views/layer/layerSet.vue
@@ -3,22 +3,28 @@
<div class="layerBox">
<div class="layerTitle">
<div class="tileLeft">
- <div
- class="titleImg"
- @click="editState"
- >
+ <div class="titleImg" @click="editState">
<ArrowLeft />
</div>
<div class="titleLable">鍥惧眰缂栬緫</div>
</div>
</div>
<div class="layerContent">
- <div
- class="contentBox"
- v-for="(item, i) in menuOption"
- :key="i"
- >
- <div class="contentTile">
+ <!-- <el-tree
+ :props="props"
+ :highlight-current="true"
+ :current-node-key="selectedNodeId"
+ :data="menuOption"
+ :expand-on-click-node="false"
+ @node-click="handleNodeClick"
+ /> -->
+
+ <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>
@@ -34,85 +40,72 @@
</div>
</div>
- <div
- class="content"
- v-show="item.isShow"
- >
+ <div class="content" v-show="item.isShow">
<div
class="layer_box"
v-for="(v, k) in item.children"
:key="k"
- ></div>
+ @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"
- >鏂板鍚岀骇</el-button>
- <el-button
- type="primary"
- :icon="Plus"
- >鏂板瀛愮骇</el-button>
+ <el-button type="primary" :icon="Plus" @click="added('t')"
+ >鏂板鍚岀骇</el-button
+ >
+ <el-button type="primary" :icon="Plus" @click="added('z')"
+ >鏂板瀛愮骇</el-button
+ >
<el-button
type="primary"
:icon="Delete"
class="delbtn"
- >鍒犻櫎</el-button>
- <el-button
- type="primary"
- :icon="Top"
- >鍚戜笂绉诲姩</el-button>
- <el-button
- type="primary"
- :icon="Bottom"
- >鍚戜笅绉诲姩</el-button>
+ @click="delLayer"
+ >鍒犻櫎</el-button
+ >
+ <el-button type="primary" :icon="Top">鍚戜笂绉诲姩</el-button>
+ <el-button type="primary" :icon="Bottom">鍚戜笅绉诲姩</el-button>
</div>
<div class="edit_box_form">
- <el-form
- :model="form"
- label-width="120px"
- >
- <el-form-item label="Activity name">
- <el-input v-model="form.name" />
+ <el-form :model="form" label-width="120px">
+ <el-form-item label="閫変腑鍥惧眰">
+ <el-input
+ v-model="form.selectName"
+ disabled
+ placeholder="鐐瑰嚮鍥惧眰鏍戦�夋嫨"
+ />
</el-form-item>
- <el-form-item label="Activity zone">
+ <el-form-item label="鍥惧眰鍚嶇О">
+ <el-input v-model="form.name" placeholder="璇疯緭鍏ュ浘灞傚悕绉�" />
+ </el-form-item>
+ <el-form-item label="鍥惧眰绫诲瀷">
<el-select
+ style="width: 100%"
v-model="form.region"
- placeholder="please select your zone"
+ placeholder="璇烽�夋嫨鍥惧眰绫诲瀷"
>
- <el-option
- label="Zone one"
- value="shanghai"
- />
- <el-option
- label="Zone two"
- value="beijing"
- />
+ <el-option label="Zone one" value="shanghai" />
+ <el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
- <el-form-item label="Resources">
- <el-radio-group v-model="form.resource">
- <el-radio label="Sponsor" />
- <el-radio label="Venue" />
- </el-radio-group>
- </el-form-item>
- <el-form-item label="Activity form">
- <el-input
- v-model="form.desc"
- type="textarea"
- />
+ <el-form-item label="鏈嶅姟鍦板潃">
+ <el-input v-model="form.layerUrl" placeholder="璇疯緭鍏ユ湇鍔″湴鍧�" />
</el-form-item>
<el-form-item>
- <el-button
- type="primary"
- @click="onSubmit"
- >Create</el-button>
- <el-button>Cancel</el-button>
+ <!-- <div class="btnstyle editBtn">
+ <el-button type="primary" @click="onSubmit">纭畾</el-button>
+ <el-button class="delbtn">鍙栨秷</el-button>
+ </div> -->
</el-form-item>
</el-form>
</div>
@@ -130,6 +123,7 @@
defineEmits,
} from "vue";
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
const stretchValue = ref("");
const emits = defineEmits(["SETstate"]);
const stretchOptions = [
@@ -160,36 +154,115 @@
name: "娴嬭瘯",
isShow: false,
checkedAll: false,
+ id: 1,
children: [
{
+ id: 2,
layerState: false,
- layerName: "鍥惧眰鍚嶇О",
+ name: "鍥惧眰鍚嶇О",
layerUrl: "",
},
],
},
{
+ id: 3,
name: "娴嬭瘯1",
isShow: false,
checkedAll: true,
layerState: false,
+ children: [],
},
]);
const form = reactive({
name: "",
region: "",
- date1: "",
- date2: "",
- delivery: false,
- type: [],
- resource: "",
- desc: "",
+ selectName: "",
+ layerUrl: "",
+ children: [],
});
-
+const props = {
+ label: "name",
+ children: "children",
+};
+// 褰撳墠閫変腑鐨勮妭鐐� id
+const selectedNodeId = ref(null as any); //鍋氱被鍨嬫柇瑷�澶勭悊
+const selectedObj = ref(null);
+const handleCheckChange = (
+ data: Tree,
+ checked: boolean,
+ indeterminate: boolean
+) => {
+ console.log(data, checked, indeterminate);
+};
const onSubmit = () => {
console.log("submit!");
};
-const handlCheckAllChange = (res) => {};
+
+// 澶勭悊鑺傜偣鐐瑰嚮浜嬩欢
+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 added = (t) => {
+ var id = "";
+ for (var i = 0; i < 7; i++) {
+ id += Math.floor(Math.random() * 10);
+ }
+
+ if (t == "t") {
+ menuOption.forEach((e, i) => {
+ if (e.id == selectedNodeId.value) {
+ menuOption.push({
+ id: id,
+ name: form.name,
+ region: form.region,
+ layerUrl: form.layerUrl,
+ children: [],
+ });
+ } else {
+ e.children.forEach((v) => {
+ if (v.id == selectedNodeId.value) {
+ menuOption[i].children.push({
+ id: id,
+ name: form.name,
+ region: form.region,
+ layerUrl: form.layerUrl,
+ children: [],
+ });
+ }
+ });
+ }
+ });
+ } else {
+ // if(){
+ // return
+ // }
+ }
+};
+//鍒犻櫎
+const delLayer = () => {
+ menuOption = menuOption.filter((item) => {
+ return item.id != selectedNodeId.value;
+ });
+
+ console.log(menuOption);
+};
+//鍥惧眰璁剧疆寮规
+const layerSet = () => {};
+//鍏抽棴鐘舵��
+const editState = () => {
+ emits("SETstate", false);
+};
const handlIsShow = (res: string) => {
menuOption.forEach((e) => {
if (e.name == res) {
@@ -197,11 +270,21 @@
}
});
};
-//鍥惧眰璁剧疆寮规
-const layerSet = () => {};
-//鍏抽棴鐘舵��
-const editState = () => {
- emits("SETstate", false);
+//閫夋嫨鍒楄〃
+const selectList = (v) => {
+ // selectedNodeId.value = v.id;
+ console.log(v);
+ if (v.id === selectedNodeId.value) {
+ // 濡傛灉褰撳墠鑺傜偣宸茬粡閫変腑锛屽垯鍙栨秷閫変腑
+ selectedNodeId.value = null;
+ console.log(selectedNodeId.value, "鍙栨秷閫変腑");
+ } else {
+ // 鍚﹀垯閫変腑褰撳墠鑺傜偣
+ selectedNodeId.value = v.id;
+ form.selectName = v.name;
+ selectedObj.value = v;
+ console.log(selectedNodeId.value, "褰撳墠閫変腑鐨勮妭鐐�");
+ }
};
</script>
@@ -210,10 +293,12 @@
width: 1227px;
display: flex;
position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%);
- transform: translateY(-50%);
+ top: 60px;
+ left: 395px;
+ // top: 50%;
+ // left: 50%;
+ // transform: translateX(-50%);
+ // transform: translateY(-50%);
background: rgba(7, 8, 14, 0.8);
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
border: 1px solid #d6e4ff;
@@ -229,6 +314,9 @@
}
.edit_box_form {
padding: 0 116px;
+ /deep/ .el-form-item__label {
+ color: #fff;
+ }
}
}
.btnstyle {
@@ -251,8 +339,9 @@
}
.layerBox {
width: 359px;
- height: 680px;
+ height: 615px;
background: rgba(7, 8, 14, 0.8);
+
.layerTitle {
width: calc(100% - 27px);
height: 42px;
@@ -309,6 +398,7 @@
width: 22px;
height: 22px;
background: url("../../assets/img/leftBtn/鐭╁舰 8 鎷疯礉 3.png") no-repeat;
+ background-size: 100% 100%;
margin-left: 16px;
}
.contentLabel {
@@ -347,5 +437,82 @@
background: #1e2a3d;
padding: 10px;
}
+ .layer_box {
+ padding: 4px;
+ margin-bottom: 4px;
+ color: #ffffff;
+ font-size: 18px;
+ font-weight: 400;
+ background: #0e151f;
+ box-shadow: 0px 0px 6px 0px #080c13,
+ 0px 14px 16px 0px rgba(38, 47, 71, 0.68);
+ display: flex;
+ justify-content: space-between;
+ padding-left: 7px;
+ padding-right: 20px;
+ .contentLeft {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .contentImg {
+ width: 22px;
+ height: 22px;
+ background: url("../../assets/img/leftBtn/鐭╁舰 8 鎷疯礉 3.png") no-repeat;
+ background-size: 100% 100%;
+ margin-left: 16px;
+ }
+ .contentLabel {
+ font-size: 20px;
+ font-family: Source Han Sans CN;
+ font-weight: 300;
+ color: #ffffff;
+ margin-left: 7px;
+ }
+ }
+ }
+}
+.editBtn {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: 36px;
+ .delbtn {
+ margin-left: 40px;
+ }
+}
+.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;
}
</style>
--
Gitblit v1.9.3