| | |
|---|
| | | layers: {}, |
|---|
| | | startup: function () { |
|---|
| | | // 暴露在外的接口 |
|---|
| | | this.begin(); |
|---|
| | | // this.begin(this.data); |
|---|
| | | var that = this; |
|---|
| | | this.getData(); |
|---|
| | | |
|---|
| | | $('.left-navigation-bar-but').click(() => { |
|---|
| | | this.changeImg = !this.changeImg; |
|---|
| | | if (this.changeImg) { |
|---|
| | | $('.l-n-b-b-img').attr("src", "../../images/addL/xzuo.png");//打开 |
|---|
| | | $('.jimu-widget-LeftNavigationBar').css({ 'left': '0px' }); |
|---|
| | | $('.jimu-widget-instructions').css({ 'left': '260px' }); |
|---|
| | | } else { |
|---|
| | | $('.l-n-b-b-img').attr("src", "../../images/addL/xyou.png");//关闭 |
|---|
| | | $('.jimu-widget-LeftNavigationBar').css({ 'left': '-250px' }); |
|---|
| | | $('.jimu-widget-instructions').css({ 'left': '10px' }); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | $('.jimu-widget-instructions').css({ 'left': '260px' }); |
|---|
| | | $('#left-navigation-bar-main-search').click(() => {//搜索事件 |
|---|
| | | var val = $('#left-navigation-bar-main-input').val(); |
|---|
| | | if (val) { |
|---|
| | | var clearOur = () => { |
|---|
| | | let dom = $(`[data-id]`); |
|---|
| | | // console.log(dom); |
|---|
| | | dom.removeClass('layui-tree-spread'); |
|---|
| | | let domDiv = dom.find('.layui-tree-pack'); |
|---|
| | | domDiv.css({ 'display': 'none' }) |
|---|
| | | } |
|---|
| | | , a |
|---|
| | | , useit = (d) => { |
|---|
| | | for (var k in d) { |
|---|
| | | if (d[k].who == 'father') { |
|---|
| | | that.father = d[k].id; |
|---|
| | | } |
|---|
| | | if (d[k].title.indexOf(val) != -1) {//选中id |
|---|
| | | a = '' + d[k].id; |
|---|
| | | // var b = a.split(''); |
|---|
| | | // for (var i in b) { |
|---|
| | | let id = that.father;//选中项的所有父级id |
|---|
| | | // // console.log(id) |
|---|
| | | let dom = $(`[data-id='${id}']`); |
|---|
| | | dom.addClass('layui-tree-spread'); |
|---|
| | | let domDiv = dom.find('.layui-tree-pack').eq(0); |
|---|
| | | domDiv.css({ 'display': 'block' }) |
|---|
| | | // } |
|---|
| | | console.log(a, that.father) |
|---|
| | | } |
|---|
| | | if (d[k].children) { |
|---|
| | | useit(d[k].children); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | clearOur(); |
|---|
| | | useit(that.data); |
|---|
| | | } else { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | closeToolBox: function (item) { |
|---|
| | |
|---|
| | | resize: function () { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | begin: function () { |
|---|
| | | getData: function () { |
|---|
| | | var url = 'http://171.34.76.171:8880/zhsd-wetResource/GeoData/queryGeoDataTree' |
|---|
| | | , that = this; |
|---|
| | | |
|---|
| | | axios.get(url, { |
|---|
| | | headers: { |
|---|
| | | "token": 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjI4Nzc0MTIsImV4cCI6MTYyNTQ2OTQxMn0.f2GhYYINfYgSbyKTqqGluyU3rdy_TT8mf15iLILS1l2EUSye_h9O6CSUVWpLYMrdrjzqDWwrbROxfhy-8ly0uA' |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.code == '200') { |
|---|
| | | that.changeData(res.data.data);//重写数据 |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | changeData: function (val) {//重写数据 |
|---|
| | | var data = [], |
|---|
| | | i = 1, |
|---|
| | | inits = (d, childData) => { |
|---|
| | | var b = childData || []; |
|---|
| | | for (var k in d) { |
|---|
| | | |
|---|
| | | let a = { |
|---|
| | | title: d[k].name, |
|---|
| | | // id: d[k].id, |
|---|
| | | // field: String(d[k].id), |
|---|
| | | id: i, |
|---|
| | | field: String(i) |
|---|
| | | } |
|---|
| | | b.push(a); |
|---|
| | | i++; |
|---|
| | | if (d[k].children.length != 0) { |
|---|
| | | b[k].children = []; |
|---|
| | | b[k].who = 'father'; |
|---|
| | | inits(d[k].children, b[k].children) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }; |
|---|
| | | inits(val, data); |
|---|
| | | // console.log(data) |
|---|
| | | |
|---|
| | | // var i = 0, |
|---|
| | | // ccinit = (a) => { |
|---|
| | | // i++; |
|---|
| | | // for (let k in a) { |
|---|
| | | // if (a[k].children) { |
|---|
| | | // a[k].who = i; |
|---|
| | | // // console.log(a[k].id) |
|---|
| | | // ccinit(a[k].children) |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // }; |
|---|
| | | // ccinit(this.data); |
|---|
| | | // console.log(this.data) |
|---|
| | | this.data = data; |
|---|
| | | this.begin(this.data); |
|---|
| | | }, |
|---|
| | | begin: function (data) { |
|---|
| | | var that = this; |
|---|
| | | $('.left-navigation-bar-but').click(() => { |
|---|
| | | that.changeImg = !that.changeImg; |
|---|
| | | console.log(that.changeImg) |
|---|
| | | |
|---|
| | | layui.use(function () { |
|---|
| | | var tree = layui.tree |
|---|
| | | , layer = layui.layer |
|---|
| | | , util = layui.util |
|---|
| | | , $ = layui.$; |
|---|
| | | tree.render({ |
|---|
| | | elem: '#test1' //默认是点击节点可进行收缩 |
|---|
| | | , data: data |
|---|
| | | , id: 'demoId1' |
|---|
| | | , showCheckbox: true //是否显示复选框 |
|---|
| | | , click: function (obj) { |
|---|
| | | var data = obj.data; //获取当前点击的节点数据 |
|---|
| | | // layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data)); |
|---|
| | | console.log(obj); |
|---|
| | | // 树点击三角形样式修改 |
|---|
| | | // var ot = $('.layui-tree-iconArrow'); |
|---|
| | | // ot.removeClass("left-navigation-bar-main-down"); |
|---|
| | | // var jt = $(`[data-id='${data.id}']`).find('.layui-tree-iconArrow').eq(0); |
|---|
| | | // jt.addClass('left-navigation-bar-main-down'); |
|---|
| | | // 树点击样式修改 |
|---|
| | | // var ot = $('.layui-tree-entry'); |
|---|
| | | // ot.removeClass("left-navigation-bar-main-current"); |
|---|
| | | // var jh = $(`[data-id='${data.id}']`).find('.layui-tree-entry').eq(0); |
|---|
| | | // jh.addClass('left-navigation-bar-main-current'); |
|---|
| | | } |
|---|
| | | , showLine: false //是否开启连接线 |
|---|
| | | , oncheck: function (obj) { |
|---|
| | | console.log(obj.data.id, '--', obj.checked); //得到当前点击的节点数据 |
|---|
| | | // console.log(obj.checked); //得到当前节点的展开状态：open、close、normal |
|---|
| | | // console.log(obj.elem); //得到当前节点元素 |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | //按钮事件 |
|---|
| | | 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, 114]); //勾选指定节点 |
|---|
| | | } |
|---|
| | | , reload: function () { |
|---|
| | | //重载实例 |
|---|
| | | tree.reload('demoId1', { |
|---|
| | | |
|---|
| | | }); |
|---|
| | | |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | changeImg: true, |
|---|
| | | father: [], |
|---|
| | | 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: '北深渊4' |
|---|
| | | , 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: '北深渊5' |
|---|
| | | , 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: '北深渊2' |
|---|
| | | , 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: '北深渊3' |
|---|
| | | , 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: '北深渊1' |
|---|
| | | , 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 |
|---|
