liuyg
2021-06-08 0ded284e8ef21e2e767d0b7b2661655cf1dc7eaf
widgets/searchL/Widget.js
@@ -27,10 +27,14 @@
         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' });
@@ -40,6 +44,7 @@
               $("#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' });
@@ -50,12 +55,17 @@
            })
            $(".searchImg").click(function () {
               that.getInputData();
               that.setVal(that.searchDatas);
               $('.searchLMain').show();
            })
            $(".searchColce").click(function () {
               $('.searchLMain').hide();
            })
            // 自动展开面板
            that.getInputData();
            that.setVal(that.searchDatas);
            $('.searchLMain').show();
         },
@@ -65,85 +75,45 @@
            // }
         },
         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 () {
@@ -162,6 +132,8 @@
         },
         beginLayUi: function (data) {
            // data.push(...data)
            // console.log(data)
            layui.use(function () {
               var element = layui.element
                  , table = layui.table //表格
@@ -180,10 +152,10 @@
                     , 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,
@@ -195,6 +167,93 @@
               });
               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)
               });
               //…
            });
         },