<template>
|
<div class="lalala tree-container">
|
<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-drag-start="handleDragStart"
|
@node-drag-enter="handleDragEnter"
|
@node-drag-leave="handleDragLeave"
|
@node-drag-over="handleDragOver"
|
@node-drag-end="handleDragEnd"
|
@node-drop="handleDrop"
|
@node-contextmenu="rightClick"
|
:filter-node-method="filterNode"
|
@check-change="handleCheckChange"
|
:default-checked-keys="handleTreeCheck"
|
draggable
|
:allow-drop="allowDrop"
|
:allow-drag="allowDrag"
|
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>
|
</span>
|
</span>
|
</el-tree>
|
|
<el-card
|
class="box-card"
|
ref="card"
|
:style="{ ...rightClickMenuStyle }"
|
v-show="menuVisible"
|
>
|
<div @click="addSameLevelNode()" v-show="firstLevel">
|
<i class="el-icon-circle-plus-outline"></i> 同级增加
|
</div>
|
<div class="add" @click="addChildNode()">
|
<i class="el-icon-circle-plus-outline"></i> 子级增加
|
</div>
|
<div class="delete" @click="deleteNode()">
|
<i class="el-icon-remove-outline"></i> 删除节点
|
</div>
|
<div class="edit" @click="editNode()">
|
<i class="el-icon-edit"></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-form-item label="服务名称">
|
<el-input v-model="addFormServer.label"></el-input>
|
</el-form-item>
|
<el-form-item label="服务地址">
|
<el-input v-model="addFormServer.value"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="setAddServer">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import ImageWMS from 'ol/source/ImageWMS';
|
import Image from 'ol/layer/Image';
|
export default {
|
name: 'tree',
|
data() {
|
return {
|
eleId: '',
|
isShow: false,
|
currentData: '',
|
currentNode: '',
|
menuVisible: false,
|
firstLevel: false,
|
filterText: '',
|
appendNodetitle: '',
|
maxexpandId: 4,
|
rightClickMenuStyle: {},
|
handleTreeCheck: [],
|
dialogVisible: false,
|
addFormServer: {},
|
layerId: [
|
'm_pipeline',
|
'th_strategic_channel',
|
'bs_project',
|
'm_sitepoint',
|
],
|
treeData: [
|
{
|
id: 1,
|
label: 'LF',
|
isEdit: false,
|
children: [
|
{
|
id: 11,
|
label: '管道中心线',
|
resource: 'LF:m_pipeline',
|
isEdit: false,
|
},
|
{
|
id: 12,
|
label: '战略通道',
|
resource: 'LF:th_strategic_channel',
|
isEdit: false,
|
},
|
{
|
id: 13,
|
label: '项目',
|
resource: 'LF:bs_project',
|
isEdit: false,
|
},
|
{
|
id: 14,
|
label: '站场',
|
resource: 'LF:m_sitepoint',
|
isEdit: false,
|
},
|
],
|
},
|
],
|
defaultProps: {
|
children: 'children',
|
label: 'label',
|
},
|
};
|
},
|
methods: {
|
NodeBlur(Node, data) {
|
if (data.label.length === 0) {
|
this.$message.error('菜单名不可为空！');
|
return false;
|
} else {
|
if (data.isEdit) {
|
this.$set(data, 'isEdit', false);
|
}
|
this.$nextTick(() => {
|
this.$refs['slotTreeInput' + data.id].$refs.input.focus();
|
});
|
}
|
},
|
// 查询
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.label.indexOf(value) !== -1;
|
},
|
|
allowDrop(draggingNode, dropNode, type) {
|
if (dropNode.data.label === '二级 3-1') {
|
return type !== 'inner';
|
} else {
|
return true;
|
}
|
},
|
allowDrag(draggingNode) {
|
return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
|
},
|
// 鼠标右击事件
|
rightClick(event, object, Node, element) {
|
console.log(event, object);
|
this.currentData = object;
|
this.currentNode = Node;
|
if (Node.level === 1) {
|
this.firstLevel = true;
|
} else {
|
this.firstLevel = false;
|
}
|
this.menuVisible = true;
|
|
this.$refs.card.$el.style.left = event.pageX + 20 + 'px';
|
this.$refs.card.$el.style.top = event.pageY + 'px';
|
},
|
// 鼠标左击事件
|
handleLeftclick(data, node) {
|
this.foo();
|
if (node.checked == true) {
|
for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
|
var val_id =
|
window.Viewer.imageryLayers._layers[i].imageryProvider.name;
|
if (val_id == data.label) {
|
const img_layer = window.Viewer.imageryLayers._layers[i];
|
}
|
}
|
}
|
},
|
// 取消鼠标监听事件 菜单栏
|
foo() {
|
this.menuVisible = false;
|
// 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
|
document.removeEventListener('click', this.foo);
|
},
|
// 增加同级节点事件
|
addSameLevelNode() {
|
this.foo();
|
let id = Math.ceil(Math.random() * 100);
|
var data = { id: id, label: '新增节点' };
|
this.$refs.tree.append(data, this.currentNode.parent);
|
},
|
// 增加子级节点事件
|
addChildNode() {
|
this.foo();
|
if (this.currentNode.level >= 2) {
|
this.$message.error('最多只支两级！');
|
return false;
|
}
|
this.appendNodetitle = this.currentData.label;
|
this.dialogVisible = true;
|
|
// let id = Math.ceil(Math.random() * 100);
|
// var data = { id: id, label: '新增节点' };
|
// this.$refs.tree.append(data, this.currentNode);
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
this.addFormServer = {};
|
},
|
setAddServer() {
|
var data = this.addFormServer;
|
data.id = Math.ceil(Math.random() * 100);
|
this.$refs.tree.append(data, this.currentNode);
|
this.handleClose();
|
},
|
// 删除节点
|
deleteNode() {
|
this.foo();
|
if (this.currentNode.level == 1) {
|
this.$message.error('当前级别无法删除!');
|
return false;
|
}
|
this.foo();
|
this.$refs.tree.remove(this.currentNode);
|
},
|
|
// 编辑节点
|
editNode(data) {
|
this.foo();
|
this.currentData = data ? data : this.currentData;
|
if (!this.currentData.isEdit) {
|
this.$set(this.currentData, 'isEdit', true);
|
}
|
// 获取焦点
|
this.$nextTick(() => {
|
this.$refs['slotTreeInput' + this.currentData.id].focus();
|
});
|
},
|
handleDragStart(node, ev) {
|
console.log('drag start', node);
|
},
|
handleDragEnter(draggingNode, dropNode, ev) {
|
console.log('tree drag enter: ', dropNode.label);
|
},
|
handleDragLeave(draggingNode, dropNode, ev) {
|
console.log('tree drag leave: ', dropNode.label);
|
},
|
handleDragOver(draggingNode, dropNode, ev) {
|
console.log('tree drag over: ', dropNode.label);
|
},
|
handleDragEnd(draggingNode, dropNode, dropType, ev) {
|
console.log('tree drag end: ', dropNode && dropNode.label, dropType);
|
},
|
handleDrop(draggingNode, dropNode, dropType, ev) {
|
console.log('tree drop: ', dropNode.label, dropType);
|
},
|
handleCheckChange(data, checked, indeterminate) {
|
if (data.children != null) return;
|
var std = [];
|
var layers_ol = window.map.getAllLayers();
|
for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
|
var val_id =
|
window.Viewer.imageryLayers._layers[i].imageryProvider.name;
|
if (val_id == data.label) {
|
const img_layer = window.Viewer.imageryLayers._layers[i];
|
img_layer.show = checked;
|
}
|
}
|
for (var i in layers_ol) {
|
var layerOl = layers_ol[i];
|
if (layerOl.values_.name == data.label) {
|
layerOl.setVisible(checked); //显示图层
|
}
|
}
|
},
|
setAddLayers(res) {
|
let layerWMS = new Cesium.WebMapServiceImageryProvider({
|
url: geoServerURl,
|
layers: res.resource,
|
parameters: {
|
transparent: true,
|
format: 'image/png',
|
},
|
});
|
layerWMS.name = res.label;
|
window.Viewer.imageryLayers.addImageryProvider(layerWMS);
|
|
var layer2 = new Image({
|
name: res.label,
|
source: new ImageWMS({
|
crossOrigin: 'anonymous',
|
url: geoServerURl,
|
|
params: {
|
FORMAT: 'image/png',
|
VERSION: '1.1.1',
|
LAYERS: res.resource,
|
},
|
}),
|
});
|
window.map.addLayer(layer2);
|
},
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
},
|
},
|
mounted() {
|
var std = [];
|
var val = this.treeData[0].children;
|
if (this.$store.state.showAllLayers == true) {
|
for (var j = 0; j < val.length; j++) {
|
std.push(val[j].id);
|
this.setAddLayers(val[j]);
|
}
|
|
this.$store.state.showAllLayers = false;
|
} else {
|
for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
|
var val_id = window.Viewer.imageryLayers._layers[i];
|
if (val_id.show == true) {
|
for (var j = 0; j < val.length; j++) {
|
if (val_id.imageryProvider.name == val[j].label) {
|
std.push(val[j].id);
|
}
|
}
|
}
|
}
|
}
|
|
this.$refs.tree.setCheckedKeys(std);
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
/* 点击节点时的选中颜色 */
|
.tree-container /deep/.el-tree-node.is-current > .el-tree-node__content {
|
color: #409eff !important;
|
}
|
|
.tree-container /deep/ .el-tree-node__expand-icon.expanded {
|
-webkit-transform: rotate(90deg);
|
transform: rotate(90deg);
|
}
|
|
.tree-container /deep/ .el-icon-caret-right:before {
|
content: '\e791';
|
font-size: 18px;
|
}
|
|
.tree-container /deep/ .el-tree-node__expand-icon {
|
margin-left: 15px;
|
padding: 0px;
|
}
|
|
.tree-container /deep/ .el-tree-node__expand-icon.is-leaf {
|
margin-left: 0px;
|
}
|
|
.tree-container /deep/ .el-tree-node {
|
position: relative;
|
padding-left: 16px;
|
// text-indent: 16px;
|
}
|
|
.tree-container /deep/ .el-tree-node__children {
|
padding-left: 16px;
|
}
|
|
.tree-container /deep/ .el-tree > .el-tree-node:before {
|
border-left: none;
|
}
|
|
.tree-container /deep/ .el-tree > .el-tree-node:after {
|
border-top: none;
|
}
|
.tree-container /deep/ .el-tree > .el-tree-node:before {
|
border-left: none;
|
}
|
|
.tree-container /deep/ .el-tree > .el-tree-node:after {
|
border-top: none;
|
}
|
|
.tree-container /deep/ .el-tree-node:before {
|
content: '';
|
left: 10px;
|
position: absolute;
|
right: auto;
|
border-width: 1px;
|
}
|
|
.tree-container /deep/ .el-tree-node:after {
|
content: '';
|
left: 10px;
|
position: absolute;
|
right: auto;
|
border-width: 1px;
|
}
|
|
.tree-container /deep/ .el-tree-node:before {
|
border-left: 1px dashed #ccc;
|
bottom: 0px;
|
height: 100%;
|
top: -19px;
|
width: 1px;
|
}
|
|
.tree-container /deep/ .el-tree-node:after {
|
border-top: 1px dashed #ccc;
|
height: 25px;
|
top: 20px;
|
width: 20px;
|
}
|
|
.el-tree-node :last-child:before {
|
height: 40px;
|
}
|
|
.tree-container {
|
margin: 10px;
|
}
|
.tree-container /deep/ .el-tree .el-tree-node {
|
position: relative;
|
}
|
.tree-container /deep/ .el-tree-node .el-tree-node__content {
|
height: 34px;
|
padding-left: 0px !important;
|
border: none;
|
}
|
.tree-container /deep/ .el-tree-node .el-tree-node__content::before {
|
border-left: 1px dashed #ccc;
|
height: 100%;
|
top: 0;
|
width: 1px;
|
margin-left: 1px;
|
margin-top: 0px;
|
z-index: 8;
|
}
|
.tree-container
|
/deep/
|
.el-tree-node
|
.el-tree-node__children
|
.el-tree-node__content::before {
|
border-left: 0px dashed #ccc;
|
height: 100%;
|
top: 0;
|
width: 1px;
|
margin-left: 1px;
|
margin-top: 0px;
|
z-index: 8;
|
}
|
|
.tree-container /deep/ .el-tree-node .el-tree-node__content::after {
|
border-top: 1px dashed #ccc;
|
height: 1px;
|
top: 18px;
|
width: 13px;
|
margin-left: 1px;
|
z-index: 8;
|
}
|
|
.tree-container
|
/deep/
|
.el-tree-node
|
.el-tree-node__children
|
.el-tree-node__content::after {
|
border-top: 0px dashed #ccc;
|
}
|
|
.tree-container .el-tree-node .el-tree-node__content::before,
|
.tree-container .el-tree-node .el-tree-node__content::after {
|
content: '';
|
position: absolute;
|
right: auto;
|
}
|
/deep/.el-table__placeholder {
|
padding-left: 8px;
|
}
|
/deep/.el-card__body {
|
padding: 10px !important;
|
> div {
|
padding-bottom: 10px;
|
border-bottom: 1px solid #ccc;
|
&:hover {
|
color: #409eff;
|
}
|
}
|
}
|
/*.lalala {*/
|
/*position: relative;*/
|
/*}*/
|
.text {
|
font-size: 14px;
|
}
|
.el-tree {
|
width: 100%;
|
margin-top: 10px;
|
}
|
.search {
|
width: 100%;
|
}
|
|
.item {
|
padding: 18px 0;
|
}
|
|
.add {
|
cursor: pointer;
|
margin-top: 10px;
|
}
|
|
.delete {
|
margin: 10px 0;
|
cursor: pointer;
|
}
|
|
.edit {
|
margin-bottom: 10px;
|
cursor: pointer;
|
}
|
|
.search {
|
cursor: pointer;
|
}
|
|
.box-card {
|
position: fixed;
|
display: block;
|
z-index: 10000;
|
|
background-color: #fff;
|
padding: 10px 0;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
/deep/ .el-dialog {
|
background: rgba(0, 0, 0, 0.6);
|
}
|
/deep/.el-range-editor.is-active,
|
.el-range-editor.is-active:hover,
|
.el-select .el-input.is-focus .el-input__inner {
|
border: 1px solid;
|
}
|
/deep/.el-dialog__title {
|
color: white;
|
}
|
/deep/ .el-select .el-input__inner {
|
border-color: #fff !important;
|
}
|
/deep/.el-cascader .el-input__inner {
|
border-color: #fff !important;
|
}
|
// 设置输入框的背景色、字体颜色、边框属性设置；
|
/deep/.el-input__inner {
|
background-color: transparent !important ;
|
color: #fff !important;
|
border: 1px solid !important;
|
}
|
</style>
|
