Merge branch 'master' of http://192.168.0.105:10010/r/pyhmap

liuyg

2021-07-02 25ce610f6ecca7325e7a743dc032c4a76559c63d

 widgets/searchL/Widget.js

@@ -11,7 +11,8 @@
   'jimu/BaseWidget',
   'jimu/utils',
   'jimu/css!libs/zTree_v3/css/zTreeStyle/zTreeStyle.css',
   'libs/zTree_v3/js/jquery.ztree.all'
   'libs/zTree_v3/js/jquery.ztree.all',
   './Cesiumadd'
],
   function (declare,
      lang,
@@ -27,12 +28,18 @@
         baseClass: 'jimu-widget-searchL',
         name: 'searchL',
         layers: {},
         states: 'one',
         searchDatas: '',
         addOneEntitys: null,
         startup: function () {
            var that = this;

			

            //关键词&&坐标
            $("#i-f-gjz").click(function () {
               // console.log("gjz");
               $("#i-f-zb").css({ 'backgroundColor': '#fff', 'color': '#000' });
               that.states = 'one';
               $("#i-f-zb").css({ 'backgroundColor': '#fff', 'color': '#969696' });
               $("#i-f-gjz").css({ 'backgroundColor': '#3E9FFC', 'color': '#fff' });
               // $("#inputTwo").css({ 'display': 'none' });
               // $("#local_data").css({ 'display': 'inline-block' });
@@ -40,8 +47,8 @@
               $("#local_data").show();
            })
            $("#i-f-zb").click(function () {
               // console.log("zb");
               $("#i-f-gjz").css({ 'backgroundColor': '#fff', 'color': '#000' });
               that.states = 'two';
               $("#i-f-gjz").css({ 'backgroundColor': '#fff', 'color': '#969696' });
               $("#i-f-zb").css({ 'backgroundColor': '#3E9FFC', 'color': '#fff' });
               // $("#local_data").css({ 'display': 'none' });
               // $("#inputTwo").css({ 'display': 'inline-block' });
@@ -50,100 +57,268 @@
            })

            $(".searchImg").click(function () {
               $('.searchLMain').show();
               that.getInputData();

               that.addOneEntitys.removeAll();
               if (typeof that.searchDatas == 'string') {
                  var han = /^[\u4e00-\u9fa5]+$/;
                  if (han.test(that.searchDatas) || that.searchDatas == '  ') {
                     that.getData(0, that.searchDatas);
                     $('.searchLMain').show();
                     $('.searchLMain').find('ul.layui-tab-title li:eq(0)').addClass('layui-this').siblings().removeClass('layui-this');
                     $('.searchLMain').find('div.layui-tab-content > div.layui-tab-item:eq(0)').addClass('layui-show').siblings().removeClass('layui-show');

                  } else {
                     layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
                        //得到各种内置组件
                        var layer = layui.layer //弹层
                        // layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
                        layer.tips('请先填写关键字', '.searchImg', {
                           tips: [2, '#FF5722']
                        });
                     })
                     $('.searchLMain').hide();
                  }
               } else {
                  if (that.searchDatas[0] && that.searchDatas[1]) {
                     that.map.camera.flyTo({
                        // destination: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), Number(gaodu))
                        destination: Cesium.Cartesian3.fromDegrees(Number(that.searchDatas[0]), Number(that.searchDatas[1]), Number(8000))

                     });
                  } else {
                     layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
                        //得到各种内置组件
                        var layer = layui.layer //弹层
                        // layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
                        layer.tips('请先填写完整坐标', '.searchImg', {
                           tips: [2, '#FF5722']
                        });
                     })
                  }
               }
            })
            $(".searchColce").click(function () {
               $('.searchLMain').hide();
               that.addOneEntitys.removeAll();
               topic.publish('getLegendsData', "legends", '');
            })

            $("#local_data").keyup(function (e) {
               // console.log(e);
               that.getInputData();
               if (e.keyCode == 13 && typeof that.searchDatas == 'string') {
                  that.addOneEntitys.removeAll();
                  var han = /^[\u4e00-\u9fa5]+$/;
                  if (han.test(that.searchDatas) || that.searchDatas == '  ') {
                     that.getData(0, that.searchDatas);
                     $('.searchLMain').show();
                     $('.searchLMain').find('ul.layui-tab-title li:eq(0)').addClass('layui-this').siblings().removeClass('layui-this');
                     $('.searchLMain').find('div.layui-tab-content > div.layui-tab-item:eq(0)').addClass('layui-show').siblings().removeClass('layui-show');

                  } else {
                     layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
                        //得到各种内置组件
                        var layer = layui.layer //弹层
                        // layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
                        layer.tips('请先填写关键字', '.searchImg', {
                           tips: [2, '#FF5722']
                        });
                     })
                     $('.searchLMain').hide();
                  }
               }
            })

         },

         closeToolBox: function (item) {
            // if (item != this.name) {
            //    $('.tool-y-box').hide();
            // }

         getInputData: function () {
            if (this.states == 'one') {
               this.searchDatas = $('#local_data').val();
            } else if (this.states == 'two') {
               this.searchDatas = [$('#local_data1').val(), $('#local_data2').val()];
            }
         },
         getData: function (index, val) {
            val = val == '  ' ? '' : val;

            var d = $('.searchLMain').find('.layui-tab-item').hide;
            var that = this,
               url = `http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorData?name=${val}&start&limit&type=${index}`
               // url = `http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorData?name=&start&limit&type=${index}`
               , token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyMjU5OTcsImV4cCI6MTYyNTgxNzk5N30.zWpoKa5AK7xLIPNm-CXoHY9D5kpk9AiUTGkuAQOZi2Rdl2BfroT4IqxjBpyUPZlgwCjG2CoJqy_7rnnodpmqNw';

            axios.get(url, {
               headers: {
                  'token': token
               }
            }).then((res) => {
               if (res.data.code == 200) {
                  var data = res.data.data.panoramaList || res.data.data.stationList || res.data.data.videoList || [];

                  var val = index;//数据的2和1对调
                  if (index == 1) {
                     val = 2;
                  } else if (index == 2) {
                     val = 1;
                  }

                  that.createDatas(data, val);
               } else {
                  console.log('请求访问失败')
               }
            })
         },
         createDatas: function (d, n) {
            this.addOneEntitys.removeAll();//清除图标点
            if (d == []) {
               if (n == 0) {
                  this.beginLayUi(d);
                  topic.publish('getLegendsData', "legends", d, "./images/addL/全景.png", "全景站点");
               } else if (n == 1) {
                  this.beginLayUi(1, d);
                  topic.publish('getLegendsData', "legends", d, "./images/addL/监控.png", "监控站点");
               } else if (n == 2) {
                  this.beginLayUi(1, 1, d);
                  topic.publish('getLegendsData', "legends", d, "./images/addL/全景.png", "监测站点");
               }
            } else {
               var i = 1;
               for (var k in d) {
                  d[k].tableId = i++;
                  //赋图标点
                  this.shiti(d[k], +n + 1);
               }
               var data = d;
               if (n == 0) {
                  this.beginLayUi(data);
                  topic.publish('getLegendsData', "legends", d, "./images/addL/全景.png", "全景站点");
               } else if (n == 1) {
                  this.beginLayUi(1, data);
                  topic.publish('getLegendsData', "legends", d, "./images/addL/监控.png", "监控站点");
               } else if (n == 2) {
                  this.beginLayUi(1, 1, data);
                  topic.publish('getLegendsData', "legends", d, "./images/addL/监测.png", "监测站点");
               }
            }
         },
         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",
               },
            var dataSourceOne = new Cesium.CustomDataSource();
            this.addOneEntitys = dataSourceOne.entities;
            this.map.dataSources.add(dataSourceOne);
            //面板打开的时候触发
            var that = this;
            layui.use('element', function () {
               var $ = layui.jquery
                  , element = layui.element;
               element.on('tab(docDemoTabBrief)', function (elem) {

            ];
            this.beginLayUi(data);
                  var val = elem.index;//数据的2和1对调
                  if (elem.index == 1) {
                     val = 2;
                  } else if (elem.index == 2) {
                     val = 1;
                  }

                  that.getData(val, that.searchDatas);
               });
            });

            // 地图图标点击事件
            this.movehandLer();
         },
         // 获取鼠标事件
         movehandLer: function movehandLer() {
            // 取消默认双击事件
            this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
            // 获取鼠标事件
            this.mountainHandler = new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas);
            // 给鼠标左键添加事件函数
            // this.mountainHandler.setInputAction(lang.hitch(this, this.mouseMove), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            this.mountainHandler.setInputAction(lang.hitch(this, this.clickHand), Cesium.ScreenSpaceEventType.LEFT_CLICK);
         },
         // 注册鼠标左键单击事件
         clickHand: function clickHand(data) {// 全局鼠标点击图标事件 渲染地图图标时 添加个相对应的数组储存该对象数据 通过数组是否存在判断点击的项目
            var pickedObjects = this.map.scene.drillPick(data.position) || 0;
            // console.log(pickedObjects);
            if (pickedObjects.length != 0) {
               if (pickedObjects[0].primitive.id != undefined) {
                  if (pickedObjects[0].primitive.id.onceData != undefined) {//搜索图标点击事件
                     // console.log('onceData')
                     var data = pickedObjects[0].primitive.id.onceData[1];

                     if (pickedObjects[0].primitive.id.onceData[0] == 1) {//全景
                        var address = data.panAddress;
                        var dom = $('.jimu-widget-searchTabaPopup').find('.header'),
                           str = `${data.name}--全景`;
                        dom.empty();
                        dom.append(str);
                        // console.log(data)

                        dom = $('#poput-m-t-quanjing');
                        str = `<iframe id="poput-m-t-quanjing-iframe" src="${address}" frameborder="0"></iframe>`;
                        dom.empty();
                        dom.append(str);
                        $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                        $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                     }
                     if (pickedObjects[0].primitive.id.onceData[0] == 2) {//监控
                        var dom = $('.jimu-widget-searchTabaPopup').find('.header'),
                           str = `${data.name}--实时视频`;
                        dom.empty();
                        dom.append(str);
                        // console.log(data)
                        if (data.flv) {
                           dom = $('#poput-m-t-video');
                           str = `
                        <video id="poput-m-t-video-video" ></video>
                        `;
                           dom.empty();
                           dom.append(str);
                           if (flvjs.isSupported()) {
                              var videoElement = document.getElementById('poput-m-t-video-video');
                              var flvPlayer = flvjs.createPlayer({
                                 type: 'flv',
                                 url: data.flv
                              });
                              flvPlayer.attachMediaElement(videoElement);
                              flvPlayer.load();
                              flvPlayer.play();
                           }
                           window.$myVideoFlvplayer = flvPlayer;
                           // var time = setTimeout(() => {

                           // }, 2000);
                        } else {
                           var dom = $('#poput-m-t-video'),
                              str = `
                        <div id="poput-m-t-video-none" >·暂无视频</div>
                  `;
                           dom.empty();
                           dom.append(str);
                        }
                        $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                        $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                     }
                     if (pickedObjects[0].primitive.id.onceData[0] == 3) {//监测
                        console.log('监测', data)
                     }


                  } else if (pickedObjects[0].primitive.id.SQLData != undefined) {//SQL查询图标点击事件
                     // console.log('SQLData')
                  } else if (pickedObjects[0].primitive.id.spatialQueryData != undefined) {//SQL查询图标点击事件
                     var data = pickedObjects[0].primitive.id.spatialQueryData;
                     data.name = pickedObjects[0].primitive.id.name;
                     data.dom = pickedObjects[0].primitive.id.description;
                     // console.log(data);
                     var doms = $('#spatialQueryValuemain');
                     var domo = $('#spatialQueryValue');
                     doms.empty();
                     doms.append('<div>name:' + data.name + '<div/>' + data.dom._value);
                     domo.show();
                  }
               }
            }
         },

         onClose: function () {
@@ -161,44 +336,378 @@
         resize: function () {

         },
         beginLayUi: function (data) {
         goOnPosition(arr, i, data) {
            this.map.camera.flyTo({
               // destination: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), Number(gaodu))
               destination: Cesium.Cartesian3.fromDegrees(Number(arr[0]), Number(arr[1]), Number(8000))
            });
         },
         //定位实体位置
         shiti: function (data, i) {
            // console.log(data)
            var imgs = i == 1 ? 'images/addL/全景.png' : i == 2 ? 'images/addL/监控.png' : i == 3 ? 'images/addL/监测.png' : '';
            this.addOneEntitys.add({
               id: data.id, // 实体ID
               name: data.name, // 实体名称
               position: Cesium.Cartesian3.fromDegrees(Number(data.lon), Number(data.lat)), // x,y 实体经纬度
               label: {
                  show: true,
                  text: data.name, // text 与实体相关的文字
                  font: "700 20px '黑体'",
                  fillColor: Cesium.Color.fromCssColorString("rgba(57,165,253)"),
                  // backgroundColor: Cesium.Color.DEEPSKYBLUE,
                  style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                  outlineWidth: 2,
                  outlineColor: Cesium.Color.fromBytes(255, 255, 255), // 文字轮廓的颜色
                  verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,//水平位置
                  pixelOffset: new Cesium.Cartesian2(0, -40), // 文字位置
                  heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1, entityConfig.showheight),
                  disableDepthTestDistance: Number.POSITIVE_INFINITY
               },
               billboard: {
                  show: true,
                  // image: 'images/addL/监测.png',
                  image: imgs,
                  // image: entityConfig.img,
                  width: 27,
                  height: 40,
                  clampToGround: true,
                  heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
                  // rotation: Cesium.Math.toRadians(angle),
               },
               onceData: [i, data]
            })
         },
         beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
            // console.log(data,data1,data2)
            var that = this;
            layui.use(function () {
               var element = layui.element
                  , table = layui.table //表格
                  , laypage = layui.laypage; //分页

               table.render({
                  elem: '#test'
                  // , url: './data'
                  , height: 475
                  , 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: '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' }
                     , { fixed: 'right', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable' }
                  ]],
                  data: data,
                  //,skin: 'line' //表格风格
                  even: true
                  // , page: true //是否显示分页
                  , limits: false
                  , limit: 10 //每页默认显示的数量
               if (data != 1) {

               });
                  table.render({
                     elem: '#test'
                     // , url: './data'全景
                     , 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: 'name', width: 90, align: 'center', unresize: true, title: '名称' }
                        , { field: 'protectArea', width: 95, align: 'center', unresize: true, title: '所属保护区' }
                        , { field: 'remarks', width: 95, align: 'center', unresize: true, title: '备注' }
                        , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable' }
                     ]],
                     data: data,
                     //,skin: 'line' //表格风格
                     even: true
                     // , page: true //是否显示分页
                     , limits: false
                     , limit: 10 //每页默认显示的数量
                     , done: function (res, curr, count) {
                        that.addTitle();
                     }

                  });

                  table.on('row(test)', function (obj) {
                     that.goOnPosition([obj.data.lon, obj.data.lat], 1, obj.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(obj.data.panAddress);
                     } else if (layEvent === 'edit') {
                        that.goOnPosition([obj.data.lon, obj.data.lat], 1, obj.data);
                     }
                  });
               }
               if (data1 != 1) {

                  table.render({
                     elem: '#test1'
                     // , url: './data'//监控
                     , 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: 'name', width: 90, align: 'center', unresize: true, title: '站点' }
                        , { field: 'protectName', width: 95, align: 'center', unresize: true, title: '所属保护区' }
                        , { field: 'remark', width: 95, align: 'center', unresize: true, title: '备注' }
                        , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' }
                     ]],
                     data: data1,
                     //,skin: 'line' //表格风格
                     even: true
                     // , page: true //是否显示分页
                     , limits: false
                     , limit: 10 //每页默认显示的数量
                     , done: function (res, curr, count) {
                        that.addTitle();
                     }

                  });
                  table.on('tool(test1)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                     var data = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                     if (layEvent === 'detail') {
                        var dom = $('.header'),
                           str = `${obj.data.name}--实时视频`;
                        dom.empty();
                        dom.append(str);
                        if (obj.data.flv) {
                           var dom = $('#poput-m-t-video'),
                              str = `
                                 <video id="poput-m-t-video-video" ></video>
                           `;
                           dom.empty();
                           dom.append(str);
                           if (flvjs.isSupported()) {
                              var videoElement = document.getElementById('poput-m-t-video-video');
                              var flvPlayer = flvjs.createPlayer({
                                 type: 'flv',
                                 url: obj.data.flv
                              });
                              flvPlayer.attachMediaElement(videoElement);
                              flvPlayer.load();
                              flvPlayer.play();
                           }
                           window.$myVideoFlvplayer = flvPlayer;
                           // var time = setTimeout(() => {

                           // }, 2000);
                        } else {
                           var dom = $('#poput-m-t-video'),
                              str = `
                                 <div id="poput-m-t-video-none" >·暂无视频</div>
                           `;
                           dom.empty();
                           dom.append(str);
                        }
                        $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                        $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                     } else if (layEvent === 'edit') {
                        that.goOnPosition([obj.data.lon, obj.data.lat], 2, obj.data);
                     }
                  });

                  table.on('row(test1)', function (obj) {
                     that.goOnPosition([obj.data.lon, obj.data.lat], 2, obj.data);
                  });
               }
               if (data2 != 1) {

                  table.render({
                     elem: '#test2'
                     // , url: './data'//检测
                     , 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: 'name', width: 90, align: 'center', unresize: true, title: '站点' }
                        , { field: 'wetlandName_', width: 95, align: 'center', unresize: true, title: '所属保护区' }
                        , { field: 'remark', width: 95, align: 'center', unresize: true, title: '备注' }
                        , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable2' }
                     ]],
                     data: data2,
                     //,skin: 'line' //表格风格
                     even: true
                     // , page: true //是否显示分页
                     , limits: false
                     , limit: 10 //每页默认显示的数量
                     , done: function (res, curr, count) {
                        that.addTitle();
                     }

                  });

                  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('查看操作');

                        // 监测、测站详情 表格


                        that.setXiangqing(obj);//渲染详情
                        that.getshuiwen(obj.data.stcd)//水文实时渲染
                        that.setbiaoti(obj.data)//表格各分部标题渲染

                        $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                        $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                     } else if (layEvent === 'edit') {
                        that.goOnPosition([obj.data.lon, obj.data.lat], 3, obj.data);
                     }
                  });
                  table.on('row(test2)', function (obj) {
                     that.goOnPosition([obj.data.lon, obj.data.lat], 3, obj.data);
                  });
               }
               // that.addTitle();
               //…
            });
         },
         addTitle: function () {
            let tdom = $("[data-field]");
            for (var i = 0; i < tdom.length; i++) {
               $(tdom[i]).attr("title", $(tdom[i]).text())
            }
         },
         setXiangqing(obj) {
            var str = '';
            var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
            XQDom.empty();

            str += '<table border="1" cellpadding="100">';
            str += `<tr>
                     <th>测站名称：</th>
                     <td>${obj.data.name}</td>
                     <th>建设类型：</th>
                     <td>建设</td>
                  </tr>
                  <tr>
                     <th>经度：</th>
                     <td>${obj.data.lon}</td>
                     <th>纬度：</th>
                     <td>${obj.data.lat}</td>
                  </tr>
                  <tr>
                     <th>建站时间：</th>
                     <td>${obj.data.accessTime}</td>
                     <th>接入时间：</th>
                     <td>${obj.data.createTime}</td>
                  </tr>
                  <tr>
                     <th>所属保护区：</th>
                     <td>鄱阳湖南矶湿地国家级自然保护区</td>
                     <th>地址：</th>
                     <td>暂无</td>
                  </tr>
                  <tr>
                     <th>全景地址：</th>
                     <td colspan="3">${obj.data.panoramaUrl}/</td>
                  </tr>
                  <tr>
                     <th>测站简介：</th>
                     <td class="left" colspan="3">暂无</td>
                  </tr>
                  <tr>
                     <th>图片：</th>
                     <td class="left" colspan="3" id="popupsimg">
                     <img layer-src="${obj.data.attList[0].uaOriginPath}" src="${obj.data.attList[0].uaOriginPath}" alt="">
                     </td>
                  </tr>`;
            str += '</table>';
            XQDom.append(str);
            // 相册层
            layui.use(['form', 'layer'], function () {

               //----------模块----------
               var form = layui.form;
               var layer = layui.layer;
               layer.photos({
                  photos: '#popupsimg'
                  , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
               });
            });
         },
         getshuiwen: function (stcd) {
            var that = this;
            var url = `http://171.34.76.171:8880/pyh-station/monitorData/queryNewestTimeEleDataByStcd?stcd=${stcd}`,
               token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyNDQxNDQsImV4cCI6MTYyNTgzNjE0NH0.wjtMw7hv8IYGxFKI9b1vo2ozMXD1pE0-02HinfPl-r8l0TYVg1YvMBxW_VzzFKoY1jeC6XByQQT-aC_mAvBnWA';
            axios.get(url, {
               headers: {
                  'token': token
               }
            }).then((res) => {
               if (res.data.code == 200) {
                  var datashuiziyuan = res.data.data.MONITOR_WATER//水资源数据
                  that.setshishidata(datashuiziyuan, stcd);
                  var datakongqi = res.data.data.MONITOR_AIR//空气源数据
                  that.setshishidata(datakongqi, stcd, '#kongqishishi');
                  var dataqixiang = res.data.data.MONITOR_WEATHER//气象源数据
                  that.setshishidata(dataqixiang, stcd, '#qixiangshishi');
               }
            })
         },
         setshishidata: function (data, stcd, id = '#shuiwenshishi') {
            //给默认时间
            var date = new Date();
            var date1 = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
            var myDate = date.setDate(date.getDate() - 7);
            var date2 = new Date(+new Date(myDate) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
            // console.log([date1, date2], 123456789);
            //设置value
            $('#test-startDate-1').val(date2);
            $('#test-endDate-1').val(date1);
            window.defultEchartsTimes = [date2, date1];
            // var time = setTimeout(() => {
            $('.jimu-widget-searchTabaPopup').find('#query').click();
            // clearTimeout(time);
            // time = null;
            // }, 500);

            var str = '',
               shuiwenDom = $('.jimu-widget-searchTabaPopup').find(id)
            shuiwenDom.empty();
            str = `<table class="layui-table">
            <colgroup>
               <col width="150">
               <col width="150">
               <col width="200">
               <col>
            </colgroup>
            <thead>
               <tr>
                  <th>名称</th>
                  <th>数值</th>
                  <th>单位</th>
               </tr>
            </thead>
            <tbody>`
            for (var k in data) {
               str += `<tr><td>${data[k].name}</td><td>${data[k].value}</td><td>${data[k].unit}</td></tr>`
            }
            str += `</tbody></table>
            <input type="test" id="userMyStcd" style="display:none" value="${stcd}"/>`//占位传stcd 给图表历史查询用
            shuiwenDom.append(str);

         },
         setbiaoti: function (data) {
            var title = $('.jimu-widget-searchTabaPopup').find('.myOUrtitle');
            title.empty();
            title.append(data.name);
            var time = $('.jimu-widget-searchTabaPopup').find('.myOUrtime');
            time.empty();
            time.append(data.createTime);
         },

         destroy: function () {
            //销毁的时候触发