赣州市洪水风险预警系统三维版本
guoshilong
2023-02-09 85f104634bcde736e1fc25d22fd4ca354c8cd52e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<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 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" 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 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: 85px;">
 
                            </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-analysis-pagination" id="history-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>