From df1c052d1f0d368cb78ebb1831980745bca11edc Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 10 Jun 2021 11:56:18 +0800
Subject: [PATCH] 数据图表的查询渲染
---
widgets/LeftNavigationBar/Widget.js | 749 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 443 insertions(+), 306 deletions(-)
diff --git a/widgets/LeftNavigationBar/Widget.js b/widgets/LeftNavigationBar/Widget.js
index 59f22f3..c4a3288 100644
--- a/widgets/LeftNavigationBar/Widget.js
+++ b/widgets/LeftNavigationBar/Widget.js
@@ -3,16 +3,16 @@
// 模块描述:显示坐标
///////////////////////////////////////////////////////////////////////////
define([
- 'dojo/_base/declare',
- 'dojo/_base/lang',
- 'dojo/_base/array',
- 'dojo/_base/html',
- 'dojo/topic',
- 'jimu/BaseWidget',
- 'jimu/utils',
- 'jimu/css!libs/zTree_v3/css/zTreeStyle/zTreeStyle.css',
- 'libs/zTree_v3/js/jquery.ztree.all'
-],
+ 'dojo/_base/declare',
+ 'dojo/_base/lang',
+ 'dojo/_base/array',
+ 'dojo/_base/html',
+ 'dojo/topic',
+ 'jimu/BaseWidget',
+ 'jimu/utils',
+ 'jimu/css!libs/zTree_v3/css/zTreeStyle/zTreeStyle.css',
+ 'libs/zTree_v3/js/jquery.ztree.all'
+ ],
function (declare,
lang,
array,
@@ -29,84 +29,81 @@
layers: {},
startup: function () {
// 暴露在外的接口
- this.begin(this.data);
+ // 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' });
+ $('.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' });
+ $('.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' });
-
- var dictionaries = []//转数据
- , inits = (d, useData) => {
- var b = useData || [];
- for (var k in d) {
- let val = {
- title: d[k].title,
- id: d[k].id
- }
- b.push(val);
- if (d[k].children) {
- b[k].child = [];
- inits(d[k].children, b[k].child)
- }
- }
- };
- inits(this.data, dictionaries);
-
-
- $('#left-navigation-bar-main-search').click(() => {//搜索事件
+ $('.jimu-widget-instructions').css({
+ 'left': '260px'
+ });
+ $('#left-navigation-bar-main-search').click(() => { //搜索事件
var val = $('#left-navigation-bar-main-input').val();
if (val) {
- var ids = ''
- , clearOur = () => {
+ 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' })
- }
- , useit = (d) => {
- var d = d;
-
+ domDiv.css({
+ 'display': 'none'
+ })
+ },
+ a, useit = (d) => {
for (var k in d) {
- if (d[k].title.indexOf(val) != -1) {//选中id
- let a = '' + d[k].id,
- b = a.split('');
- for (var i in b) {
- let id = a.slice(0, i);//选中项的所有父级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' })
- }
+ if (d[k].who == 'father') {
+ that.father = d[k].id;
}
- if (d[k].child) {
- useit(d[k].child);
+ 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(dictionaries);
+ useit(that.data);
} else {
}
})
},
- closeToolBox: function (item) {
- },
+ closeToolBox: function (item) {},
onOpen: function () {
//面板打开的时候触发 （when open this panel trigger）
@@ -127,39 +124,174 @@
resize: function () {
},
+ getData: function () {
+ var url = 'http://171.34.76.171:8880/pyh-wetResource/GeoData/queryGeoDataTree',
+ that = this;
+
+ axios.get(url, {
+ headers: {
+ "token": 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjI4Nzc0MTIsImV4cCI6MTYyNTQ2OTQxMn0.f2GhYYINfYgSbyKTqqGluyU3rdy_TT8mf15iLILS1l2EUSye_h9O6CSUVWpLYMrdrjzqDWwrbROxfhy-8ly0uA'
+ }
+ }).then((res) => {
+ if (res.data.code == '200') {
+ // console.log(res, 'open', 898998)
+ 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),
+ src: d[k].serviceUrl,
+ id: d[k].id,
+ serviceName: d[k].serviceName
+ }
+ 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;
+ var a = null;
+
layui.use(function () {
- var tree = layui.tree
- , layer = layui.layer
- , util = layui.util
- , $ = layui.$;
+ 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; //获取当前点击的节点数据
+ elem: '#left-tree-list' //默认是点击节点可进行收缩
+ ,
+ data: data,
+ id: 'demoId1',
+ showCheckbox: true //是否显示复选框
+ ,
+ click: function (obj) {
+ var data = obj.data; //获取当前点击的节点数据
// layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
- // console.log(obj);
+ 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-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); //得到当前点击的节点数据
+ },
+ showLine: false //是否开启连接线
+ ,
+ oncheck: function (obj) {
+ console.log(obj.data.id, '--', obj.checked, obj); //得到当前点击的节点数据
// console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
// console.log(obj.elem); //得到当前节点元素
+
+ if (obj.data.children && obj.data.children.length > 0) {
+
+ // 点击的父
+
+
+
+
+ if (obj.checked == true) {
+
+ obj.data.children.forEach(item => {
+ $.ajax({
+ url: item.src + '/maps.json',
+ type: 'get',
+ dataType: 'JSON',
+ success: function (res) {
+
+ that[item.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+ url: res[0].path,
+ }));
+
+ }
+ })
+ });
+
+
+
+ } else {
+ obj.data.children.forEach(item => {
+ if (that[item.id]) that.map.imageryLayers.remove(that[item.id]);
+ });
+
+
+
+ }
+
+
+ } else {
+
+
+ // 点击的子
+
+ if (obj.checked == true) {
+
+ $.ajax({
+ url: obj.data.src + '/maps.json',
+ type: 'get',
+ dataType: 'JSON',
+ success: function (res) {
+ console.log(res, 123)
+
+ that[obj.data.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+ url: res[0].path,
+ }));
+
+ }
+ })
+
+
+ } else {
+
+
+
+ that.map.imageryLayers.remove(that[obj.data.id]);
+
+ }
+
+
+ }
}
});
@@ -168,13 +300,15 @@
getChecked: function (othis) {
var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
- layer.alert(JSON.stringify(checkedData), { shade: 0 });
+ layer.alert(JSON.stringify(checkedData), {
+ shade: 0
+ });
console.log(checkedData);
- }
- , setChecked: function () {
+ },
+ setChecked: function () {
tree.setChecked('demoId1', [12, 114]); //勾选指定节点
- }
- , reload: function () {
+ },
+ reload: function () {
//重载实例
tree.reload('demoId1', {
@@ -185,290 +319,293 @@
})
},
changeImg: true,
+ father: [],
data: [{
- title: '采集站点'
- , id: 1
- , field: '1'
- // , checked: true
- , spread: true
- , children: [{
- title: '南矶山保护区'
- , id: 11
- , field: '1-1'
+ title: '采集站点',
+ id: 1,
+ field: '1'
// , checked: true
- , spread: true
- , children: [{
- title: '北深渊'
- , id: 111
- , field: '1-1-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: 112,
+ field: '1-1-2',
+ checked: true
}, {
- title: '矶山'
- , id: 113
- , field: '1-1-3'
- , checked: true
+ title: '矶山',
+ id: 113,
+ field: '1-1-3',
+ checked: true
}, {
- title: '打钟山'
- , id: 114
- , field: '1-1-4'
- , checked: false
+ 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: 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: 122,
+ field: '1-2-2'
}, {
- title: '矶山'
- , id: 123
- , field: '1-2-3'
+ title: '矶山',
+ id: 123,
+ field: '1-2-3'
}, {
- title: '打钟山'
- , id: 124
- , field: '1-2-4'
+ 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: 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: 132,
+ field: '1-3-2'
}, {
- title: '矶山'
- , id: 133
- , field: '1-3-3'
+ title: '矶山',
+ id: 133,
+ field: '1-3-3'
}, {
- title: '打钟山'
- , id: 134
- , field: '1-3-4'
+ 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: 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: 142,
+ field: '1-4-2'
}, {
- title: '矶山'
- , id: 143
- , field: '1-4-3'
+ title: '矶山',
+ id: 143,
+ field: '1-4-3'
}, {
- title: '打钟山'
- , id: 144
- , field: '1-4-4'
+ 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: 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: 212,
+ field: '2-1-2'
}, {
- title: '矶山'
- , id: 213
- , field: '2-1-3'
+ title: '矶山',
+ id: 213,
+ field: '2-1-3'
}, {
- title: '打钟山'
- , id: 214
- , field: '2-1-4'
+ title: '打钟山',
+ id: 214,
+ field: '2-1-4'
}]
}, {
- title: '五星白鹤保护区'
- , id: 22
- , field: '2-2'
- , children: [{
- title: '北深渊4'
- , id: 221
- , field: '2-2-1'
+ title: '五星白鹤保护区',
+ id: 22,
+ field: '2-2',
+ children: [{
+ title: '北深渊4',
+ id: 221,
+ field: '2-2-1'
}, {
- title: '东湖'
- , id: 222
- , field: '2-2-2'
+ title: '东湖',
+ id: 222,
+ field: '2-2-2'
}, {
- title: '矶山'
- , id: 223
- , field: '2-2-3'
+ title: '矶山',
+ id: 223,
+ field: '2-2-3'
}, {
- title: '打钟山'
- , id: 224
- , field: '2-2-4'
+ title: '打钟山',
+ id: 224,
+ field: '2-2-4'
}]
}, {
- title: '都昌候鸟省级自然保护区'
- , id: 23
- , field: '2-3'
- , children: [{
- title: '北深渊'
- , id: 231
- , field: '2-3-1'
+ title: '都昌候鸟省级自然保护区',
+ id: 23,
+ field: '2-3',
+ children: [{
+ title: '北深渊',
+ id: 231,
+ field: '2-3-1'
}, {
- title: '东湖'
- , id: 232
- , field: '2-3-2'
+ title: '东湖',
+ id: 232,
+ field: '2-3-2'
}, {
- title: '矶山'
- , id: 233
- , field: '2-3-3'
+ title: '矶山',
+ id: 233,
+ field: '2-3-3'
}, {
- title: '打钟山'
- , id: 234
- , field: '2-3-4'
+ title: '打钟山',
+ id: 234,
+ field: '2-3-4'
}]
}, {
- title: '都昌北鄱阳湿地公园'
- , id: 24
- , field: '2-4'
- , children: [{
- title: '北深渊5'
- , id: 241
- , field: '2-4-1'
+ title: '都昌北鄱阳湿地公园',
+ id: 24,
+ field: '2-4',
+ children: [{
+ title: '北深渊5',
+ id: 241,
+ field: '2-4-1'
}, {
- title: '东湖'
- , id: 242
- , field: '2-4-2'
+ title: '东湖',
+ id: 242,
+ field: '2-4-2'
}, {
- title: '矶山'
- , id: 243
- , field: '2-4-3'
+ title: '矶山',
+ id: 243,
+ field: '2-4-3'
}, {
- title: '打钟山'
- , id: 244
- , field: '2-4-4'
+ 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: 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: 312,
+ field: '3-1-2'
}, {
- title: '矶山'
- , id: 313
- , field: '3-1-3'
+ title: '矶山',
+ id: 313,
+ field: '3-1-3'
}, {
- title: '打钟山'
- , id: 314
- , field: '3-1-4'
+ title: '打钟山',
+ id: 314,
+ field: '3-1-4'
}]
}, {
- title: '五星白鹤保护区'
- , id: 32
- , field: '3-2'
- , children: [{
- title: '北深渊3'
- , id: 321
- , field: '3-2-1'
+ title: '五星白鹤保护区',
+ id: 32,
+ field: '3-2',
+ children: [{
+ title: '北深渊3',
+ id: 321,
+ field: '3-2-1'
}, {
- title: '东湖'
- , id: 322
- , field: '3-2-2'
+ title: '东湖',
+ id: 322,
+ field: '3-2-2'
}, {
- title: '矶山'
- , id: 323
- , field: '3-2-3'
+ title: '矶山',
+ id: 323,
+ field: '3-2-3'
}, {
- title: '打钟山'
- , id: 324
- , field: '3-2-4'
+ title: '打钟山',
+ id: 324,
+ field: '3-2-4'
}]
}, {
- title: '都昌候鸟省级自然保护区'
- , id: 33
- , field: '3-3'
- , children: [{
- title: '北深渊'
- , id: 331
- , field: '3-3-1'
+ title: '都昌候鸟省级自然保护区',
+ id: 33,
+ field: '3-3',
+ children: [{
+ title: '北深渊',
+ id: 331,
+ field: '3-3-1'
}, {
- title: '东湖'
- , id: 332
- , field: '3-3-2'
+ title: '东湖',
+ id: 332,
+ field: '3-3-2'
}, {
- title: '矶山'
- , id: 333
- , field: '3-3-3'
+ title: '矶山',
+ id: 333,
+ field: '3-3-3'
}, {
- title: '打钟山'
- , id: 334
- , field: '3-3-4'
+ title: '打钟山',
+ id: 334,
+ field: '3-3-4'
}]
}, {
- title: '都昌北鄱阳湿地公园'
- , id: 34
- , field: '3-4'
- , children: [{
- title: '北深渊1'
- , id: 341
- , field: '3-4-1'
+ title: '都昌北鄱阳湿地公园',
+ id: 34,
+ field: '3-4',
+ children: [{
+ title: '北深渊1',
+ id: 341,
+ field: '3-4-1'
}, {
- title: '东湖'
- , id: 342
- , field: '3-4-2'
+ title: '东湖',
+ id: 342,
+ field: '3-4-2'
}, {
- title: '矶山'
- , id: 343
- , field: '3-4-3'
+ title: '矶山',
+ id: 343,
+ field: '3-4-3'
}, {
- title: '打钟山'
- , id: 344
- , field: '3-4-4'
+ title: '打钟山',
+ id: 344,
+ field: '3-4-4'
}]
}],
}],
--
Gitblit v1.9.3