洪水淹没-河段模糊查询（可用、但是存在调用两次接口问题）

guoshilong

2023-02-09 af2f9abf5f0c467951ee4953b707b60ee1e2a8a1

 widgets/FloodAnalysis/Widget.html

@@ -1,90 +1,92 @@
<div>
   <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 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" style="display:none;">-->
<!--               </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="text" name="word" autocomplete="off" maxlength="256"/>
                  <span class="tip">正数为水位上涨，负数为水位下降</span>
               </div>
            </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 class="flood-analysis-pagination Pagination" id="analysis-pagination"></div>
         </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;">
    <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 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="text" name="word" autocomplete="off"
                               maxlength="256"/>
                        <span class="tip">正数为水位上涨，负数为水位下降</span>
                    </div>
                </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 class="flood-analysis-pagination Pagination" id="analysis-pagination"></div>
            </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 class="flood-analysis-pagination Pagination" id="history-pagination"></div>
         </div>
      </div>
   </div>
   <div class="flood-bottom">
   </div>
                        </th>
                        <th>
                            <div>名称</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody id="flood-history-tbody" class="table-tbody flood-tbody"></tbody>
                </table>
                <div class="flood-analysis-pagination Pagination" id="history-pagination"></div>
            </div>
        </div>
    </div>
    <div class="flood-bottom">
    </div>
</div>