From 85f104634bcde736e1fc25d22fd4ca354c8cd52e Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Thu, 09 Feb 2023 17:09:22 +0800
Subject: [PATCH] 洪水淹没-样式调整
---
widgets/FloodAnalysis/Widget.html | 17 +++++
widgets/FloodAnalysis/css/style.css | 13 ++--
widgets/FloodAnalysis/Widget.js | 97 ++++++++++++++++++++++++++-----
3 files changed, 102 insertions(+), 25 deletions(-)
diff --git a/widgets/FloodAnalysis/Widget.html b/widgets/FloodAnalysis/Widget.html
index 56a4c27..f74610a 100644
--- a/widgets/FloodAnalysis/Widget.html
+++ b/widgets/FloodAnalysis/Widget.html
@@ -69,7 +69,7 @@
<label for="search-name">名称：</label>
<input id="search-name" class="search-name-input" type="text" name="word" autocomplete="off"
maxlength="256" placeholder="请输入筛选名称"/>
- <input class="search-button" type="button" value="查 询"/>
+ <input id="search-button" class="search-button" type="button" value="查 询"/>
</div>
<div class="table-box">
<table>
@@ -83,7 +83,20 @@
</th>
</tr>
</thead>
- <tbody id="flood-history-tbody" class="table-tbody flood-tbody"></tbody>
+ <tbody id="flood-history-tbody" class="table-tbody flood-tbody">
+ <tr>
+ <td><div><input type="radio" name="tableRadio" value="1"></div></td>
+ <td><div>5年洪水淹没图</div></td>
+ </tr>
+ <tr>
+ <td><div><input type="radio" name="tableRadio" value="2"></div></td>
+ <td><div>10年洪水淹没图</div></td>
+ </tr>
+ <tr>
+ <td><div><input type="radio" name="tableRadio" value="3"></div></td>
+ <td><div>15年洪水淹没图</div></td>
+ </tr>
+ </tbody>
</table>
<div class="flood-analysis-pagination" id="history-pagination"></div>
</div>
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 6fe27fa..6bff464 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -24,19 +24,26 @@
hdDataList: [],
//洪水分析表格数据
analysisTableList: [],
+ //历史风险图表格数据
+ historyTableList:[],
+ //当前选中的河段
currentHdId: "",
+ //当前选中的水面线
currentSmxcode: "",
+ //收起框打开状态
isOpen:true,
//api接口
url: {
riverwaySelectName: "http://192.168.0.200:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4",
waterlineSelectName: "http://192.168.0.200:82/blade-ycreal/waterline/selectName",
childpage: "http://192.168.0.200:82/blade-ycreal/water/childpage",
- getCzByGlCodeByGlQdj: "http://192.168.0.200:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj"
+ getCzByGlCodeByGlQdj: "http://192.168.0.200:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj",
+ getHistoryList:"",
},
startup: function startup() {
var self = this
this.bindHtmlElement()
+ //收起展开按钮点击事件
$(".fold-btn").click(function(){
if (self.isOpen){
$(this).addClass('close')
@@ -51,6 +58,7 @@
}
})
+ //实时、预测改变事件
$('input[type=radio][name=middleRadio]').change(function () {
if (this.value == "realtime") {
self.divSwInput.css('visibility', 'hidden')
@@ -61,6 +69,12 @@
}
})
+ //历史风险图表格单选框改变事件
+ $('input[type=radio][name=tableRadio]').change(function () {
+ console.log(this.value)
+ })
+
+ //洪水淹没分析按钮点击事件
this.analysisBtn.click(function () {
self.analysisBtn.addClass('choose-button')
self.analysisBtn.removeClass('unchoose-button')
@@ -69,6 +83,7 @@
self.divFloodAnalysis.show()
})
+ //历史风险图按钮点击事件
this.historyBtn.click(function () {
self.historyBtn.addClass('choose-button')
self.historyBtn.removeClass('unchoose-button')
@@ -77,18 +92,15 @@
self.divFloodHistory.show()
})
-
- //河段输入框聚焦、失焦、值改变事件
+ //河段输入框聚焦、失焦、输入事件
$('#hd-input').focus(function () {
$("#hd-select").show()
})
-
$('#hd-input').blur(function () {
//隐藏域触发改变事件需要手动触发
$("#hd-select").val().change()
$("#hd-select").hide()
})
-
$('#hd-input').on("input", function () {
var searchString = $('#hd-input').val()
var filterArray = self.hdDataList.filter(e => {
@@ -100,6 +112,7 @@
})
})
+ //河段选择框改变事件
this.hdSelect.change(function () {
$("#hd-input").val($(this).find("option:selected").text());
var selected = JSON.parse($(this).val())
@@ -109,11 +122,13 @@
self.hdSelect.hide()
})
+ //水面线选择框改变事件
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()
@@ -122,6 +137,15 @@
})
self.loadPagination(self.analysisTableList, "analysis-pagination")
}
+ })
+
+ $('#search-button').click(function () {
+ let searchName = $('#search-name').val()
+
+ let filterArray = self.historyTableList.filter(e=>{
+ return e.name.indexOf(searchName) != -1
+ })
+ self.loadPagination(filterArray,"flood-analysis-pagination")
})
},
@@ -141,11 +165,6 @@
this.map.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.016905, 25.884684, 10000),
});
-
- $(this).addClass('open')
- $(this).removeClass('close')
- $('.content').show()
- this.isOpen = true
},
onClose: function onClose() {
@@ -245,6 +264,10 @@
this.divFloodAnalysis.show()
$("input[type=radio][name=middleRadio][value='realtime']").prop('checked', 'checked')
this.hdSelect.hide()
+ $('.fold-btn').addClass('open')
+ $('.fold-btn').removeClass('close')
+ $('.content').show()
+ this.isOpen = true
this.analysisBtn.addClass('choose-button')
this.analysisBtn.removeClass('unchoose-button')
@@ -333,6 +356,27 @@
});
},
+ //获取历史风险图数据列表
+ getHistoryList(){
+ const self = this
+ $.ajax({
+ url: self.url.getHistoryList,
+ type: 'get',
+ dataType: 'json',
+ jsonp: 'callback',
+ jsonpCallback: 'data',
+ data: {
+ name:"",
+ },
+ success: function (res) {
+ if (res.code == 200) {
+ let data = res.data.records
+
+ }
+ }
+ });
+ },
+
/**
* 加载分页器
* @param tableData 需要加载的所有数据
@@ -340,8 +384,12 @@
* @param tableElementId tbody id
*/
loadPagination(tableData, pageElementId) {
- if (tableData.length <= 0) {
+ if (tableData.length <= 0 && pageElementId =="analysis-pagination") {
$('#analysis-pagination').hide()
+ }
+
+ if (tableData.length <= 0 && pageElementId =="history-pagination") {
+ $('#history-pagination').hide()
}
var count = Math.ceil(tableData.length / 10);
var self = this
@@ -360,7 +408,9 @@
break;
}
}
- self.loadAnalysisTable(listdata)
+
+ pageElementId == "analysis-pagination" ? self.loadAnalysisTable(listdata) :self.loadHistoryTable(listdata)
+
}
});
@@ -375,15 +425,14 @@
startData.push(tableData[i]);
}
}
- self.loadAnalysisTable(startData)
+ pageElementId == "analysis-pagination" ? self.loadAnalysisTable(startData) :self.loadHistoryTable(startData)
},
/**
- * 加载表格
+ * 加载淹没分析表格
* @param listData 需要加载的数据
- * @param elementId 需要加载的表格的tbody id
*/
- loadAnalysisTable(listData, elementId) {
+ loadAnalysisTable(listData) {
var table = ""
listData.forEach(e => {
table += '<tr>' +
@@ -396,6 +445,21 @@
'</tr>'
})
$('#flood-tbody').html(table)
+ },
+
+ /**
+ * 加载历史风险表格
+ * @param listData 需要加载的数据
+ */
+ loadHistoryTable(listData) {
+ var table = ""
+ listData.forEach(e => {
+ table += '<tr>' +
+ '<td>div><input type="radio" name="tableRadio" value='+e.id+'></div></td>' +
+ '<td><div>' + e.name + '</div></td>' +
+ '</tr>'
+ })
+ $('#flood-history-tbody').html(table)
},
/**
@@ -455,7 +519,6 @@
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 04ad4f7..824af47 100644
--- a/widgets/FloodAnalysis/css/style.css
+++ b/widgets/FloodAnalysis/css/style.css
@@ -2,8 +2,8 @@
width: 60% !important;
height: 100%;
position: fixed !important;
- left: 30px !important;
- top: 75px !important;
+ /*left: 30px !important;*/
+ top: 45px !important;
border: 1px solid rgb(69, 154, 251);
border-radius: 5px;
background: rgba(35, 36, 58, .7);
@@ -79,8 +79,9 @@
}
.search-button {
- width: 50px;
- height: 28px;
+ width: 66px;
+ line-height: 0px;
+ height: 30px;
background-color: white;
border: none;
cursor: pointer;
@@ -101,7 +102,7 @@
color: #ff3737;
}
-.select-box label {
+label {
display: inline-block;
/*width: 80px;*/
height: 30px;
@@ -137,8 +138,8 @@
}
.flood-history .search-box {
- text-align: center;
margin-top: 1%;
+ margin-left: 1%;
}
--
Gitblit v1.9.3