///////////////////////////////////////////////////////////////////////////
|
// 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',
|
'dojo/mouse',
|
'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,mouse, 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,
|
evaluateLayerIndex:"",
|
//收起框打开状态
|
popupLayer: null,
|
//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",
|
getRealTimeWaterByhdId: "http://localhost:82/blade-ycreal/waterline/getRealTimeWaterByhdId",
|
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: "<0.5",
|
house: 35,
|
population: 175,
|
area: 12.888,
|
value: 50.123
|
},
|
{
|
name: "1.0-2.0",
|
house: 70,
|
population: 350,
|
area: 24.456,
|
value: 100.456
|
},
|
{
|
name: "2.0-3.0",
|
house: 20,
|
population: 100,
|
area: 8.551,
|
value: 39.789
|
},
|
{
|
name: ">3.0",
|
house: 70,
|
population: 350,
|
area: 24.6,
|
value: 20.4
|
}
|
],
|
startup: function startup() {
|
const 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()
|
}
|
$('#search-name').val("")
|
})
|
|
//历史风险图按钮点击事件
|
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()
|
//关闭分析窗口
|
if (self.evaluateLayerIndex){
|
layer.close(self.evaluateLayerIndex)
|
self.evaluateLayerIndex = ""
|
$('#restore-icon').hide()
|
}
|
setTimeout(function(){//有bug 需要延迟执行隐藏
|
$("#hd-select").hide()
|
},300)
|
})
|
// 河段输入事件
|
$('#hd-input').on("input", function () {
|
let searchString = $('#hd-input').val()
|
let 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>");
|
})
|
})
|
|
//水位输入事件
|
$('#sw-input').on("input", function (e,v) {
|
self.getSw($('#sw-input').val())
|
})
|
|
//河段选择框改变事件
|
this.hdSelect.change(function () {
|
$("#hd-input").val($(this).find("option:selected").text());
|
let selected = JSON.parse($(this).val())
|
// 设置站点信息
|
$('#glzd').val(selected.stnm)
|
$('#qdj').val(selected.gl_qdj.substring(0,selected.gl_qdj.length - 2))
|
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 () {
|
let 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")
|
})
|
|
$('#restore-icon').click(function () {
|
if (self.popupLayer){
|
self.popupLayer.show()
|
$(this).hide()
|
}
|
})
|
},
|
|
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 = []
|
|
//关闭分析窗口
|
if (this.evaluateLayerIndex){
|
layer.close(this.evaluateLayerIndex)
|
this.evaluateLayerIndex = ""
|
$('#restore-icon').hide()
|
}
|
},
|
|
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("")
|
$('#glzd').val("")
|
$('#qdj').val('')
|
$('.restore-icon').hide()
|
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 => {
|
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.smxDataList = data
|
self.smxSelect.find("option").remove();//添加新值 删除旧值
|
if (data.length <= 0) {
|
$('#flood-tbody').html("")
|
$('#analysis-pagination').hide()
|
self.deleteEntities(self.pointEntities)
|
if (self.drawingPolyline){
|
self.map.entities.remove(self.drawingPolyline);
|
}
|
}
|
|
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.createPointAndLine(data,self.pointEntities)
|
self.analysisTableList = data
|
self.getRealTimeWaterByhdId(self.currentHd.id)
|
}
|
}
|
});
|
},
|
|
//创建点线
|
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),
|
billboard:{
|
image: "./images/jiangshui_sq.png",
|
pixelOffset: new Cesium.Cartesian2(0, 0),
|
color: new Cesium.Color(20, 20, 0, 1),
|
width: 14,
|
height: 14,
|
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
}
|
});
|
// 清空使用
|
pointEntities.push(temp)
|
}
|
//防止切换面板后渲染水面出错
|
this.map.scene.globe.depthTestAgainstTerrain = true;
|
|
// 先清空 后画线
|
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 = 22
|
let count = Math.ceil(tableData.length / pageSize);
|
const self = this
|
$('#' + pageElementId).pagination({
|
mode: 'fixed',
|
jump: true,
|
coping: false,
|
pageCount: count,
|
callback: function (index) {
|
let listdata = [];
|
//显示页数
|
var index = (index.getCurrent() - 1) * pageSize;
|
for (let 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条数据
|
let startData = [];
|
if (tableData.length > pageSize) {
|
for (let i = 0; i < pageSize; i++) {
|
startData.push(tableData[i]);
|
}
|
} else {
|
for (let 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
|
},
|
|
//减法函数
|
accSub(arg1,arg2){
|
let r1,r2,m,n;
|
r1 = arg1.toString().length
|
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
|
m=Math.pow(10,Math.max(r1,r2));
|
//last modify by deeka
|
//动态控制精度长度
|
n=(r1>=r2)?r1:r2;
|
return ((arg1*m-arg2*m)/m).toFixed(n);
|
},
|
|
//获取实时水位
|
getRealTimeWaterByhdId(hdid) {
|
const self = this
|
// 实时 需要请求服务器获取实时水位数据
|
if ($('input[name=middleRadio]:checked').val() == 'realtime') {
|
$.ajax({
|
url: self.url.getRealTimeWaterByhdId,
|
type: 'get',
|
dataType: 'json',
|
jsonp: 'callback',
|
jsonpCallback: 'data',
|
data: {
|
hdId: hdid
|
},
|
success: function (res) {
|
if (res.code == 200) {
|
let sub = res.data
|
$('#sw-input').val(sub)
|
self.getSw(sub)
|
}
|
}
|
});
|
} else {
|
self.getSw($('#sw-input').val())
|
}
|
|
},
|
|
//计算水位
|
getSw(val){
|
const self = this
|
let chazhi = 0
|
if (val > 0) {
|
chazhi = self.accSub(val,self.currentNearPoint.water)
|
}
|
|
let list = JSON.parse(JSON.stringify(self.analysisTableList))
|
|
list.forEach(e => {
|
e.lng = Number(e.lng).toFixed(4)
|
e.lat = Number(e.lat).toFixed(4)
|
e.sw = self.calculateSw(e.water, chazhi)
|
e.water = Number(e.water).toFixed(2)
|
e.sw = Number(e.sw).toFixed(2)
|
})
|
self.loadPagination(list, "analysis-pagination")
|
},
|
|
//获取最接近水文站的值
|
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) {
|
let 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) {
|
const 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
|
}
|
|
let url = './corelib/common/popup/evaluateAnalysis.html'
|
let top = ($(window).height() - 764) / 2;
|
let left = ($(window).width() -465);
|
layer.open({
|
title: '分析结果',
|
shade: 0,
|
type: 2,
|
maxmin: true, //开启最大化最小化按钮
|
area: ['465px', '818px'],
|
skin: 'floodAnalysis',
|
offset: [top,left],
|
content: url + "?parentData=" + encodeURIComponent(JSON.stringify(parentData)),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
|
id: "floodAnalysisLayer",
|
closeBtn: 0,
|
shade: 0,
|
move:false,
|
maxmin: false,
|
//设置默认不在左下角
|
minStack:false,
|
zIndex:-100000,
|
success:function (layero,index) {
|
$('.layui-layer-setwin .layui-layer-min cite').css("background-color",'white')
|
//绑定父子之间的关系，用于数据传递，缺少则无法传递
|
let body = layer.getChildFrame("body", index);
|
//得到iframe页的窗口对象
|
let iframeWin = window[layero.find('iframe')[0]['name']];
|
self.evaluateLayerIndex = index
|
|
if (isAnalysis){
|
iframeWin.$('#save-btn').show()
|
}else {
|
iframeWin.$('#save-btn').hide()
|
}
|
|
self.popupLayer = $('.layui-layer')
|
iframeWin.$('#close-btn').click(function () {
|
self.popupLayer.hide()
|
$('#restore-icon').show()
|
})
|
|
if ($('.layui-layer-max').hasClass('layui-layer-maxmin')){
|
$('.layui-layer-max').show()
|
}else {
|
$('.layui-layer-max').hide()
|
}
|
|
//图片放大方法
|
// 思路: 获取所有要用的 => 然后通过点击图片显示弹窗 => 赋值到弹窗里面 => 图片赋值 => 文本赋值
|
// 获取点击图片
|
let img = iframeWin.$('#show-img')
|
// 获取弹窗
|
let modal = $('#myModal')
|
// 弹窗图片
|
let contImg = $('#img01')
|
|
img.click(function () {
|
modal.css({
|
"display":"block",
|
'position':'fixed',
|
'background-color':'#2f353cd4'
|
})
|
contImg.prop('src',img.prop('src'))
|
})
|
// 点击x按钮关闭弹窗
|
let closeBox = $('.close')
|
closeBox.click(function () {
|
modal.hide()
|
})
|
|
},
|
cancel:function (layero,index) {
|
self.popupLayer.hide()
|
$('#restore-icon').show()
|
return false
|
}
|
});
|
},
|
|
//http://dgrid.io/tutorials/1.0/hello_dgrid/ 创建表格
|
createList: function (dataList, txt) {
|
const self = this
|
let CustomGrid = declare([Grid, Keyboard, Selection,Editor]);
|
let column, tab, moon, dauy;
|
let formatter = function (value,object) {
|
if (self.currentNearPoint.id == object.id) {
|
return '<span style="color:red">' + value + '</span>'
|
} else {
|
return value
|
}
|
}
|
if (txt == "洪水淹没分析") {
|
$('.analysis-box-list').empty();
|
column = {
|
location: {
|
label:'位置',
|
className:'dgrid-cell_200',
|
formatter:formatter
|
},
|
origin: {
|
label:'起点距',
|
className:'dgrid-cell_40',
|
formatter:function (value,object) {
|
if (self.currentNearPoint.id == object.id) {
|
return '<span style="color:red">' + value.substring(0,value.length - 2) + '</span>'
|
} else {
|
return value.substring(0,value.length - 2)
|
}
|
}
|
},
|
water: {
|
label:'水面线',
|
className:'dgrid-cell_60',
|
formatter:formatter
|
},
|
sw: {
|
label:'水位',
|
className:'dgrid-cell_60',
|
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'
|
}
|
let 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();
|
|
function makeHandler (grid, type, dir) {
|
return function (event) {
|
let tip = $('#tableTip')
|
let obj = grid[type](event)
|
|
if (dir == 'entered' && obj.column.field == 'location' ){
|
tip.show()
|
tip.css({
|
"top":(194+(Number(obj.row.id)*24.5))+'px',
|
// "left":event.offsetX+10+'px'
|
})
|
tip.html(obj.row.data.location)
|
}else if (dir == 'left'){
|
tip.hide()
|
}
|
};
|
}
|
|
grid.on(on.selector('.dgrid-content .dgrid-cell', mouse.enter), makeHandler(grid, 'cell', 'entered'));
|
grid.on(on.selector('.dgrid-content .dgrid-cell', mouse.leave), makeHandler(grid, 'cell', 'left'));
|
|
//防止绑定多次点击事件
|
if (this.dgridSelectEvent){
|
this.dgridSelectEvent.remove()
|
}
|
|
this.dgridSelectEvent = grid.on("dgrid-select", function(evt){
|
//获取行数据
|
let data = evt.rows[0].data
|
//历史风险、洪水分析，表格不同的点击事件
|
if (data.smxVal){
|
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("")
|
$('#hd-input').trigger("input")
|
$('#smx-select option').remove()
|
//清空表格数据
|
$('.analysis-box-list').empty();
|
$('#analysis-pagination').hide()
|
//清空关联站和起点距
|
$('#glzd').val("")
|
$('#qdj').val('')
|
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')
|
}
|
}else {
|
self.map.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(data.lng, data.lat, 3000),
|
});
|
}
|
});
|
|
grid.renderArray(dataList);
|
},
|
|
// 洪水淹没效果
|
drawWater(flag) {
|
|
//关闭分析窗口
|
if (this.evaluateLayerIndex){
|
layer.close(this.evaluateLayerIndex)
|
$('#restore-icon').hide()
|
this.evaluateLayerIndex = ""
|
}
|
|
//地图定位
|
// 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)
|
}
|
})
|
$('.dong-progress').stop().show();
|
// 总长度
|
let totalWidth = $('.dong-progress .container').width();
|
// 过度长度
|
let excessiveWidth = totalWidth / 100;
|
let watchWidth = 0;
|
// 进度条的定时器
|
let proTime = setInterval(function () {
|
watchWidth += excessiveWidth;
|
if (watchWidth > totalWidth) {
|
watchWidth = totalWidth;
|
}
|
$('.dong-progress .container #progress_bar').width(watchWidth);
|
}, 22);
|
const waterInterval = setInterval(() => {
|
if (startHeight < targetHeight) {
|
startHeight += 5
|
|
if (startHeight >= targetHeight) {
|
startHeight = targetHeight
|
clearInterval(waterInterval)
|
|
if (watchWidth < totalWidth) {
|
watchWidth = totalWidth;
|
}
|
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)
|
}
|
|
});
|
});
|
