左侧导航

liuyg

2021-06-04 c9f87486592ffeedf218928456d72ab7511ae1bf

左侧导航

 images/addL/sousuo.png

 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>

 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

 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;
}

 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 () {