洪水淹没-进度条、分析弹窗大小位置变更

guoshilong

2023-02-20 52c8ca8e31bb9aee13726d9c858dee1d11dcde87

 widgets/FloodAnalysis/Widget.js

@@ -41,6 +41,7 @@
        //洪水分析表格数据
        analysisTableList: [],
        dgridSelectEvent:null,
        currentSelectHistoryData:null,
        //历史风险图表格数据
        historyTableList: [
            {name: "5年洪水淹没图"},
@@ -57,31 +58,31 @@
        isOpen: true,
        //api接口
        url: {
            riverwaySelectName: "http://192.168.0.207:82/blade-ycreal/riverway/selectName",
            waterlineSelectName: "http://192.168.0.207:82/blade-ycreal/waterline/selectName",
            childpage: "http://192.168.0.207:82/blade-ycreal/water/childpage",
            getCzByGlCodeByGlQdj: "http://192.168.0.207:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj",
            getHistoryList: "http://192.168.0.103:82/blade-ycreal/inundationResult/list",
            saveHistoryData: "http://192.168.0.103:82/blade-ycreal/inundationResult/save",
            getCoordinatesMinQdj: "http://192.168.0.207:82/blade-ycreal/water/getCoordinatesMinQdj",
            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: "会昌县",
                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,
@@ -91,7 +92,6 @@
        startup: function startup() {
            var self = this
            this.bindHtmlElement()

            //实时、预测改变事件
            $('input[type=radio][name=middleRadio]').change(function () {
                if (this.value == "realtime") {
@@ -106,10 +106,9 @@
            //开始分析按钮点击事件
            $('#start-analysis-btn').click(function () {
                if (self.currentHd && self.currentSmxcode) {
                    // self.evaluatePopup()
                    self.drawWater()
                    self.drawWater('analysis')
                } else {
                    alert("请先选择河段和水面线")
                    layer.msg("请先选择河段和水面线")
                }
            })

@@ -140,6 +139,7 @@

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

            })

            //河段输入框聚焦、失焦、输入事件
@@ -184,6 +184,8 @@
                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),
@@ -647,38 +649,56 @@
        },

        //评估分析弹窗
        evaluatePopup() {
        evaluatePopup(flag) {
            var self = this
            let selectSmx = this.smxDataList.filter(e=>{
                return e.smxcode == this.currentSmxcode
            })

            let isAnalysis = flag == 'analysis'?true:false

            let parentData = {}

            parentData.data = this.evaluateData
            parentData.hd = this.currentHd
            parentData.smx = selectSmx[0]
            parentData.sw = $('#sw-input').val()
            parentData.point = this.analysisTableList
            // let data = this.evaluateData
            // let dataStr = JSON.stringify(data)
            // let hdStr = JSON.stringify(this.currentHd)
            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 smxStr = JSON.stringify(selectSmx[0])

            var url = './corelib/common/popup/evaluateAnalysis.html'
            var top = ($(window).height() - 600) / 2;
            var left = ($(window).width() - 1300 - 340) / 2 + 340;
            var top = ($(window).height() - 550) / 2;
            var left = ($(window).width() - 400 - 340) / 2 + 340;
            layer.open({
                title: '评估分析',
                type: 2,
                maxmin: false, //开启最大化最小化按钮
                area: ['1500px', '700px'],
                area: ['900px', '600px'],
                skin: 'floodAnalysis',
                offset: 'auto',
                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()
                    }
                }
            });
        },

@@ -751,15 +771,32 @@
            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()
                    self.drawWater('history')
                }

            });
@@ -767,11 +804,15 @@
        },

        // 洪水淹没效果
        drawWater() {
        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]
@@ -785,14 +826,37 @@
                    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()
                        this.evaluatePopup(flag)
                    }
                    // 使用该方式会闪烁，改用 Cesium.CallbackProperty 平滑
                    // this.waterEntity.polygon.extrudedHeight = startHeight