From 384fe106ad1efd66ef0910a824bff907322570ea Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 17 八月 2023 15:09:37 +0800
Subject: [PATCH] 图层管理，数据类行加载方式修改
---
src/views/layer/layerSet.vue | 397 ++++++++++----------------------------------------------
1 files changed, 73 insertions(+), 324 deletions(-)
diff --git a/src/views/layer/layerSet.vue b/src/views/layer/layerSet.vue
index 4f453fc..3908cd2 100644
--- a/src/views/layer/layerSet.vue
+++ b/src/views/layer/layerSet.vue
@@ -20,14 +20,51 @@
@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="insertLayerData(1)"
+ <el-button type="primary" :icon="Plus" @click="added('t')"
>鏂板鍚岀骇</el-button
>
- <el-button type="primary" :icon="Plus" @click="insertLayerData(2)"
+ <el-button type="primary" :icon="Plus" @click="added('z')"
>鏂板瀛愮骇</el-button
>
<el-button
@@ -45,168 +82,44 @@
>
</div>
<div class="edit_box_form">
- <el-form :model="formInline" label-width="120px">
+ <el-form :model="form" 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-input
+ v-model="form.selectName"
+ disabled
+ placeholder="鐐瑰嚮鍥惧眰鏍戦�夋嫨"
+ />
</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="formInline.cnName"
- placeholder="璇疯緭鍏ュ浘灞傚悕绉�"
- />
+ <el-input v-model="form.name" placeholder="璇疯緭鍏ュ浘灞傚悕绉�" />
</el-form-item>
- <!-- 鏁版嵁绫诲瀷 -->
- <el-form-item v-show="formInline.isLayer == 1" label="鏁版嵁绫诲瀷">
+ <el-form-item label="鍥惧眰绫诲瀷">
<el-select
style="width: 100%"
- v-model="formInline.data"
- :disabled="serviceActive"
- @change="setFromDataTypeClick"
+ v-model="form.region"
+ placeholder="璇烽�夋嫨鍥惧眰绫诲瀷"
>
<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>
+ v-for="(e, i) in stretchOptions"
+ :label="e.label"
+ :value="e.value"
+ :key="i"
+ />
</el-select>
</el-form-item>
- <el-form-item label="鏈嶅姟鍦板潃" v-show="formInline.isLayer == 1">
- <el-input
- v-model="formInline.serviceUrl"
- placeholder="璇疯緭鍏ユ湇鍔″湴鍧�"
- :disabled="serviceActive"
- />
+ <el-form-item label="鏈嶅姟鍦板潃">
+ <el-input v-model="form.layerUrl" placeholder="璇疯緭鍏ユ湇鍔″湴鍧�" />
</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" @click="updateRest">鍙栨秷</el-button>
- </div>
+ <el-button class="delbtn">鍙栨秷</el-button>
+ </div> -->
</el-form-item>
</el-form>
</div>
</div>
- <el-dialog title="鏂板" v-model:visible="dialogVisible" width="50%">
- <div style="width: 100%; max-height: 63vh; overflow-y: auto">
- <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="formInline.cnName"
- placeholder="璇疯緭鍏ュ浘灞傚悕绉�"
- />
- </el-form-item>
- <!-- 鏁版嵁绫诲瀷 -->
- <el-form-item v-show="formInline.isLayer == 1" label="鏁版嵁绫诲瀷">
- <el-select
- style="width: 100%"
- v-model="formInline.data"
- @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">
- <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="formInline.isLayer == 1">
- <el-input
- v-model="formInline.serviceUrl"
- placeholder="璇疯緭鍏ユ湇鍔″湴鍧�"
- />
- </el-form-item>
- <el-form-item>
- <div class="btnstyle editBtn">
- <el-button type="primary" @click="onSubmit">纭畾</el-button>
- <el-button class="delbtn" @click="updateRest">鍙栨秷</el-button>
- </div>
- </el-form-item>
- </el-form>
- </div>
- </el-dialog>
</div>
</template>
@@ -221,8 +134,6 @@
} from "vue";
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
-import { serve_type, data_type } from "./js/layerManage.js";
-import { removeToken, getToken } from "@/utils/auth";
const stretchValue = ref("");
const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
@@ -254,134 +165,21 @@
},
];
-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 form = reactive({
+ name: "",
+ region: "",
+ selectName: "",
+ layerUrl: "",
+ children: [],
});
const props = {
label: "cnName",
children: "children",
};
-let dialogVisible = 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);
-const insertLayerData = (res) => {
- // if (res == 1) {
- // //鏂板鍚岀骇
- // id = this.formInline.pid;
- // let pchildNodes = this.$refs.tree.getNode(this.newNode.id).parent
- // .childNodes;
- // orderNum = this.getMaxOrderNum(pchildNodes);
- // lever = this.formInline.level;
- // } else if (res == 2) {
- // //鏂板瀛愮骇
- // id = this.formInline.id;
- // let pchildNodes = this.$refs.tree.getNode(this.newNode.id).childNodes;
- // orderNum = this.getMaxOrderNum(pchildNodes);
- // lever = this.formInline.level + 1;
- // }
- // this.insertData.pid = id;
- // this.insertData.level = lever;
- // this.insertData.orderNum = orderNum;
-
- dialogVisible.value = true;
-};
-//淇敼閲嶇疆
-const updateRest = () => {
- var res = JSON.parse(backUpData.value);
- formInline.value = res;
- formInline.value.isLayer = res.isLayer.toString();
-
- formInline.value.status = res.status.toString();
- // 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 setServiceChange = (res) => {
- if (res == "1") {
- // this.setServiceRest()
- } else {
- serviceActive.value = false;
- formInline.value.resid = 0;
- }
-};
const handleCheckChange = (
data: Tree,
checked: boolean,
@@ -396,35 +194,14 @@
// 澶勭悊鑺傜偣鐐瑰嚮浜嬩欢
function handleNodeClick(data: any) {
console.log(data);
- console.log(formInline.value);
if (data.id === selectedNodeId.value) {
// 濡傛灉褰撳墠鑺傜偣宸茬粡閫変腑锛屽垯鍙栨秷閫変腑
selectedNodeId.value = null;
} else {
// 鍚﹀垯閫変腑褰撳墠鑺傜偣
selectedNodeId.value = data.id;
+ form.selectName = data.cnName;
selectedObj.value = data;
- backUpData.value = JSON.stringify(data);
- // this.currentData = JSON.stringify(result)
- formInline.value = data;
- 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;
}
}
//鏂板
@@ -435,17 +212,14 @@
}
var addObj = {
id: id,
- cnName: formInline.value.name,
- region: formInline.value.region,
- url: formInline.value.layerUrl,
+ cnName: form.name,
+ region: form.region,
+ layerUrl: form.layerUrl,
children: [],
- type: 2, //鏁版嵁绫诲瀷
- proxy: null,
- data: 0,
- tab: "", //Geoserver 鍚嶇О锛�
- category: "", //鏈嶅姟绫诲埆 Geoserver ,
+ type: 2,
+ parentId: null,
};
- if (formInline.value.region == "鐩綍") {
+ if (form.region == "鐩綍") {
addObj.type = 1;
}
@@ -514,7 +288,6 @@
}
emits("addlayer", { type: type, id: selectedObj.value.id });
};
-optionsStart();
</script>
<style lang="less" scoped>
@@ -570,8 +343,7 @@
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;
@@ -606,19 +378,6 @@
}
.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;
@@ -714,7 +473,6 @@
}
}
}
-
.editBtn {
width: 100%;
display: flex;
@@ -759,14 +517,5 @@
// }
.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;
}
</style>
--
Gitblit v1.9.3