洪水淹没-样式调整

guoshilong

2023-02-09 85f104634bcde736e1fc25d22fd4ca354c8cd52e

洪水淹没-样式调整

 widgets/FloodAnalysis/Widget.html

@@ -69,7 +69,7 @@
                    <label for="search-name">名称：</label>
                    <input id="search-name" class="search-name-input" type="text" name="word" autocomplete="off"
                           maxlength="256" placeholder="请输入筛选名称"/>
                    <input class="search-button" type="button" value="查  询"/>
                    <input id="search-button" class="search-button" type="button" value="查  询"/>
                </div>
                <div class="table-box">
                    <table>
@@ -83,7 +83,20 @@
                            </th>
                        </tr>
                        </thead>
                        <tbody id="flood-history-tbody" class="table-tbody flood-tbody"></tbody>
                        <tbody id="flood-history-tbody" class="table-tbody flood-tbody">
                            <tr>
                                <td><div><input type="radio" name="tableRadio" value="1"></div></td>
                                <td><div>5年洪水淹没图</div></td>
                            </tr>
                            <tr>
                                <td><div><input type="radio" name="tableRadio" value="2"></div></td>
                                <td><div>10年洪水淹没图</div></td>
                            </tr>
                            <tr>
                                <td><div><input type="radio" name="tableRadio" value="3"></div></td>
                                <td><div>15年洪水淹没图</div></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="flood-analysis-pagination" id="history-pagination"></div>
                </div>

 widgets/FloodAnalysis/Widget.js

@@ -24,19 +24,26 @@
        hdDataList: [],
        //洪水分析表格数据
        analysisTableList: [],
        //历史风险图表格数据
        historyTableList:[],
        //当前选中的河段
        currentHdId: "",
        //当前选中的水面线
        currentSmxcode: "",
        //收起框打开状态
        isOpen:true,
        //api接口
        url: {
            riverwaySelectName: "http://192.168.0.200:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4",
            waterlineSelectName: "http://192.168.0.200:82/blade-ycreal/waterline/selectName",
            childpage: "http://192.168.0.200:82/blade-ycreal/water/childpage",
            getCzByGlCodeByGlQdj: "http://192.168.0.200:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj"
            getCzByGlCodeByGlQdj: "http://192.168.0.200:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj",
            getHistoryList:"",
        },
        startup: function startup() {
            var self = this
            this.bindHtmlElement()
            //收起展开按钮点击事件
            $(".fold-btn").click(function(){
                if (self.isOpen){
                    $(this).addClass('close')
@@ -51,6 +58,7 @@
                }
            })

            //实时、预测改变事件
            $('input[type=radio][name=middleRadio]').change(function () {
                if (this.value == "realtime") {
                    self.divSwInput.css('visibility', 'hidden')
@@ -61,6 +69,12 @@
                }
            })

            //历史风险图表格单选框改变事件
            $('input[type=radio][name=tableRadio]').change(function () {
                console.log(this.value)
            })

            //洪水淹没分析按钮点击事件
            this.analysisBtn.click(function () {
                self.analysisBtn.addClass('choose-button')
                self.analysisBtn.removeClass('unchoose-button')
@@ -69,6 +83,7 @@
                self.divFloodAnalysis.show()
            })

            //历史风险图按钮点击事件
            this.historyBtn.click(function () {
                self.historyBtn.addClass('choose-button')
                self.historyBtn.removeClass('unchoose-button')
@@ -77,18 +92,15 @@
                self.divFloodHistory.show()
            })


            //河段输入框聚焦、失焦、值改变事件
            //河段输入框聚焦、失焦、输入事件
            $('#hd-input').focus(function () {
                $("#hd-select").show()
            })

            $('#hd-input').blur(function () {
                //隐藏域触发改变事件需要手动触发
                $("#hd-select").val().change()
                $("#hd-select").hide()
            })

            $('#hd-input').on("input", function () {
                var searchString = $('#hd-input').val()
                var filterArray = self.hdDataList.filter(e => {
@@ -100,6 +112,7 @@
                })
            })

            //河段选择框改变事件
            this.hdSelect.change(function () {
                $("#hd-input").val($(this).find("option:selected").text());
                var selected = JSON.parse($(this).val())
@@ -109,11 +122,13 @@
                self.hdSelect.hide()
            })

            //水面线选择框改变事件
            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()
@@ -122,6 +137,15 @@
                    })
                    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,"flood-analysis-pagination")
            })

        },
