From 9467ed97d7186ed17e0b1af070907fdf5c628da0 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 09 Jun 2021 08:51:30 +0800
Subject: [PATCH] 监测时间选择
---
widgets/searchTabaPopup/Widget.js | 11 ++
widgets/searchTabaPopup/Widget.html | 126 ++++++++++++++++++++++++++++++
widgets/searchTabaPopup/css/style.css | 86 +++++++++++++++++++--
3 files changed, 209 insertions(+), 14 deletions(-)
diff --git a/widgets/searchTabaPopup/Widget.html b/widgets/searchTabaPopup/Widget.html
index 61ba85c..74ee426 100644
--- a/widgets/searchTabaPopup/Widget.html
+++ b/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>
diff --git a/widgets/searchTabaPopup/Widget.js b/widgets/searchTabaPopup/Widget.js
index 7f39c79..b93e9ef 100644
--- a/widgets/searchTabaPopup/Widget.js
+++ b/widgets/searchTabaPopup/Widget.js
@@ -93,8 +93,17 @@
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 () {
diff --git a/widgets/searchTabaPopup/css/style.css b/widgets/searchTabaPopup/css/style.css
index 6b8a31c..409c194 100644
--- a/widgets/searchTabaPopup/css/style.css
+++ b/widgets/searchTabaPopup/css/style.css
@@ -71,24 +71,90 @@
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;
- font-size: 14px;
- padding: 20px;
- border-right: transparent 1px solid;
+ width: 140px;
+ text-align-last: justify;
+ font-size: 14px;
+ padding: 20px;
+ border-right: transparent 1px solid;
}
+
.jimu-widget-searchTabaPopup .xiangqing td {
/* width: 30%; */
- text-align-last:right;
+ text-align-last: right;
padding-right: 5px;
- }
+}
- .jimu-widget-searchTabaPopup .xiangqing th, .jimu-widget-searchTabaPopup .xiangqing td{
- border-color: rgba(0, 0, 0,.1);
- }
+.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;
+}
\ No newline at end of file
--
Gitblit v1.9.3