表格 点击事件

liuyg

2021-06-09 1c6a0ab1d8fe9b49d69d299278ebb8a9d22c3085

表格 点击事件

 index.html

@@ -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> -->

@@ -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,21 +30,17 @@
                    </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>
                        <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-primary layui-btn-xs" lay-event="detail">详情信息</a>
                            <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">定位</a> -->
                        </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,13 +187,15 @@
            resize: function () {

            },
            beginLayUi: function (data) {
            beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
                // data.push(...data)
                // console.log(data)
                layui.use(function () {
                    var element = layui.element
                        , table = layui.table //表格
                        , laypage = layui.laypage; //分页

                    if (data != 1) {

                    table.render({
                        elem: '#test'
@@ -153,10 +211,10 @@
                        }
                        , 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' }
                                , { 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' //表格风格
@@ -173,14 +231,15 @@
                        if (layEvent === 'detail') {
                            //   layer.msg('查看操作');
                        }
                        window.open("https://www.baidu.com");
                        console.log(obj)
                            window.open(obj.data.panAddress);
                            console.log(obj.data.panAddress)
                    });

                    }
                    if (data1 != 1) {
                    table.render({
                        elem: '#test1'
                        // , url: './data'
                        , height: 474
                            , height: 475
                        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                            layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
@@ -191,12 +250,12 @@
                        }
                        , 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: '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', width: 115, align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' }
                                , { fixed: 'right', align: 'center', unresize: true, title: '操作', toolbar: '#demoTable1' }
                        ]],
                        data: data,
                            data: data1,
                        //,skin: 'line' //表格风格
                        even: true
                        // , page: true //是否显示分页
@@ -210,15 +269,26 @@
                        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);

                        $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                        $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                        console.log(obj)
                            // console.log(obj.data.name)
                    });
                    }
                    if (data2 != 1) {

                    table.render({
                        elem: '#test2'
                        // , url: './data'
                        , height: 474
                            , height: 475
                        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            // layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                            layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
@@ -229,12 +299,12 @@
                        }
                        , 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' }
                                , { 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: data,
                            data: data2,
                        //,skin: 'line' //表格风格
                        even: true
                        // , page: true //是否显示分页
@@ -248,11 +318,61 @@
                        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)
                            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);
}