洪水淹没-修改展示样式

guoshilong

2023-02-17 89d57baac18111b9d82c0858c0c680f2d481b8c9

洪水淹没-修改展示样式

 themes/FoldableTheme/panels/FoldablePanel/FoldableDijit.js

@@ -92,4 +92,4 @@

      onFoldStateChanged: function(){}
    });
  });
  });

 themes/FoldableTheme/panels/FoldablePanel/Panel.js

@@ -30,7 +30,6 @@
      startup: function() {
        this.titleHeight = 35;
        this.inherited(arguments);

        html.addClass(this.titleNode, 'jimu-panel-title jimu-main-background');
        this.createCloseBtn();
        this.createMaxBtn();
@@ -260,4 +259,4 @@
        }
      }
    });
  });
  });

 widgets/FloodAnalysis/Widget copy3.html

New file
@@ -0,0 +1,123 @@
<div>
    <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>
                        <div class="hd">
                            <label for="hd-select">河段：</label>
                            <!--做模糊查询选择框时使用-->
                            <input type="text" name="hd-search" id="hd-input" class="hd-input" autocomplete="off" placeholder="请选择或输入"/>
                            <select name="hd-select-name" 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" name="word" autocomplete="off"
                                       maxlength="10" 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">预测
                </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>
            </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 id="search-button" class="search-button" type="button" value="查  询"/>
                </div>
                <div class="table-box">
                    <table>
                        <thead class="flood-table-thead table-thead">
                        <tr>
                            <th style="width: 30px;">

                            </th>
                            <th>
                                <div>名称</div>
                            </th>
                        </tr>
                        </thead>
                        <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>
            </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.html

@@ -1,123 +1,64 @@
<div>
    <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 id="tab">
        <div class="tabul">
            <ul>
                <li id ="analysis-button" class="analysis-button">洪水淹没分析</li>
                <li class="history-button">历史风险图</li>
            </ul>
        </div>
        <div class="flood-middle">
            <div class="flood-analysis">
                <div class="select-box">
                    <div>
                        <div class="hd">
                            <label for="hd-select">河段：</label>
                            <!--做模糊查询选择框时使用-->
                            <input type="text" name="hd-search" id="hd-input" class="hd-input" placeholder="请选择或输入"/>
                            <select name="hd-select-name" 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" name="word" autocomplete="off"
                                       maxlength="10" value="0" disabled />
                                <span class="tip">正数为水位上涨，负数为水位下降</span>
        <div id="tablist" style="height: 100%">
            <div class="flood-middle" style="height: 100%">
                <div class="flood-analysis" style="height: 100%">
                    <div class="select-box">
                        <div>
                            <div class="hd">
                                <label for="hd-select">河段：</label>
                                <!--做模糊查询选择框时使用-->
                                <input type="text" name="hd-search" id="hd-input" class="hd-input" placeholder="请选择或输入"/>
                                <select name="hd-select-name" 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>
                        <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>
                        <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" name="word" autocomplete="off" maxlength="10" value="0" disabled />
                                    <span class="tip">正数为水位上涨，负数为水位下降</span>
                                </div>
                                <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>

                            </div>

                        </div>

                    </div>

                    <div class="radio-box" style="text-align: center">
                        <input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时
                        <input id="forecast" type="radio" name="middleRadio" value="forecast">预测
                    </div>
                    <div style="height: 71%" class="location-box-list" id="analysis-tab1-grid" data-dojo-attach-point="analysis-tab1-grid">
                    </div>
                    <div class="flood-analysis-pagination" id="analysis-pagination"></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>
            </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 id="search-button" class="search-button" type="button" value="查  询"/>
                </div>
                <div class="table-box">
                    <table>
                        <thead class="flood-table-thead table-thead">
                        <tr>
                            <th style="width: 30px;">

                            </th>
                            <th>
                                <div>名称</div>
                            </th>
                        </tr>
                        </thead>
                        <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-history" style="height: 100%">
                    <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-button" class="search-button" type="button" value="查  询"/>
                    </div>
                    <div style="height: 100%" class="location-box-list" id="history-tab2-grid" data-dojo-attach-point="history-tab2-grid">
                    </div>
                    <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

