parent: 9467ed97 | patch | commit | ignore whitespace
liuyg
2021-06-09 1c6a0ab1d8fe9b49d69d299278ebb8a9d22c3085 
表格 点击事件
6 files modified
618 ■■■■■ changed files
index.html 113 ●●●●● patch | view | raw | blame | history
widgets/searchL/Widget.html 24 ●●●●● patch | view | raw | blame | history
widgets/searchL/Widget.js 352 ●●●●● patch | view | raw | blame | history
widgets/searchTabaPopup/Widget.html 12 ●●●●● patch | view | raw | blame | history
widgets/searchTabaPopup/Widget.js 90 ●●●●● patch | view | raw | blame | history
widgets/searchTabaPopup/css/style.css 27 ●●●●● patch | view | raw | blame | history 
 index.html


@@ -1,9 +1,9 @@


<!DOCTYPE HTML>


<html>


 




<head>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


    <title></title>


    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> -->


    <!--jquery引用-->


@@ -19,6 +19,10 @@


    <link rel="stylesheet" href="libs/layui/layui/css/layui.css">


    <!-- axios -->


    <script src='libs/axios/axios.js'></script>




    <!-- video flv播放 -->


    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">


    <script src="http://vjs.zencdn.net/c/video.js"></script>


    <!-- 动态标绘 -->


    <!-- <script src='libs/Cesium/ThirdParty/Workers/PlotAlgo/PlotAlgoInclude.js'></script> -->




@@ -71,7 +75,7 @@


        * {


            box-sizing: border-box;


        }


 




        body,


        html {


            width: 100%;


@@ -82,32 +86,32 @@


            padding: 0;


            overflow: hidden;


        }


 




        .cesium-viewer-navigationContainer {


            top: 90px !important;


        }


 




        .cesium-performanceDisplay {


            position: relative;


            right: 250px;


        }


 




        .jimu-leading-margin1 {


            padding-left: 10px;


        }


 




        .cesium-baseLayerPicker-dropDown {


            width: 220px !important;


        }


 




        #main-loading {


            width: 100%;


            height: 100%;


            text-align: center;


            overflow: hidden;


        }


 


 






        #main-loading #ie-note {


            position: absolute;


            top: 0;


@@ -116,7 +120,7 @@


            right: 0;


            margin: auto;


        }


 




        #main-loading #ie-note {


            width: 586px;


            height: 253px;


@@ -125,14 +129,14 @@


            font-size: 14px;


            color: #596679;


        }


 




        #ie-note .hint-title {


            height: 40px;


            line-height: 48px;


            text-align: left;


            font-weight: bold;


        }


 




        #ie-note .hint-img {


            background-image: url('images/hint.png');


            background-position: left;


@@ -144,25 +148,25 @@


            line-height: 30px;


            font-weight: bold;


        }


 




        #ie-note span {


            display: block;


            line-height: 14px;


        }


 




        #main-page {


            display: none;


            width: 100%;


            height: 100%;


            position: relative;


        }


 




        #jimu-layout-manager {


            width: 100%;


            height: 100%;


            position: absolute;


        }


 




        .index_query {


            position: absolute;


            left: 45%;


@@ -170,7 +174,7 @@


            z-index: 999;


            width: 260px;


        }


 




        #mh_query li {


            list-style: none;


            padding-bottom: 5px;


@@ -181,9 +185,9 @@


            line-height: 20px;


            color: #ffffff;


            cursor: pointer;


 




        }


 




        #mh_query {


            width: 100%;


            background: rgba(31, 39, 48, .7);


