洪水淹没-河段模糊查询（可用、但是存在调用两次接口问题）

guoshilong

2023-02-09 af2f9abf5f0c467951ee4953b707b60ee1e2a8a1

 widgets/FloodAnalysis/Widget.js

@@ -23,15 +23,15 @@
        //河段下拉列表
        hdDataList: [],
        //洪水分析表格数据
        analysisTableList:[],
        currentHdId:"",
        currentSmxcode:"",
        analysisTableList: [],
        currentHdId: "",
        currentSmxcode: "",
        //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"
        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"
        },
        startup: function startup() {
            var self = this
@@ -63,44 +63,49 @@
            })


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

            // $('#hd-input').focus(function () {
            //     $("#hd-select").css({"display": ""});
            // })
            //
            // $('#hd-input').blur(function () {
            //     $("#hd-select").css({"display": "none"});
            // })
            //
            // $('#hd-select').change(function () {
            //     console.log($('#hd-select').find("option:selected").text(), "----")
            //     $("#hd-input").val($('#hd-select').find("option:selected").text());
            //     $("#hd-select").css({"display": "none"});
            // })
            //
            $('#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 => {
                    return e.riverway.indexOf(searchString) != -1
                })
                self.hdSelect.find("option").remove();//添加新值 删除旧值
                filterArray.forEach(e => {
                    self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>");
                })
            })

            this.hdSelect.change(function () {
                $("#hd-input").val($(this).find("option:selected").text());
                var selected = JSON.parse($(this).val())
                self.currentHdId = selected.id
                $('#sw-input').val("")
                self.getSmxData(selected.river_code,selected.default_smx)
                self.getSmxData(selected.river_code, selected.default_smx)
                self.hdSelect.hide()
            })

            this.smxSelect.change(function () {
                var selected =$(this).val()
                var selected = $(this).val()
                self.getPointData(selected)
            })

            $('#sw-input').keypress(function (event) {
                if (event.which == 13){
                if (event.which == 13) {
                    let sw = $('#sw-input').val()
                    self.analysisTableList.forEach(e=>{
                        e.sw = self.calculateSw(e.water,sw)
                    self.analysisTableList.forEach(e => {
                        e.sw = self.calculateSw(e.water, sw)
                    })
                    self.loadPagination(self.analysisTableList,"analysis-pagination")
                    self.loadPagination(self.analysisTableList, "analysis-pagination")
                }
            })

@@ -134,6 +139,7 @@
            $('#hd-select option').remove()
            $('#smx-select option').remove()
            $('#sw-input').val("")
            $('#hd-input').val("")
            $('#flood-tbody').html("")
            $('#analysis-pagination').hide()

@@ -218,7 +224,8 @@
            this.spanTip.css('visibility', 'hidden')
            this.divFloodHistory.hide()
            this.divFloodAnalysis.show()
            $("input[type=radio][name=middleRadio][value='realtime']").prop('checked','checked')
            $("input[type=radio][name=middleRadio][value='realtime']").prop('checked', 'checked')
            this.hdSelect.hide()

            this.analysisBtn.addClass('choose-button')
            this.analysisBtn.removeClass('unchoose-button')
@@ -240,8 +247,8 @@
                data: {},
                success: function (res) {
                    let data = res.data
                    self.hdDataList = data
                    self.hdSelect.find("option").remove();//添加新值 删除旧值
                    self.hdSelect.prepend("<option value=''>请选择</option>");//添加第一个option值
                    data.forEach(e => {
                        self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>");
                    })
@@ -250,7 +257,7 @@
        },

        //获取水面线数据
        getSmxData(hdid,defaultId) {
        getSmxData(hdid, defaultId) {
            const self = this
            $.ajax({
                url: self.url.waterlineSelectName,
@@ -259,17 +266,22 @@
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {
                    hdid:hdid
                    hdid: hdid
                },
                success: function (res) {
                    let data = res.data
                    self.smxSelect.find("option").remove();//添加新值 删除旧值
                    data.forEach(e => {
                        // $("#chapterName").prepend("<option value='无'>无</option>");//添加第一个option值
                        self.smxSelect.append("<option value="+ e.smxcode +">" + e.waterline + "</option>");
                    if (data.length <= 0) {
                        $('#flood-tbody').html("")
                        $('#analysis-pagination').hide()
                    }

                        if (e.smxcode == defaultId){
                            $("#smx-select option[value="+e.smxcode + "] ").attr("selected",true)
                    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")
                        }
                    })
@@ -279,7 +291,7 @@
        },

        //获取点数据
        getPointData(smxcode){
        getPointData(smxcode) {
            this.currentSmxcode = smxcode
            const self = this
            $.ajax({
@@ -289,14 +301,14 @@
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {
                    parentId:smxcode,
                    size:9999999
                    parentId: smxcode,
                    size: 9999999
                },
                success: function (res) {
                    if (res.code == 200){
                    if (res.code == 200) {
                        let data = res.data.records
                        self.analysisTableList = data
                        self.getSub(self.currentHdId,self.currentSmxcode)
                        self.getSub(self.currentHdId, self.currentSmxcode)
                    }
                }
            });
@@ -308,11 +320,13 @@
         * @param pageElementId 分页html的id
         * @param tableElementId tbody id
         */
        loadPagination(tableData,pageElementId) {
            if (tableData.length < 0) return
        loadPagination(tableData, pageElementId) {
            if (tableData.length <= 0) {
                $('#analysis-pagination').hide()
            }
            var count = Math.ceil(tableData.length / 10);
            var self = this
            $('#'+pageElementId).pagination({
            $('#' + pageElementId).pagination({
                mode: 'fixed',
                jump: true,
                coping: false,
@@ -350,9 +364,9 @@
         * @param listData 需要加载的数据
         * @param elementId 需要加载的表格的tbody id
         */
        loadAnalysisTable(listData,elementId) {
        loadAnalysisTable(listData, elementId) {
            var table = ""
            listData.forEach(e=>{
            listData.forEach(e => {
                table += '<tr>' +
                    '<td><div>' + e.location + '</div></td>' +
                    '<td><div>' + e.origin + '</div></td>' +
@@ -370,15 +384,14 @@
         * @param waterline 水面线高度
         * @param number 差值
         */
        calculateSw(waterline,sub){
            let sw = this.floatAdd(Number(waterline) , Number(sub))
        calculateSw(waterline, sub) {
            let sw = this.floatAdd(Number(waterline), Number(sub))
            return sw
        },

        //获取差值
        getSub(hdid,smxcode){
        getSub(hdid, smxcode) {
            const self = this
            console.log(hdid,smxcode)
            $.ajax({
                url: self.url.getCzByGlCodeByGlQdj,
                type: 'get',
@@ -386,22 +399,22 @@
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {
                    hdId:hdid,
                    smxcode:smxcode
                    hdId: hdid,
                    smxcode: smxcode
                },
                success: function (res) {
                    if (res.code == 200){
                    if (res.code == 200) {
                        let sub = res.data
                        self.analysisTableList.forEach(e=>{
                        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.sw = self.calculateSw(e.water, sub)

                            e.water = Number(e.water).toFixed(4)
                            e.sw = Number(e.sw).toFixed(4)
                        })

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