@@ -2,7 +2,24 @@
// Copyright © 2022 guoshilong. All Rights Reserved.
// 模块描述:洪水淹没分析
///////////////////////////////////////////////////////////////////////////
define(['dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/_base/html', "dojo/topic", 'jimu/BaseWidget', 'dojo/on', 'dstore/Memory', 'dstore/Trackable', 'dgrid/Grid', 'dgrid/Keyboard', 'dgrid/Selection', 'dstore/RequestMemory', 'dgrid/test/data/createSyncStore', "libs/echarts/v4/echarts.min", 'libs/layer/layer.js', 'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection, RequestMemory, createSyncStore, echarts, layer, turf) {
define(['dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    "dojo/topic",
    'jimu/BaseWidget',
    'dojo/on',
    'dstore/Memory',
    'dstore/Trackable',
    'dgrid/Grid',
    'dgrid/Keyboard',
    'dgrid/Selection',
    'dgrid/Editor',
    'dstore/RequestMemory',
    'dgrid/test/data/createSyncStore',
    "libs/echarts/v4/echarts.min",
    'libs/layer/layer.js',
    'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection,Editor, RequestMemory, createSyncStore, echarts, layer, turf) {
    return declare([BaseWidget], {
        baseClass: 'jimu-widget-FloodAnalysis',
        name: 'FloodAnalysis',
@@ -105,16 +122,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')
                self.historyBtn.addClass('unchoose-button')
                self.historyBtn.removeClass('choose-button')
                self.divFloodHistory.hide()
                self.divFloodAnalysis.show()
                $('#history-pagination').hide()
@@ -128,6 +141,7 @@
                self.historyBtn.addClass('choose-button')
                self.historyBtn.removeClass('unchoose-button')
                self.analysisBtn.addClass('unchoose-button')
                self.analysisBtn.removeClass('choose-button')
                self.divFloodAnalysis.hide()
                self.divFloodHistory.show()
                $('#analysis-pagination').hide()
@@ -146,7 +160,6 @@
                setTimeout(function(){//有bug 需要延迟执行隐藏
                    $("#hd-select").hide()
                },300)

            })
            // 河道输入事件
            $('#hd-input').on("input", function () {
@@ -238,7 +251,8 @@
            $('#smx-select option').remove()
            $('#sw-input').val("")
            $('#hd-input').val("")
            $('#flood-tbody').html("")
            //清空表格数据
            $('.location-box-list').empty();
            $('#analysis-pagination').hide()

            this.analysisTableList = []
@@ -283,6 +297,7 @@
            $('.fold-btn').removeClass('close')
            $('.content').show()
            $("#sw-input").prop('disabled', true);
            $('#search-name').val("")
            this.isOpen = true

            this.analysisBtn.addClass('choose-button')
@@ -292,7 +307,10 @@

            this.currentHd = null
            this.currentSmxcode = ""
            //获取河段数据
            this.getHdData()
            //获取历史数据
            this.getHistoryList()
        },

        //获取河段下拉数据
@@ -450,7 +468,7 @@
            if (tableData.length <= 0 && pageElementId == "history-pagination") {
                $('#history-pagination').hide()
            }
            let pageSize = 19
            let pageSize = 10
            var count = Math.ceil(tableData.length / pageSize);
            var self = this
            $('#' + pageElementId).pagination({
@@ -469,7 +487,7 @@
                        }
                    }

                    pageElementId == "analysis-pagination" ? self.loadAnalysisTable(listdata) : self.loadHistoryTable(listdata)
                    pageElementId == "analysis-pagination" ? self.createList(listdata,"洪水淹没分析") : self.createList(listdata,"历史风险图")

                }
            });
@@ -485,26 +503,7 @@
                    startData.push(tableData[i]);
                }
            }
            pageElementId == "analysis-pagination" ? self.loadAnalysisTable(startData) : self.loadHistoryTable(startData)
        },

        /**
         * 加载淹没分析表格
         * @param listData 需要加载的数据
         */
        loadAnalysisTable(listData) {
            var table = ""
            listData.forEach(e => {
                table += '<tr>' +
                    '<td><div>' + e.location + '</div></td>' +
                    '<td><div>' + e.origin + '</div></td>' +
                    '<td><div>' + e.lng + '</div></td>' +
                    '<td><div>' + e.lat + '</div></td>' +
                    '<td><div>' + e.water + '</div></td>' +
                    '<td><div>' + e.sw + '</div></td>' +
                    '</tr>'
            })
            $('#flood-tbody').html(table)
            pageElementId == "analysis-pagination" ? self.createList(startData,"洪水淹没分析") : self.createList(startData,"历史风险图")
        },

        /**
@@ -617,13 +616,13 @@
            return (arg1 * m + arg2 * m) / m;
        },

        //删除地图上的标注点位
        deleteEntities(entities) {
            entities.forEach(e => {
                this.map.entities.remove(e)
            })
            entities = []
        },


        //评估分析弹窗
        evaluatePopup() {
@@ -648,6 +647,43 @@
            });
        },

        //http://dgrid.io/tutorials/1.0/hello_dgrid/    创建表格
        createList: function (dataList, txt) {
            $('.location-box-list').empty();
            var CustomGrid = declare([Grid, Keyboard, Selection,Editor]);
            var column, tab, moon, dauy;
            if (txt == "洪水淹没分析") {
                column = {
                    location: '位置',
                    origin: '起点距',
                    water: '水面线',
                    sw: '水位',
                    lng:'经度',
                    lat:'纬度',
                }
                tab = 'analysis-tab1-grid'
            } else if (txt == "历史风险图") {
                column = {
                    radio:{ label: "", field: "radio", editor: 'radio' },
                    name: '名称',
                }
                tab = 'history-tab2-grid'
            }
            var grid = new CustomGrid({
                columns: column,
                selectionMode: 'none', // for Selection; only select a single row at a time
                cellNavigation: false, // for Keyboard; allow only row-level keyboard navigation
            }, tab);
            grid.startup();

            //点击事件
            grid.on("dgrid-datachange", function(evt){
                //获取行数据
                let data = evt.cell.row.data
            });
            grid.renderArray(dataList);
        },


    });
});

 widgets/FloodAnalysis/css/style cpoy3.css

New file
@@ -0,0 +1,307 @@
.jimu-widget-FloodAnalysis {
    width: 38% !important;
    height: 100%;
    position: fixed !important;
    /*left: 30px !important;*/
    top: 45px !important;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    background: rgba(35, 36, 58, .7);
    z-index: 41 !important;
    color: rgb(255, 255, 255);
    font-size: 22px;
}

