搜索弹框中的弹框

liuyg

2021-06-08 11af1c1f00ee900bfb988c884532cd27d7271ae6

搜索弹框中的弹框

 config.json

@@ -180,6 +180,9 @@
          "height": "800px",
          "relativeTo": "map"
        }
      },{
        "name": "搜索弹窗表格各项弹窗",
        "uri": "widgets/searchTabaPopup/Widget"
      }
    ],
    "groups": [],

 widgets/searchL/Widget.html

@@ -50,18 +50,5 @@
            </div>
        </div>
    </div>
    <div class="popup">
        <!-- <div class="p-main one">
            <div class="cloce"></div>
            one
        </div> -->
        <div class="p-main two">
            <div class="cloce"></div>
            监控
        </div>
        <div class="p-main three">
            <div class="cloce"></div>
            监测
        </div>
    </div>
	
</div>

 widgets/searchL/Widget.js

@@ -63,9 +63,7 @@
                    $('.searchLMain').hide();
                })

                $('.cloce').click(() => {
                    $('.popup').css({'display': 'none'})
                })

            },

            closeToolBox: function (item) {
@@ -131,7 +129,8 @@

            },
            beginLayUi: function (data) {
                console.log(data)
                // data.push(...data)
                // console.log(data)
                layui.use(function () {
                    var element = layui.element
                        , table = layui.table //表格
@@ -165,15 +164,15 @@

                    });

                    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    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('查看操作');
                            , layEvent = obj.event; //获得 lay-event 对应的值
                        if (layEvent === 'detail') {
                            //   layer.msg('查看操作');
                        }
                        window.open("https://www.baidu.com");
                        console.log(obj)
                      });
                    });

                    table.render({
                        elem: '#test1'
@@ -202,17 +201,17 @@
                        , limit: 10 //每页默认显示的数量

                    });
                    table.on('tool(test1)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    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('查看操作');
                            , layEvent = obj.event; //获得 lay-event 对应的值
                        if (layEvent === 'detail') {
                            //   layer.msg('查看操作');
                        }
                        $('.popup').css({'display': 'block'});
                        $('.p-main').eq(0).css({'display': 'block'}).siblings().css({'display': 'none'});
                        $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                        $('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                        console.log(obj)
                      });
					  
                    });

                    table.render({
                        elem: '#test2'
                        // , url: './data'
@@ -240,16 +239,17 @@
                        , limit: 10 //每页默认显示的数量

                    });
                    table.on('tool(test2)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    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('查看操作');
                            , layEvent = obj.event; //获得 lay-event 对应的值
                        if (layEvent === 'detail') {
                            //   layer.msg('查看操作');
                        }
                        $('.popup').css({'display': 'block'});
                        $('.p-main').eq(1).css({'display': 'block'}).siblings().css({'display': 'none'});
                        $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
                        $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
                        console.log(obj)
                      });
					
                    });

                    //…
                });

 widgets/searchL/css/style.css

@@ -154,7 +154,7 @@
.jimu-widget-searchL .searchLMain .layui-table-view {
  border-bottom: 1px #fff solid;
}

/* 
.jimu-widget-searchL .searchLMain #layui-table-page1, .jimu-widget-searchL .searchLMain #layui-table-page2, .jimu-widget-searchL .searchLMain #layui-table-page3 {
  position: relative;
  left: 30px;
@@ -162,6 +162,17 @@
}

.jimu-widget-searchL .searchLMain #layui-table-page1::before, .jimu-widget-searchL .searchLMain #layui-table-page2::before, .jimu-widget-searchL .searchLMain #layui-table-page3::before {
  content: '每页10条，';
  position: relative;
  top: -4px;
} */
.jimu-widget-searchL .searchLMain [id^='layui-table-page']{
  position: absolute;
  left: 20px;
  top: 5px;
}

.jimu-widget-searchL .searchLMain [id^='layui-table-page']::before {
  content: '每页10条，';
  position: relative;
  top: -4px;
@@ -191,41 +202,3 @@
  right: 1px;
  top: -3px;
}

.jimu-widget-searchL .popup {
  display: none;
  position: absolute;
  top: 50px;
  left: calc(50% - 250px);
  width: 500px;
  height: 500px;
  /* border: 1px solid salmon; */
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.75);
}

.jimu-widget-searchL .p-main {
  display: none;
  width: 100%;
  height: 100%;
  /* border: 1px salmon solid; */
  border-radius: 5px;
}
.jimu-widget-searchL .p-main .cloce{
  /* font-size: 20px; */
  width: 25px;
  height: 25px;
  line-height: 25px;
  position: absolute;
  right: 5px;
  top:5px;
  /* border: 1px salmon solid; */
}
.jimu-widget-searchL .p-main .cloce:hover{
  color: red;
  cursor: pointer;
}
.jimu-widget-searchL .p-main .cloce::after{
  content: 'X';
  font-size: 20px;
}

 widgets/searchTabaPopup/Widget.html

