///////////////////////////////////////////////////////////////////////////
// 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',
'dgrid/Editor',
'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,Editor, RequestMemory, createSyncStore, echarts, layer, turf) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-FloodAnalysis',
name: 'FloodAnalysis',
//渲染的点位
pointEntities: [],
//渲染的线
drawingPolyline:null,
//html元素
analysisBtn: null,
historyBtn: null,
divFloodAnalysis: null,
divFloodHistory: null,
hdSelect: null,
smxSelect: null,
//河段下拉列表
hdDataList: [],
//水面线下拉列表
smxDataList:[],
//洪水分析表格数据
analysisTableList: [],
dgridSelectEvent:null,
currentSelectHistoryData:null,
//历史风险图表格数据
historyTableList: [
{name: "5年洪水淹没图"},
{name: "10年洪水淹没图"},
{name: "15年洪水淹没图"},
],
//当前选中的河段
currentHd: null,
//当前选中的水面线
currentSmxcode: "",
//水文站最近的点
currentNearPoint:null,
//收起框打开状态
isOpen: true,
//api接口
url: {
riverwaySelectName: "http://localhost:82/blade-ycreal/riverway/selectName",
waterlineSelectName: "http://localhost:82/blade-ycreal/waterline/selectName",
childpage: "http://localhost:82/blade-ycreal/water/childpage",
getCzByGlCodeByGlQdj: "http://localhost:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj",
getHistoryList: "http://localhost:82/blade-ycreal/inundationResult/list",
saveHistoryData: "http://localhost:82/blade-ycreal/inundationResult/save",
getCoordinatesMinQdj: "http://localhost:82/blade-ycreal/water/getCoordinatesMinQdj",
},
evaluateData: [
{
name: "会昌县",
house: 35,
population: 175,
area: 12.888,
value: 50.123
},
{
name: "于都县",
house: 70,
population: 350,
area: 24.456,
value: 100.456
},
{
name: "赣县",
house: 20,
population: 100,
area: 8.551,
value: 39.789
}
],
startup: function startup() {
var self = this
this.bindHtmlElement()
//实时、预测改变事件
$('input[type=radio][name=middleRadio]').change(function () {
if (this.value == "realtime") {
$("#sw-input").prop('disabled', true);
} else {
$("#sw-input").prop('disabled', false);
}
if ($('#smx-select').val())
self.getPointData($('#smx-select').val())
})
//开始分析按钮点击事件
$('#start-analysis-btn').click(function () {
if (self.currentHd && self.currentSmxcode) {
self.drawWater('analysis')
} else {
layer.msg("请先选择河段和水面线")
}
})
//洪水淹没分析按钮点击事件
this.analysisBtn.click(function () {
self.analysisBtn.addClass('choose-button')
self.analysisBtn.removeClass('unchoose-button')
self.historyBtn.addClass('unchoose-button')
self.historyBtn.removeClass('choose-button')
self.divFloodHistory.hide()
self.divFloodAnalysis.show()
$('#history-pagination').hide()
if (self.currentHd){
$('#analysis-pagination').show()
}
})
//历史风险图按钮点击事件
this.historyBtn.click(function () {
self.historyBtn.addClass('choose-button')
self.historyBtn.removeClass('unchoose-button')
self.analysisBtn.addClass('unchoose-button')
self.analysisBtn.removeClass('choose-button')
self.divFloodAnalysis.hide()
self.divFloodHistory.show()
$('#analysis-pagination').hide()
$('#history-pagination').show()
//获取历史数据
self.getHistoryList()
})
//河段输入框聚焦、失焦、输入事件
$('#hd-input').focus(function () {
$("#hd-select").show()
})
$('#hd-input').blur(function () {
//隐藏域触发改变事件需要手动触发
// $("#hd-select").val().change()
setTimeout(function(){//有bug 需要延迟执行隐藏
$("#hd-select").hide()
},300)
})
// 河段输入事件
$('#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 => {
let v = ''
if (e.stnm) {
v += '-' + e.stnm.trim() + '站'
}
if (e.gl_qdj) {
v += '-起点距' + e.gl_qdj
}
self.hdSelect.append("");
})
})
//水位输入事件
$('#sw-input').on("input", function () {
self.getYcSub()
})
//河段选择框改变事件
this.hdSelect.change(function () {
$("#hd-input").val($(this).find("option:selected").text());
var selected = JSON.parse($(this).val())
self.currentHd = selected
self.getSmxData(selected.river_code, selected.default_smx)
self.getMin(selected.default_smx,selected.gl_qdj)
if (self.waterEntity)
self.map.entities.remove(self.waterEntity)
//地图定位
self.map.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(selected.river_origin, selected.qd_lat, 50000),
});
self.hdSelect.hide()
})
//水面线选择框改变事件
this.smxSelect.change(function () {
var selected = $(this).val()
self.getPointData(selected)
})
//水位输入框按下回车事件
$('#sw-input').keypress(function (event) {
if (event.which == 13) {
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, "history-pagination")
})
$('#save-button').click(function () {
self.confirmPopup()
// self.floodAnalysisPopup()
})
},
onOpen: function onOpen() {
this.init()
//面板打开的时候触发 （when open this panel trigger）
this.map.scene.globe.baseColor = Cesium.Color.BLACK;
//切换底图
$($('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.deleteEntities(this.pointEntities)
if (this.drawingPolyline)
this.map.entities.remove(this.drawingPolyline);
if (this.waterEntity)
this.map.entities.remove(this.waterEntity)
this.map.scene.globe.baseColor = Cesium.Color.WHITE;
$('#hd-select option').remove()
$('#smx-select option').remove()
$('#sw-input').val("")
$('#hd-input').val("")
//清空表格数据
$('.analysis-box-list').empty();
$('.history-box-list').empty();
$('#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);
},
//绑定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')
},
//初始化
init() {
//重置html元素状态
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()
$("#sw-input").prop('disabled', true);
$('#search-name').val("")
this.isOpen = true
this.analysisBtn.addClass('choose-button')
this.analysisBtn.removeClass('unchoose-button')
this.historyBtn.removeClass('choose-button')
this.historyBtn.addClass('unchoose-button')
this.currentHd = null
this.currentSmxcode = ""
//获取河段数据
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 => {
let v = ''
if (e.stnm) {
v += '-' + e.stnm.trim() + '站'
}
if (e.gl_qdj) {
v += '-起点距' + e.gl_qdj
}
self.hdSelect.append("");
})
}
});
},
//获取水面线数据
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.smxDataList = data
self.smxSelect.find("option").remove();//添加新值 删除旧值
if (data.length <= 0) {
$('#flood-tbody').html("")
$('#analysis-pagination').hide()
}
data.forEach(e => {
self.smxSelect.append("");
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.createPointAndLine(data,self.pointEntities)
self.analysisTableList = data
self.getSub(self.currentHd.id, self.currentSmxcode)
}
}
});
},
//创建点线
createPointAndLine(data,pointEntities){
this.deleteEntities(pointEntities)
// 水面线连线
let cartesians = []
for (let i = 0; i < data.length; i++) {
cartesians.push(new Cesium.Cartesian3.fromDegrees(data[i].lng, data[i].lat,data[i].sw))
let temp = this.map.entities.add({
position: Cesium.Cartesian3.fromDegrees(data[i].lng, data[i].lat,data[i].sw),
point: {
color: Cesium.Color.RED,
pixelSize: 11,
//防止地形遮挡住点
disableDepthTestDistance: Number.POSITIVE_INFINITY,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
},
});
// 清空使用
pointEntities.push(temp)
}
// 先清空 后画线
if (this.drawingPolyline){
this.map.entities.remove(this.drawingPolyline);
}
let lineOpts = {
polyline: {
positions: cartesians,
clampToGround: true,
width: 3,
color: "#279a9a"
}
};
// 画线
this.drawingPolyline = this.map.entities.add(lineOpts);
},
//获取历史风险图数据列表
getHistoryList() {
const self = this
$.ajax({
url: self.url.getHistoryList,
type: 'get',
dataType: 'json',
jsonp: 'callback',
jsonpCallback: 'data',
data: {
name: "",
pageSize:999999999,
},
success: function (res) {
if (res.code == 200) {
let data = res.data.records
data.forEach(e=>{
e.smxVal = JSON.parse(e.smxVal)
})
self.historyTableList = data
self.loadPagination(data,"history-pagination")
}
}
});
},
/**
* 加载分页器
* @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()
}
let pageSize = 10
var count = Math.ceil(tableData.length / pageSize);
var self = this
$('#' + pageElementId).pagination({
mode: 'fixed',
jump: true,
coping: false,
pageCount: count,
callback: function (index) {
var listdata = [];
//显示页数
var index = (index.getCurrent() - 1) * pageSize;
for (var i = index; i < index + pageSize; i++) {
listdata.push(tableData[i]);
if (i == tableData.length - 1) {
break;
}
}
pageElementId == "analysis-pagination" ? self.createList(listdata,"洪水淹没分析") : self.createList(listdata,"历史风险图")
}
});
//首次加载前11条数据
var startData = [];
if (tableData.length > pageSize) {
for (var i = 0; i < pageSize; i++) {
startData.push(tableData[i]);
}
} else {
for (var i = 0; i < tableData.length; i++) {
startData.push(tableData[i]);
}
}
pageElementId == "analysis-pagination" ? self.createList(startData,"洪水淹没分析") : self.createList(startData,"历史风险图")
},
/**
* 计算水位
* @param waterline 水面线高度
* @param number 差值
*/
calculateSw(waterline, sub) {
let sw = this.floatAdd(Number(waterline), Number(sub))
return sw
},
//预测水位计算
getYcSub() {
const self = this
self.analysisTableList.forEach(e => {
e.lng = Number(e.lng).toFixed(4)
e.lat = Number(e.lat).toFixed(4)
e.sw = self.calculateSw(e.water, $('#sw-input').val())
e.water = Number(e.water).toFixed(3)
e.sw = Number(e.sw).toFixed(3)
})
self.loadPagination(self.analysisTableList, "analysis-pagination")
},
//实时水位计算
getSub(hdid, smxcode) {
const self = this
if ($('input[name=middleRadio]:checked').val() == 'realtime') {
$.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
$('#sw-input').val(sub)
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(3)
e.sw = Number(e.sw).toFixed(3)
})
self.loadPagination(self.analysisTableList, "analysis-pagination")
}
}
});
} else {
self.getYcSub()
}
},
//获取最接近水文站的值
getMin(smxcode, glQdj) {
const self = this
$.ajax({
url: self.url.getCoordinatesMinQdj,
type: 'get',
dataType: 'json',
jsonp: 'callback',
jsonpCallback: 'data',
data: {
smxcode:smxcode,
glQdj:glQdj
},
success: function (res) {
if (res.code == 200) {
self.currentNearPoint = res.data
}
}
});
},
//保存历史风险图
saveHistoryData() {
const self = this
$.ajax({
url: self.url.saveHistoryData,
type: 'get',
dataType: 'json',
jsonp: 'callback',
jsonpCallback: 'data',
data: {},
success: function (res) {
if (res.code == 200) {
self.getHistoryList()
}
}
});
},
//防止出现两个小数相加出现很多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;
},
//删除地图上的标注点位
deleteEntities(entities) {
entities.forEach(e => {
this.map.entities.remove(e)
})
entities = []
},
//评估分析弹窗
evaluatePopup(flag) {
var self = this
let selectSmx = this.smxDataList.filter(e=>{
return e.smxcode == this.currentSmxcode
})
let isAnalysis = flag == 'analysis'?true:false
let parentData = {}
if (isAnalysis){
parentData.data = this.evaluateData
parentData.hd = this.currentHd
parentData.smx = selectSmx[0]
parentData.sw = $('#sw-input').val()
parentData.point = this.analysisTableList
}else {
parentData.data = this.evaluateData
parentData.hd = this.currentSelectHistoryData.smxVal.hd
parentData.smx = this.currentSelectHistoryData.smxVal.smx
parentData.sw = this.currentSelectHistoryData.smxVal.sw
parentData.point = this.currentSelectHistoryData.smxVal.point
}
var url = './corelib/common/popup/evaluateAnalysis.html'
var top = ($(window).height() - 600) / 2;
var left = ($(window).width() - 1300 - 340) / 2 + 340;
layer.open({
title: '评估分析',
type: 2,
maxmin: false, //开启最大化最小化按钮
area: ['1500px', '700px'],
skin: 'floodAnalysis',
offset: 'auto',
content: url + "?parentData=" + encodeURIComponent(JSON.stringify(parentData)),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
id: "floodAnalysisLayer",
closeBtn: 1,
success:function (layero,index) {
//绑定父子之间的关系，用于数据传递，缺少则无法传递
var body = layer.getChildFrame("body", index);
//得到iframe页的窗口对象
var iframeWin = window[layero.find('iframe')[0]['name']];
if (isAnalysis){
iframeWin.$('#save-btn').show()
}else {
iframeWin.$('#save-btn').hide()
}
}
});
},
//http://dgrid.io/tutorials/1.0/hello_dgrid/ 创建表格
createList: function (dataList, txt) {
const self = this
var CustomGrid = declare([Grid, Keyboard, Selection,Editor]);
var column, tab, moon, dauy;
var formatter = function (value,object) {
if (self.currentNearPoint.id == object.id) {
return '' + value + ''
} else {
return value
}
}
if (txt == "洪水淹没分析") {
$('.analysis-box-list').empty();
column = {
location: {
label:'位置',
formatter:formatter
},
origin: {
label:'起点距',
formatter:formatter
},
water: {
label:'水面线',
formatter:formatter
},
sw: {
label:'水位',
formatter:formatter
},
lng:{
label:'经度',
formatter:formatter
},
lat:{
label:'纬度',
formatter:formatter
},
}
tab = 'analysis-tab1-grid'
} else if (txt == "历史风险图") {
$('.history-box-list').empty();
column = {
// radio:{ label: "", field: "radio", editor: 'radio' },
name: '名称',
}
tab = 'history-tab2-grid'
}
var grid = new CustomGrid({
columns: column,
selectionMode: 'single', // for Selection; only select a single row at a time
cellNavigation: false, // for Keyboard; allow only row-level keyboard navigation
}, tab);
grid.startup();
//change事件
// grid.on("dgrid-datachange", function(evt){
// //获取行数据
// let data = evt.cell.row.data
// });
if (this.dgridSelectEvent){
this.dgridSelectEvent.remove()
}
this.dgridSelectEvent = grid.on("dgrid-select", function(evt){
//获取行数据
let data = evt.rows[0].data
self.currentSelectHistoryData = data
if (data.smxVal.point.length>0){
self.deleteEntities(self.pointEntities)
if (self.drawingPolyline)
self.map.entities.remove(self.drawingPolyline);
if (self.waterEntity)
self.map.entities.remove(self.waterEntity)
$('#sw-input').val("")
$('#hd-input').val("")
$('#smx-select option').remove()
//清空表格数据
$('.analysis-box-list').empty();
$('#analysis-pagination').hide()
self.analysisTableList = []
self.createPointAndLine(data.smxVal.point,self.pointEntities)
self.map.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, 50000),
});
self.drawWater('history')
}
});
grid.renderArray(dataList);
},
// 洪水淹没效果
drawWater(flag) {
//地图定位
// this.map.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(115.93791, 25.989108, 5000),
// });
//显示进度条
$('.dong-progress .container #progress_bar').width(0);
$('.dong-progress').stop().hide();
this.showWater = true
this.waterEntity && this.map.entities.remove(this.waterEntity)
const waterCoord = [116.0072, 25.9058, 100, 116.0546, 25.9012, 100 , 116.0457, 25.8611, 100, 115.9859, 25.8740 ,100]
let startHeight = 169
const targetHeight = 200
this.waterEntity = this.map.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(waterCoord),
material: Cesium.Color.fromBytes(64, 157, 253, 200),
perPositionHeight: true,
extrudedHeight: new Cesium.CallbackProperty(() => { return startHeight }, false)
}
})
const waterInterval = setInterval(() => {
if (startHeight < targetHeight) {
startHeight += 5
$('.dong-progress').stop().show();
// 总长度
var totalWidth = $('.dong-progress .container').width();
// 过度长度
var excessiveWidth = totalWidth / 100;
var watchWidth = 0;
// 进度条的定时器
var proTime = setInterval(function () {
watchWidth += excessiveWidth;
if (watchWidth > totalWidth) {
watchWidth = totalWidth;
}
$('.dong-progress .container #progress_bar').width(watchWidth);
}, 22);
if (startHeight >= targetHeight) {
startHeight = targetHeight
clearInterval(waterInterval)
clearInterval(proTime);
//隐藏进度条
$('.dong-progress .container #progress_bar').width(0);
$('.dong-progress').stop().hide();
this.showWater = false
this.evaluatePopup(flag)
}
// 使用该方式会闪烁，改用 Cesium.CallbackProperty 平滑
// this.waterEntity.polygon.extrudedHeight = startHeight
}
}, 1000*0.5)
}
});
});