.jimu-widget-FloodAnalysis div,
.jimu-widget-FloodAnalysis i,
.jimu-widget-FloodAnalysis ul,
.jimu-widget-FloodAnalysis li,
.jimu-widget-FloodAnalysis span,
.jimu-widget-FloodAnalysis input,
.jimu-widget-FloodAnalysis h2 {
    margin: 0;
    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);
}

.content{
    height: 92vh;
}

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

.flood-middle{
    height: 90%;
}

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

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

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

.flood-top input {
    width: 100px;
    height: 25px;
    cursor: pointer;
}

.flood-top .choose-button {
    background-color: #1f81e0;
    border: none;
    color: white;
}

.flood-top .unchoose-button {
    background-color: white;
    border: none;
    color: #1f81e0;
}

.start-analysis-btn {
    width: 10% !important;
    height: 29px !important;
    margin-left: 2% !important;
    background: white;
    border: none;
    background-color: #1f81e0;
    color: white;
    cursor: pointer;
}

.search-button, .save-button {
    width: 66px;
    line-height: 0px;
    height: 30px;
    background-color: white;
    border: none;
    cursor: pointer;
}

.search-button:hover, .save-button:hover {
    background-color: #1388ff;
    color: white;
}

.flood-middle .select-box select, .flood-middle .select-box input, .search-name-input {
    height: 30px;
    width: 260px;
}

.flood-middle .radio-box {
    text-align: center;
    margin-top: -1%;
}

.flood-middle .tip {
    font-size: 1px;
    color: #ff3737;
}

label {
    display: inline-block;
    /*width: 80px;*/
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    text-align: justify;
    text-align-last: justify;
}

/**表格**/
.flood-middle .table-box {
    margin-top: 1%;
}

.flood-middle .table-box table {
    width: 100%;
}

.flood-table-thead tr th {
    text-align: left;
    border-top: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    color: #ffffff;
    background: rgb(39, 118, 172);
}

.flood-tbody tr td {
    text-align: left;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    color: #ffffff;
    font-size: 20px;
}

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


/**模糊查询**/
.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 {
    position: absolute;
    left: 72px;
    width: 167px;
    height: 106px !important;
    outline: none;
    border: 1px solid #999;
    margin-top: 31px;
}

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


/**分页器**/
.flood-analysis-pagination {
    position: relative;
    text-align: center;
    zoom: 1;
    display: flex;
    width: 92%;
    justify-content: flex-end;
}

