工具样式

liuyg

2021-06-15 ebefa651ad2d6edbfdb30fea3fc1ff97232a0aee

 widgets/searchL/Widget.js

@@ -35,8 +35,7 @@
            //关键词&&坐标
            $("#i-f-gjz").click(function () {
               that.states = 'one';
               // console.log("gjz");
               $("#i-f-zb").css({ 'backgroundColor': '#fff', 'color': '#000' });
               $("#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' });
@@ -45,8 +44,7 @@
            })
            $("#i-f-zb").click(function () {
               that.states = 'two';
               // console.log("zb");
               $("#i-f-gjz").css({ 'backgroundColor': '#fff', 'color': '#000' });
               $("#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' });
@@ -55,14 +53,15 @@
            })

            $(".searchImg").click(function () {
               // console.log(2324345)
               that.getInputData();
               // console.log(that.searchDatas)
               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(){
                        //得到各种内置组件
@@ -76,7 +75,11 @@
                  }
               } else {
                  if (that.searchDatas[0] && that.searchDatas[1]) {
                     console.log(that.searchDatas);
                     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(){
                        //得到各种内置组件
@@ -91,6 +94,32 @@
            })
            $(".searchColce").click(function () {
               $('.searchLMain').hide();
               that.map.entities.removeAll();
            })

            $("#local_data").keyup(function (e) {
               console.log(e);
               that.getInputData();
               if (e.keyCode == 13 && 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();
                  }
               }
            })

         },
@@ -104,7 +133,6 @@
         getData: function (index, val) {
            val = val == '  ' ? '' : val;
            var d = $('.searchLMain').find('.layui-tab-item').hide;
            // console.log(d)
            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}`
@@ -117,7 +145,6 @@
            }).then((res) => {
               if (res.data.code == 200) {
                  var data = res.data.data.panoramaList || res.data.data.stationList || res.data.data.videoList || [];
                  // console.log(data)

                  var val = index;//数据的2和1对调
                  if (index == 1) {
@@ -150,7 +177,6 @@
                  this.shiti(d[k], +n + 1);
               }
               var data = d;
               console.log(data)
               if (n == 0) {
                  this.beginLayUi(data);
               } else if (n == 1) {
@@ -197,7 +223,6 @@

         },
         goOnPosition(arr, i, data) {
            console.log(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))
@@ -231,8 +256,8 @@
                  // image: 'images/addL/监测.png',
                  image: imgs,
                  // image: entityConfig.img,
                  width: 40,
                  // height: 80,
                  width: 27,
                  height: 40,
                  clampToGround: true,
                  heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
@@ -241,8 +266,7 @@
            })
         },
         beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
            // data.push(...data)
            // console.log(data)
            // console.log(data,data1,data2)
            var that = this;
            layui.use(function () {
               var element = layui.element
@@ -253,8 +277,7 @@

                  table.render({
                     elem: '#test'
                     // , url: './data'
                     , height: 475
                     // , url: './data'全景
                     , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
@@ -265,9 +288,9 @@
                     }
                     , cols: [[
                        { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
                        , { field: 'name', width: 90, align: 'center', unresize: true, title: '图层名称' }
                        , { field: 'remarks', width: 95, align: 'center', unresize: true, title: '图层属性1' }
                        , { field: 'createTime', width: 95, align: 'center', unresize: true, title: '图层属性2' }
                        , { 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,
@@ -285,17 +308,16 @@
                     if (layEvent === 'detail') {
                        //   layer.msg('查看操作');
                        window.open(obj.data.panAddress);
                        // console.log(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'
                     , height: 475
                     // , url: './data'//监控
                     , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
@@ -306,9 +328,9 @@
                     }
                     , 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: '图层属性1' }
                        , { field: 'serviceUrl', width: 95, align: 'center', unresize: true, title: '图层属性2' }
                        , { 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,
@@ -323,31 +345,59 @@
                     var data = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                     if (layEvent === 'detail') {
                        //   layer.msg('查看操作');
                        var dom = $('#poput-m-t-video'),
                           str = `
                           <div class="header">${obj.data.name}--实时视频</div>
                           <video id="video1" class="video-js vjs-default-skin" width="100%" height="100%"
                              data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
                              <source src="${obj.data.flv}" type="video/x-flv">
                           </video>`;
                        var dom = $('.header'),
                           str = `${obj.data.name}--实时视频`;
                        dom.empty();
                        dom.append(str);
                        if (obj.data.flv) {
                           var dom = $('#poput-m-t-video'),
                              // <div id="poput-m-t-video-login"><i class="layui-icon">&#xe63e;</i></div>
                              str = `
                                 <video id="poput-m-t-video-video" ></video>
                           `;
                           dom.empty();
                           dom.append(str);

                           // console.log(obj.data.name);
                           // console.log(obj.data.flv);

                           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);
                     }
                     // console.log(obj.data.name)
                  });
               }
               if (data2 != 1) {

                  table.render({
                     elem: '#test2'
                     // , url: './data'
                     , height: 475
                     // , url: './data'//检测
                     , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
@@ -358,9 +408,9 @@
                     }
                     , cols: [[
                        { field: 'tableId', width: 59, align: 'center', unresize: true, title: '序号' }
                        , { field: 'name', width: 90, align: 'center', unresize: true, title: '图层名称' }
                        , { field: 'stcd', width: 95, align: 'center', unresize: true, title: '图层属性1' }
                        , { field: 'createTime', width: 95, align: 'center', unresize: true, title: '图层属性2' }
                        , { 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,
@@ -371,6 +421,7 @@
                     , limit: 10 //每页默认显示的数量

                  });

                  table.on('tool(test2)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                     var data = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
@@ -380,23 +431,26 @@
                        // 监测、测站详情 表格


                        // console.log(obj.data.stcd)
                        // console.log(axios)
                        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' });
                        // console.log(obj.data.name)
                     } else if (layEvent === 'edit') {
                        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 = '';
@@ -465,6 +519,22 @@
            })
         },
         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();