New file
@@ -0,0 +1,65 @@
<div>
    <div class="popup">
        <div class="p-main two">
            <div class="cloce"></div>
            视频
        </div>
        <div class="p-main three">
            <div class="cloce"></div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">测站详情</li>
                    <li>实时数据</li>
                    <li>历史记录</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="xiangqing">
                            <table border="1" cellpadding="10">
                                <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  colspan="3">南矶山保护区为国家级湿地自然保护区。位于江西省南昌市新建县南矶乡境内,由南矶山自然保护区管理站管理。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候乌及湿地生态系统。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候鸟及湿地生态系统。保护区总面积333平方千米,其中核心区面积175平方千米,缓冲区面积55平方千米,实验区面积103平方千米。
                                    </td>
                                </tr>
                                <tr>
                                    <th>图片</th>
                                    <td  colspan="3">北深湖(http://vr.jxpskj.com/pyhyjpt/njsdgjzrbhq/bshenh/</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="layui-tab-item">内容2</div>
                    <div class="layui-tab-item">内容3</div>
                </div>
            </div>
        </div>
    </div>
</div>

 widgets/searchTabaPopup/Widget.js

New file
@@ -0,0 +1,86 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2019 zhongsong. All Rights Reserved.
// 模块描述:显示坐标
///////////////////////////////////////////////////////////////////////////
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/topic',
    'jimu/BaseWidget',
    'jimu/utils',
    'jimu/css!libs/zTree_v3/css/zTreeStyle/zTreeStyle.css',
    'libs/zTree_v3/js/jquery.ztree.all'
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget,
        aspect,
        string,
        utils
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-searchTabaPopup',
            name: 'searchTabaPopup',
            layers: {},
            startup: function () {
                // 暴露在外的接
                $('.cloce').click(() => {
                    $('.jimu-widget-searchTabaPopup').css({ 'display': 'none' })
                })

            },

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

            onOpen: function () {
                //面板打开的时候触发 （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 = '2221545';
                // var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
                // XQDom.empty();

                // str += '<tr>';
                // str += '<td>12123</td>';
                // str += '</tr>';

                // XQDom.append(str);

            },

            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
            },

            onMinimize: function () {
                this.resize();
            },

            onMaximize: function () {
                this.resize();
            },

            resize: function () {

            },

            destroy: function () {
                //销毁的时候触发
                //todo
                //do something before this func
                this.inherited(arguments);
            }

        });
    });

 widgets/searchTabaPopup/css/style.css

New file
@@ -0,0 +1,81 @@
.jimu-widget-searchTabaPopup {
  display: none;
  position: absolute;
  height: 100% !important;
  /* line-height  : 32px; */
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  left: auto !important;
  /* 240px */
  background: rgba(0, 0, 0, 0.5);
  /* border : 1px solid #000; */
  /* cursor       : pointer; */
  z-index: 13 !important;
}

.jimu-widget-searchTabaPopup .popup {
  /* display: none; */
  width: 1100px;
  height: 600px;
  /* border: 1px solid salmon; */
  position: relative;
  /* border-radius: 5px; */
  top: calc(50% - 300px);
  left: calc(50% - 550px);
  background-color: rgba(255, 255, 255, 1);
}

.jimu-widget-searchTabaPopup .p-main {
  display: none;
  width: 100%;
  height: 100%;
  /* border: 1px salmon solid; */
  border-radius: 5px;
}

.jimu-widget-searchTabaPopup .p-main .cloce {
  /* font-size: 20px; */
  width: 25px;
  height: 25px;
  line-height: 25px;
  position: absolute;
  right: 5px;
  top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
}

.jimu-widget-searchTabaPopup .p-main .cloce:hover {
  color: red;
  cursor: pointer;
}

.jimu-widget-searchTabaPopup .p-main .cloce::after {
  content: 'X';
  font-size: 20px;
}

.jimu-widget-searchTabaPopup .layui-this {
  color: #409EFF !important;
}

.jimu-widget-searchTabaPopup .layui-tab-title li {
  font-size: 20px;
}

.jimu-widget-searchTabaPopup .three {
  padding: 20px;
  box-sizing: border-box;
}
.jimu-widget-searchTabaPopup .xiangqing {
  width: 100%;
  height: 100%;
  border: 1px salmon solid;
}
.jimu-widget-searchTabaPopup .xiangqing th {
 width: 50px;
}

 widgets/searchTabaPopup/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "visualAngle",
  "2D": true,
  "3D": true,
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "author": "yuanjy",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "hasConfig": false,
    "inPanel": false,
    "hasVersionManager": false
  }
}

 widgets/searchTabaPopup/nls/es/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "searchTabaPopup"
  })
);

 widgets/searchTabaPopup/nls/strings.js

New file
@@ -0,0 +1,7 @@
define({
  root: ({
    _widgetLabel: "searchTabaPopup"
  }),
  "es": 1,
  "zh-cn": 1
});

 widgets/searchTabaPopup/nls/zh-cn/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "搜索弹窗表格各项弹窗"
  })
);

 widgets/visualAngle/css/style.css

@@ -6,7 +6,7 @@
  width: 216px !important;
  right: auto !important;
  top: auto !important;
  bottom: 100px !important;
  bottom: 30px !important;
  left: calc(50% - 90px) !important;
  /* 240px */
  background: rgba(255, 255, 255, 1);