.flood-analysis-pagination:before,
.flood-analysis-pagination:after {
    content: "";
    display: table;
}

.flood-analysis-pagination:after {
    clear: both;
    overflow: hidden;
}

.flood-analysis-pagination span {
    float: left;
    margin: 0 5px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    color: #bdbdbd;
    font-size: 14px;
}

.flood-analysis-pagination .active {
    float: left;
    margin: 3px 5px;
    width: 25px;
    height: 25px;
    line-height: 25px !important;
    background: #e91e63;
    color: #fff;
    font-size: 14px;
    border: 1px solid #e91e63;
}

.flood-analysis-pagination a {
    float: left;
    margin: 3px 5px;
    width: 25px;
    height: 25px;
    line-height: 25px !important;
    background: rgb(39, 118, 172);
    border: 1px solid #ebebeb;
    color: #ffffff;
    font-size: 14px;
}

.flood-analysis-pagination a:hover {
    color: #fff;
    background: #e91e63;
}

.flood-analysis-pagination .next,
.flood-analysis-pagination .prev {
    font-family: "Simsun";
    font-size: 16px;
    font-weight: bold;
}

.now,
.count {
    padding: 0 5px;
    color: #f00;
}

.eg img {
    max-width: 800px;
    min-height: 500px;
}

.flood-analysis-pagination input {
    float: left;
    margin: 3px 5px;
    width: 25px;
    height: 25px;
    line-height: 25px !important;
    text-align: center;
    background: #fff;
    border: 1px solid #ebebeb;
    outline: none;
    color: #bdbdbd;
    font-size: 14px;
}

#analysis-pagination, #history-pagination {
    /*position: absolute;*/
    margin-top: 5px;
    margin-bottom: 5px;
}

.flood-analysis-pagination .jump-btn {
    width: 38px !important;
}

 widgets/FloodAnalysis/css/style.css

@@ -1,200 +1,129 @@
.jimu-widget-FloodAnalysis {
    width: 38% !important;
    width: 100%;
    height: 100%;
    position: fixed !important;
    /*left: 30px !important;*/
    top: 45px !important;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    background: rgba(35, 36, 58, .7);
    z-index: 41 !important;
    color: rgb(255, 255, 255);
    font-size: 22px;
    overflow: hidden;
    background: #fff;
}

