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.js | 176 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 147 insertions(+), 29 deletions(-)
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;
+ }
});
--
Gitblit v1.9.3