From cf2f6eda253f2f159ecf695e10ddf984482f812a Mon Sep 17 00:00:00 2001
From: 13693261870 <252740454@qq.com>
Date: 星期三, 22 二月 2023 10:44:48 +0800
Subject: [PATCH] 1
---
src/views/Tools/LayerTree.vue | 225 +++++++++++++++++++++++--------------------------------
1 files changed, 94 insertions(+), 131 deletions(-)
diff --git a/src/views/Tools/LayerTree.vue b/src/views/Tools/LayerTree.vue
index 8bb9f69..d7217bc 100644
--- a/src/views/Tools/LayerTree.vue
+++ b/src/views/Tools/LayerTree.vue
@@ -1,79 +1,61 @@
<template>
<div class="lalala tree-container">
- <el-input
- placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
- v-model="filterText"
- class="search"
- >
+ <el-input placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
+ v-model="filterText"
+ class="search">
</el-input>
- <el-tree
- :data="treeData"
- node-key="id"
- default-expand-all
- show-checkbox
- @node-click="handleLeftclick"
- @node-contextmenu="rightClick"
- @check-change="handleCheckChange"
- :default-checked-keys="handleTreeCheck"
- ref="tree"
- >
- <span
- class="slot-t-node"
- slot-scope="{ node, data }"
- @dblclick="editNode(data)"
- >
+ <el-tree :data="treeData"
+ node-key="id"
+ default-expand-all
+ show-checkbox
+ @node-click="handleLeftclick"
+ @node-contextmenu="rightClick"
+ @check-change="handleCheckChange"
+ :default-checked-keys="handleTreeCheck"
+ ref="tree">
+ <span class="slot-t-node"
+ slot-scope="{ node, data }"
+ @dblclick="editNode(data)">
<span v-show="!data.isEdit">
<span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{
node.label
}}</span>
</span>
<span v-show="data.isEdit">
- <el-input
- class="slot-t-input"
- size="mini"
- autofocus
- v-model="data.label"
- :ref="'slotTreeInput' + data.id"
- @blur.stop="NodeBlur(node, data)"
- @keydown.native.enter="NodeBlur(node, data)"
- ></el-input>
+ <el-input class="slot-t-input"
+ size="mini"
+ autofocus
+ v-model="data.label"
+ :ref="'slotTreeInput' + data.id"
+ @blur.stop="NodeBlur(node, data)"
+ @keydown.native.enter="NodeBlur(node, data)"></el-input>
</span>
</span>
</el-tree>
- <el-card
- class="box-card"
- ref="card"
- :style="{ ...rightClickMenuStyle }"
- v-show="menuVisible"
- >
+ <el-card class="box-card"
+ ref="card"
+ :style="{ ...rightClickMenuStyle }"
+ v-show="menuVisible">
<div @click="addSameLevelNode()">
<i class="el-icon-circle-plus-outline"></i> 娣诲姞鍥惧眰缁�
</div>
- <div
- class="add"
- @click="addChildNode()"
- v-show="firstLevel"
- >
+ <div class="add"
+ @click="addChildNode()"
+ v-show="firstLevel">
<i class="el-icon-circle-plus-outline"></i> 娣诲姞鍥惧眰
</div>
- <div
- class="delete"
- @click="deleteNode()"
- >
+ <div class="delete"
+ @click="deleteNode()">
<i class="el-icon-remove-outline"></i> 鍒犻櫎鑺傜偣
</div>
- <div
- class="edit"
- @click="editNode()"
- >
+ <div class="edit"
+ @click="editNode()">
<i class="el-icon-edit"></i> 淇敼鑺傜偣
</div>
- <div
- class="edit"
- @click="showLayerAttribute()"
- >
+ <div class="edit"
+ @click="showLayerAttribute()">
<i class="el-icon-edit"></i> 灞炴��
</div>
<!-- <div
@@ -89,33 +71,25 @@
<i class="el-icon-bottom"></i> 涓嬬Щ
</div> -->
</el-card>
- <el-dialog
- :title="appendNodetitle"
- :visible.sync="dialogVisible"
- width="30%"
- top="20vh"
- :modal="false"
- :before-close="handleClose"
- >
- <el-form
- ref="form"
- :model="addFormServer"
- label-width="100px"
- >
+ <el-dialog :title="appendNodetitle"
+ :visible.sync="dialogVisible"
+ width="30%"
+ top="20vh"
+ :modal="false"
+ :before-close="handleClose">
+ <el-form ref="form"
+ :model="addFormServer"
+ label-width="100px">
<el-form-item label="鏈嶅姟绫诲瀷">
<!-- <el-input v-model="addFormServer.type"></el-input> -->
- <el-select
- style="width:100%"
- :popper-append-to-body="false"
- v-model="addFormServer.layerType"
- placeholder="璇烽�夋嫨"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
+ <el-select style="width:100%"
+ :popper-append-to-body="false"
+ v-model="addFormServer.layerType"
+ placeholder="璇烽�夋嫨">
+ <el-option v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
</el-option>
</el-select>
</el-form-item>
@@ -133,17 +107,13 @@
<el-slider v-model="addFormServer.opacity"></el-slider>
</el-form-item>
</el-form>
- <span
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- type="primary"
- @click="setAddServer"
- >纭� 瀹�</el-button>
+ <span slot="footer"
+ class="dialog-footer">
+ <el-button type="primary"
+ @click="setAddServer">纭� 瀹�</el-button>
</span>
</el-dialog>
- <queryinfo ref="queryinfo" />
+ <queryinfo ref="queryinfo" />
</div>
</template>
@@ -162,8 +132,8 @@
import { perms_selectLayers } from '../../api/api.js'
export default {
name: 'tree',
- components: { queryinfo },
- data() {
+ components: { queryinfo },
+ data () {
return {
eleId: '',
isShow: false,
@@ -206,7 +176,7 @@
};
},
methods: {
- NodeBlur(Node, data) {
+ NodeBlur (Node, data) {
if (data.label.length === 0) {
this.$message.error('鑿滃崟鍚嶄笉鍙负绌猴紒');
return false;
@@ -220,23 +190,23 @@
}
},
// 鏌ヨ
- filterNode(value, data) {
+ filterNode (value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
- allowDrop(draggingNode, dropNode, type) {
+ allowDrop (draggingNode, dropNode, type) {
if (dropNode.data.label === '浜岀骇 3-1') {
return type !== 'inner';
} else {
return true;
}
},
- allowDrag(draggingNode) {
+ allowDrag (draggingNode) {
return draggingNode.data.label.indexOf('涓夌骇 3-2-2') === -1;
},
// 榧犳爣鍙冲嚮浜嬩欢
- rightClick(event, object, Node, element) {
+ rightClick (event, object, Node, element) {
this.currentData = object;
this.currentNode = Node;
@@ -251,7 +221,7 @@
this.$refs.card.$el.style.top = event.pageY + 'px';
},
// 榧犳爣宸﹀嚮浜嬩欢
- handleLeftclick(data, node) {
+ handleLeftclick (data, node) {
this.foo();
if (node.checked == true) {
for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
@@ -264,13 +234,13 @@
}
},
// 鍙栨秷榧犳爣鐩戝惉浜嬩欢 鑿滃崟鏍�
- foo() {
+ foo () {
this.menuVisible = false;
// 瑕佸強鏃跺叧鎺夌洃鍚紝涓嶅叧鎺夌殑鏄竴涓潙锛屼笉淇′綘璇曡瘯锛岃櫧鐒跺墠鍙版樉绀虹殑鏃跺�欐病鏈夊暐姣涚梾锛屽姞涓�涓猘lert浣犲氨鐭ラ亾浜�
document.removeEventListener('click', this.foo);
},
// 澧炲姞鍚岀骇鑺傜偣浜嬩欢
- addSameLevelNode() {
+ addSameLevelNode () {
this.foo();
if (this.currentNode.level == 2) {
@@ -283,7 +253,7 @@
}
},
// 澧炲姞瀛愮骇鑺傜偣浜嬩欢
- addChildNode() {
+ addChildNode () {
this.foo();
if (this.currentNode.level >= 2) {
this.$message.error('鏈�澶氬彧鏀袱绾э紒');
@@ -292,7 +262,7 @@
this.appendNodetitle = this.currentData.label;
this.dialogVisible = true;
},
- handleClose() {
+ handleClose () {
this.dialogVisible = false;
this.addFormServer = {
opacity: 100,
@@ -300,7 +270,7 @@
type: 2,
};
},
- setAddServer() {
+ setAddServer () {
var val = this.currentNode;
if (this.currentNode.level == 2) {
val = this.currentNode.parent;
@@ -311,7 +281,7 @@
this.handleClose();
},
// 鍒犻櫎鑺傜偣
- deleteNode() {
+ deleteNode () {
this.foo();
var label = this.currentNode.data.label;
@@ -341,7 +311,7 @@
this.$refs.tree.remove(this.currentNode);
},
//灞炴�ф樉绀�
- showLayerAttribute(data) {
+ showLayerAttribute (data) {
this.foo();
this.currentData = data ? data : this.currentData;
var layer = this.currentData.layer.replaceAll('_', "");
@@ -364,7 +334,7 @@
});
},
// 缂栬緫鑺傜偣
- editNode(data) {
+ editNode (data) {
this.foo();
this.currentData = data ? data : this.currentData;
@@ -379,7 +349,7 @@
- menuMoveF(type) {
+ menuMoveF (type) {
// 灏嗗彉鍔ㄤ箣鍓嶇殑node澶囦唤
var node = this.currentNode;
var data = this.currentData;
@@ -417,25 +387,25 @@
},
- handleDragStart(node, ev) {
+ handleDragStart (node, ev) {
console.log('drag start', node);
},
- handleDragEnter(draggingNode, dropNode, ev) {
+ handleDragEnter (draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label);
},
- handleDragLeave(draggingNode, dropNode, ev) {
+ handleDragLeave (draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label);
},
- handleDragOver(draggingNode, dropNode, ev) {
+ handleDragOver (draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label);
},
- handleDragEnd(draggingNode, dropNode, dropType, ev) {
+ handleDragEnd (draggingNode, dropNode, dropType, ev) {
console.log('tree drag end: ', dropNode && dropNode.label, dropType);
},
- handleDrop(draggingNode, dropNode, dropType, ev) {
+ handleDrop (draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType);
},
- handleCheckChange(data, checked, indeterminate) {
+ handleCheckChange (data, checked, indeterminate) {
if (data.type != 2) return;
var std = [];
@@ -482,34 +452,28 @@
}
}
},
- setAddLayers(res) {
-
+ setAddLayers (res) {
if (res.layerType == 'WMS') {
-
var url = geoServerURl;
if (res.url != null && res.url != undefined) {
url = res.url
}
- var width = $("#mapdiv").width() ;
- var height = $("#mapdiv").height() ;
+ //var width = $("#mapdiv").width();
+ //var height = $("#mapdiv").height();
- // var width = 512;
- // var height =512;
-
-
var imageryLayers = window.Viewer.scene.imageryLayers;
let layerWMS = new Cesium.WebMapServiceImageryProvider({
url: url,
layers: res.resource,
parameters: {
- transparent: true,
- format: "image/png",
- srs: "EPSG:4490",
- styles: "",
+ transparent: true,
+ format: "image/png",
+ srs: "EPSG:4490",
+ styles: "",
},
- tileWidth: width,
- tileHeight: height
+ tileWidth: 512,
+ tileHeight: 512
});
layerWMS.name = res.label;
//閫忔槑搴�
@@ -522,7 +486,6 @@
source: new ImageWMS({
crossOrigin: 'anonymous',
url: url,
-
params: {
FORMAT: 'image/png',
VERSION: '1.1.1',
@@ -572,7 +535,7 @@
window.map.addLayer(vectorLayer);
}
},
- async layersStart() {
+ async layersStart () {
const data = await perms_selectLayers();
if (data.code != 200) {
return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
@@ -633,7 +596,7 @@
this.treeData = layer_groups;
this.$refs.tree.setCheckedKeys(std);
},
- async treelayersStart() {
+ async treelayersStart () {
const data = await perms_selectLayers();
if (data.code != 200) {
return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
@@ -696,12 +659,12 @@
}
},
watch: {
- filterText(val) {
+ filterText (val) {
this.$refs.tree.filter(val);
},
},
- mounted() {
+ mounted () {
this.$bus.$on("treeDataCopy", (res) => {
this.$store.state.treeData = this.treeData;
this.$store.state.checkedKeys = this.$refs.tree.getCheckedKeys()
--
Gitblit v1.9.3