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/utils/request.js | 7
src/api/api.js | 19 -
src/views/login.vue | 16
package.json | 2
src/views/layer/attributeList.vue | 53 +--
src/views/layer/layerDetail.vue | 170 +++++++++++++
src/views/layer/layerSet.vue | 163 ++++--------
src/views/menus.vue | 42 --
src/views/layer/layerManage.vue | 300 ++++++++++++++--------
9 files changed, 473 insertions(+), 299 deletions(-)
diff --git a/package.json b/package.json
index 58425f3..80a0639 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
"amfe-flexible": "^2.2.1",
"axios": "^1.3.4",
"default-passive-events": "^2.0.0",
- "element-plus": "^2.3.0",
+ "element-plus": "^2.3.8",
"js-base64": "^3.7.5",
"jsencrypt": "^3.3.2",
"mitt": "^3.0.1",
diff --git a/src/api/api.js b/src/api/api.js
index e57a648..07d4636 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -8,13 +8,6 @@
*/
import request from "@/utils/request";
-// 鏌ヨ澶╂皵
-export function layerList(params) {
- //璇锋眰鍦板潃
- return request.get("/select", { params: params });
-}
-
-
//鍦板悕鏌ヨ
export function dataQuery_selectByPage(params) {
//璇锋眰鍦板潃
@@ -27,11 +20,6 @@
return request.get("/dataQuery/selectFields", { params: params });
}
-
-
-
-
-
//鑾峰彇RSA鍔犲瘑鍏挜
export function sign_getPublicKey(params) {
//璇锋眰鍦板潃
@@ -40,5 +28,10 @@
//鐧诲綍
export function sign_login(params) {
//璇锋眰鍦板潃
- return request.post('/sign/login', params);
+ return request.post("/sign/login", params);
+}
+//鍥惧眰鏌ヨ
+export function layer_selectAll(params) {
+ //璇锋眰鍦板潃
+ return request.get("/layer/selectAll", { params: params });
}
diff --git a/src/utils/request.js b/src/utils/request.js
index 4dd2bf7..e121a36 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -7,8 +7,10 @@
*/
import axios from "axios";
import { ElMessage, ElLoading } from "element-plus";
+import { useRouter } from "vue-router";
import { getToken } from "@/utils/auth";
+const router = useRouter();
// create an axios instance
const service = axios.create({
baseURL: BASE_URL, // api鐨刡ase_url
@@ -45,6 +47,11 @@
// 鎶ラ敊鎻愮ず
if (response.data.code !== 200) {
ElMessage.error(response.data.msg);
+ } else if (
+ response.data.code !== 200 &&
+ response.data.result == "鐢ㄦ埛鏈櫥褰�"
+ ) {
+ router.push({ path: "/login" });
}
return response.data;
},
diff --git a/src/views/layer/attributeList.vue b/src/views/layer/attributeList.vue
index d27fb16..94f8652 100644
--- a/src/views/layer/attributeList.vue
+++ b/src/views/layer/attributeList.vue
@@ -2,14 +2,14 @@
<div v-drag="true" class="spatialBox">
<!-- v-resizable="'right, bottom'" -->
<div class="spatialTitle">
- <label>绌洪棿鏌ヨ</label>
+ <label>灞炴��</label>
<el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
<Close />
</el-icon>
</div>
<div class="spatialContent">
<div class="spatialTable">
- <el-table :data="tableData" style="width: 100%; height: 73%">
+ <el-table :data="tableData" style="width: 100%; height: 82%">
<el-table-column
v-for="(item, index) in attributeData"
:key="index"
@@ -83,9 +83,7 @@
//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
const props = defineProps({
- layerData: {
- type: Object,
- },
+ layerData: Object,
});
const handleSizeChange = (res) => {
@@ -108,15 +106,12 @@
};
const setQueySpatialFields = async () => {
- console.log(props.layerData);
const data = await dataQuery_selectFields({ name: listData.value.name });
if (data.code != 200) {
return ElMessage.error("瀛楁鏌ヨ澶辫触");
}
- console.log(data);
- attributeData.value = data.result;
- console.log(attributeData.value);
+ attributeData.value = data.result;
conditionChange(data.result[0]);
setQueySpatialData();
@@ -158,7 +153,7 @@
watch(
() => props.layerData,
(nVal, oVal) => {
- console.log("鍊煎彂鐢熶簡鍙樻洿", nVal, oVal);
+ // console.log("鍊煎彂鐢熶簡鍙樻洿", nVal, oVal);
startQueryData();
},
{ deep: true }
@@ -293,25 +288,25 @@
}
</style>
<style lang="less">
-.el-scrollbar {
- background: rgba(7, 8, 14) !important;
- border: 1px solid #4472cb;
- color: #d6e4ff !important;
- box-shadow: inset 0px 1px 40px 1px rgba(38, 47, 71, 1);
- // .el-dropdown-menu {
- // background: rgba(7, 8, 14, 0.8) !important;
- // }
- .el-select-dropdown__item {
- color: #d6e4ff;
- }
- .el-select-dropdown__item:hover {
- background: rgba(38, 47, 71, 1) !important;
- }
- .el-select-dropdown__item.hover,
- .el-select-dropdown__item:hover {
- background: rgba(38, 47, 71, 1) !important;
- }
-}
+// .el-scrollbar {
+// background: rgba(7, 8, 14) !important;
+// border: 1px solid #4472cb;
+// color: #d6e4ff !important;
+// box-shadow: inset 0px 1px 40px 1px rgba(38, 47, 71, 1);
+// // .el-dropdown-menu {
+// // background: rgba(7, 8, 14, 0.8) !important;
+// // }
+// .el-select-dropdown__item {
+// color: #d6e4ff;
+// }
+// .el-select-dropdown__item:hover {
+// background: rgba(38, 47, 71, 1) !important;
+// }
+// .el-select-dropdown__item.hover,
+// .el-select-dropdown__item:hover {
+// background: rgba(38, 47, 71, 1) !important;
+// }
+// }
.el-table__header-wrapper {
border: 1px siolid #409eff;
}
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
new file mode 100644
index 0000000..35270c0
--- /dev/null
+++ b/src/views/layer/layerDetail.vue
@@ -0,0 +1,170 @@
+<template>
+ <div class="content">
+ <div class="title">
+ <label>璇︾粏缂栬緫</label>
+ <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
+ <Close />
+ </el-icon>
+ </div>
+ <div class="layer_box">
+ <div class="check_box">
+ <!-- <el-checkbox @change="handlCheckAllChange" v-model="layerState">{{
+ layerName
+ }}</el-checkbox> -->
+ {{ layerData.name }}
+ <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>
+</template>
+
+<script lang="ts" setup>
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ reactive,
+ defineProps,
+ defineEmits,
+} from "vue";
+const stretchValue = ref("");
+const transparence = ref(0);
+let layerName = ref("鍥惧眰鍚嶇О");
+let layerState = ref(false);
+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(["detailClose"]);
+//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
+const props = defineProps({
+ layerData: Object,
+});
+const setSpatialClose = () => {
+ emits("detailClose", false);
+};
+const handlCheckAllChange = (res) => {};
+</script>
+
+<style lang="less" scoped>
+.content {
+ background: #1e2a3d;
+ padding: 20px;
+ height: 400px;
+ margin-left: 20px;
+ margin-top: 40px;
+ .title {
+ font-size: 18px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #ffffff;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .layer_box {
+ margin-top: 10px;
+ }
+}
+.check_box {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-right: 50px;
+ padding-top: 10px;
+ font-size: 16px;
+ color: #ffffff;
+ img {
+ width: 22px;
+ height: 19px;
+ }
+}
+.check_box .el-checkbox {
+ font-size: 16px;
+ color: #ffffff;
+}
+.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);
+}
+.check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+ 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;
+
+ 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%;
+ }
+}
+/deep/.el-select-dropdown__item {
+ font-size: 12px !important;
+}
+</style>
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>
diff --git a/src/views/layer/layerSet.vue b/src/views/layer/layerSet.vue
index c3cdad0..ae13792 100644
--- a/src/views/layer/layerSet.vue
+++ b/src/views/layer/layerSet.vue
@@ -10,16 +10,18 @@
</div>
</div>
<div class="layerContent">
- <!-- <el-tree
+ <el-tree
+ node-key="id"
:props="props"
:highlight-current="true"
:current-node-key="selectedNodeId"
- :data="menuOption"
+ :data="layerTree"
:expand-on-click-node="false"
@node-click="handleNodeClick"
- /> -->
+ ref="treeRef"
+ />
- <div class="contentBox" v-for="(item, i) in menuOption" :key="i">
+ <!-- <div class="contentBox" v-for="(item, i) in menuOption" :key="i">
<div
class="contentTile"
@click.stop="selectList(item)"
@@ -54,7 +56,7 @@
</div>
</div>
</div>
- </div>
+ </div> -->
</div>
</div>
<div class="edit_box">
@@ -93,8 +95,12 @@
v-model="form.region"
placeholder="璇烽�夋嫨鍥惧眰绫诲瀷"
>
- <el-option label="Zone one" value="shanghai" />
- <el-option label="Zone two" value="beijing" />
+ <el-option
+ v-for="(e, i) in stretchOptions"
+ :label="e.label"
+ :value="e.value"
+ :key="i"
+ />
</el-select>
</el-form-item>
@@ -125,11 +131,17 @@
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const stretchValue = ref("");
-const emits = defineEmits(["SETstate"]);
+const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
+//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
+const defineProp = defineProps({
+ layerTree: Array,
+});
+let treeRef = ref();
+
const stretchOptions = [
{
- value: "Option1",
- label: "Option1",
+ value: "鐩綍",
+ label: "鐩綍",
},
{
value: "Option2",
@@ -149,30 +161,6 @@
},
];
-let menuOption = reactive([
- {
- name: "娴嬭瘯",
- isShow: false,
- checkedAll: false,
- id: 1,
- children: [
- {
- id: 2,
- layerState: false,
- name: "鍥惧眰鍚嶇О",
- layerUrl: "",
- },
- ],
- },
- {
- id: 3,
- name: "娴嬭瘯1",
- isShow: false,
- checkedAll: true,
- layerState: false,
- children: [],
- },
-]);
const form = reactive({
name: "",
region: "",
@@ -181,12 +169,13 @@
children: [],
});
const props = {
- label: "name",
+ label: "cnName",
children: "children",
};
// 褰撳墠閫変腑鐨勮妭鐐� id
const selectedNodeId = ref(null as any); //鍋氱被鍨嬫柇瑷�澶勭悊
const selectedObj = ref(null);
+let menuOption = ref([]);
const handleCheckChange = (
data: Tree,
checked: boolean,
@@ -204,12 +193,11 @@
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, "褰撳墠閫変腑鐨勮妭鐐�");
+ form.selectName = data.cnName;
+ selectedObj.value = data;
}
}
//鏂板
@@ -218,44 +206,32 @@
for (var i = 0; i < 7; i++) {
id += Math.floor(Math.random() * 10);
}
+ var addObj = {
+ id: id,
+ name: form.name,
+ region: form.region,
+ layerUrl: form.layerUrl,
+ children: [],
+ type: 2,
+ parentId: null,
+ };
+ if (form.region == "鐩綍") {
+ addObj.type = 1;
+ }
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: [],
- });
- }
- });
- }
- });
+ addObj.parentId = selectedObj.value.parentId;
} else {
- // if(){
- // return
- // }
+ addObj.parentId = selectedNodeId.value;
}
+ emits("addlayer", addObj);
};
//鍒犻櫎
const delLayer = () => {
- menuOption = menuOption.filter((item) => {
- return item.id != selectedNodeId.value;
- });
-
- console.log(menuOption);
+ console.log(selectedObj.value);
+ console.log(treeRef.value.getNode(selectedObj.value));
+ treeRef.value.remove(treeRef.value.getNode(selectedObj.value));
+ // emits("delLayer", selectedNodeId.value);
};
//鍥惧眰璁剧疆寮规
const layerSet = () => {};
@@ -264,45 +240,11 @@
emits("SETstate", false);
};
const handlIsShow = (res: string) => {
- menuOption.forEach((e) => {
+ menuOption.value.forEach((e) => {
if (e.name == res) {
e.isShow = !e.isShow;
}
});
-};
-//閫夋嫨鍒楄〃
-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, "褰撳墠閫変腑鐨勮妭鐐�");
- }
-};
-const remove = (node: Node, data: Tree) => {
- const parent = node.parent;
- const children: Tree[] = parent.data.children || parent.data;
- const index = children.findIndex((d) => d.id === data.id);
- children.splice(index, 1);
- // menuOption.value = [...menuOption.value];
-};
-let id = 1000;
-const append = (data: Tree) => {
- const newChild = { id: id++, name: "testtest", children: [] };
- if (!data.children) {
- data.children = [];
- }
- data.children.push(newChild);
- // console.log(data);
- // menuOption = [...menuOption];
- // console.log(menuOption);
};
</script>
@@ -524,12 +466,13 @@
padding: 4px;
}
}
-/deep/
- .el-tree--highlight-current
- .el-tree-node.is-current
- > .el-tree-node__content {
- background: rgba(104, 156, 255, 0.5) !important;
-}
+// .layerContent
+// /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;
}
diff --git a/src/views/login.vue b/src/views/login.vue
index b850cd1..85a51bd 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -64,22 +64,24 @@
/>
</el-form-item>
<el-form-item prop="verify">
- <div style="display: flex;justify-content: space-between; width: 100%; ">
+ <div
+ style="display: flex; justify-content: space-between; width: 100%"
+ >
<el-input
placeholder="璇疯緭鍏ラ獙璇佺爜锛堝拷鐣ュぇ灏忓啓锛�"
v-model="ruleForm.verify"
- style="width:68%;"
+ style="width: 68%"
/>
- <valid-code style="width:27%;"></valid-code>
+ <valid-code style="width: 27%"></valid-code>
</div>
-
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="nobr loginbtn btnbox"
@click="submitForm(ruleFormRef)"
- >鐧诲綍</el-button>
+ >鐧诲綍</el-button
+ >
</el-form-item>
</el-form>
</div>
@@ -114,8 +116,8 @@
const reportUrl = ref("");
const ruleForm = reactive({
- user: "",
- passWorld: "",
+ user: "admin",
+ passWorld: "Admin@1234_lf",
verify: "",
});
const validateVerify = (rule: any, value: any, callback: any) => {
diff --git a/src/views/menus.vue b/src/views/menus.vue
index 080615b..b9c8cf9 100644
--- a/src/views/menus.vue
+++ b/src/views/menus.vue
@@ -1,25 +1,13 @@
<template>
- <div
- class="menus"
- v-show="fullScreen"
- >
+ <div class="menus" v-show="fullScreen">
<div class="logo_box">
- <img
- src="../assets/img/logo.png"
- alt=""
- class="logo"
- />
+ <img src="../assets/img/logo.png" alt="" class="logo" />
<div class="logo_name">
<h3>鏈堢悆澶ф暟鎹湴鐞嗙┖闂村垎鏋愬睍绀哄钩鍙�</h3>
- <img
- src="../assets/img/logob.png"
- alt=""
- class="logo_name_b"
- />
+ <img src="../assets/img/logob.png" alt="" class="logo_name_b" />
</div>
</div>
<div class="menus_box">
-
<div class="menu_Image_box">
<div
class="imgBox"
@@ -39,31 +27,19 @@
/>
</div>
</div>
-
</div>
</div>
- <div
- class="content_box"
- v-show="fullScreen"
- >
- <layer-manage
- @setCloseLayer="setCloseLayer"
- v-if="checkMenuFlag == 'l1'"
- > </layer-manage>
+ <div class="content_box" v-show="fullScreen">
+ <layer-manage @setCloseLayer="setCloseLayer" v-if="checkMenuFlag == 'l1'">
+ </layer-manage>
+
<plotting v-show="checkMenuFlag == 'l2'"> </plotting>
<baseMapSwitching v-show="checkMenuFlag == 'l5'"> </baseMapSwitching>
<search v-if="thematicMapBtnState"> </search>
</div>
- <top-btn
- v-show="fullScreen"
- v-if="thematicMapBtnState"
- ></top-btn>
+ <top-btn v-show="fullScreen" v-if="thematicMapBtnState"></top-btn>
<thematic-map v-show="!thematicMapBtnState"></thematic-map>
- <div
- class="fullScreen_btn"
- v-show="!fullScreen"
- @click="screen"
- ></div>
+ <div class="fullScreen_btn" v-show="!fullScreen" @click="screen"></div>
</template>
<script lang="ts" setup>
--
Gitblit v1.9.3