From 4d8c6dd77427e8e581fda17b6b65ba86bfb7a815 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 27 Feb 2023 14:30:01 +0800
Subject: [PATCH] 洪水淹没
---
widgets/FloodAnalysis/Widget.js | 714 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 525 insertions(+), 189 deletions(-)
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 793c5b8..2fd77e5 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -2,7 +2,25 @@
// 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) {
+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',
@@ -19,8 +37,12 @@
smxSelect: null,
//河段下拉列表
hdDataList: [],
+ //水面线下拉列表
+ smxDataList:[],
//洪水分析表格数据
analysisTableList: [],
+ dgridSelectEvent:null,
+ currentSelectHistoryData:null,
//历史风险图表格数据
historyTableList: [
{name: "5年洪水淹没图"},
@@ -31,60 +53,55 @@
currentHd: null,
//当前选中的水面线
currentSmxcode: "",
+ //水文站最近的点
+ currentNearPoint:null,
+ evaluateLayerIndex:"",
//收起框打开状态
- isOpen: true,
+ 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",
- getHistoryList: "",
- saveHistoryData: "",
+ 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",
},
- //弹出框索引，用来关闭弹出框
- popupIndex: "",
evaluateData: [
{
- name: "会昌县",
+ name: "<0.5",
house: 35,
population: 175,
area: 12.888,
value: 50.123
},
{
- name: "于都县",
+ name: "1.0-2.0",
house: 70,
population: 350,
area: 24.456,
value: 100.456
},
{
- name: "赣县",
+ 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() {
- var self = this
+ const 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") {
@@ -99,15 +116,10 @@
//开始分析按钮点击事件
$('#start-analysis-btn').click(function () {
if (self.currentHd && self.currentSmxcode) {
- self.evaluatePopup()
+ self.drawWater('analysis')
} else {
- alert("请先选择河段和水面线")
+ layer.msg("请先选择河段和水面线")
}
- })
-
- //历史风险图表格单选框改变事件
- $('input[type=radio][name=tableRadio]').change(function () {
- console.log(this.value)
})
//洪水淹没分析按钮点击事件
@@ -115,12 +127,14 @@
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("")
})
//历史风险图按钮点击事件
@@ -128,12 +142,14 @@
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()
+
})
//河段输入框聚焦、失焦、输入事件
@@ -143,15 +159,20 @@
$('#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()
- },100)
-
+ },300)
})
- // 河道输入事件
+ // 河段输入事件
$('#hd-input').on("input", function () {
- var searchString = $('#hd-input').val()
- var filterArray = self.hdDataList.filter(e => {
+ let searchString = $('#hd-input').val()
+ let filterArray = self.hdDataList.filter(e => {
return e.riverway.indexOf(searchString) != -1
})
self.hdSelect.find("option").remove();//添加新值 删除旧值
@@ -161,41 +182,48 @@
})
//水位输入事件
- $('#sw-input').on("input", function () {
- self.getYcSub()
+ $('#sw-input').on("input", function (e,v) {
+ self.getSw($('#sw-input').val())
})
//河段选择框改变事件
this.hdSelect.change(function () {
$("#hd-input").val($(this).find("option:selected").text());
- var selected = JSON.parse($(this).val())
+ 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 () {
- var selected = $(this).val()
+ 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")
- }
- })
+ // //水位输入框按下回车事件
+ // $('#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 () {
@@ -207,9 +235,11 @@
self.loadPagination(filterArray, "history-pagination")
})
- $('#save-button').click(function () {
- self.confirmPopup()
- // self.floodAnalysisPopup()
+ $('#restore-icon').click(function () {
+ if (self.popupLayer){
+ self.popupLayer.show()
+ $(this).hide()
+ }
})
},
@@ -234,16 +264,27 @@
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("")
- $('#flood-tbody').html("")
+ //清空表格数据
+ $('.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() {
@@ -284,6 +325,11 @@
$('.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')
@@ -293,7 +339,9 @@
this.currentHd = null
this.currentSmxcode = ""
+ //获取河段数据
this.getHdData()
+
},
//获取河段下拉数据
@@ -331,16 +379,19 @@
},
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")
@@ -368,44 +419,54 @@
success: function (res) {
if (res.code == 200) {
let data = res.data.records
- self.deleteEntities(self.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 = self.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
- },
- });
- // 清空使用
- self.pointEntities.push(temp)
- }
-
- // 先清空 后画线
- if (self.drawingPolyline)
- self.map.entities.remove(self.drawingPolyline);
- let lineOpts = {
- polyline: {
- positions: cartesians,
- clampToGround: true,
- width: 3,
- color: "#279a9a"
- }
- };
- // 画线
- self.drawingPolyline = self.map.entities.add(lineOpts);
-
+ self.createPointAndLine(data,self.pointEntities)
self.analysisTableList = data
- self.getSub(self.currentHd.id, self.currentSmxcode)
+ 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);
+
},
//获取历史风险图数据列表
@@ -419,14 +480,16 @@
jsonpCallback: 'data',
data: {
name: "",
+ pageSize:999999999,
},
success: function (res) {
if (res.code == 200) {
let data = res.data.records
- if (self.popupIndex != "") {
- layer.close(self.popupIndex)
- self.popupIndex = ""
- }
+ data.forEach(e=>{
+ e.smxVal = JSON.parse(e.smxVal)
+ })
+ self.historyTableList = data
+ self.loadPagination(data,"history-pagination")
}
}
});
@@ -446,76 +509,40 @@
if (tableData.length <= 0 && pageElementId == "history-pagination") {
$('#history-pagination').hide()
}
- let pageSize = 11
- var count = Math.ceil(tableData.length / pageSize);
- var self = this
+ 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) {
- var listdata = [];
+ let listdata = [];
//显示页数
var index = (index.getCurrent() - 1) * pageSize;
- for (var i = index; i < index + pageSize; i++) {
+ for (let i = index; i < index + pageSize; i++) {
listdata.push(tableData[i]);
if (i == tableData.length - 1) {
break;
}
}
-
- pageElementId == "analysis-pagination" ? self.loadAnalysisTable(listdata) : self.loadHistoryTable(listdata)
-
+ pageElementId == "analysis-pagination" ? self.createList(listdata,"洪水淹没分析") : self.createList(listdata,"历史风险图")
}
});
//首次加载前11条数据
- var startData = [];
+ let startData = [];
if (tableData.length > pageSize) {
- for (var i = 0; i < pageSize; i++) {
+ for (let i = 0; i < pageSize; i++) {
startData.push(tableData[i]);
}
} else {
- for (var i = 0; i < tableData.length; i++) {
+ for (let 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)
+ pageElementId == "analysis-pagination" ? self.createList(startData,"洪水淹没分析") : self.createList(startData,"历史风险图")
},
/**
@@ -527,62 +554,93 @@
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(4)
- e.sw = Number(e.sw).toFixed(4)
- })
-
- self.loadPagination(self.analysisTableList, "analysis-pagination")
+ //减法函数
+ 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);
},
- //实时水位计算
- getSub(hdid, smxcode) {
+
+ //获取实时水位
+ getRealTimeWaterByhdId(hdid) {
const self = this
+ // 实时 需要请求服务器获取实时水位数据
if ($('input[name=middleRadio]:checked').val() == 'realtime') {
$.ajax({
- url: self.url.getCzByGlCodeByGlQdj,
+ url: self.url.getRealTimeWaterByhdId,
type: 'get',
dataType: 'json',
jsonp: 'callback',
jsonpCallback: 'data',
data: {
- hdId: hdid,
- smxcode: smxcode
+ hdId: hdid
},
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(4)
- e.sw = Number(e.sw).toFixed(4)
- })
-
- self.loadPagination(self.analysisTableList, "analysis-pagination")
+ self.getSw(sub)
}
}
});
} else {
- self.getYcSub()
+ 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.getCzByGlCodeByGlQdj,
+ url: self.url.saveHistoryData,
type: 'get',
dataType: 'json',
jsonp: 'callback',
@@ -598,7 +656,7 @@
//防止出现两个小数相加出现很多0的情况
floatAdd(arg1, arg2) {
- var r1, r2, m;
+ let r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
@@ -613,6 +671,7 @@
return (arg1 * m + arg2 * m) / m;
},
+ //删除地图上的标注点位
deleteEntities(entities) {
entities.forEach(e => {
this.map.entities.remove(e)
@@ -620,30 +679,307 @@
entities = []
},
-
//评估分析弹窗
- evaluatePopup() {
- var self = this
- let data = this.evaluateData
- let dataStr = JSON.stringify(data)
- let hdStr = JSON.stringify(this.currentHd)
+ evaluatePopup(flag) {
+ const self = this
+ let selectSmx = this.smxDataList.filter(e=>{
+ return e.smxcode == this.currentSmxcode
+ })
- var url = './corelib/common/popup/evaluateAnalysis.html'
- var top = ($(window).height() - 600) / 2;
- var left = ($(window).width() - 1300 - 340) / 2 + 340;
+ 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: '评估分析',
+ title: '分析结果',
+ shade: 0,
type: 2,
- maxmin: false, //开启最大化最小化按钮
- area: ['1500px', '700px'],
+ maxmin: true, //开启最大化最小化按钮
+ area: ['465px', '818px'],
skin: 'floodAnalysis',
- offset: 'auto',
- content: url + "?data=" + encodeURIComponent(dataStr) + "&hd=" + encodeURIComponent(hdStr),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
+ offset: [top,left],
+ content: url + "?parentData=" + encodeURIComponent(JSON.stringify(parentData)),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
id: "floodAnalysisLayer",
- closeBtn: 1,
+ 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)
+ }
});
});
--
Gitblit v1.9.3