@@ -193,7 +197,7 @@


            overflow: auto;


            z-index: 999;


        }


 




        .input-sm {


            width: 260px;


            height: 35px;


@@ -210,26 +214,26 @@


            background-color: rgba(63, 72, 84, .7);


            border: none;


        }


 




        input::-webkit-input-placeholder {


            color: #fff;


        }


 




        .input_img {


            position: absolute;


            right: 0;


            height: 35px;


            cursor: pointer;


        }


 




        .cesium-viewer-toolbar {


            top: 55px !important;


            right: -23333333333370px !important;


            width: 80px;


            height: 30px;


 




        }


 




        .cesium-viewer-toolbar .cesium-baseLayerPicker-dropDown {


            position: fixed !important;


            top: 54px !important;


@@ -237,28 +241,28 @@


            z-index: 213 !important;


        }


    </style>


    <link rel="stylesheet" type="text/css" href="jimu.js/loading/loading.css"/>


    <link rel="stylesheet" type="text/css" href="jimu.js/loading/loading.css" />


</head>


 




<body class="claro jimu-main-font">


<div id="main-loading">


    <div id="app-loading"></div>


    <div id="loading-gif"></div>


    <div id="ie-note" style="display:none;">


        <div class="hint-title">Error</div>


        <div class="hint-img">Your browser is currently not supported.</div>


        <p class="hint-text">


                    <span>


            推荐chorome浏览器


          </span>


        </p>


    <div id="main-loading">


        <div id="app-loading"></div>


        <div id="loading-gif"></div>


        <div id="ie-note" style="display:none;">


            <div class="hint-title">Error</div>


            <div class="hint-img">Your browser is currently not supported.</div>


            <p class="hint-text">


                <span>


                    推荐chorome浏览器


                </span>


            </p>


        </div>


    </div>


</div>


 


<div id="main-page">


    <div id="jimu-layout-manager"></div>


 


    <!-- <div class="index_query">




    <div id="main-page">


        <div id="jimu-layout-manager"></div>




        <!-- <div class="index_query">


        <div>


            <input id="local_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm"


                   placeholder="输入关键字以搜索"/>


@@ -266,19 +270,19 @@


        </div>


        <div id="mh_query"></div>


    </div> -->


 


</div>


<script src="env.js"></script>


 


 


<script type="text/javascript" src="simpleLoader.js"></script>


<!-- <script type="module">




    </div>


    <script src="env.js"></script>






    <script type="text/javascript" src="simpleLoader.js"></script>


    <!-- <script type="module">


    window.CESIUM_BASE_URL = 'http://localhost:8081/gzsw3D/libs/Source';


    import * as Cesium from './libs/Source/Cesium.js';


    window.Cesium = Cesium;


  </script> -->


<script type="text/javascript" src="init.js"></script>


<!-- <script>


    <script type="text/javascript" src="init.js"></script>


    <!-- <script>


 


    var indData = [];


 


@@ -437,4 +441,5 @@


 


</script> -->


</body>




</html>




 widgets/searchL/Widget.html


@@ -13,7 +13,7 @@


    </div>


    <img class="input_img searchImg" src="images/addL/sous.png">


    <div class="searchLMain">


        <div class="searchColce">X</div>


        <!-- <div class="searchColce">X</div> -->


        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">


            <ul class="layui-tab-title">


                <li class="layui-this">全景</li>


@@ -30,25 +30,21 @@


                    </div>


                </div>


                <div class="layui-tab-item">


                    <div class="layui-tab-item layui-show">


                        <table class="layui-hide" id="test1" lay-filter="test1"></table>


                        <div id="demoTable1" style="display: none;">


                            <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->


                            <a class="layui-btn layui-btn-xs"  lay-event="edit">定位</a>


                        </div>


                    <table class="layui-hide" id="test1" lay-filter="test1"></table>


                    <div id="demoTable1" style="display: none;">


                        <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->


                        <a class="layui-btn layui-btn-xs" lay-event="edit">实时视频</a>


                    </div>


                </div>


                <div class="layui-tab-item">


                    <div class="layui-tab-item layui-show">


                        <table class="layui-hide" id="test2" lay-filter="test2"></table>


                        <div id="demoTable2" style="display: none;">


                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>


                            <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a> -->


                        </div>


                    <table class="layui-hide" id="test2" lay-filter="test2"></table>


                    <div id="demoTable2" style="display: none;">


                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情信息</a>


                        <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a> -->


                    </div>


                </div>


            </div>


        </div>


    </div>


	