@@ -141,11 +165,6 @@
            this.map.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(116.016905, 25.884684, 10000),
            });

            $(this).addClass('open')
            $(this).removeClass('close')
            $('.content').show()
            this.isOpen = true
        },

        onClose: function onClose() {
@@ -245,6 +264,10 @@
            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()
            this.isOpen = true

            this.analysisBtn.addClass('choose-button')
            this.analysisBtn.removeClass('unchoose-button')
@@ -333,6 +356,27 @@
            });
        },

        //获取历史风险图数据列表
        getHistoryList(){
            const self = this
            $.ajax({
                url: self.url.getHistoryList,
                type: 'get',
                dataType: 'json',
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {
                    name:"",
                },
                success: function (res) {
                    if (res.code == 200) {
                        let data = res.data.records

                    }
                }
            });
        },

        /**
         * 加载分页器
         * @param tableData 需要加载的所有数据
@@ -340,8 +384,12 @@
         * @param tableElementId tbody id
         */
        loadPagination(tableData, pageElementId) {
            if (tableData.length <= 0) {
            if (tableData.length <= 0 && pageElementId =="analysis-pagination") {
                $('#analysis-pagination').hide()
            }

            if (tableData.length <= 0 && pageElementId =="history-pagination") {
                $('#history-pagination').hide()
            }
            var count = Math.ceil(tableData.length / 10);
            var self = this
@@ -360,7 +408,9 @@
                            break;
                        }
                    }
                    self.loadAnalysisTable(listdata)

                    pageElementId == "analysis-pagination" ? self.loadAnalysisTable(listdata) :self.loadHistoryTable(listdata)

                }
            });

@@ -375,15 +425,14 @@
                    startData.push(tableData[i]);
                }
            }
            self.loadAnalysisTable(startData)
            pageElementId == "analysis-pagination" ? self.loadAnalysisTable(startData) :self.loadHistoryTable(startData)
        },

        /**
         * 加载表格
         * 加载淹没分析表格
         * @param listData 需要加载的数据
         * @param elementId 需要加载的表格的tbody id
         */
        loadAnalysisTable(listData, elementId) {
        loadAnalysisTable(listData) {
            var table = ""
            listData.forEach(e => {
                table += '<tr>' +
@@ -396,6 +445,21 @@
                    '</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)
        },

        /**
@@ -455,7 +519,6 @@
            m = Math.pow(10, Math.max(r1, r2));
            return (arg1 * m + arg2 * m) / m;
        }


    });
});

 widgets/FloodAnalysis/css/style.css

@@ -2,8 +2,8 @@
    width: 60% !important;
    height: 100%;
    position: fixed !important;
    left: 30px !important;
    top: 75px !important;
    /*left: 30px !important;*/
    top: 45px !important;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    background: rgba(35, 36, 58, .7);
@@ -79,8 +79,9 @@
}

.search-button {
    width: 50px;
    height: 28px;
    width: 66px;
    line-height: 0px;
    height: 30px;
    background-color: white;
    border: none;
    cursor: pointer;
@@ -101,7 +102,7 @@
    color: #ff3737;
}

.select-box label {
label {
    display: inline-block;
    /*width: 80px;*/
    height: 30px;
@@ -137,8 +138,8 @@
}

.flood-history .search-box {
    text-align: center;
    margin-top: 1%;
    margin-left: 1%;
}