From c9f87486592ffeedf218928456d72ab7511ae1bf Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 04 Jun 2021 11:41:11 +0800
Subject: [PATCH] 左侧导航
---
widgets/LeftNavigationBar/Widget.js | 342 ++++++++++++++++++++++++++++++++++++++++++
widgets/LeftNavigationBar/css/style.css | 89 ++++++++++-
widgets/visualAngle/Widget.js | 20 +
widgets/LeftNavigationBar/Widget.html | 9
images/addL/sousuo.png | 0
5 files changed, 439 insertions(+), 21 deletions(-)
diff --git a/images/addL/sousuo.png b/images/addL/sousuo.png
new file mode 100644
index 0000000..3457ff6
--- /dev/null
+++ b/images/addL/sousuo.png
Binary files differ
diff --git a/widgets/LeftNavigationBar/Widget.html b/widgets/LeftNavigationBar/Widget.html
index 6053e41..f94f27d 100644
--- a/widgets/LeftNavigationBar/Widget.html
+++ b/widgets/LeftNavigationBar/Widget.html
@@ -1,8 +1,13 @@
<div>
<div class="left-navigation-bar-but">
- <img src="../../images/addL/xzuo.png" alt="">
+ <img class="l-n-b-b-img" src="../../images/addL/xzuo.png" alt="">
</div>
<div class="left-navigation-bar-main">
-
+ <!-- <ul id="treeDemo" class="ztree"></ul> -->
+ <div class="l-n-b-m-search">
+ <input id="left-navigation-bar-main-input" type="search" placeholder="请输入图层名称" />
+ <img id="left-navigation-bar-main-search" src="../../images/addL/sousuo.png" alt="">
+ </div>
+ <div id="test1" class="demo-tree demo-tree-box"></div>
</div>
</div>
\ No newline at end of file
diff --git a/widgets/LeftNavigationBar/Widget.js b/widgets/LeftNavigationBar/Widget.js
index 4ca19c8..87a0bf3 100644
--- a/widgets/LeftNavigationBar/Widget.js
+++ b/widgets/LeftNavigationBar/Widget.js
@@ -29,7 +29,16 @@
layers: {},
startup: function () {
// 暴露在外的接口
- this.begin();
+ this.begin(this.data);
+ $('#left-navigation-bar-main-search').click(()=>{
+ var val = $('#left-navigation-bar-main-input').val();
+ if(val){
+ console.log(val);
+
+ }else{
+
+ }
+ })
},
closeToolBox: function (item) {
@@ -54,14 +63,341 @@
resize: function () {
},
- begin: function () {
+ begin: function (data) {
var that = this;
$('.left-navigation-bar-but').click(() => {
that.changeImg = !that.changeImg;
- console.log(that.changeImg)
+ if (that.changeImg) {
+ $('.l-n-b-b-img').attr("src", "../../images/addL/xzuo.png");
+ } else {
+ $('.l-n-b-b-img').attr("src", "../../images/addL/xyou.png");
+ }
})
+
+ layui.use(function () {
+ var tree = layui.tree
+ , layer = layui.layer
+ , util = layui.util;
+ tree.render({
+ elem: '#test1' //默认是点击节点可进行收缩
+ , data: data
+ , showCheckbox: true //是否显示复选框
+ , click: function (obj) {
+ var data = obj.data; //获取当前点击的节点数据
+ layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
+ }
+ , showLine: false //是否开启连接线
+ });
+
+ // util.event('lay-demo', {
+ // getChecked: function (othis) {
+ // var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
+
+ // layer.alert(JSON.stringify(checkedData), { shade: 0 });
+ // console.log(checkedData);
+ // }
+ // , setChecked: function () {
+ // tree.setChecked('demoId1', [12, 16]); //勾选指定节点
+ // }
+ // , reload: function () {
+ // //重载实例
+ // tree.reload('demoId1', {
+
+ // });
+
+ // }
+ // });
+ })
+
},
changeImg: true,
+ data: [{
+ title: '采集站点'
+ , id: 1
+ , field: '1'
+ // , checked: true
+ , spread: true
+ , children: [{
+ title: '南矶山保护区'
+ , id: 11
+ , field: '1-1'
+ // , checked: true
+ , spread: true
+ , children: [{
+ title: '北深渊'
+ , id: 111
+ , field: '1-1-1'
+ , checked: true
+ }, {
+ title: '东湖'
+ , id: 112
+ , field: '1-1-2'
+ , checked: true
+ }, {
+ title: '矶山'
+ , id: 113
+ , field: '1-1-3'
+ , checked: true
+ }, {
+ title: '打钟山'
+ , id: 114
+ , field: '1-1-4'
+ , checked: false
+ // , spread: true
+ }]
+ }, {
+ title: '五星白鹤保护区'
+ , id: 12
+ , field: '1-2'
+ , checked: false
+ , spread: false
+ , children: [{
+ title: '北深渊'
+ , id: 121
+ , field: '1-2-1'
+ }, {
+ title: '东湖'
+ , id: 122
+ , field: '1-2-2'
+ }, {
+ title: '矶山'
+ , id: 123
+ , field: '1-2-3'
+ }, {
+ title: '打钟山'
+ , id: 124
+ , field: '1-2-4'
+ }]
+ }, {
+ title: '都昌候鸟省级自然保护区'
+ , id: 13
+ , field: '1-3'
+ , checked: false
+ , spread: false
+ , children: [{
+ title: '北深渊'
+ , id: 131
+ , field: '1-3-1'
+ }, {
+ title: '东湖'
+ , id: 132
+ , field: '1-3-2'
+ }, {
+ title: '矶山'
+ , id: 133
+ , field: '1-3-3'
+ }, {
+ title: '打钟山'
+ , id: 134
+ , field: '1-3-4'
+ }]
+ }, {
+ title: '都昌北鄱阳湿地公园'
+ , id: 14
+ , field: '1-4'
+ , checked: false
+ , spread: false
+ , children: [{
+ title: '北深渊'
+ , id: 141
+ , field: '1-4-1'
+ }, {
+ title: '东湖'
+ , id: 142
+ , field: '1-4-2'
+ }, {
+ title: '矶山'
+ , id: 143
+ , field: '1-4-3'
+ }, {
+ title: '打钟山'
+ , id: 144
+ , field: '1-4-4'
+ }]
+ }],
+ }, {
+ title: '检测站点'
+ , id: 2
+ , field: '2'
+ , checked: true
+ , spread: false
+ , children: [{
+ title: '南矶山保护区'
+ , id: 21
+ , field: '2-1'
+ , children: [{
+ title: '北深渊'
+ , id: 211
+ , field: '2-1-1'
+ }, {
+ title: '东湖'
+ , id: 212
+ , field: '2-1-2'
+ }, {
+ title: '矶山'
+ , id: 213
+ , field: '2-1-3'
+ }, {
+ title: '打钟山'
+ , id: 214
+ , field: '2-1-4'
+ }]
+ }, {
+ title: '五星白鹤保护区'
+ , id: 22
+ , field: '2-2'
+ , children: [{
+ title: '北深渊'
+ , id: 221
+ , field: '2-2-1'
+ }, {
+ title: '东湖'
+ , id: 222
+ , field: '2-2-2'
+ }, {
+ title: '矶山'
+ , id: 223
+ , field: '2-2-3'
+ }, {
+ title: '打钟山'
+ , id: 224
+ , field: '2-2-4'
+ }]
+ }, {
+ title: '都昌候鸟省级自然保护区'
+ , id: 23
+ , field: '2-3'
+ , children: [{
+ title: '北深渊'
+ , id: 231
+ , field: '2-3-1'
+ }, {
+ title: '东湖'
+ , id: 232
+ , field: '2-3-2'
+ }, {
+ title: '矶山'
+ , id: 233
+ , field: '2-3-3'
+ }, {
+ title: '打钟山'
+ , id: 234
+ , field: '2-3-4'
+ }]
+ }, {
+ title: '都昌北鄱阳湿地公园'
+ , id: 24
+ , field: '2-4'
+ , children: [{
+ title: '北深渊'
+ , id: 241
+ , field: '2-4-1'
+ }, {
+ title: '东湖'
+ , id: 242
+ , field: '2-4-2'
+ }, {
+ title: '矶山'
+ , id: 243
+ , field: '2-4-3'
+ }, {
+ title: '打钟山'
+ , id: 244
+ , field: '2-4-4'
+ }]
+ }],
+ }, {
+ title: '监控站点'
+ , id: 3
+ , field: '3'
+ , checked: true
+ , spread: false
+ , children: [{
+ title: '南矶山保护区'
+ , id: 31
+ , field: '3-1'
+ , children: [{
+ title: '北深渊'
+ , id: 311
+ , field: '3-1-1'
+ }, {
+ title: '东湖'
+ , id: 312
+ , field: '3-1-2'
+ }, {
+ title: '矶山'
+ , id: 313
+ , field: '3-1-3'
+ }, {
+ title: '打钟山'
+ , id: 314
+ , field: '3-1-4'
+ }]
+ }, {
+ title: '五星白鹤保护区'
+ , id: 32
+ , field: '3-2'
+ , children: [{
+ title: '北深渊'
+ , id: 321
+ , field: '3-2-1'
+ }, {
+ title: '东湖'
+ , id: 322
+ , field: '3-2-2'
+ }, {
+ title: '矶山'
+ , id: 323
+ , field: '3-2-3'
+ }, {
+ title: '打钟山'
+ , id: 324
+ , field: '3-2-4'
+ }]
+ }, {
+ title: '都昌候鸟省级自然保护区'
+ , id: 33
+ , field: '3-3'
+ , children: [{
+ title: '北深渊'
+ , id: 331
+ , field: '3-3-1'
+ }, {
+ title: '东湖'
+ , id: 332
+ , field: '3-3-2'
+ }, {
+ title: '矶山'
+ , id: 333
+ , field: '3-3-3'
+ }, {
+ title: '打钟山'
+ , id: 334
+ , field: '3-3-4'
+ }]
+ }, {
+ title: '都昌北鄱阳湿地公园'
+ , id: 34
+ , field: '3-4'
+ , children: [{
+ title: '北深渊'
+ , id: 341
+ , field: '3-4-1'
+ }, {
+ title: '东湖'
+ , id: 342
+ , field: '3-4-2'
+ }, {
+ title: '矶山'
+ , id: 343
+ , field: '3-4-3'
+ }, {
+ title: '打钟山'
+ , id: 344
+ , field: '3-4-4'
+ }]
+ }],
+ }],
destroy: function () {
//销毁的时候触发
//todo
diff --git a/widgets/LeftNavigationBar/css/style.css b/widgets/LeftNavigationBar/css/style.css
index 54e7e57..16a17a8 100644
--- a/widgets/LeftNavigationBar/css/style.css
+++ b/widgets/LeftNavigationBar/css/style.css
@@ -2,14 +2,15 @@
position: absolute !important;
/* font-size: 14px; */
height: calc(100% - 25px) !important;
- width: 220px !important;
+ /* height: calc(100%) !important; */
+ width: 250px !important;
right: auto !important;
bottom: auto !important;
left: 0 !important;
top: 0 !important;
/* 240px */
background: rgba(255, 255, 255, 1);
- color: #fff;
+ color: #000;
/* border : 1px solid rgba(0, 0, 0, 0.3); */
border-radius: 6px 6px 6px 6px;
/* text-align : center; */
@@ -17,12 +18,13 @@
z-index: 16 !important;
box-sizing: border-box;
/* padding: 0 20px 0 20px!important; */
- display: flex;
+ /* display: flex;
align-items: center;
- justify-content: center;
+ justify-content: center; */
+ box-shadow: 5px 5px 13px -10px rgba(0, 0, 0, .5);
}
-.jimu-widget-LeftNavigationBar .left-navigation-bar-but{
+.jimu-widget-LeftNavigationBar .left-navigation-bar-but {
width: 23px;
height: 60px;
/* border: 1px solid springgreen; */
@@ -30,12 +32,81 @@
display: flex;
align-items: center;
justify-content: center;
- position: absolute;
- left: 220px;
+ position: relative;
+ /* left: calc((100% + 23px) / 2); */
+ left: calc(100% - 1px);
+ top: calc(50%);
background-color: #fff;
- box-shadow: 2px 2px 15px -5px rgba(0,0,0,.5);
+ box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, .5);
cursor: pointer;
+ float: left;
+ z-index: 17 !important;
}
-.jimu-widget-LeftNavigationBar .left-navigation-bar-but img{
+
+.jimu-widget-LeftNavigationBar .left-navigation-bar-but img {
width: 20px;
+}
+
+.jimu-widget-LeftNavigationBar .left-navigation-bar-main {
+ position: relative;
+ top: -50px;
+ width: 100%;
+ height: 100%;
+ padding: 10px;
+ /* border: 1px saddlebrown solid; */
+}
+
+.jimu-widget-LeftNavigationBar #test1 {
+ margin-top: 20px;
+}
+
+.jimu-widget-LeftNavigationBar .left-navigation-bar-main .l-n-b-m-search {
+ width: 100%;
+ height: 40px;
+ /* padding: 10px; */
+ border: 1px rgba(0, 0, 0, .2) solid;
+ border-radius: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.jimu-widget-LeftNavigationBar .left-navigation-bar-main .l-n-b-m-search input {
+ border: none;
+ width: calc(90% - 50px);
+ height: 30px;
+}
+
+.jimu-widget-LeftNavigationBar .left-navigation-bar-main .l-n-b-m-search img {
+ width: 35px;
+ cursor: pointer;
+ z-index: 18;
+}
+
+.jimu-widget-LeftNavigationBar .left-navigation-bar-main .l-n-b-m-search input::-webkit-input-placeholder {
+ color: #000;
+ font-size: 14px;
+}
+
+.jimu-widget-LeftNavigationBar .left-navigation-bar-main .l-n-b-m-search input::-moz-placeholder {
+ /* Mozilla Firefox 19+ */
+ color: #000;
+ font-size: 14px;
+}
+
+.jimu-widget-LeftNavigationBar .left-navigation-bar-main .l-n-b-m-search input:-moz-placeholder {
+ /* Mozilla Firefox 4 to 18 */
+ color: #000;
+ font-size: 14px;
+}
+
+.jimu-widget-LeftNavigationBar .left-navigation-bar-main .l-n-b-m-search input::-ms-input-placeholder {
+ color: #000;
+ font-size: 14px;
+}
+.jimu-widget-LeftNavigationBar .left-navigation-bar-main .layui-tree-entry{
+ height: auto !important;
+}
+.layui-tree-iconArrow:after{
+ border-color: #c0c4cc transparent transparent transparent !important;
}
\ No newline at end of file
diff --git a/widgets/visualAngle/Widget.js b/widgets/visualAngle/Widget.js
index 8e8b418..204fdf3 100644
--- a/widgets/visualAngle/Widget.js
+++ b/widgets/visualAngle/Widget.js
@@ -31,18 +31,18 @@
// 暴露在外的接口
var that = this;
$(".v-a-One").click(function () {
- that.clearColor();
+ that.clearColor('one');
$(".v-a-One").css({ 'backgroundColor': '#3F9DFD', 'color': '#fff' });
$(this).find('.v-a-o-img').attr("src", "../../../images/addL/wtiyan.png");
// .attr("src", src_value);
})
$(".v-a-Two").click(function () {
- that.clearColor();
+ that.clearColor('two');
$(".v-a-Two").css({ 'backgroundColor': '#3F9DFD', 'color': '#fff' });
$(this).find('.v-a-o-img').attr("src", "../../../images/addL/wquanqiu.png");
})
$(".v-a-Three").click(function () {
- that.clearColor();
+ that.clearColor('three');
$(".v-a-Three").css({ 'backgroundColor': '#3F9DFD', 'color': '#fff' });
$(this).find('.v-a-o-img').attr("src", "../../../images/addL/wshijiao.png");
})
@@ -84,11 +84,17 @@
resize: function () {
},
- clearColor: function () {
+ clearColor: function (val) {
$(".visualAngleOnce").css({ 'backgroundColor': '#fff', 'color': '#000' });
- $('.v-a-One').find('.v-a-o-img').attr("src", "../../../images/addL/btiyan.png")
- $('.v-a-Two').find('.v-a-o-img').attr("src", "../../../images/addL/bquanqiu.png")
- $('.v-a-Three').find('.v-a-o-img').attr("src", "../../../images/addL/bshijiao.png")
+ if (val != 'one') {
+ $('.v-a-One').find('.v-a-o-img').attr("src", "../../../images/addL/btiyan.png")
+ }
+ if (val != 'two') {
+ $('.v-a-Two').find('.v-a-o-img').attr("src", "../../../images/addL/bquanqiu.png")
+ }
+ if (val != 'three') {
+ $('.v-a-Three').find('.v-a-o-img').attr("src", "../../../images/addL/bshijiao.png")
+ }
},
destroy: function () {
--
Gitblit v1.9.3