From 3ea9a42dfb1f6ef13a9a4c81f5843383a3be3e1c Mon Sep 17 00:00:00 2001 From: guoshilong <123456> Date: Thu, 09 Feb 2023 08:46:52 +0800 Subject: [PATCH] 洪水淹没静态页面 --- widgets/FloodAnalysis/Widget.html | 112 +++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 74 insertions(+), 38 deletions(-) diff --git a/widgets/FloodAnalysis/Widget.html b/widgets/FloodAnalysis/Widget.html index f44f4f0..36c85f5 100644 --- a/widgets/FloodAnalysis/Widget.html +++ b/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> -- Gitblit v1.9.3