监测时间选择

liuyg

2021-06-09 9467ed97d7186ed17e0b1af070907fdf5c628da0

监测时间选择

 widgets/searchTabaPopup/Widget.html

@@ -13,12 +13,132 @@
                    <li>历史记录</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                    <div class="layui-tab-item">
                        <div class="xiangqing">
                        </div>
                    </div>
                    <div class="layui-tab-item">内容2</div>
                    <div class="layui-tab-item">内容3</div>
                    <div class="layui-tab-item ">
                        <div class="shishishuju">
                            <div class="heard">
                                <div>当前站点：<span>南矶山备战湖</span> </div>
                                <div>监测时间：<span>2021-05-06 10：07:00</span> </div>
                            </div>
                            <div class="layui-tab">
                                <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">
                                        <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>
                                                <tr>
                                                    <td>水温</td>
                                                    <td>0</td>
                                                    <td>℃</td>
                                                </tr>
                                                <tr>
                                                    <td>PH值</td>
                                                    <td>0</td>
                                                    <td>无量纲</td>
                                                </tr>
                                                <tr>
                                                    <td>溶解氧</td>
                                                    <td>0</td>
                                                    <td>ppm</td>
                                                </tr>
                                                <tr>
                                                    <td>电导率</td>
                                                    <td>0</td>
                                                    <td>S/m</td>
                                                </tr>
                                                <tr>
                                                    <td>叶绿素a</td>
                                                    <td>0</td>
                                                    <td>ug/L</td>
                                                </tr>
                                                <tr>
                                                    <td>浑浊度</td>
                                                    <td>0</td>
                                                    <td>NTU</td>
                                                </tr>
                                                <tr>
                                                    <td>化学需氧量</td>
                                                    <td>0</td>
                                                    <td>无量纲</td>
                                                </tr>
                                                <tr>
                                                    <td>总磷</td>
                                                    <td>0</td>
                                                    <td>mg/L</td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="layui-tab-item">空气质量数据</div>
                                    <div class="layui-tab-item">气象数据</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item layui-show">
                        <div class="lishijilv">
                            <div class="heard">
                                <div class="left">
                                    <div class="layui-form">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <!-- <label class="layui-form-label">日期范围</label> -->
                                                <div class="layui-inline" id="test6">
                                                    <div class="layui-input-inline">
                                                        <input type="text" autocomplete="off" id="test-startDate-1"
                                                            class="layui-input" placeholder="开始日期">
                                                    </div>
                                                    <div class="layui-form-mid">-</div>
                                                    <div class="layui-input-inline">
                                                        <input type="text" autocomplete="off" id="test-endDate-1"
                                                            class="layui-input" placeholder="结束日期">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-normal">查询</button>
                                    <button type="button" class="layui-btn layui-btn-danger">清空</button>
                                </div>
                                <div class="rights">当前站点：<span>南矶山备战湖</span> </div>
                            </div>
                            <div class="layui-tab">
                                <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>
                                    <div class="layui-tab-item">空气质量数据</div>
                                    <div class="layui-tab-item">气象数据</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

 widgets/searchTabaPopup/Widget.js

@@ -94,7 +94,16 @@
                XQDom.append(str);

                
                layui.use('laydate', function () {
                    var laydate = layui.laydate;

                    laydate.render({
                        elem: '#test6'
                        //设置开始日期、日期日期的 input 选择器
                        //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                        , range: ['#test-startDate-1', '#test-endDate-1']
                    });
                });
            },

            onClose: function () {

 widgets/searchTabaPopup/css/style.css

@@ -71,11 +71,13 @@
  padding: 20px;
  box-sizing: border-box;
}

.jimu-widget-searchTabaPopup .xiangqing {
  width: 100%;
  height: 100%;
  /* border: 1px salmon solid; */
}

.jimu-widget-searchTabaPopup .xiangqing th {
 width: 140px;
 text-align-last:justify;
@@ -83,6 +85,7 @@
 padding: 20px;
 border-right: transparent 1px solid;
}

.jimu-widget-searchTabaPopup .xiangqing td {
  /* width: 30%; */
  text-align-last:right;
@@ -92,3 +95,66 @@
 .jimu-widget-searchTabaPopup .xiangqing th,  .jimu-widget-searchTabaPopup .xiangqing td{
   border-color: rgba(0, 0, 0,.1);
 }

.jimu-widget-searchTabaPopup .shishishuju {
  width: 100%;
  height: 100%;
  /* border: 1px salmon solid; */
}

.jimu-widget-searchTabaPopup .shishishuju .heard {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding-bottom: 10px;
}

.jimu-widget-searchTabaPopup .shishishuju thead th, .jimu-widget-searchTabaPopup .shishishuju tbody td {
  text-align: center;
}

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

.jimu-widget-searchTabaPopup .lishijilv .heard {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jimu-widget-searchTabaPopup .lishijilv .heard .left{
  /* border: 1px solid springgreen; */
  display: flex;
  align-items: center;
}
.jimu-widget-searchTabaPopup .lishijilv .heard .layui-form-item{
  /* border: 1px solid springgreen; */
  position: relative;
  top: 12px;
}

input::-webkit-input-placeholder {
  color: #afafaf;
  font-size: 14px;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #afafaf;
  font-size: 14px;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #afafaf;
  font-size: 14px;
}

input::-ms-input-placeholder {
  color: #afafaf;
  font-size: 14px;
}