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

guoshilong

2023-02-09 af2f9abf5f0c467951ee4953b707b60ee1e2a8a1

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

 widgets/FloodAnalysis/Widget.html

@@ -8,12 +8,12 @@
            <div class="select-box">
                <div class="hd">
                    <label for="hd-select">河段：</label>
                    <select id="hd-select" class="hd-select" name="hd" >
                    <!--                    <select id="hd-select" class="hd-select" name="hd" >-->
                    </select>
                    <!--做模糊查询选择框时使用-->
<!--                    <input type="text" name="hd-input" id="hd-input" class="hd-input" placeholder="请选择或输入" />-->
<!--                    <select name="hd-select" id="hd-select"  size="10" style="display:none;">-->
<!--                    </select>-->
                    <input type="text" name="hd-input" id="hd-input" class="hd-input" placeholder="请选择或输入"/>
                    <select name="hd-select" id="hd-select" size="10">
                    </select>
                </div>
                <div class="smx">
                    <label for="smx-select">水面线：</label>
@@ -23,7 +23,8 @@
                <div class="sw">
                    <label for="sw-input">水位：</label>
                    <div style="display: flex;flex-direction: column">
                        <input id="sw-input" class="sw-input" type="text" name="word" autocomplete="off" maxlength="256"/>
                        <input id="sw-input" class="sw-input" type="text" name="word" autocomplete="off"
                               maxlength="256"/>
                        <span class="tip">正数为水位上涨，负数为水位下降</span>
                    </div>
                </div>
@@ -64,7 +65,8 @@
        <div class="flood-history">
            <div class="search-box">
                <label for="search-name">名称：</label>
                <input id="search-name" class="search-name-input" type="text" name="word" autocomplete="off" maxlength="256" placeholder="请输入筛选名称"/>
                <input id="search-name" class="search-name-input" type="text" name="word" autocomplete="off"
                       maxlength="256" placeholder="请输入筛选名称"/>
                <input class="search-button" type="button" value="查  询" />
            </div>
            <div class="table-box">

 widgets/FloodAnalysis/Widget.js

@@ -63,30 +63,35 @@
            })


            //河段输入框聚焦、失焦、值改变事件
            $('#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.hdSelect.hide()
            })

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

@@ -219,6 +225,7 @@
            this.divFloodHistory.hide()
            this.divFloodAnalysis.show()
            $("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>");
                    })
@@ -264,8 +271,13 @@
                success: function (res) {
                    let data = res.data
                    self.smxSelect.find("option").remove();//添加新值 删除旧值
                    if (data.length <= 0) {
                        $('#flood-tbody').html("")
                        $('#analysis-pagination').hide()
                    }

                    data.forEach(e => {
                        // $("#chapterName").prepend("<option value='无'>无</option>");//添加第一个option值

                        self.smxSelect.append("<option value="+ e.smxcode +">" + e.waterline + "</option>");

                        if (e.smxcode == defaultId){
@@ -309,7 +321,9 @@
         * @param tableElementId tbody id
         */
        loadPagination(tableData,pageElementId) {
            if (tableData.length < 0) return
            if (tableData.length <= 0) {
                $('#analysis-pagination').hide()
            }
            var count = Math.ceil(tableData.length / 10);
            var self = this
            $('#'+pageElementId).pagination({
@@ -378,7 +392,6 @@
        //获取差值
        getSub(hdid,smxcode){
            const self = this
            console.log(hdid,smxcode)
            $.ajax({
                url: self.url.getCzByGlCodeByGlQdj,
                type: 'get',

 widgets/FloodAnalysis/css/style.css

@@ -6,7 +6,7 @@
    top: 75px !important;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    background: rgba(31, 39, 48, .7);
    background: rgba(35, 36, 58, 1);
    z-index: 41 !important;
    color: rgb(255, 255, 255);
    font-size: 22px;
@@ -121,48 +121,37 @@
}


/**模糊查询**/
.hd {
    position: relative;
}





/*!**模糊查询**!*/
/*.hd {*/
/*    position: relative;*/
/*}*/

/*.hd input {*/
/*    width: 167px;*/
/*    !* top: 9px; *!*/
/*    outline: none;*/
/*    border: 0pt;*/
/*    !* position: absolute; *!*/
/*    line-height: 30px;*/
/*    !* left: 8px; *!*/
/*    height: 30px;*/
/*    border: 1px solid #999;*/
/*}*/

/*.hd select {*/
.hd input {
    width: 167px;
    /* top: 9px; */
    outline: none;
    border: 0pt;
/*    position: absolute;*/
/*    left: 66px;*/
/*    width: 167px;*/
/*    height: 106px !important;*/
/*    outline: none;*/
/*    border: 1px solid #999;*/
/*    margin-top: 31px;*/
/*}*/
    line-height: 30px;
    /* left: 8px; */
    height: 30px;
    border: 1px solid #999;
}

/*.hd select option:hover {*/
/*    background: #1388ff;*/
/*    color: white;*/
/*}*/
.hd select {
    position: absolute;
    left: 66px;
    width: 167px;
    height: 106px !important;
    outline: none;
    border: 1px solid #999;
    margin-top: 31px;
}






.hd select option:hover {
    background: #1388ff;
    color: white;
}


/**分页器**/