洪水淹没-调节页面样式由横板改为竖版

guoshilong

2023-02-14 b53c06e37b171ef7edeb516e545bf06ae7f75c8f

洪水淹没-调节页面样式由横板改为竖版

 widgets/FloodAnalysis/Widget.html

@@ -8,33 +8,35 @@
        <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="number" name="word" autocomplete="off"
                                   maxlength="256" value="0" disabled />
                            <span class="tip">正数为水位上涨，负数为水位下降</span>
                    <div>
                        <div class="hd">
                            <label for="hd-select">河段：</label>
                            <!--做模糊查询选择框时使用-->
                            <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>
                    <div style="margin-top: 1%">
                        <div class="sw" style="display: flex">
                            <label for="sw-input">水位：</label>
                            <div style="display: flex;flex-direction: column;margin-left: 6px;">
                                <input id="sw-input" class="sw-input" type="number" name="word" autocomplete="off"
                                       maxlength="256" value="0" disabled />
                                <span class="tip">正数为水位上涨，负数为水位下降</span>
                            </div>
                        </div>
                        <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>
                    </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">预测
                    <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>
                </div>
                <div class="table-box">
                    <table>
@@ -62,7 +64,6 @@
                        </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">
@@ -76,7 +77,7 @@
                    <table>
                        <thead class="flood-table-thead table-thead">
                        <tr>
                            <th style="width: 85px;">
                            <th style="width: 30px;">

                            </th>
                            <th>
@@ -111,9 +112,12 @@
                        </tr>
                        </tbody>
                    </table>
                    <div class="flood-analysis-pagination" id="history-pagination"></div>
                </div>
            </div>
        </div>
        <div class="flood-bottom">
            <div class="flood-analysis-pagination" id="analysis-pagination"></div>
            <div class="flood-analysis-pagination" id="history-pagination"></div>
        </div>
    </div>
</div>

 widgets/FloodAnalysis/Widget.js

@@ -117,6 +117,10 @@
                self.historyBtn.addClass('unchoose-button')
                self.divFloodHistory.hide()
                self.divFloodAnalysis.show()
                $('#history-pagination').hide()
                if (self.currentHd){
                    $('#analysis-pagination').show()
                }
            })

            //历史风险图按钮点击事件
@@ -126,6 +130,8 @@
                self.analysisBtn.addClass('unchoose-button')
                self.divFloodAnalysis.hide()
                self.divFloodHistory.show()
                $('#analysis-pagination').hide()
                $('#history-pagination').show()

                self.getHistoryList()
            })
@@ -198,7 +204,7 @@
                let filterArray = self.historyTableList.filter(e => {
                    return e.name.indexOf(searchName) != -1
                })
                self.loadPagination(filterArray, "flood-analysis-pagination")
                self.loadPagination(filterArray, "history-pagination")
            })

            $('#save-button').click(function () {
@@ -440,7 +446,8 @@
            if (tableData.length <= 0 && pageElementId == "history-pagination") {
                $('#history-pagination').hide()
            }
            var count = Math.ceil(tableData.length / 10);
            let pageSize = 11
            var count = Math.ceil(tableData.length / pageSize);
            var self = this
            $('#' + pageElementId).pagination({
                mode: 'fixed',
@@ -450,8 +457,8 @@
                callback: function (index) {
                    var listdata = [];
                    //显示页数
                    var index = (index.getCurrent() - 1) * 10;
                    for (var i = index; i < index + 10; i++) {
                    var index = (index.getCurrent() - 1) * pageSize;
                    for (var i = index; i < index + pageSize; i++) {
                        listdata.push(tableData[i]);
                        if (i == tableData.length - 1) {
                            break;
@@ -463,10 +470,10 @@
                }
            });

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

 widgets/FloodAnalysis/css/style.css

@@ -1,5 +1,5 @@
.jimu-widget-FloodAnalysis {
    width: 60% !important;
    width: 38% !important;
    height: 100%;
    position: fixed !important;
    /*left: 30px !important;*/
@@ -44,20 +44,31 @@
    background-image: url(../images/fold_down.png);
}

.content{
    height: 92vh;
}

.flood-top {
    text-align: center;
    display: inline-flex;
    margin-left: 41% !important;
    margin-left: 35% !important;
}

.flood-middle{
    height: 90%;
}

.flood-middle .select-box {
    display: flex;
    margin: 1% 0 0 1%;
}

.select-box > div {
    display: flex;
    margin-right: 3%;
}

.smx{
    margin-left: 13px !important;
}

.flood-top input {
@@ -79,8 +90,9 @@
}

.start-analysis-btn {
    width: 65px;
    height: 25px;
    width: 10% !important;
    height: 29px !important;
    margin-left: 2% !important;
    background: white;
    border: none;
}
@@ -134,7 +146,7 @@
}

.flood-table-thead tr th {
    text-align: center;
    text-align: left;
    border-top: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
@@ -143,7 +155,7 @@
}

.flood-tbody tr td {
    text-align: center;
    text-align: left;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    color: #ffffff;
@@ -174,7 +186,7 @@

.hd select {
    position: absolute;
    left: 66px;
    left: 72px;
    width: 167px;
    height: 106px !important;
    outline: none;