From b53c06e37b171ef7edeb516e545bf06ae7f75c8f Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 14 Feb 2023 16:35:15 +0800
Subject: [PATCH] 洪水淹没-调节页面样式由横板改为竖版
---
widgets/FloodAnalysis/Widget.html | 52 ++++++++++++++------------
widgets/FloodAnalysis/css/style.css | 28 ++++++++++----
widgets/FloodAnalysis/Widget.js | 21 +++++++---
3 files changed, 62 insertions(+), 39 deletions(-)
diff --git a/widgets/FloodAnalysis/Widget.html b/widgets/FloodAnalysis/Widget.html
index e10e731..b78e00d 100644
--- a/widgets/FloodAnalysis/Widget.html
+++ b/widgets/FloodAnalysis/Widget.html
@@ -8,33 +8,35 @@
<div class="flood-middle">
<div class="flood-analysis">
<div class="select-box">
- <div class="hd">
- <label for="hd-select">河段：</label>
- <!-- <select id="hd-select" class="hd-select" name="hd" >-->
- </select>
- <!--做模糊查询选择框时使用-->
- <input type="text" name="hd-input" id="hd-input" class="hd-input" placeholder="请选择或输入"/>
- <select name="hd-select" id="hd-select" size="10">
- </select>
- </div>
- <div class="smx">
- <label for="smx-select">水面线：</label>
- <select id="smx-select" class="smx-select" name="smx">
- </select>
- </div>
- <div class="sw">
- <label for="sw-input">水位：</label>
- <div style="display: flex;flex-direction: column">
- <input id="sw-input" class="sw-input" type="number" name="word" autocomplete="off"
- maxlength="256" value="0" disabled />
- <span class="tip">正数为水位上涨，负数为水位下降</span>
+ <div>
+ <div class="hd">
+ <label for="hd-select">河段：</label>
+ <!--做模糊查询选择框时使用-->
+ <input type="text" name="hd-input" id="hd-input" class="hd-input" placeholder="请选择或输入"/>
+ <select name="hd-select" id="hd-select" size="10">
+ </select>
+ </div>
+ <div class="smx">
+ <label for="smx-select">水面线：</label>
+ <select id="smx-select" class="smx-select" name="smx"></select>
</div>
</div>
+ <div style="margin-top: 1%">
+ <div class="sw" style="display: flex">
+ <label for="sw-input">水位：</label>
+ <div style="display: flex;flex-direction: column;margin-left: 6px;">
+ <input id="sw-input" class="sw-input" type="number" name="word" autocomplete="off"
+ maxlength="256" value="0" disabled />
+ <span class="tip">正数为水位上涨，负数为水位下降</span>
+ </div>
+ </div>
+ <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>
+ </div>
+
</div>
<div class="radio-box">
<input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时
<input id="forecast" type="radio" name="middleRadio" value="forecast">预测
- <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>
</div>
<div class="table-box">
<table>
@@ -62,7 +64,6 @@
</thead>
<tbody id="flood-tbody" class="table-tbody flood-tbody"></tbody>
</table>
- <div class="flood-analysis-pagination" id="analysis-pagination"></div>
</div>
</div>
<div class="flood-history">
@@ -76,7 +77,7 @@
<table>
<thead class="flood-table-thead table-thead">
<tr>
- <th style="width: 85px;">
+ <th style="width: 30px;">
</th>
<th>
@@ -111,9 +112,12 @@
</tr>
</tbody>
</table>
- <div class="flood-analysis-pagination" id="history-pagination"></div>
</div>
</div>
</div>
+ <div class="flood-bottom">
+ <div class="flood-analysis-pagination" id="analysis-pagination"></div>
+ <div class="flood-analysis-pagination" id="history-pagination"></div>
+ </div>
</div>
</div>
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 6526726..793c5b8 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -117,6 +117,10 @@
self.historyBtn.addClass('unchoose-button')
self.divFloodHistory.hide()
self.divFloodAnalysis.show()
+ $('#history-pagination').hide()
+ if (self.currentHd){
+ $('#analysis-pagination').show()
+ }
})
//历史风险图按钮点击事件
@@ -126,6 +130,8 @@
self.analysisBtn.addClass('unchoose-button')
self.divFloodAnalysis.hide()
self.divFloodHistory.show()
+ $('#analysis-pagination').hide()
+ $('#history-pagination').show()
self.getHistoryList()
})
@@ -198,7 +204,7 @@
let filterArray = self.historyTableList.filter(e => {
return e.name.indexOf(searchName) != -1
})
- self.loadPagination(filterArray, "flood-analysis-pagination")
+ self.loadPagination(filterArray, "history-pagination")
})
$('#save-button').click(function () {
@@ -440,7 +446,8 @@
if (tableData.length <= 0 && pageElementId == "history-pagination") {
$('#history-pagination').hide()
}
- var count = Math.ceil(tableData.length / 10);
+ let pageSize = 11
+ var count = Math.ceil(tableData.length / pageSize);
var self = this
$('#' + pageElementId).pagination({
mode: 'fixed',
@@ -450,8 +457,8 @@
callback: function (index) {
var listdata = [];
//显示页数
- var index = (index.getCurrent() - 1) * 10;
- for (var i = index; i < index + 10; i++) {
+ var index = (index.getCurrent() - 1) * pageSize;
+ for (var i = index; i < index + pageSize; i++) {
listdata.push(tableData[i]);
if (i == tableData.length - 1) {
break;
@@ -463,10 +470,10 @@
}
});
- //首次加载前10条数据
+ //首次加载前11条数据
var startData = [];
- if (tableData.length > 10) {
- for (var i = 0; i < 10; i++) {
+ if (tableData.length > pageSize) {
+ for (var i = 0; i < pageSize; i++) {
startData.push(tableData[i]);
}
} else {
diff --git a/widgets/FloodAnalysis/css/style.css b/widgets/FloodAnalysis/css/style.css
index f64b33d..949ccc4 100644
--- a/widgets/FloodAnalysis/css/style.css
+++ b/widgets/FloodAnalysis/css/style.css
@@ -1,5 +1,5 @@
.jimu-widget-FloodAnalysis {
- width: 60% !important;
+ width: 38% !important;
height: 100%;
position: fixed !important;
/*left: 30px !important;*/
@@ -44,20 +44,31 @@
background-image: url(../images/fold_down.png);
}
+.content{
+ height: 92vh;
+}
+
.flood-top {
text-align: center;
display: inline-flex;
- margin-left: 41% !important;
+ margin-left: 35% !important;
+}
+
+.flood-middle{
+ height: 90%;
}
.flood-middle .select-box {
- display: flex;
margin: 1% 0 0 1%;
}
.select-box > div {
display: flex;
margin-right: 3%;
+}
+
+.smx{
+ margin-left: 13px !important;
}
.flood-top input {
@@ -79,8 +90,9 @@
}
.start-analysis-btn {
- width: 65px;
- height: 25px;
+ width: 10% !important;
+ height: 29px !important;
+ margin-left: 2% !important;
background: white;
border: none;
}
@@ -134,7 +146,7 @@
}
.flood-table-thead tr th {
- text-align: center;
+ text-align: left;
border-top: 1px solid #CFCFCF;
border-right: 1px solid #CFCFCF;
border-bottom: 1px solid #CFCFCF;
@@ -143,7 +155,7 @@
}
.flood-tbody tr td {
- text-align: center;
+ text-align: left;
border-right: 1px solid #CFCFCF;
border-bottom: 1px solid #CFCFCF;
color: #ffffff;
@@ -174,7 +186,7 @@
.hd select {
position: absolute;
- left: 66px;
+ left: 72px;
width: 167px;
height: 106px !important;
outline: none;
--
Gitblit v1.9.3