From ca4683dbadf8f58c0e3cb5faf79b53e5bb2408f3 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Thu, 09 Feb 2023 11:04:47 +0800
Subject: [PATCH] 洪水淹没数据接口对接，调整样式
---
widgets/FloodAnalysis/Widget.html | 26 ++-
widgets/FloodAnalysis/css/style.css | 133 +++++++++++++++++++++-
widgets/FloodAnalysis/Widget.js | 176 ++++++++++++++++++++++++----
3 files changed, 289 insertions(+), 46 deletions(-)
diff --git a/widgets/FloodAnalysis/Widget.html b/widgets/FloodAnalysis/Widget.html
index 36c85f5..4aeb728 100644
--- a/widgets/FloodAnalysis/Widget.html
+++ b/widgets/FloodAnalysis/Widget.html
@@ -7,26 +7,26 @@
<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" value="1">
+ <label for="hd-select">河段：</label>
+ <select id="hd-select" class="hd-select" name="hd" >
</select>
<!--做模糊查询选择框时使用-->
-<!-- </select>-->
<!-- <input type="text" name="hd-input" id="hd-input" class="hd-input" placeholder="请选择或输入" />-->
<!-- <select name="hd-select" id="hd-select" size="10" style="display:none;">-->
-<!-- <option value="1">1</option>-->
<!-- </select>-->
</div>
<div class="smx">
- <label for="smx-select">水面线</label>
+ <label for="smx-select">水面线：</label>
<select id="smx-select" class="smx-select" name="smx">
</select>
</div>
<div class="sw">
- <label for="sw-input">水位</label>
- <input id="sw-input" class="sw-input" type="text" name="word" autocomplete="off" maxlength="256"/>
+ <label for="sw-input">水位：</label>
+ <div style="display: flex;flex-direction: column">
+ <input id="sw-input" class="sw-input" type="text" name="word" autocomplete="off" maxlength="256"/>
+ <span class="tip">正数为水位上涨，负数为水位下降</span>
+ </div>
</div>
- <span class="tip">正数为水位上涨，负数为水位下降</span>
</div>
<div class="radio-box">
<input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时
@@ -43,7 +43,10 @@
<div>起点距</div>
</th>
<th>
- <div>经纬度</div>
+ <div>经度</div>
+ </th>
+ <th>
+ <div>纬度</div>
</th>
<th>
<div>水面线</div>
@@ -55,6 +58,7 @@
</thead>
<tbody id="flood-tbody" class="table-tbody flood-tbody"></tbody>
</table>
+ <div class="flood-analysis-pagination Pagination" id="analysis-pagination"></div>
</div>
</div>
<div class="flood-history">
@@ -77,8 +81,10 @@
</thead>
<tbody id="flood-history-tbody" class="table-tbody flood-tbody"></tbody>
</table>
+ <div class="flood-analysis-pagination Pagination" id="history-pagination"></div>
</div>
</div>
</div>
- <div class="flood-bottom"></div>
+ <div class="flood-bottom">
+ </div>
</div>
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 3182c94..6e6e155 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -16,24 +16,24 @@
historyBtn: null,
divFloodAnalysis: null,
divFloodHistory: null,
- topRadioGroup: null,
- middleRadioGroup: null,
hdSelect: null,
smxSelect: null,
divSwInput: null,
spanTip: null,
//河段下拉列表
hdDataList: [],
+ //洪水分析表格数据
+ analysisTableList:[],
startup: function startup() {
var self = this
this.bindHtmlElement()
- this.middleRadioGroup.change(function () {
+ $('input[type=radio][name=middleRadio]').change(function () {
if (this.value == "realtime") {
- self.divSwInput.hide()
- self.spanTip.hide()
+ self.divSwInput.css('visibility', 'hidden')
+ self.spanTip.css('visibility', 'hidden')
} else {
- self.divSwInput.show()
- self.spanTip.show()
+ self.divSwInput.css('visibility', 'visible')
+ self.spanTip.css('visibility', 'visible')
}
})
@@ -67,14 +67,23 @@
// $("#hd-input").val($('#hd-select').find("option:selected").text());
// $("#hd-select").css({"display": "none"});
// })
- $('#hd-select').change(function () {
+ this.hdSelect.change(function () {
var selected = JSON.parse($(this).val())
+ $('#sw-input').val("")
self.getSmxData(selected.river_code,selected.default_smx)
})
- $('#smx-select').change(function () {
- var selected = JSON.parse($(this).val())
- console.log(selected)
- self.getPointData(selected.smxcode)
+ this.smxSelect.change(function () {
+ var selected =$(this).val()
+ self.getPointData(selected)
+ })
+ $('#sw-input').keypress(function (event) {
+ if (event.which == 13){
+ let sw = $('#sw-input').val()
+ self.analysisTableList.forEach(e=>{
+ e.sw = self.calculateSw(e.water,sw)
+ })
+ self.loadPagination(self.analysisTableList,"analysis-pagination")
+ }
})
},
@@ -103,6 +112,14 @@
this.map.entities.remove(e)
})
this.map.scene.globe.baseColor = Cesium.Color.WHITE;
+
+ $('#hd-select option').remove()
+ $('#smx-select option').remove()
+ $('#sw-input').val("")
+ $('#flood-tbody').html("")
+ $('#analysis-pagination').hide()
+
+ this.analysisTableList = []
},
onMinimize: function onMinimize() {
@@ -170,7 +187,6 @@
this.historyBtn = $('.history-button')
this.divFloodAnalysis = $('.flood-analysis')
this.divFloodHistory = $('.flood-history')
- this.middleRadioGroup = $('input[type=radio][name=middleRadio]')
this.hdSelect = $('#hd-select')
this.smxSelect = $('#smx-select')
this.divSwInput = $('.sw')
@@ -180,12 +196,14 @@
//初始化
init() {
//重置html元素状态
- this.divSwInput.hide()
- this.spanTip.hide()
+ this.divSwInput.css('visibility', 'hidden')
+ this.spanTip.css('visibility', 'hidden')
this.divFloodHistory.hide()
this.divFloodAnalysis.show()
+ $("input[type=radio][name=middleRadio][value='realtime']").prop('checked','checked')
this.analysisBtn.addClass('choose-button')
+ this.analysisBtn.removeClass('unchoose-button')
this.historyBtn.removeClass('choose-button')
this.historyBtn.addClass('unchoose-button')
@@ -195,7 +213,7 @@
//获取河段下拉数据
getHdData() {
const self = this
- let url = "http://192.168.0.207:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4"
+ let url = "http://192.168.0.200:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4"
$.ajax({
url: url,
type: 'post',
@@ -205,10 +223,11 @@
data: {},
success: function (res) {
let data = res.data
- $("#hd-select").find("option").remove();//添加新值 删除旧值
- $("#hd-select").prepend("<option value=''>请选择</option>");//添加第一个option值
+ self.hdSelect.find("option").remove();//添加新值 删除旧值
+ self.hdSelect.prepend("<option value=''>请选择</option>");//添加第一个option值
+
data.forEach(e => {
- $("#hd-select").append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>");
+ self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>");
})
}
});
@@ -217,7 +236,7 @@
//获取水面线数据
getSmxData(hdid,defaultId) {
const self = this
- let url = "http://192.168.0.207:82/blade-ycreal/waterline/selectName"
+ let url = "http://192.168.0.200:82/blade-ycreal/waterline/selectName"
$.ajax({
url: url,
type: 'post',
@@ -229,15 +248,14 @@
},
success: function (res) {
let data = res.data
- $("#smx-select").find("option").remove();//添加新值 删除旧值
+ self.smxSelect.find("option").remove();//添加新值 删除旧值
data.forEach(e => {
// $("#chapterName").prepend("<option value='无'>无</option>");//添加第一个option值
- $("#smx-select").append("<option value="+ e.smxcode +">" + e.waterline + "</option>");
+ self.smxSelect.append("<option value="+ e.smxcode +">" + e.waterline + "</option>");
if (e.smxcode == defaultId){
$("#smx-select option[value="+e.smxcode + "] ").attr("selected",true)
- console.log($('#smx-select'))
- $('#smx-select').trigger("change")
+ self.smxSelect.trigger("change")
}
})
@@ -248,22 +266,122 @@
//获取点数据
getPointData(smxcode){
const self = this
- let url = "http://192.168.0.207:82/blade-ycreal/water/childpage"
+ let url = "http://192.168.0.200:82/blade-ycreal/water/childpage"
$.ajax({
url: url,
- type: 'post',
+ type: 'get',
dataType: 'json',
jsonp: 'callback',
jsonpCallback: 'data',
data: {
- parentId:smxcode
+ parentId:smxcode,
+ size:9999999
},
success: function (res) {
- let data = res.data
- console.log(data,"----")
+ if (res.code == 200){
+ let data = res.data.records
+ self.analysisTableList = data
+ data.forEach(e=>{
+ e.lng = Number(e.lng).toFixed(4)
+ e.lat = Number(e.lat).toFixed(4)
+ e.water = Number(e.water).toFixed(3)
+ })
+
+ self.loadPagination(data,"analysis-pagination")
+ }
}
});
+ },
+
+ /**
+ * 加载分页器
+ * @param tableData 需要加载的所有数据
+ * @param pageElementId 分页html的id
+ * @param tableElementId tbody id
+ */
+ loadPagination(tableData,pageElementId) {
+ if (tableData.length < 0) return
+ var count = Math.ceil(tableData.length / 10);
+ var self = this
+ $('#'+pageElementId).pagination({
+ mode: 'fixed',
+ jump: true,
+ coping: false,
+ pageCount: count,
+ callback: function (index) {
+ var listdata = [];
+ //显示页数
+ var index = (index.getCurrent() - 1) * 10;
+ for (var i = index; i < index + 10; i++) {
+ listdata.push(tableData[i]);
+ if (i == tableData.length - 1) {
+ break;
+ }
+ }
+ self.loadAnalysisTable(listdata)
+ }
+ });
+
+ //首次加载前10条数据
+ var startData = [];
+ if (tableData.length > 10) {
+ for (var i = 0; i < 10; i++) {
+ startData.push(tableData[i]);
+ }
+ } else {
+ for (var i = 0; i < tableData.length; i++) {
+ startData.push(tableData[i]);
+ }
+ }
+ self.loadAnalysisTable(startData)
+ },
+
+ /**
+ * 加载表格
+ * @param listData 需要加载的数据
+ * @param elementId 需要加载的表格的tbody id
+ */
+ loadAnalysisTable(listData,elementId) {
+ var table = ""
+ listData.forEach(e=>{
+ table += '<tr>' +
+ '<td><div>' + e.location + '</div></td>' +
+ '<td><div>' + e.origin + '</div></td>' +
+ '<td><div>' + e.lng + '</div></td>' +
+ '<td><div>' + e.lat + '</div></td>' +
+ '<td><div>' + e.water + '</div></td>' +
+ '<td><div>' + e.sw + '</div></td>' +
+ '</tr>'
+ })
+ $('#flood-tbody').html(table)
+ },
+
+ /**
+ * 计算水位
+ * @param waterline 水面线高度
+ * @param number 差值
+ */
+ calculateSw(waterline,number){
+ let sw = this.floatAdd(Number(waterline) , Number(number))
+ return sw
+ },
+
+ //防止出现两个小数相加出现很多0的情况
+ floatAdd(arg1, arg2) {
+ var r1, r2, m;
+ try {
+ r1 = arg1.toString().split(".")[1].length;
+ } catch (e) {
+ r1 = 0;
}
+ try {
+ r2 = arg2.toString().split(".")[1].length;
+ } catch (e) {
+ r2 = 0;
+ }
+ m = Math.pow(10, Math.max(r1, r2));
+ return (arg1 * m + arg2 * m) / m;
+ }
});
diff --git a/widgets/FloodAnalysis/css/style.css b/widgets/FloodAnalysis/css/style.css
index b5fda1e..36287e4 100644
--- a/widgets/FloodAnalysis/css/style.css
+++ b/widgets/FloodAnalysis/css/style.css
@@ -1,5 +1,5 @@
.jimu-widget-FloodAnalysis {
- width: 570px !important;
+ width: 60% !important;
height: 100%;
position: fixed !important;
left: 30px !important;
@@ -26,11 +26,17 @@
.flood-top{
text-align: center;
display: inline-flex;
- margin-left: 32% !important;
+ margin-left: 41% !important;
}
.flood-middle .select-box{
- margin: 5% 0 0 25%;
+ display: flex;
+ margin: 1% 0 0 1%;
+}
+
+.select-box>div{
+ display: flex;
+ margin-right: 3%;
}
.flood-top input{
@@ -66,7 +72,7 @@
.flood-middle .radio-box{
text-align: center;
- margin-top: 5%;
+ margin-top: -1%;
}
.flood-middle .tip{
@@ -76,7 +82,7 @@
.select-box label{
display: inline-block;
- width: 80px;
+ /*width: 80px;*/
height: 30px;
line-height: 30px;
vertical-align: middle;
@@ -86,7 +92,7 @@
/**表格**/
.flood-middle .table-box{
- margin-top: 3%;
+ margin-top: 1%;
}
.flood-middle .table-box table{
@@ -111,12 +117,16 @@
.flood-history .search-box{
text-align: center;
- margin-top: 2%;
+ margin-top: 1%;
}
+
+
+
+/**模糊查询**/
/*.hd {*/
/* position: relative;*/
/*}*/
@@ -148,3 +158,112 @@
/* background: #1388ff;*/
/* color: white;*/
/*}*/
+
+
+
+
+
+
+
+
+/**分页器**/
+.flood-analysis-pagination {
+ position: relative;
+ text-align: center;
+ zoom: 1;
+ display: flex;
+ width: 92%;
+ justify-content: flex-end;
+}
+
+.flood-analysis-pagination:before,
+.flood-analysis-pagination:after {
+ content: "";
+ display: table;
+}
+
+.flood-analysis-pagination:after {
+ clear: both;
+ overflow: hidden;
+}
+
+.flood-analysis-pagination span {
+ float: left;
+ margin: 0 5px;
+ width: 25px;
+ height: 25px;
+ line-height: 25px;
+ color: #bdbdbd;
+ font-size: 14px;
+}
+
+.flood-analysis-pagination .active {
+ float: left;
+ margin: 3px 5px;
+ width: 25px;
+ height: 25px;
+ line-height: 25px !important;
+ background: #e91e63;
+ color: #fff;
+ font-size: 14px;
+ border: 1px solid #e91e63;
+}
+
+.flood-analysis-pagination a {
+ float: left;
+ margin: 3px 5px;
+ width: 25px;
+ height: 25px;
+ line-height: 25px !important;
+ background: rgb(39, 118, 172);
+ border: 1px solid #ebebeb;
+ color: #ffffff;
+ font-size: 14px;
+}
+
+.flood-analysis-pagination a:hover {
+ color: #fff;
+ background: #e91e63;
+}
+
+.flood-analysis-pagination .next,
+.flood-analysis-pagination .prev {
+ font-family: "Simsun";
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.now,
+.count {
+ padding: 0 5px;
+ color: #f00;
+}
+
+.eg img {
+ max-width: 800px;
+ min-height: 500px;
+}
+
+.flood-analysis-pagination input {
+ float: left;
+ margin: 3px 5px;
+ width: 25px;
+ height: 25px;
+ line-height: 25px !important;
+ text-align: center;
+ background: #fff;
+ border: 1px solid #ebebeb;
+ outline: none;
+ color: #bdbdbd;
+ font-size: 14px;
+}
+
+#analysis-pagination,#history-pagination {
+ /*position: absolute;*/
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.flood-analysis-pagination .jump-btn {
+ width: 38px !important;
+}
--
Gitblit v1.9.3