洪水淹没

guoshilong

2023-02-27 4d8c6dd77427e8e581fda17b6b65ba86bfb7a815

 widgets/FloodAnalysis/Widget.html

@@ -1,48 +1,88 @@
<div>
   <div class="analysis-header">
      <i></i> 洪水淹没分析
   </div>
   <div class="dong">
      <ul>
         <li><span>分析区域:</span><input id="dong_draw" type="button" value="绘制区域"></li>
         <li><span>最低海拔(米):</span><input type="text" id="dong_min_height"></li>
         <li><span>最高海拔(米):</span><input type="text" id="dong_max_height"></li>
         <li><span>淹没速度(米/秒):</span><input type="text" id='dong_time' value='0.5'></li>
         <li><input id='dong_start' type="button" value="开始分析"><input id='dong_delet' type="button" value="清除"></li>
      </ul>
   </div>
   <p>what why no sea</p>
   <div class="dong-echarts" id='dong_echarts'>

   </div>
   <div class='dong-progress'>
      <h2>分析结果中，请稍等...</h2>
      <span class="container">
    <div id="tab">
        <div class="tabul">
            <ul>
                <li id ="analysis-button" class="analysis-button">洪水淹没分析</li>
                <li class="history-button">历史风险图</li>
            </ul>
        </div>
        <div id="tablist" style="height: 96%">
            <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="请选择或输入" autocomplete='off'/>
                                <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 class="smx">
                                <label for="glzd">关联站：</label>
                                <input id="glzd" style="width: 80px;height: 26px;" name="glzd" value="未知" disabled />
                                <label for="qdj">起点距：</label>
                                <input id="qdj" style="width: 80px;height: 26px;" name="qdj" value="未知" disabled />
                            </div>
                        </div>
                        <div style="margin-top: 1%">
                            <div class="sw" style="display: flex">
                                <label for="sw-input" id="swtext" style="width: 50px">水位：</label>
                                <div style="display: flex;flex-direction: column;">
                                    <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 class="analysis-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="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 class="history-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>
    </div>
    <div class='dong-progress'>
        <h2>分析结果中，请稍等...</h2>
        <span class="container">
         <span id="progress_bar"  class="h-100P bar"></span>
      </span>
   </div>
   <div class="storage-capacity-curve" id="storage_echarts">
   </div>
   <div class="flood-detail">
      <div class="flood-detail-header">
         <i></i> 洪水淹没详情
      </div>

      <div class="flood-detail-content">
         <div class="flood-detail-text">
            <div>
               <span>0-3m淹没面积：</span><span>10km²</span>
            </div>
            <div>
               <span>1-2m淹没面积：</span><span>20km²</span>
            </div>
            <div>
               <span>>3m淹没面积：</span><span>22km²</span>
            </div>
         </div>
         <div class="flood-detail-button">
            <input type="button" id="flood-detail-ksfx" value="开始分析" />
         </div>
      </div>
   </div>
    </div>
    <div id="restore-icon" class="restore-icon"></div>
    <!-- 弹窗 -->
    <div id="myModal" class="modal">
        <!-- 关闭按钮 -->
        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
        <div style="height: 100%;display: flex;align-items: center">
            <!-- 弹窗内容 -->
            <img class="modal-content" id="img01" src="">
        </div>
        <!-- 文本描述 -->
        <div id="caption"></div>
    </div>
    <div id="tableTip" class="tableTip">
        11111111
    </div>
</div>