.jimu-widget-FloodAnalysis div,
.jimu-widget-FloodAnalysis i,
.jimu-widget-FloodAnalysis ul,
.jimu-widget-FloodAnalysis li,
.jimu-widget-FloodAnalysis span,
.jimu-widget-FloodAnalysis div,
.jimu-widget-FloodAnalysis input,
.jimu-widget-FloodAnalysis h2 {
.jimu-widget-FloodAnalysis img,
.jimu-widget-FloodAnalysis table,
.jimu-widget-FloodAnalysis tr,
.jimu-widget-FloodAnalysis td,
.jimu-widget-FloodAnalysis th,
.jimu-widget-FloodAnalysis tbody,
.jimu-widget-FloodAnalysis thead{
    margin: 0;
    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;
.jimu-widget-FloodAnalysis a {
    text-decoration: none;
    color: black;
}

.open {
    background-image: url(../images/fold_up.png);
.jimu-widget-FloodAnalysis a:hover {
    text-decoration: none;
    color: #336699;
}

.close {
    background-image: url(../images/fold_down.png);
.jimu-widget-FloodAnalysis #tab {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
    /*margin: 1px 3px 1px 3px;*/
    /*z-index: 9;*/
}

.content{
    height: 92vh;
}

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

.flood-middle{
    height: 90%;
}

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

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

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

.flood-top input {
    width: 100px;
    height: 25px;
    cursor: pointer;
}

.flood-top .choose-button {
    background-color: #1f81e0;
    border: none;
    color: white;
}

.flood-top .unchoose-button {
    background-color: white;
    border: none;
    color: #1f81e0;
}

.start-analysis-btn {
    width: 10% !important;
    height: 29px !important;
    margin-left: 2% !important;
    background: white;
    border: none;
    background-color: #1f81e0;
    color: white;
    cursor: pointer;
}

.search-button, .save-button {
    width: 66px;
    line-height: 0px;
    height: 30px;
    background-color: white;
    border: none;
    cursor: pointer;
}

.search-button:hover, .save-button:hover {
    background-color: #1388ff;
    color: white;
}

.flood-middle .select-box select, .flood-middle .select-box input, .search-name-input {
    height: 30px;
    width: 260px;
}

.flood-middle .radio-box {
    text-align: center;
    margin-top: -1%;
}

.flood-middle .tip {
    font-size: 1px;
    color: #ff3737;
}

label {
    display: inline-block;
    /*width: 80px;*/
.jimu-widget-FloodAnalysis #tab .tabul {
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    text-align: justify;
    text-align-last: justify;
}

/**表格**/
.flood-middle .table-box {
    margin-top: 1%;
.jimu-widget-FloodAnalysis #tab ul {
    list-style: none;
    line-height: 30px;
    height: 30px;
}

.flood-middle .table-box table {
    width: 100%;
.jimu-widget-FloodAnalysis #tab .tabul ul li {
    cursor: pointer;
    float: left;
    list-style: none;
    text-align: center;
    padding: 0px 5px;
    margin-right: 4px;
    width: 90px;
    height: 30px;
    line-height: 30px;
    background: rgb(187, 186, 186);
    border-radius: 4px;
    color: #fff;
}

.flood-table-thead tr th {
    text-align: left;
    border-top: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    color: #ffffff;
    background: rgb(39, 118, 172);
.jimu-widget-FloodAnalysis #tab ul li.on {
    /*border-top: 2px solid Saddlebrown;*/
    background: #094895;
}

.flood-tbody tr td {
    text-align: left;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    color: #ffffff;
    font-size: 20px;
.jimu-widget-FloodAnalysis #tab div {
    /*width: 100%;*/
    line-height: 24px;
    /*border-top: none;*/
    /*border: 1px solid #336699;*/
}

.flood-history .search-box {
    margin-top: 1%;
    margin-left: 1%;
.choose-button {
    background: #094895 !important;
    border: none;
    color: white;
}

.unchoose-button {
    background: rgb(187, 186, 186) !important;
    border: none;
    color: white;
}


/**模糊查询**/
#tablist{
    margin-top: 10px;
}

.select-box , .search-box{
    border: 1px solid #d2d2d0;
}

/**河段选择框**/
.hd {
    position: relative;
    margin-bottom: 1% !important;
}

.hd input {
    width: 167px;
    /* top: 9px; */
    width: 230px;
    outline: none;
    border: 0pt;
    /* position: absolute; */
    line-height: 30px;
    /* left: 8px; */
    height: 30px;
    border: 1px solid #999;
    height: 26px;
    border: 1px solid rgba(160, 160, 156, 1);
    margin-left: 12px;
}

.hd select {
    position: absolute;
    left: 72px;
    width: 167px;
    left: 51px;
    top: -9px;
    width: 230px;
    height: 106px !important;
    outline: none;
    border: 1px solid #999;
    border: 1px solid rgba(160, 160, 156, 1);
    margin-top: 31px;
}

@@ -203,6 +132,40 @@
    color: white;
}

/**水面线选择框**/
.smx-select{
    width: 230px;
    height: 26px;
    border: 1px solid rgba(160, 160, 156, 1);
}

/**水位输入框**/
.sw-input{
    width: 160px;
    height: 26px;
    margin-left: 9px !important;
    border: 1px solid rgba(160, 160, 156, 1);
}

.start-analysis-btn{
    height: 26px;
    border: none;
    cursor: pointer;
}

/**水位提示**/
.flood-middle .tip {
    font-size: 1px;
    color: #ff3737;
    margin-left: 7px;
}

/**历史风险搜索框**/
.search-name-input{
    width: 230px;
    height: 26px;
    border: 1px solid rgba(160, 160, 156, 1);
}

/**分页器**/
.flood-analysis-pagination {
@@ -305,3 +268,14 @@
.flood-analysis-pagination .jump-btn {
    width: 38px !important;
}

/**洪水淹没分析表格宽度**/
#analysis-tab1-grid .dgrid-cell {
    width: 80px; /* force all columns to have SOME width */
}
#analysis-tab1-grid .field-col1 {
    width: 500px;
}
#analysis-tab1-grid .field-col4 {
    width: 300px;
}

 widgets/FloodAnalysis/manifest.json

@@ -11,7 +11,6 @@
  "license": "",
  "properties": {
    "hasConfig": false,
    "inPanel": false,
    "hasVersionManager": false
  }
}