洪水淹没-添加窗口收起展开的按钮

guoshilong

2023-02-09 0275064428b58a405ad7acebe697584af99b9e64

洪水淹没-添加窗口收起展开的按钮

 widgets/FloodAnalysis/Widget.html

@@ -1,92 +1,93 @@
<div>
    <div class="flood-top">
        <input class="analysis-button" type="button" value="洪水淹没分析"/>
        <input class="history-button" type="button" value="历史风险图"/>
    </div>
    <div class="flood-middle">
        <div class="flood-analysis">
            <div class="select-box">
                <div class="hd">
                    <label for="hd-select">河段：</label>
                    <!--                    <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">
                    </select>
                </div>
                <div class="smx">
                    <label for="smx-select">水面线：</label>
                    <select id="smx-select" class="smx-select" name="smx">
                    </select>
                </div>
                <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"/>
                        <span class="tip">正数为水位上涨，负数为水位下降</span>
                    </div>
                </div>
            </div>
            <div class="radio-box">
                <input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时
                <input id="forecast" type="radio" name="middleRadio" value="forecast">预测
            </div>
            <div class="table-box">
                <table>
                    <thead class="flood-table-thead table-thead">
                    <tr>
                        <th>
                            <div>位置</div>
                        </th>
                        <th>
                            <div>起点距</div>
                        </th>
                        <th>
                            <div>经度</div>
                        </th>
                        <th>
                            <div>纬度</div>
                        </th>
                        <th>
                            <div>水面线</div>
                        </th>
                        <th>
                            <div>水位</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody id="flood-tbody" class="table-tbody flood-tbody"></tbody>
                </table>
                <div class="flood-analysis-pagination Pagination" id="analysis-pagination"></div>
            </div>
        </div>
        <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 class="search-button" type="button" value="查  询"/>
            </div>
            <div class="table-box">
                <table>
                    <thead class="flood-table-thead table-thead">
                    <tr>
                        <th style="width: 85px;">
    <div class="fold-btn"></div>
    <div class="content">
        <div class="flood-top">
            <input class="analysis-button" type="button" value="洪水淹没分析"/>
            <input class="history-button" type="button" value="历史风险图"/>
        </div>
        <div class="flood-middle">
            <div class="flood-analysis">
                <div class="select-box">
                    <div class="hd">
                        <label for="hd-select">河段：</label>
                        <!--                    <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">
                        </select>
                    </div>
                    <div class="smx">
                        <label for="smx-select">水面线：</label>
                        <select id="smx-select" class="smx-select" name="smx">
                        </select>
                    </div>
                    <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"/>
                            <span class="tip">正数为水位上涨，负数为水位下降</span>
                        </div>
                    </div>
                </div>
                <div class="radio-box">
                    <input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时
                    <input id="forecast" type="radio" name="middleRadio" value="forecast">预测
                </div>
                <div class="table-box">
                    <table>
                        <thead class="flood-table-thead table-thead">
                        <tr>
                            <th>
                                <div>位置</div>
                            </th>
                            <th>
                                <div>起点距</div>
                            </th>
                            <th>
                                <div>经度</div>
                            </th>
                            <th>
                                <div>纬度</div>
                            </th>
                            <th>
                                <div>水面线</div>
                            </th>
                            <th>
                                <div>水位</div>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="flood-tbody" class="table-tbody flood-tbody"></tbody>
                    </table>
                    <div class="flood-analysis-pagination" id="analysis-pagination"></div>
                </div>
            </div>
            <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 class="search-button" type="button" value="查  询"/>
                </div>
                <div class="table-box">
                    <table>
                        <thead class="flood-table-thead table-thead">
                        <tr>
                            <th style="width: 85px;">

                        </th>
                        <th>
                            <div>名称</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody id="flood-history-tbody" class="table-tbody flood-tbody"></tbody>
                </table>
                <div class="flood-analysis-pagination Pagination" id="history-pagination"></div>
            </div>
        </div>
    </div>
    <div class="flood-bottom">
    </div>
                            </th>
                            <th>
                                <div>名称</div>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="flood-history-tbody" class="table-tbody flood-tbody"></tbody>
                    </table>
                    <div class="flood-analysis-pagination" id="history-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>

 widgets/FloodAnalysis/Widget.js

@@ -26,6 +26,7 @@
        analysisTableList: [],
        currentHdId: "",
        currentSmxcode: "",
        isOpen:true,
        //api接口
        url: {
            riverwaySelectName: "http://192.168.0.200:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4",
@@ -36,6 +37,20 @@
        startup: function startup() {
            var self = this
            this.bindHtmlElement()
            $(".fold-btn").click(function(){
                if (self.isOpen){
                    $(this).addClass('close')
                    $(this).removeClass('open')
                    $('.content').hide()
                    self.isOpen = false
                }else {
                    $(this).addClass('open')
                    $(this).removeClass('close')
                    $('.content').show()
                    self.isOpen = true
                }
            })

            $('input[type=radio][name=middleRadio]').change(function () {
                if (this.value == "realtime") {
                    self.divSwInput.css('visibility', 'hidden')
@@ -127,6 +142,10 @@
                destination: Cesium.Cartesian3.fromDegrees(116.016905, 25.884684, 10000),
            });

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

        onClose: function onClose() {

 widgets/FloodAnalysis/css/style.css

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

.fold-btn{
    width: 50px;
    height: 30px;
    position: fixed;
    cursor: pointer;
    background-color: rgb(39, 118, 172);
    background-image: url(../images/fold_up.png);
    border-radius: 5px;
    opacity: 1;
    background-position: center;
    background-repeat: no-repeat;
}

.open{
    background-image: url(../images/fold_up.png);
}

.close{
    background-image: url(../images/fold_down.png);
}

.flood-top {
    text-align: center;
    display: inline-flex;

 widgets/FloodAnalysis/images/fold_down.png

 widgets/FloodAnalysis/images/fold_up.png