洪水淹没

guoshilong

2023-02-27 4d8c6dd77427e8e581fda17b6b65ba86bfb7a815

 widgets/FloodAnalysis/Widget.js

@@ -9,6 +9,7 @@
    "dojo/topic",
    'jimu/BaseWidget',
    'dojo/on',
    'dojo/mouse',
    'dstore/Memory',
    'dstore/Trackable',
    'dgrid/Grid',
@@ -19,7 +20,7 @@
    '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) {
    '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',
@@ -56,7 +57,7 @@
        currentNearPoint:null,
        evaluateLayerIndex:"",
        //收起框打开状态
        isOpen: true,
        popupLayer: null,
        //api接口
        url: {
            riverwaySelectName: "http://localhost:82/blade-ycreal/riverway/selectName",
@@ -99,7 +100,7 @@
            }
        ],
        startup: function startup() {
            var self = this
            const self = this
            this.bindHtmlElement()
            //实时、预测改变事件
            $('input[type=radio][name=middleRadio]').change(function () {
@@ -133,6 +134,7 @@
                if (self.currentHd){
                    $('#analysis-pagination').show()
                }
                $('#search-name').val("")
            })

            //历史风险图按钮点击事件
@@ -145,7 +147,6 @@
                self.divFloodHistory.show()
                $('#analysis-pagination').hide()
                $('#history-pagination').show()

                //获取历史数据
                self.getHistoryList()

@@ -162,6 +163,7 @@
                if (self.evaluateLayerIndex){
                    layer.close(self.evaluateLayerIndex)
                    self.evaluateLayerIndex = ""
                    $('#restore-icon').hide()
                }
                setTimeout(function(){//有bug 需要延迟执行隐藏
                    $("#hd-select").hide()
@@ -169,8 +171,8 @@
            })
            // 河段输入事件
            $('#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();//添加新值 删除旧值
@@ -187,7 +189,7 @@
            //河段选择框改变事件
            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))
@@ -209,7 +211,7 @@

            //水面线选择框改变事件
            this.smxSelect.change(function () {
                var selected = $(this).val()
                let selected = $(this).val()
                self.getPointData(selected)
            })

@@ -233,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()
                }
            })
        },

@@ -272,10 +276,15 @@
            //清空表格数据
            $('.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() {
@@ -320,6 +329,7 @@
            $('#search-name').val("")
            $('#glzd').val("")
            $('#qdj').val('')
            $('.restore-icon').hide()
            this.isOpen = true

            this.analysisBtn.addClass('choose-button')
@@ -374,12 +384,14 @@
                    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")
@@ -424,17 +436,21 @@
                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
                    },
                    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){
@@ -494,37 +510,35 @@
                $('#history-pagination').hide()
            }
            let pageSize = 22
            var count = Math.ceil(tableData.length / pageSize);
            var self = this
            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.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]);
                }
            }
@@ -543,7 +557,7 @@

        //减法函数
        accSub(arg1,arg2){
            var r1,r2,m,n;
            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));
@@ -642,7 +656,7 @@

        //防止出现两个小数相加出现很多0的情况
        floatAdd(arg1, arg2) {
            var r1, r2, m;
            let r1, r2, m;
            try {
                r1 = arg1.toString().split(".")[1].length;
            } catch (e) {
@@ -667,7 +681,7 @@

        //评估分析弹窗
        evaluatePopup(flag) {
            var self = this
            const self = this
            let selectSmx = this.smxDataList.filter(e=>{
                return e.smxcode == this.currentSmxcode
            })
@@ -675,7 +689,6 @@
            let isAnalysis = flag == 'analysis'?true:false

            let parentData = {}

            if (isAnalysis){
                parentData.data = this.evaluateData
                parentData.hd = this.currentHd
@@ -690,11 +703,11 @@
                parentData.point = this.currentSelectHistoryData.smxVal.point
            }

            var url = './corelib/common/popup/evaluateAnalysis.html'
            var top = ($(window).height() - 764) / 2;
            var left = ($(window).width() -465);
            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: true, //开启最大化最小化按钮
@@ -706,46 +719,16 @@
                closeBtn: 0,
                shade: 0,
                move:false,
                maxmin: true,
                maxmin: false,
                //设置默认不在左下角
                minStack:false,
                min: function(layero,index){
                    setTimeout(function(){
                        layero.css({
                            'width':'50px',
                            'top': '83px',
                            'left':'inherit',
                            'right':'0px',
                        })
                    })
                    //显示最大化icon
                    $('.layui-layer-max').css("display","")
                    //标题背景改变
                    $('.layui-layer-title').css({
                        'background-color':'rgb(255,255,255)'
                    })
                },
                restore: function(layero,index) {
                    //隐藏最大化icon
                    $('.layui-layer-max').css("display","none")
                    //还原时窗口长宽会减小，原因未知。因此还原时再设置一次长宽
                    layero.css({
                        'width':'465px',
                        'height':'818px'
                    })
                    //还原标题背景色
                    $('.layui-layer-title').css({
                        'background-color':'rgb(0, 73, 135)'
                    })
                },
                zIndex:-100000,
                success:function (layero,index) {

                    $('.layui-layer-setwin .layui-layer-min cite').css("background-color",'white')

                    //绑定父子之间的关系，用于数据传递，缺少则无法传递
                    var body = layer.getChildFrame("body", index);
                    let body = layer.getChildFrame("body", index);
                    //得到iframe页的窗口对象
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    let iframeWin = window[layero.find('iframe')[0]['name']];
                    self.evaluateLayerIndex = index

                    if (isAnalysis){
@@ -754,12 +737,46 @@
                        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').css("display","")
                        $('.layui-layer-max').show()
                    }else {
                        $('.layui-layer-max').css("display","none")
                        $('.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
                }
            });
        },
@@ -767,9 +784,9 @@
        //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) {
            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 {
@@ -823,18 +840,33 @@
                }
                tab = 'history-tab2-grid'
            }
            var grid = new CustomGrid({
            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();

            //change事件
            // grid.on("dgrid-datachange", function(evt){
            //     //获取行数据
            //     let data = evt.cell.row.data
            // });
            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){
@@ -876,6 +908,7 @@
                    });
                }
            });

            grid.renderArray(dataList);
        },

@@ -885,6 +918,7 @@
            //关闭分析窗口
            if (this.evaluateLayerIndex){
                layer.close(this.evaluateLayerIndex)
                $('#restore-icon').hide()
                this.evaluateLayerIndex = ""
            }

@@ -911,12 +945,12 @@
            })
            $('.dong-progress').stop().show();
            // 总长度
            var totalWidth = $('.dong-progress .container').width();
            let totalWidth = $('.dong-progress .container').width();
            // 过度长度
            var excessiveWidth = totalWidth / 100;
            var watchWidth = 0;
            let excessiveWidth = totalWidth / 100;
            let watchWidth = 0;
            // 进度条的定时器
            var proTime = setInterval(function () {
            let proTime = setInterval(function () {
                watchWidth += excessiveWidth;
                if (watchWidth > totalWidth) {
                    watchWidth = totalWidth;