///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2022 guoshilong. All Rights Reserved.
|
// 模块描述:洪水淹没分析
|
///////////////////////////////////////////////////////////////////////////
|
define(['dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/_base/html', "dojo/topic", 'jimu/BaseWidget', 'dojo/on', 'dstore/Memory', 'dstore/Trackable', 'dgrid/Grid', 'dgrid/Keyboard', 'dgrid/Selection', 'dstore/RequestMemory', 'dgrid/test/data/createSyncStore', "libs/echarts/v4/echarts.min", 'libs/layer/layer.js', 'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection, RequestMemory, createSyncStore, echarts, layer, turf) {
|
return declare([BaseWidget], {
|
baseClass: 'jimu-widget-FloodAnalysis',
|
name: 'FloodAnalysis',
|
//人员数据点位
|
peoplePositionArray: [],
|
peoplePositionEntity: [],
|
//绘制多边形的顶点经纬度
|
polygonPositionArray: [],
|
//html元素
|
analysisBtn: null,
|
historyBtn: null,
|
divFloodAnalysis: null,
|
divFloodHistory: null,
|
hdSelect: null,
|
smxSelect: null,
|
divSwInput: null,
|
spanTip: null,
|
//河段下拉列表
|
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",
|
getHistoryList:"",
|
},
|
startup: function startup() {
|
var self = this
|
this.bindHtmlElement()
|
//收起展开按钮点击事件
|
$(".fold-btn").click(function(){
|
if (self.isOpen){
|
$(this).addClass('close')
|
$(this).removeClass('open')
|
$('.content').hide()
|
self.isOpen = false
|
}else {
|
$(this).addClass('open')
|
$(this).removeClass('close')
|
$('.content').show()
|
self.isOpen = true
|
}
|
})
|
|
//实时、预测改变事件
|
$('input[type=radio][name=middleRadio]').change(function () {
|
if (this.value == "realtime") {
|
self.divSwInput.css('visibility', 'hidden')
|
self.spanTip.css('visibility', 'hidden')
|
} else {
|
self.divSwInput.css('visibility', 'visible')
|
self.spanTip.css('visibility', 'visible')
|
}
|
})
|
|
//历史风险图表格单选框改变事件
|
$('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')
|
self.historyBtn.addClass('unchoose-button')
|
self.divFloodHistory.hide()
|
self.divFloodAnalysis.show()
|
})
|
|
//历史风险图按钮点击事件
|
this.historyBtn.click(function () {
|
self.historyBtn.addClass('choose-button')
|
self.historyBtn.removeClass('unchoose-button')
|
self.analysisBtn.addClass('unchoose-button')
|
self.divFloodAnalysis.hide()
|
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 => {
|
return e.riverway.indexOf(searchString) != -1
|
})
|
self.hdSelect.find("option").remove();//添加新值 删除旧值
|
filterArray.forEach(e => {
|
self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>");
|
})
|
})
|
|
//河段选择框改变事件
|
this.hdSelect.change(function () {
|
$("#hd-input").val($(this).find("option:selected").text());
|
var selected = JSON.parse($(this).val())
|
self.currentHdId = selected.id
|
$('#sw-input').val("")
|
self.getSmxData(selected.river_code, selected.default_smx)
|
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()
|
self.analysisTableList.forEach(e => {
|
e.sw = self.calculateSw(e.water, sw)
|
})
|
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")
|
})
|
|
},
|
|
onOpen: function onOpen() {
|
this.init()
|
//面板打开的时候触发 （when open this panel trigger）
|
this.map.scene.globe.baseColor = Cesium.Color.BLACK;
|
|
//初始化点
|
// this.addPoint()
|
//切换底图
|
$($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[0]).children('div:eq(0)').trigger('click');
|
$($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[1]).children('div:eq(2)').trigger('click');
|
|
//设置地图初始位置
|
this.map.camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(116.016905, 25.884684, 10000),
|
});
|
},
|
|
onClose: function onClose() {
|
//面板关闭的时候触发 （when this panel is closed trigger）
|
this.peoplePositionEntity.forEach(e => {
|
this.map.entities.remove(e)
|
})
|
this.map.scene.globe.baseColor = Cesium.Color.WHITE;
|
|
$('#hd-select option').remove()
|
$('#smx-select option').remove()
|
$('#sw-input').val("")
|
$('#hd-input').val("")
|
$('#flood-tbody').html("")
|
$('#analysis-pagination').hide()
|
|
this.analysisTableList = []
|
},
|
|
onMinimize: function onMinimize() {
|
this.resize();
|
},
|
|
onMaximize: function onMaximize() {
|
this.resize();
|
},
|
|
resize: function resize() {
|
},
|
|
destroy: function destroy() {
|
//销毁的时候触发
|
//todo
|
//do something before this func
|
this.inherited(arguments);
|
},
|
|
//添加点
|
addPoint: function () {
|
const url = './widgets/FloodAnalysis/data.json'
|
this.getJsonUrl(url)
|
},
|
|
//获取json对象，测试用
|
getJsonUrl: function (url) {
|
var self = this;
|
$.ajax({
|
url: url,
|
dataType: 'json',
|
type: 'get',
|
success: function success(data) {
|
const viewer = self.map
|
var dataArray = data.data
|
dataArray.forEach(e => {
|
e.house = Number(e.house)
|
e.people = Number(e.people)
|
e.area = Number(e.area)
|
e.money = Number(e.money)
|
})
|
self.peoplePositionArray = []
|
self.peoplePositionArray = dataArray
|
for (let i = 0; i < dataArray.length; i++) {
|
var temp = viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(dataArray[i].LGTD, dataArray[i].LTTD),
|
point: {
|
color: Cesium.Color.RED,
|
pixelSize: 16,
|
//防止地形遮挡住点
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
},
|
});
|
self.peoplePositionEntity.push(temp)
|
}
|
}
|
});
|
},
|
|
//绑定html元素，方便操作
|
bindHtmlElement: function () {
|
this.analysisBtn = $('.analysis-button')
|
this.historyBtn = $('.history-button')
|
this.divFloodAnalysis = $('.flood-analysis')
|
this.divFloodHistory = $('.flood-history')
|
this.hdSelect = $('#hd-select')
|
this.smxSelect = $('#smx-select')
|
this.divSwInput = $('.sw')
|
this.spanTip = $('.tip')
|
},
|
|
//初始化
|
init() {
|
//重置html元素状态
|
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.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')
|
this.historyBtn.removeClass('choose-button')
|
this.historyBtn.addClass('unchoose-button')
|
|
this.getHdData()
|
},
|
|
//获取河段下拉数据
|
getHdData() {
|
const self = this
|
$.ajax({
|
url: self.url.riverwaySelectName,
|
type: 'post',
|
dataType: 'json',
|
jsonp: 'callback',
|
jsonpCallback: 'data',
|
data: {},
|
success: function (res) {
|
let data = res.data
|
self.hdDataList = data
|
self.hdSelect.find("option").remove();//添加新值 删除旧值
|
data.forEach(e => {
|
self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>");
|
})
|
}
|
});
|
},
|
|
//获取水面线数据
|
getSmxData(hdid, defaultId) {
|
const self = this
|
$.ajax({
|
url: self.url.waterlineSelectName,
|
type: 'post',
|
dataType: 'json',
|
jsonp: 'callback',
|
jsonpCallback: 'data',
|
data: {
|
hdid: hdid
|
},
|
success: function (res) {
|
let data = res.data
|
self.smxSelect.find("option").remove();//添加新值 删除旧值
|
if (data.length <= 0) {
|
$('#flood-tbody').html("")
|
$('#analysis-pagination').hide()
|
}
|
|
data.forEach(e => {
|
|
self.smxSelect.append("<option value=" + e.smxcode + ">" + e.waterline + "</option>");
|
|
if (e.smxcode == defaultId) {
|
$("#smx-select option[value=" + e.smxcode + "] ").attr("selected", true)
|
self.smxSelect.trigger("change")
|
}
|
})
|
|
}
|
});
|
},
|
|
//获取点数据
|
getPointData(smxcode) {
|
this.currentSmxcode = smxcode
|
const self = this
|
$.ajax({
|
url: self.url.childpage,
|
type: 'get',
|
dataType: 'json',
|
jsonp: 'callback',
|
jsonpCallback: 'data',
|
data: {
|
parentId: smxcode,
|
size: 9999999
|
},
|
success: function (res) {
|
if (res.code == 200) {
|
let data = res.data.records
|
self.analysisTableList = data
|
self.getSub(self.currentHdId, self.currentSmxcode)
|
}
|
}
|
});
|
},
|
|
//获取历史风险图数据列表
|
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 需要加载的所有数据
|
* @param pageElementId 分页html的id
|
* @param tableElementId tbody id
|
*/
|
loadPagination(tableData, pageElementId) {
|
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
|
$('#' + 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;
|
}
|
}
|
|
pageElementId == "analysis-pagination" ? self.loadAnalysisTable(listdata) :self.loadHistoryTable(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]);
|
}
|
}
|
pageElementId == "analysis-pagination" ? self.loadAnalysisTable(startData) :self.loadHistoryTable(startData)
|
},
|
|
/**
|
* 加载淹没分析表格
|
* @param listData 需要加载的数据
|
*/
|
loadAnalysisTable(listData) {
|
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 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)
|
},
|
|
/**
|
* 计算水位
|
* @param waterline 水面线高度
|
* @param number 差值
|
*/
|
calculateSw(waterline, sub) {
|
let sw = this.floatAdd(Number(waterline), Number(sub))
|
return sw
|
},
|
|
//获取差值
|
getSub(hdid, smxcode) {
|
const self = this
|
$.ajax({
|
url: self.url.getCzByGlCodeByGlQdj,
|
type: 'get',
|
dataType: 'json',
|
jsonp: 'callback',
|
jsonpCallback: 'data',
|
data: {
|
hdId: hdid,
|
smxcode: smxcode
|
},
|
success: function (res) {
|
if (res.code == 200) {
|
let sub = res.data
|
self.analysisTableList.forEach(e => {
|
e.lng = Number(e.lng).toFixed(4)
|
e.lat = Number(e.lat).toFixed(4)
|
e.sw = self.calculateSw(e.water, sub)
|
|
e.water = Number(e.water).toFixed(4)
|
e.sw = Number(e.sw).toFixed(4)
|
})
|
|
self.loadPagination(self.analysisTableList, "analysis-pagination")
|
}
|
}
|
});
|
},
|
|
//防止出现两个小数相加出现很多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;
|
}
|
|
});
|
});
|
