洪水淹没静态页面

guoshilong

2023-02-09 3ea9a42dfb1f6ef13a9a4c81f5843383a3be3e1c

 widgets/FloodAnalysis/Widget.html

@@ -1,48 +1,84 @@
<div>
   <div class="analysis-header">
      <i></i> 洪水淹没分析
   <div class="flood-top">
      <input class="analysis-button" type="button" value="洪水淹没分析" />
      <input class="history-button" type="button" value="历史风险图" />
   </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">
         <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 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" value="1">
               </select>
               <!--做模糊查询选择框时使用-->
<!--               </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;">-->
<!--                  <option value="1">1</option>-->
<!--               </select>-->
            </div>
            <div>
               <span>1-2m淹没面积：</span><span>20km²</span>
            <div class="smx">
               <label for="smx-select">水面线</label>
               <select id="smx-select" class="smx-select" name="smx">
               </select>
            </div>
            <div>
               <span>>3m淹没面积：</span><span>22km²</span>
            <div class="sw">
               <label for="sw-input">水位</label>
               <input id="sw-input" class="sw-input" type="text" name="word" autocomplete="off" maxlength="256"/>
            </div>
            <span class="tip">正数为水位上涨，负数为水位下降</span>
         </div>
         <div class="flood-detail-button">
            <input type="button" id="flood-detail-ckxq" value="查看详情" />
         <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>
               </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 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>
      </div>
   </div>
   <div class="flood-bottom"></div>
</div>