洪水淹没数据接口对接，调整样式

guoshilong

2023-02-09 ca4683dbadf8f58c0e3cb5faf79b53e5bb2408f3

 widgets/FloodAnalysis/Widget.js

@@ -16,24 +16,24 @@
        historyBtn: null,
        divFloodAnalysis: null,
        divFloodHistory: null,
        topRadioGroup: null,
        middleRadioGroup: null,
        hdSelect: null,
        smxSelect: null,
        divSwInput: null,
        spanTip: null,
        //河段下拉列表
        hdDataList: [],
        //洪水分析表格数据
        analysisTableList:[],
        startup: function startup() {
            var self = this
            this.bindHtmlElement()
            this.middleRadioGroup.change(function () {
            $('input[type=radio][name=middleRadio]').change(function () {
                if (this.value == "realtime") {
                    self.divSwInput.hide()
                    self.spanTip.hide()
                    self.divSwInput.css('visibility', 'hidden')
                    self.spanTip.css('visibility', 'hidden')
                } else {
                    self.divSwInput.show()
                    self.spanTip.show()
                    self.divSwInput.css('visibility', 'visible')
                    self.spanTip.css('visibility', 'visible')
                }
            })

@@ -67,14 +67,23 @@
            //     $("#hd-input").val($('#hd-select').find("option:selected").text());
            //     $("#hd-select").css({"display": "none"});
            // })
            $('#hd-select').change(function () {
            this.hdSelect.change(function () {
                var selected = JSON.parse($(this).val())
                $('#sw-input').val("")
                self.getSmxData(selected.river_code,selected.default_smx)
            })
            $('#smx-select').change(function () {
                var selected = JSON.parse($(this).val())
                console.log(selected)
                self.getPointData(selected.smxcode)
            this.smxSelect.change(function () {
                var selected =$(this).val()
                self.getPointData(selected)
            })
            $('#sw-input').keypress(function (event) {
                if (event.which == 13){
                    let sw = $('#sw-input').val()
                    self.analysisTableList.forEach(e=>{
                        e.sw = self.calculateSw(e.water,sw)
                    })
                    self.loadPagination(self.analysisTableList,"analysis-pagination")
                }
            })

        },
@@ -103,6 +112,14 @@
                this.map.entities.remove(e)
            })
            this.map.scene.globe.baseColor = Cesium.Color.WHITE;

            $('#hd-select option').remove()
            $('#smx-select option').remove()
            $('#sw-input').val("")
            $('#flood-tbody').html("")
            $('#analysis-pagination').hide()

            this.analysisTableList = []
        },

        onMinimize: function onMinimize() {
@@ -170,7 +187,6 @@
            this.historyBtn = $('.history-button')
            this.divFloodAnalysis = $('.flood-analysis')
            this.divFloodHistory = $('.flood-history')
            this.middleRadioGroup = $('input[type=radio][name=middleRadio]')
            this.hdSelect = $('#hd-select')
            this.smxSelect = $('#smx-select')
            this.divSwInput = $('.sw')
@@ -180,12 +196,14 @@
        //初始化
        init() {
            //重置html元素状态
            this.divSwInput.hide()
            this.spanTip.hide()
            this.divSwInput.css('visibility', 'hidden')
            this.spanTip.css('visibility', 'hidden')
            this.divFloodHistory.hide()
            this.divFloodAnalysis.show()
            $("input[type=radio][name=middleRadio][value='realtime']").prop('checked','checked')

            this.analysisBtn.addClass('choose-button')
            this.analysisBtn.removeClass('unchoose-button')
            this.historyBtn.removeClass('choose-button')
            this.historyBtn.addClass('unchoose-button')

@@ -195,7 +213,7 @@
        //获取河段下拉数据
        getHdData() {
            const self = this
            let url = "http://192.168.0.207:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4"
            let url = "http://192.168.0.200:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4"
            $.ajax({
                url: url,
                type: 'post',
@@ -205,10 +223,11 @@
                data: {},
                success: function (res) {
                    let data = res.data
                    $("#hd-select").find("option").remove();//添加新值 删除旧值
                    $("#hd-select").prepend("<option value=''>请选择</option>");//添加第一个option值
                    self.hdSelect.find("option").remove();//添加新值 删除旧值
                    self.hdSelect.prepend("<option value=''>请选择</option>");//添加第一个option值

                    data.forEach(e => {
                        $("#hd-select").append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>");
                        self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>");
                    })
                }
            });
@@ -217,7 +236,7 @@
        //获取水面线数据
        getSmxData(hdid,defaultId) {
            const self = this
            let url = "http://192.168.0.207:82/blade-ycreal/waterline/selectName"
            let url = "http://192.168.0.200:82/blade-ycreal/waterline/selectName"
            $.ajax({
                url: url,
                type: 'post',
@@ -229,15 +248,14 @@
                },
                success: function (res) {
                    let data = res.data
                    $("#smx-select").find("option").remove();//添加新值 删除旧值
                    self.smxSelect.find("option").remove();//添加新值 删除旧值
                    data.forEach(e => {
                        // $("#chapterName").prepend("<option value='无'>无</option>");//添加第一个option值
                        $("#smx-select").append("<option value="+ e.smxcode +">" + e.waterline + "</option>");
                        self.smxSelect.append("<option value="+ e.smxcode +">" + e.waterline + "</option>");

                        if (e.smxcode == defaultId){
                            $("#smx-select option[value="+e.smxcode + "] ").attr("selected",true)
                            console.log($('#smx-select'))
                            $('#smx-select').trigger("change")
                            self.smxSelect.trigger("change")
                        }
                    })

@@ -248,22 +266,122 @@
        //获取点数据
        getPointData(smxcode){
            const self = this
            let url = "http://192.168.0.207:82/blade-ycreal/water/childpage"
            let url = "http://192.168.0.200:82/blade-ycreal/water/childpage"
            $.ajax({
                url: url,
                type: 'post',
                type: 'get',
                dataType: 'json',
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {
                    parentId:smxcode
                    parentId:smxcode,
                    size:9999999
                },
                success: function (res) {
                    let data = res.data
                    console.log(data,"----")
                    if (res.code == 200){
                        let data = res.data.records
                        self.analysisTableList = data
                        data.forEach(e=>{
                            e.lng = Number(e.lng).toFixed(4)
                            e.lat = Number(e.lat).toFixed(4)
                            e.water = Number(e.water).toFixed(3)
                        })

                        self.loadPagination(data,"analysis-pagination")
                    }
                }
            });
        },

        /**
         * 加载分页器
         * @param tableData 需要加载的所有数据
         * @param pageElementId 分页html的id
         * @param tableElementId tbody id
         */
        loadPagination(tableData,pageElementId) {
            if (tableData.length < 0) return
            var count = Math.ceil(tableData.length / 10);
            var self = this
            $('#'+pageElementId).pagination({
                mode: 'fixed',
                jump: true,
                coping: false,
                pageCount: count,
                callback: function (index) {
                    var listdata = [];
                    //显示页数
                    var index = (index.getCurrent() - 1) * 10;
                    for (var i = index; i < index + 10; i++) {
                        listdata.push(tableData[i]);
                        if (i == tableData.length - 1) {
                            break;
                        }
                    }
                    self.loadAnalysisTable(listdata)
                }
            });

            //首次加载前10条数据
            var startData = [];
            if (tableData.length > 10) {
                for (var i = 0; i < 10; i++) {
                    startData.push(tableData[i]);
                }
            } else {
                for (var i = 0; i < tableData.length; i++) {
                    startData.push(tableData[i]);
                }
            }
            self.loadAnalysisTable(startData)
        },

        /**
         * 加载表格
         * @param listData 需要加载的数据
         * @param elementId 需要加载的表格的tbody id
         */
        loadAnalysisTable(listData,elementId) {
            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 waterline 水面线高度
         * @param number 差值
         */
        calculateSw(waterline,number){
            let sw = this.floatAdd(Number(waterline) , Number(number))
            return sw
        },

        //防止出现两个小数相加出现很多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;
    }


    });