| New file |
| | |
|---|
| | | /////////////////////////////////////////////////////////////////////////// |
|---|
| | | // 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: "<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 |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | 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("<option value='" + JSON.stringify(e) + "'>" + e.riverway + v + "</option>"); |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | //水位输入事件 |
|---|
| | | $('#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("<option value='" + JSON.stringify(e) + "'>" + e.riverway + v + "</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() |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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.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() - 550) / 2; |
|---|
| | | var left = ($(window).width() - 400 - 340) / 2 + 340; |
|---|
| | | layer.open({ |
|---|
| | | title: '评估分析', |
|---|
| | | type: 2, |
|---|
| | | maxmin: false, //开启最大化最小化按钮 |
|---|
| | | area: ['900px', '600px'], |
|---|
| | | skin: 'floodAnalysis', |
|---|
| | | offset: [top,left], |
|---|
| | | 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 '<span style="color:red">' + value + '</span>' |
|---|
| | | } 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) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | $('.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); |
|---|
| | | 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) |
|---|
| | | } |
|---|
| | | |
|---|
| | | }); |
|---|
| | | }); |
|---|
