地图3D模型、折线图和表格三者点击联动效果

riku

2024-02-27 7578c3ff65329b2269f099475eb687e963efac1c

 underway.html

@@ -6,7 +6,9 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞羽大气环境智能走航监测系统</title>
    <!-- <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="./lib/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/plugin/daterangepicker/2.1.19/daterangepicker.css">
@@ -24,12 +26,15 @@
            display: none;
            opacity: 0 !important;
        }

        .amap-copyright {
            opacity: 0;
        }

        .amap-overlays {
            z-index: 0;
        }

        .amap-marker-label{
            /* width: 100px;
            max-width: 200px; */
@@ -64,17 +69,9 @@
        </div>

        <div class="map-tool-box flexbox">
            <!-- <div class="ff-content-top-left ff-content ff-content-small">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content flexbox align-items map-btn-group">
                        <button id="btn_point" class="btn-search-s">地物标注：关</button>
                        <button id="btn_map_mode" class="btn-search-s margin-left-8">卫星地图：开</button>
                    </div>
                </div>
            </div> -->
            <div class="dropdown">
                <button type="button" class="margin-left-8 dropdown-toggle btn btn-dropdown" data-toggle="dropdown" aria-expanded="false">
                <button type="button" class="margin-left-8 dropdown-toggle btn btn-dropdown" data-toggle="dropdown"
                    aria-expanded="false">
                    <i class="fa fa-archive" aria-hidden="true"></i>
                    <span>地图工具箱</span>
                </button>
@@ -170,9 +167,9 @@
                        <div class="form-group" id="electricity_sites">
                        </div>
                    </form>
                    <!-- <a class="dropdown-item" href="#">Action</a> -->
                </div>
                    <a class="dropdown-item" href="#">Action</a> 
            </div> -->
        </div>
        </div>

        <div id="rangeset" class="map-range-set flexbox">
@@ -245,7 +242,7 @@
                                </a>
                            </div>
                            <div class="map-btn-group">
                                <div class="btn-search" id="btn_search">查询</div>
                            <div class="btn-search" id="btn_search">分析</div>
                            </div>
                        </div>
                    </div>
@@ -364,7 +361,8 @@
                            <div class="ff-border-content">
                                <div class="flexbox match-width">
                                    <!-- <div class="factor-title">实时监测数据</div> -->
                                    <div id="multiple_select_factor" class="mySelect margin-left" style="min-width: 200px;"></div>
                                <div id="multiple_select_factor" class="mySelect margin-left" style="min-width: 200px;">
                                </div>
                                </div>
                                <div class="flexbox margin-top match-width">
                                    <div id="realtime_temp" class="tag-2">温度：--℃</div>
@@ -374,7 +372,8 @@
                                    <div id="realtime_v" class="margin-left tag-2">车速：--km/h</div>
                                </div>
                                <div id="realtime_chart" class="flexbox-wrap align-items scrollbar"></div>
                                <div class="flexbox-col align-items time match-width" style="margin-top: 0px;margin-bottom: 0;">
                            <div class="flexbox-col align-items time match-width"
                                style="margin-top: 0px;margin-bottom: 0;">
                                    <div id="realtime_time" class="tag-2">采样时间：---------- --:--:--</div>
                                </div>
                            </div>
@@ -505,27 +504,33 @@
                                <span class="label-date-title">类型</span>
                                <div id="epw_period">
                                    <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                        <input type="checkbox" class="complaint-check" name="complaint_type" id="complaint_type_0" value="1" checked="checked">
                                    <input type="checkbox" class="complaint-check" name="complaint_type"
                                        id="complaint_type_0" value="1" checked="checked">
                                        <label for="complaint_type_0" style="margin: 0px 0px 0px 4px;">臭味</label>
                                    </div>
                                    <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                        <input type="checkbox" class="complaint-check" name="complaint_type" id="complaint_type_1" value="2" checked="checked">
                                    <input type="checkbox" class="complaint-check" name="complaint_type"
                                        id="complaint_type_1" value="2" checked="checked">
                                        <label for="complaint_type_1" style="margin: 0px 0px 0px 4px;">刺激性气味</label>
                                    </div>
                                    <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                        <input type="checkbox" class="complaint-check"  name="complaint_type" id="complaint_type_2" value="3" checked="checked">
                                    <input type="checkbox" class="complaint-check" name="complaint_type"
                                        id="complaint_type_2" value="3" checked="checked">
                                        <label for="complaint_type_2" style="margin: 0px 0px 0px 4px;">粉尘</label>
                                    </div>
                                    <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                        <input type="checkbox" class="complaint-check"  name="complaint_type" id="complaint_type_3" value="4" checked="checked">
                                    <input type="checkbox" class="complaint-check" name="complaint_type"
                                        id="complaint_type_3" value="4" checked="checked">
                                        <label for="complaint_type_3" style="margin: 0px 0px 0px 4px;">塑料味</label>
                                    </div>
                                    <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                        <input type="checkbox" class="complaint-check"  name="complaint_type" id="complaint_type_4" value="5" checked="checked">
                                    <input type="checkbox" class="complaint-check" name="complaint_type"
                                        id="complaint_type_4" value="5" checked="checked">
                                        <label for="complaint_type_4" style="margin: 0px 0px 0px 4px;">油漆味</label>
                                    </div>
                                    <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                        <input type="checkbox" class="complaint-check"  name="complaint_type" id="complaint_type_5" value="6" checked="checked">
                                    <input type="checkbox" class="complaint-check" name="complaint_type"
                                        id="complaint_type_5" value="6" checked="checked">
                                        <label for="complaint_type_5" style="margin: 0px 0px 0px 4px;">其他</label>
                                    </div>
                                </div>
@@ -658,7 +663,8 @@
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content">
                        <div class="factor-title"><img src="./asset/mipmap/data_chart.png" class="ff-img" style="margin-right: 4px;">污染溯源权重分析</div>
                    <div class="factor-title"><img src="./asset/mipmap/data_chart.png" class="ff-img"
                            style="margin-right: 4px;">污染溯源权重分析</div>
                        <div class="flexbox-col">
                            <div class="label-date margin-left-2">
                                <span class="factor-title">设备编号</span>
@@ -679,39 +685,47 @@
                                <div id="epw_factor_2" class=" flexbox margin-left-8">
                                    <div class="flexbox-col">
                                        <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                            <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_0" value="VOC" checked="checked">
                                        <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_0"
                                            value="VOC" checked="checked">
                                            <label for="epw-factor-2_0" style="margin: 0px 0px 0px 4px;">VOC</label>
                                        </div>
                                        <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                            <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_1" value="H2S">
                                        <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_1"
                                            value="H2S">
                                            <label for="epw-factor-2_1" style="margin: 0px 0px 0px 4px;">H2S</label>
                                        </div>
                                        <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                            <input type="radio" class="epw_f_radio_2"  name="epw-factor" id="epw-factor-2_2" value="NO2">
                                        <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_2"
                                            value="NO2">
                                            <label for="epw-factor-2_2" style="margin: 0px 0px 0px 4px;">NO2</label>
                                        </div>
                                    </div>
                                    <div class="flexbox-col">
                                        <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                            <input type="radio" class="epw_f_radio_2"  name="epw-factor" id="epw-factor-2_3" value="CO">
                                        <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_3"
                                            value="CO">
                                            <label for="epw-factor-2_3" style="margin: 0px 0px 0px 4px;">CO</label>
                                        </div>
                                        <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                            <input type="radio" class="epw_f_radio_2"  name="epw-factor" id="epw-factor-2_4" value="SO2">
                                        <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_4"
                                            value="SO2">
                                            <label for="epw-factor-2_4" style="margin: 0px 0px 0px 4px;">SO2</label>
                                        </div>
                                        <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                            <input type="radio" class="epw_f_radio_2"  name="epw-factor" id="epw-factor-2_5" value="O3">
                                        <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_5"
                                            value="O3">
                                            <label for="epw-factor-2_5" style="margin: 0px 0px 0px 4px;">O3</label>
                                        </div>
                                    </div>
                                    <div class="flexbox-col">
                                        <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                            <input type="radio" class="epw_f_radio_2"  name="epw-factor" id="epw-factor-2_6" value="PM25">
                                        <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_6"
                                            value="PM25">
                                            <label for="epw-factor-2_6" style="margin: 0px 0px 0px 4px;">PM2.5</label>
                                        </div>
                                        <div style="padding-right: 0.5rem; display: flex; align-items: center;">
                                            <input type="radio" class="epw_f_radio_2"  name="epw-factor" id="epw-factor-2_7" value="PM10">
                                        <input type="radio" class="epw_f_radio_2" name="epw-factor" id="epw-factor-2_7"
                                            value="PM10">
                                            <label for="epw-factor-2_7" style="margin: 0px 0px 0px 4px;">PM10</label>
                                        </div>
                                    </div>
@@ -765,7 +779,8 @@
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content">
                        <div class="factor-title"><img src="./asset/mipmap/data_chart.png" class="ff-img" style="margin-right: 4px;">用电量日分析</div>
                    <div class="factor-title"><img src="./asset/mipmap/data_chart.png" class="ff-img"
                            style="margin-right: 4px;">用电量日分析</div>
                        <div class="flexbox-col">
                            <div class="label-date margin-left-2">
                                <span class="factor-title">企业</span>
@@ -852,8 +867,9 @@
            </div>
        </div>

        <div id="history_table_box" class="map-history-table" style="display: none;">
            <div class="ff-toggle-btn-left ff-toggle-btn ff-btn-medium" id="btn_history_table">
    <div id="history_table_box" class="map-history-table" style="display: none;pointer-events: none;">
        <div class="flexbox-col flex-space-between align-items-end" style="pointer-events: auto;">
            <div class="ff-toggle-btn-left ff-toggle-btn ff-btn-medium" id="btn_history_table" style="width: fit-content;">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content flexbox-col">
@@ -863,7 +879,30 @@
                </div>
            </div>

            <div class="ff-toggle-block flexbox align-items-end" style="display: none;">
            <!-- <div class="flexbox"> -->
                <!-- <div class="ff-toggle-btn-left ff-toggle-btn ff-btn-medium" id="btn_data_summary" style="width: fit-content;">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content flexbox-col">
                            <img src="./asset/mipmap/shrink_right.png" class="ff-img">
                            <span id="table_title"> 数<br>据<br>统<br>计</span>
                        </div>
                    </div>
                </div -->
                <div id="history_table_summary_wrap" class="ff-content ff-content-top-left ff-content-small-borderless-r" style="display: none;">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            数据统计
                            <div id="history_table_summary"></div>
                        </div>
                    </div>
                </div>
            <!-- </div> -->
        </div>

        <div class="flexbox align-items-end ff-toggle-block" style="display: none;pointer-events: auto;">

                <div class="ff-content ff-content-right ff-content-medium">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
@@ -983,14 +1022,15 @@
                                                <!-- <input type="text" class="rectangle" id="devicetype"> -->
                                                <select class="rectangle" id="devicetype">
                                                    <option value="0a">车载</option>
                                                    <option value="0b">无人机</option>
                                                    <option value="0c">无人船</option>
                                                <!-- <option value="0b">无人机</option>
                                                    <option value="0c">无人船</option> -->
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>设备编号</td>
                                            <td><input type="text" class="rectangle" id="deviceCode" value="0a0000000001"></td>
                                        <td><input type="text" class="rectangle" id="deviceCode" value="0a0000000001">
                                        </td>
                                        </tr>
                                        <tr>
                                            <td>起止时间</td>
@@ -1001,13 +1041,15 @@
                                        <tr>
                                            <td></td>
                                            <td>
                                                <div id="task_endtime_text" class="rectangle margin-top">2018-08-25 00:01:07</div>
                                            <div id="task_endtime_text" class="rectangle margin-top">2018-08-25 00:01:07
                                            </div>
                                            </td>
                                        </tr>
                                    </table>
                                    <div class="flexbox align-items map-btn-group margin-top">
                                        <input type="button" value="确认" id="btn_task_create" class="btn-search">
                                        <input type="reset" value="取消" id="btn_task_create_close" class="btn-search margin-left-8">
                                    <input type="reset" value="取消" id="btn_task_create_close"
                                        class="btn-search margin-left-8">
                                    </div>
                                </form>
                            </div>
@@ -1058,7 +1100,8 @@
                                    </div>
                                    <div class="flexbox align-items map-btn-group margin-top">
                                        <input type="button" value="导入" id="btn_task_import" class="btn-search">
                                        <input type="reset" value="取消" id="btn_task_import_close" class="btn-search margin-left-8">
                                    <input type="reset" value="取消" id="btn_task_import_close"
                                        class="btn-search margin-left-8">
                                    </div>
                                </form>
                            </div>
@@ -1098,7 +1141,8 @@
                                    </div>
                                    <div class="flexbox align-items map-btn-group margin-top">
                                        <input type="button" value="确认" id="btn_task_delete" class="btn-search">
                                        <input type="reset" value="取消" id="btn_task_delete_close" class="btn-search margin-left-8">
                                    <input type="reset" value="取消" id="btn_task_delete_close"
                                        class="btn-search margin-left-8">
                                    </div>
                                </form>
                            </div>
@@ -1157,7 +1201,8 @@
        </div>
    </div>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.5&key=c55f27799afbfa69dc5a3fad90cafe51&plugin=Map3D,ElasticMarker,AMap.ControlBar"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.5&key=c55f27799afbfa69dc5a3fad90cafe51&plugin=Map3D,ElasticMarker,AMap.ControlBar"></script>
    <script src="./lib/jquery-3.5.1.min.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script> -->
    <script src="./lib/plugin/bootstrap/js/popper.min.js"></script>
@@ -1198,6 +1243,7 @@
    <script src="./entity/Factor.js?v=9"></script>
    <script src="./entity/FactorDatas.js?v=7"></script>
    <script src="./util/grid.analysis.js?v=1"></script>
    <script src="./util/data.summary.js"></script>
    <script src="./grid.monitor.js?v=14"></script>
    <script src="./realtime.mode.js?v=34"></script>
    <script src="./history.mode.js?v=19"></script>