| | |
| | | baseClass: 'jimu-widget-searchL', |
| | | name: 'searchL', |
| | | layers: {}, |
| | | states: 'one', |
| | | searchDatas: '', |
| | | startup: function () { |
| | | var that = this; |
| | | |
| | | //关键词&&坐标 |
| | | $("#i-f-gjz").click(function () { |
| | | that.states = 'one'; |
| | | // console.log("gjz"); |
| | | $("#i-f-zb").css({ 'backgroundColor': '#fff', 'color': '#000' }); |
| | | $("#i-f-gjz").css({ 'backgroundColor': '#3E9FFC', 'color': '#fff' }); |
| | |
| | | $("#local_data").show(); |
| | | }) |
| | | $("#i-f-zb").click(function () { |
| | | that.states = 'two'; |
| | | // console.log("zb"); |
| | | $("#i-f-gjz").css({ 'backgroundColor': '#fff', 'color': '#000' }); |
| | | $("#i-f-zb").css({ 'backgroundColor': '#3E9FFC', 'color': '#fff' }); |
| | |
| | | }) |
| | | |
| | | $(".searchImg").click(function () { |
| | | that.getInputData(); |
| | | that.setVal(that.searchDatas); |
| | | $('.searchLMain').show(); |
| | | }) |
| | | $(".searchColce").click(function () { |
| | | $('.searchLMain').hide(); |
| | | }) |
| | | |
| | | // 自动展开面板 |
| | | that.getInputData(); |
| | | that.setVal(that.searchDatas); |
| | | $('.searchLMain').show(); |
| | | |
| | | }, |
| | | |
| | |
| | | // } |
| | | |
| | | }, |
| | | getInputData: function () { |
| | | if (this.states == 'one') { |
| | | this.searchDatas = $('#local_data').val(); |
| | | } else if (this.states == 'two') { |
| | | this.searchDatas = [$('#local_data1').val(), $('#local_data2').val()]; |
| | | } |
| | | }, |
| | | setVal: function (val) { |
| | | var that = this; |
| | | if (typeof val == "string") { |
| | | var url = 'http://171.34.76.171:8880/pyh-wetResource/GeoData/queryGeoData?name=' + val + '&protectAreald=&type=0&dataSort=1', |
| | | token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMxMTYwMzYsImV4cCI6MTYyNTcwODAzNn0.p2qqmcWrC9QDLAFgu1n0eR4k4wrr3udFKKhjBqGJXAzz1jdR57agyyYMsTZPXIPkH7hviE64uHLW8T7fM_VvNw'; |
| | | |
| | | onOpen: function () { |
| | | //面板打开的时候触发 (when open this panel trigger)layui.use(function(){ |
| | | var data = [ |
| | | { |
| | | "id": 1, |
| | | "username": "东湖", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 2, |
| | | "username": "南矶山", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 3, |
| | | "username": "东湖", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 4, |
| | | "username": "南矶山", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 5, |
| | | "username": "东湖", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 6, |
| | | "username": "南矶山", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 7, |
| | | "username": "东湖", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 8, |
| | | "username": "南矶山", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 9, |
| | | "username": "东湖", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 10, |
| | | "username": "南矶山", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 11, |
| | | "username": "东湖", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | { |
| | | "id": 12, |
| | | "username": "南矶山", |
| | | "style1": "属性1", |
| | | "style2": "属性2", |
| | | }, |
| | | axios.get(url, { |
| | | headers: { |
| | | 'token': token |
| | | } |
| | | }).then((res) => { |
| | | if (res.status == 200) { |
| | | var data = res.data.data; |
| | | that.createData(data); |
| | | } else { |
| | | console.log('请求访问失败') |
| | | } |
| | | }) |
| | | } else if (typeof val == "object") { |
| | | |
| | | ]; |
| | | } |
| | | }, |
| | | createData: function (d) { |
| | | var i = 1; |
| | | for (var k in d) { |
| | | d[k].tableId = i++; |
| | | } |
| | | var data = d; |
| | | this.beginLayUi(data); |
| | | }, |
| | | onOpen: function () { |
| | | //面板打开的时候触发 |
| | | }, |
| | | |
| | | onClose: function () { |
| | |
| | | |
| | | }, |
| | | beginLayUi: function (data) { |
| | | // data.push(...data) |
| | | // console.log(data) |
| | | layui.use(function () { |
| | | var element = layui.element |
| | | , table = layui.table //表格 |
| | |
| | | , last: false //不显示尾页 |
| | | } |
| | | , cols: [[ |
| | | { field: 'id', width: 59, align: 'center', unresize: true, title: '序号' } |
| | | , { field: 'username', width: 90, align: 'center', unresize: true, title: '图层名称' } |
| | | , { field: 'style1', width: 95, align: 'center', unresize: true, title: '图层属性1' } |
| | | , { field: 'style2', width: 95, align: 'center', unresize: true, title: '图层属性2' } |
| | | { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' } |
| | | , { field: 'geoName', width: 90, align: 'center', unresize: true, title: '图层名称' } |
| | | , { field: 'databaseName', width: 95, align: 'center', unresize: true, title: '图层属性1' } |
| | | , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' } |
| | | , { fixed: 'right', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable' } |
| | | ]], |
| | | data: data, |
| | |
| | | |
| | | }); |
| | | |
| | | table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" |
| | | var data = obj.data //获得当前行数据 |
| | | , layEvent = obj.event; //获得 lay-event 对应的值 |
| | | if (layEvent === 'detail') { |
| | | // layer.msg('查看操作'); |
| | | } |
| | | window.open("https://www.baidu.com"); |
| | | console.log(obj) |
| | | }); |
| | | |
| | | table.render({ |
| | | elem: '#test1' |
| | | // , url: './data' |
| | | , height: 474 |
| | | , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 |
| | | // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | | layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | | //,curr: 5 //设定初始在第 5 页 |
| | | , groups: 3 //只显示 1 个连续页码 |
| | | , first: false //不显示首页 |
| | | , last: false //不显示尾页 |
| | | } |
| | | , cols: [[ |
| | | { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' } |
| | | , { field: 'geoName', width: 90, align: 'center', unresize: true, title: '图层名称' } |
| | | , { field: 'databaseName', width: 95, align: 'center', unresize: true, title: '图层属性1' } |
| | | , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' } |
| | | , { fixed: 'right', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' } |
| | | ]], |
| | | data: data, |
| | | //,skin: 'line' //表格风格 |
| | | even: true |
| | | // , page: true //是否显示分页 |
| | | , limits: false |
| | | , limit: 10 //每页默认显示的数量 |
| | | |
| | | }); |
| | | table.on('tool(test1)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" |
| | | var data = obj.data //获得当前行数据 |
| | | , layEvent = obj.event; //获得 lay-event 对应的值 |
| | | if (layEvent === 'detail') { |
| | | // layer.msg('查看操作'); |
| | | } |
| | | $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' }); |
| | | $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' }); |
| | | console.log(obj) |
| | | }); |
| | | |
| | | table.render({ |
| | | elem: '#test2' |
| | | // , url: './data' |
| | | , height: 474 |
| | | , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 |
| | | // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | | layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 |
| | | //,curr: 5 //设定初始在第 5 页 |
| | | , groups: 3 //只显示 1 个连续页码 |
| | | , first: false //不显示首页 |
| | | , last: false //不显示尾页 |
| | | } |
| | | , cols: [[ |
| | | { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' } |
| | | , { field: 'geoName', width: 90, align: 'center', unresize: true, title: '图层名称' } |
| | | , { field: 'databaseName', width: 95, align: 'center', unresize: true, title: '图层属性1' } |
| | | , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' } |
| | | , { fixed: 'right', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable2' } |
| | | ]], |
| | | data: data, |
| | | //,skin: 'line' //表格风格 |
| | | even: true |
| | | // , page: true //是否显示分页 |
| | | , limits: false |
| | | , limit: 10 //每页默认显示的数量 |
| | | |
| | | }); |
| | | table.on('tool(test2)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" |
| | | var data = obj.data //获得当前行数据 |
| | | , layEvent = obj.event; //获得 lay-event 对应的值 |
| | | if (layEvent === 'detail') { |
| | | // layer.msg('查看操作'); |
| | | } |
| | | $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' }); |
| | | $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' }); |
| | | console.log(obj) |
| | | |
| | | }); |
| | | |
| | | //… |
| | | }); |
| | | }, |