</div>




 widgets/searchL/Widget.js


@@ -54,18 +54,23 @@


                    $("#local_data").hide();


                })




                $(".searchImg").click(function () {


                    that.getInputData();


                    that.setVal(that.searchDatas);


                    $('.searchLMain').show();


                })


                // $(".searchImg").click(function () {


                //     that.getInputData();


                //     that.setVal(that.searchDatas);


                //     $('.searchLMain').show();


                // })


                $(".searchColce").click(function () {


                    $('.searchLMain').hide();


                })


                // 自动展开面板


                that.getInputData();


                that.setVal(that.searchDatas);


                // that.getInputData();


                // that.setVal(that.searchDatas);








                // 自动展开面板   面板和搜索无关！


                $('.searchLMain').show();








            },




@@ -112,8 +117,59 @@


                var data = d;


                this.beginLayUi(data);


            },


            getData: function (index) {


                var d = $('.searchLMain').find('.layui-tab-item').hide;


                console.log(d)


                var that = this,


                    url = index == 0 ?


                        'http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorRecords?name=&startTime=&endTime=&type=2&startPage=1&limit=10&soId=056c6f9fa3f14c168fa90cf1563cd01f'


                        :


                        index == 1 ?


                            'http://171.34.76.171:8880/pyh-station/video/queryPyhVideoByFilter?id=&protectAreaId=&name=&buildTime=&buildType=&start=1&limit=10'


                            :


                            index == 2 ?


                                'http://171.34.76.171:8880/pyh-station/monitorStation/queryMonitorStationByFilter?leftTreeId=&isShow=&stcd=&stnm=&status=&startPage=1&limit=10' :


                                false


                    , token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMxMzIzMjYsImV4cCI6MTYyNTcyNDMyNn0.2ug9No32Ij3DxXCw8utXbahYsAe6l_FdzRTH5ysaBsOuKLbmQ80faGclncCdNahQ3rgiV54U-gawqw9JhGsAJA';




                axios.get(url, {


                    headers: {


                        'token': token


                    }


                }).then((res) => {


                    if (res.status == 200) {


                        var data = res.data.data;


                        that.createDatas(data, index);


                    } else {


                        console.log('请求访问失败')


                    }


                })


            },


            createDatas: function (d, n) {


                var i = 1;


                for (var k in d) {


                    d[k].tableId = i++;


                }


                var data = d;


                if (n == 0) {


                    this.beginLayUi(data);


                } else if (n == 1) {


                    this.beginLayUi(1, data);


                } else if (n == 2) {


                    this.beginLayUi(1, 1, data);


                }


            },


            onOpen: function () {


                //面板打开的时候触发


                var that = this;


                that.getData(0)


                layui.use('element', function () {


                    var $ = layui.jquery


                        , element = layui.element;


                    element.on('tab(docDemoTabBrief)', function (elem) {


                        that.getData(elem.index)


                    });


                });


            },




            onClose: function () {


@@ -131,7 +187,7 @@


            resize: function () {




            },


            beginLayUi: function (data) {


            beginLayUi: function (data = 1, data1 = 1, data2 = 1) {


                // data.push(...data)


                // console.log(data)


                layui.use(function () {


@@ -139,120 +195,184 @@


                        , 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: '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,


                        //,skin: 'line' //表格风格


                        even: true


                        // , page: true //是否显示分页


                        , limits: false


                        , limit: 10 //每页默认显示的数量


                    if (data != 1) {




                    });


                        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: '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: '图层属性1' }


                                , { field: 'protectArea', width: 95, align: 'center', unresize: true, title: '图层属性2' }


                                , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable' }


                            ]],


                            data: data,


                            //,skin: 'line' //表格风格


                            even: true


                            // , page: true //是否显示分页


                            , limits: false


                            , limit: 10 //每页默认显示的数量




                    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(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);


                            console.log(obj.data.panAddress)


                        });


                    }


                    if (data1 != 1) {


                        table.render({


                            elem: '#test1'


                            // , 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: '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' }


                                , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' }


                            ]],


                            data: data1,


                            //,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.on('tool(test1)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"


                            var data = obj.data //获得当前行数据


                                , layEvent = obj.event; //获得 lay-event 对应的值


                            if (layEvent === 'detail') {


                                //   layer.msg('查看操作');


                            }


                            var dom = $('#poput-m-t-video'),


                                str = `<div class="title">名称：${obj.data.name}</div>


                                <video id="video1" class="video-js vjs-default-skin" width="840" height="480"


                                    data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>


                                    <source src="${obj.data.flv}" type="video/x-flv">


                                </video>`;


                            dom.empty();


                            dom.append(str);




                    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 //每页默认显示的数量


                            $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });


                            $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });


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


                        });


                    }


                    if (data2 != 1) {




                    });


                    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)


                        table.render({


                            elem: '#test2'


                            // , 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: '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' }


                                , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable2' }


                            ]],


                            data: data2,


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


                            }


                            // 监测、测站详情 表格


                            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"></td>


            </tr>`;


                            str += '</table>';


                            XQDom.append(str);












                            $('.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)




                        });


                    }




                    //…


                });




 widgets/searchTabaPopup/Widget.html


@@ -2,7 +2,13 @@


    <div class="popup">


        <div class="p-main two">


            <div class="cloce"></div>


            视频


            <div id="poput-m-t-video">


                <!-- <div class="title">名称：江豚湾</div>


                <video id="video1" class="video-js vjs-default-skin" width="640" height="480"


                    data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>


                    <source src="http://171.34.197.243:701/rtp/34020000001110000104_34020000001310000006.flv" type="video/x-flv">


                </video> -->


            </div>


        </div>


        <div class="p-main three">


            <div class="cloce"></div>


@@ -13,7 +19,7 @@


                    <li>历史记录</li>


                </ul>


                <div class="layui-tab-content">


                    <div class="layui-tab-item">


                    <div class="layui-tab-item layui-show">


                        <div class="xiangqing">


                        </div>


                    </div>


@@ -96,7 +102,7 @@


                            </div>


                        </div>


                    </div>


                    <div class="layui-tab-item layui-show">


                    <div class="layui-tab-item">


                        <div class="lishijilv">


                            <div class="heard">


                                <div class="left">




 widgets/searchTabaPopup/Widget.js


@@ -45,53 +45,53 @@


                //面板打开的时候触发 （when open this panel trigger）


                // cc




                $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });


                $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });


                var str = '';


                var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');


                XQDom.empty();


                // $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });


                // $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });


            //     var str = '';


            //     var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');


            //     XQDom.empty();




                str += '<table border="1" cellpadding="100">';


                str += `<tr>


                <th>测站名称：</th>


                <td>南矶山战备湖</td>


                <th>建设类型：</th>


                <td>建设</td>


            </tr>


            <tr>


                <th>经度：</th>


                <td>116.280167</td>


                <th>纬度：</th>


                <td>28.918818</td>


            </tr>


            <tr>


                <th>建站时间：</th>


                <td>2021-05-23 09:52:48</td>


                <th>纬度：</th>


                <td>2021-05-23 09:52:48</td>


            </tr>


            <tr>


                <th>所属保护区：</th>


                <td>鄱阳湖南矶湿地国家级自然保护区</td>


                <th>地址：</th>


                <td>暂无</td>


            </tr>


            <tr>


                <th>全景地址：</th>


                <td colspan="3">北深湖(http://vr.jxpskj.com/pyhyjpt/njsdgjzrbhq/bshenh/</td>


            </tr>


            <tr>


                <th>测站简介：</th>


                <td class="left" colspan="3">南矶山保护区为国家级湿地自然保护区。位于江西省南昌市新建县南矶乡境内,由南矶山自然保护区管理站管理。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候乌及湿地生态系统。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候鸟及湿地生态系统。保护区总面积333平方千米,其中核心区面积175平方千米,缓冲区面积55平方千米,实验区面积103平方千米。


                </td>


            </tr>


            <tr>


                <th>图片：</th>


                <td class="left" colspan="3"></td>


            </tr>`;


                str += '</table>';


            //     str += '<table border="1" cellpadding="100">';


            //     str += `<tr>


            //     <th>测站名称：</th>


            //     <td>南矶山战备湖</td>


            //     <th>建设类型：</th>


            //     <td>建设</td>


            // </tr>


            // <tr>


            //     <th>经度：</th>


            //     <td>116.280167</td>


            //     <th>纬度：</th>


            //     <td>28.918818</td>


            // </tr>


            // <tr>


            //     <th>建站时间：</th>


            //     <td>2021-05-23 09:52:48</td>


            //     <th>纬度：</th>


            //     <td>2021-05-23 09:52:48</td>


            // </tr>


            // <tr>


            //     <th>所属保护区：</th>


            //     <td>鄱阳湖南矶湿地国家级自然保护区</td>


            //     <th>地址：</th>


            //     <td>暂无</td>


            // </tr>


            // <tr>


            //     <th>全景地址：</th>


            //     <td colspan="3">北深湖(http://vr.jxpskj.com/pyhyjpt/njsdgjzrbhq/bshenh/</td>


            // </tr>


            // <tr>


            //     <th>测站简介：</th>


            //     <td class="left" colspan="3">南矶山保护区为国家级湿地自然保护区。位于江西省南昌市新建县南矶乡境内,由南矶山自然保护区管理站管理。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候乌及湿地生态系统。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候鸟及湿地生态系统。保护区总面积333平方千米,其中核心区面积175平方千米,缓冲区面积55平方千米,实验区面积103平方千米。


            //     </td>


            // </tr>


            // <tr>


            //     <th>图片：</th>


            //     <td class="left" colspan="3"></td>


            // </tr>`;


            //     str += '</table>';




                XQDom.append(str);


            //     XQDom.append(str);






                layui.use('laydate', function () {




 widgets/searchTabaPopup/css/style.css


@@ -59,6 +59,21 @@


  font-size: 20px;


}




.jimu-widget-searchTabaPopup .two #poput-m-t-video{


  width: 100%;


  height: 100%;


  /* border: 1px springgreen solid; */


  display: flex;


  align-items: center;


  justify-content: center;


  flex-direction: column;


}


.jimu-widget-searchTabaPopup .two #poput-m-t-video .title{


  font-size: 25px;


  padding-bottom: 20px;


}






.jimu-widget-searchTabaPopup .layui-this {


  color: #409EFF !important;


}


@@ -83,16 +98,22 @@


  text-align-last: justify;


  font-size: 14px;


  padding: 20px;


  border-right: transparent 1px solid;


  border-right: transparent 1px solid !important;


}




.jimu-widget-searchTabaPopup .xiangqing td {


  /* width: 30%; */


  width: 400px;


  text-align-last: right;


  padding-right: 5px;


  font-size: 14px;


}


.jimu-widget-searchTabaPopup .xiangqing tr:nth-child(6) td {


  text-align-last: left;


  text-indent: 2em;


  padding-left: 5px;


}




.jimu-widget-searchTabaPopup .xiangqing th, .jimu-widget-searchTabaPopup .xiangqing td {


.jimu-widget-searchTabaPopup .xiangqing th, .jimu-widget-searchTabaPopup .xiangqing td ,.jimu-widget-searchTabaPopup .xiangqing table{


  border-color: rgba(0, 0, 0, .1);


}