riku
2024-04-26 5efebb555efd984f3dd35de83e465cd53aaf8175
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,13 +26,16 @@
            display: none;
            opacity: 0 !important;
        }
        .amap-copyright {
            opacity: 0;
        }
        .amap-overlays {
            z-index: 0;
        }
        .amap-marker-label{
        .amap-marker-label {
            /* width: 100px;
            max-width: 200px; */
            font-size: 13px;
@@ -39,7 +44,7 @@
            background-color: transparent;
            text-shadow: black 2px 2px 2px;
            border-radius: 2px;
            border:  0px;
            border: 0px;
            padding: 4px;
            /* white-space: pre-wrap; */
        }
@@ -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,378 +167,386 @@
                        <div class="form-group" id="electricity_sites">
                        </div>
                    </form>
                    <!-- <a class="dropdown-item" href="#">Action</a> -->
                </div>
            </div> -->
                    <a class="dropdown-item" href="#">Action</a>
                </div> -->
        </div>
    </div>
        <div id="rangeset" class="map-range-set flexbox">
            <div class="ff-content-left ff-content ff-content-small">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top flexbox-col">
                    <div class="ff-border-content">
                        <div class="flexbox flex-space-between">
                            <div>绘图范围</div>
                            <div class="map-btn-group">
                                <button class="btn-search-s margin-left-2" id="btn_set_range">确定</button>
                                <!-- <button class="btn-search-s margin-left-2" id="btn_reset_range">清空</button> -->
                            </div>
    <div id="rangeset" class="map-range-set flexbox">
        <div class="ff-content-left ff-content ff-content-small">
            <div class="ff-border-bottom"></div>
            <div class="ff-border-top flexbox-col">
                <div class="ff-border-content">
                    <div class="flexbox flex-space-between">
                        <div>绘图范围</div>
                        <div class="map-btn-group">
                            <button class="btn-search-s margin-left-2" id="btn_set_range">确定</button>
                            <!-- <button class="btn-search-s margin-left-2" id="btn_reset_range">清空</button> -->
                        </div>
                        <div class="flexbox align-items">
                            <span class="time">Min&nbsp;</span>
                            <input id="in_min" type="text" class="ff-input-range margin-left-2">
                            <span class="time">&nbsp;Max&nbsp;</span>
                            <input id="in_max" type="text" class="ff-input-range margin-left-2">
                    </div>
                    <div class="flexbox align-items">
                        <span class="time">Min&nbsp;</span>
                        <input id="in_min" type="text" class="ff-input-range margin-left-2">
                        <span class="time">&nbsp;Max&nbsp;</span>
                        <input id="in_max" type="text" class="ff-input-range margin-left-2">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div id='searchbox' class="map-date-selector flexbox-col align-items" style="visibility: visible; ">
            <div class="flexbox-col align-items-end">
                <div class="ff-content-middle-s ff-content ff-content-down">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content flexbox-wrap align-items  padding-h">
                            <!-- 任务-->
                            <div class="label-date hMode">
                                <span class="label-date-title">任务</span>
                                <select class="input-date margin-left-2" id="select_task">
                                    <!-- <option value="SH-JS-20210102">SH-JS-20210102</option>
    <div id='searchbox' class="map-date-selector flexbox-col align-items" style="visibility: visible; ">
        <div class="flexbox-col align-items-end">
            <div class="ff-content-middle-s ff-content ff-content-down">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content flexbox-wrap align-items  padding-h">
                        <!-- 任务-->
                        <div class="label-date hMode">
                            <span class="label-date-title">任务</span>
                            <select class="input-date margin-left-2" id="select_task">
                                <!-- <option value="SH-JS-20210102">SH-JS-20210102</option>
                                    <option value="SH-JS-20210313">SH-JS-20210313</option>
                                    <option value="SH-JS-20210313">SH-JS-20210326</option>
                                    <option value="SH-JS-20210409">SH-JS-20210409</option>
                                    <option value="SH-JS-20210421">SH-JS-20210421</option> -->
                                </select>
                            </div>
                            <!-- 编号-->
                            <div class="label-date margin-left-2 hMode">
                                <span class="label-date-title">类型</span>
                                <select class="input-date margin-left-8" id="select_device_type">
                                    <option value="0a">车载</option>
                                    <!-- <option value="0b">无人机</option>
                            </select>
                        </div>
                        <!-- 编号-->
                        <div class="label-date margin-left-2 hMode">
                            <span class="label-date-title">类型</span>
                            <select class="input-date margin-left-8" id="select_device_type">
                                <option value="0a">车载</option>
                                <!-- <option value="0b">无人机</option>
                                    <option value="0c">无人船</option> -->
                                </select>
                            </div>
                            <!--  -->
                            <div class="label-date margin-left-2">
                                <span class="label-date-title">设备号</span>
                                <select class="input-date margin-left-8" id="select_device_code">
                                    <option value="0a0000000001">0a0000000001</option>
                                    <option value="0a0000000002">0a0000000002</option>
                                    <option value="0a0000000003">0a0000000003</option>
                                </select>
                            </div>
                            <!-- 开始时间-->
                            <div class="label-date margin-left-2">
                                <span class="label-date-title">起止时间</span>
                                <a id="datetime" class="nav-link">
                                    <span id="starttime_text" class="rectangle">2018-08-24 00:01:07</span>
                                    <span>~</span>
                                    <span id="endtime_text" class="rectangle">2018-08-25 00:01:07</span>
                                    <span class="float-right"><i class="right fa fa-angle-down"></i></span>
                                </a>
                            </div>
                            <div class="map-btn-group">
                                <div class="btn-search" id="btn_search">查询</div>
                            </div>
                            </select>
                        </div>
                    </div>
                </div>
                <!-- <div class="ff-toggle-btn-down ff-toggle-btn ff-btn-medium"> -->
                <div class="ff-content-left ff-content ff-content-small-borderless-t">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content flexbox align-items">
                            <div class="gMode margin-right-8" style="display:none">
                                <span class="label-date-title">数据精度</span>
                                <select class="input-date margin-left-8" id="select_data_type">
                                    <option value="1">分钟级</option>
                                    <option value="0">秒级</option>
                                </select>
                            </div>
                            <div class="flexbox">
                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                <div id="btn_task_manage" class="btn-search margin-left-2">任务管理</div>
                            </div>
                        <!--  -->
                        <div class="label-date margin-left-2">
                            <span class="label-date-title">设备号</span>
                            <select class="input-date margin-left-8" id="select_device_code">
                                <option value="0a0000000001">0a0000000001</option>
                                <option value="0a0000000002">0a0000000002</option>
                                <option value="0a0000000003">0a0000000003</option>
                            </select>
                        </div>
                        <!-- 开始时间-->
                        <div class="label-date margin-left-2">
                            <span class="label-date-title">起止时间</span>
                            <a id="datetime" class="nav-link">
                                <span id="starttime_text" class="rectangle">2018-08-24 00:01:07</span>
                                <span>~</span>
                                <span id="endtime_text" class="rectangle">2018-08-25 00:01:07</span>
                                <span class="float-right"><i class="right fa fa-angle-down"></i></span>
                            </a>
                        </div>
                        <div class="map-btn-group">
                            <div class="btn-search" id="btn_search">分析</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="map-factor-selector" style="visibility: visible;">
            <div class="ff-content-left ff-content ff-content-small">
            <!-- <div class="ff-toggle-btn-down ff-toggle-btn ff-btn-medium"> -->
            <div class="ff-content-left ff-content ff-content-small-borderless-t">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top flexbox-col">
                    <div class="ff-border-content">
                        <div id='factorbox' class="factorbox"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content flexbox align-items">
                        <div class="gMode margin-right-8" style="display:none">
                            <span class="label-date-title">数据精度</span>
                            <select class="input-date margin-left-8" id="select_data_type">
                                <option value="1">分钟级</option>
                                <option value="0">秒级</option>
                            </select>
                        </div>
                        <div class="flexbox">
                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                            <div id="btn_task_manage" class="btn-search margin-left-2">任务管理</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="map-factor-selector" style="visibility: visible;">
        <div class="ff-content-left ff-content ff-content-small">
            <div class="ff-border-bottom"></div>
            <div class="ff-border-top flexbox-col">
                <div class="ff-border-content">
                    <div id='factorbox' class="factorbox"></div>
                </div>
            </div>
        </div>
        <div id='animation_status' class="map-animation-status flexbox-col align-items" style="display: none">
            <div class="flexbox-col align-items-start">
                <div class="ff-content-middle-s ff-content ff-content-down">
    </div>
    <div id='animation_status' class="map-animation-status flexbox-col align-items" style="display: none">
        <div class="flexbox-col align-items-start">
            <div class="ff-content-middle-s ff-content ff-content-down">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content">
                        <span style="margin: 36px;font-size: large;">历史轨迹播放中...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="history_animation" class="map-history-animation flexbox-col align-items">
        <div class="ff-content-middle-s ff-content">
            <div class="ff-border-bottom"></div>
            <div class="ff-border-top">
                <div class="ff-border-content flexbox-wrap align-items padding-6">
                    <div>历史轨迹</div>
                    <div class="map-btn-group margin-left-8">
                        <i id="btn_stop" class="fa fa-stop btn-search" aria-hidden="true" style="color: red;"></i>
                        <i id="btn_play" class="fa fa-play btn-search margin-left-2" aria-hidden="true"></i>
                    </div>
                    <div class="label-date margin-left-2">
                        <span class="label-date-title">倍速</span>
                        <select class="input-date margin-left-8" id="select_speed">
                            <option value="1">1.0X</option>
                            <option value="4">4.0X</option>
                            <option value="8">8.0X</option>
                            <option value="16">16X</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id='rmode_type' class="map-date-selector flexbox-col align-items" style="display: none;">
        <div class="ff-content-middle-s ff-content">
            <div class="ff-border-bottom"></div>
            <div class="ff-border-top flexbox-wrap align-items map-float-panel padding-h">
                <!-- <div class="label-date margin-left-2"> -->
                <div id='rmode_type_box' class="factorbox ff-border-content"></div>
                <div class="label-date margin-left-2">
                    <span class="label-date-title">设备号</span>
                    <select class="input-date margin-left-8" id="realtime_device_code">
                        <option value="0a0000000001">0a0000000001</option>
                        <option value="0a0000000002">0a0000000002</option>
                        <option value="0a0000000003">0a0000000003</option>
                    </select>
                </div>
                <div class="map-btn-group">
                    <div class="btn-search" id="btn_r_search">切换</div>
                </div>
                <!-- </div> -->
            </div>
        </div>
    </div>
    <!-- 仪表盘 -->
    <div id='realtimebox' class="map-realtime-data" style="display: none;">
        <div class="flexbox align-items-start">
            <div class="flexbox-col ff-toggle-block">
                <!-- 监测因子复选框 -->
                <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <span style="margin: 36px;font-size: large;">历史轨迹播放中...</span>
                            <div id='realtime_chart_factorbox' class="factorbox"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="history_animation" class="map-history-animation flexbox-col align-items">
            <div class="ff-content-middle-s ff-content">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content flexbox-wrap align-items padding-6">
                        <div>历史轨迹</div>
                        <div class="map-btn-group margin-left-8">
                            <i id="btn_stop" class="fa fa-stop btn-search" aria-hidden="true" style="color: red;"></i>
                            <i id="btn_play" class="fa fa-play btn-search margin-left-2" aria-hidden="true"></i>
                        </div>
                        <div class="label-date margin-left-2">
                            <span class="label-date-title">倍速</span>
                            <select class="input-date margin-left-8" id="select_speed">
                                <option value="1">1.0X</option>
                                <option value="4">4.0X</option>
                                <option value="8">8.0X</option>
                                <option value="16">16X</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id='rmode_type' class="map-date-selector flexbox-col align-items" style="display: none;">
            <div class="ff-content-middle-s ff-content">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top flexbox-wrap align-items map-float-panel padding-h">
                    <!-- <div class="label-date margin-left-2"> -->
                        <div id='rmode_type_box' class="factorbox ff-border-content"></div>
                  <div class="label-date margin-left-2">
                     <span class="label-date-title">设备号</span>
                     <select class="input-date margin-left-8" id="realtime_device_code">
                        <option value="0a0000000001">0a0000000001</option>
                        <option value="0a0000000002">0a0000000002</option>
                                <option value="0a0000000003">0a0000000003</option>
                     </select>
                  </div>
                  <div class="map-btn-group">
                            <div class="btn-search" id="btn_r_search">切换</div>
                        </div>
                    <!-- </div> -->
                </div>
            </div>
        </div>
        <!-- 仪表盘 -->
        <div id='realtimebox' class="map-realtime-data" style="display: none;">
            <div class="flexbox align-items-start">
                <div class="flexbox-col ff-toggle-block">
                    <!-- 监测因子复选框 -->
                    <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <div id='realtime_chart_factorbox' class="factorbox"></div>
                <div class="ff-content ff-content-left ff-content-medium">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <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>
                            <div class="flexbox margin-top match-width">
                                <div id="realtime_temp" class="tag-2">温度:--℃</div>
                                <div id="realtime_hum" class="margin-left tag-2">湿度:--%</div>
                                <div id="realtime_wind_direction" class="margin-left tag-2">风向:--</div>
                                <div id="realtime_wind_speed" class="margin-left tag-2">风速:--m/s</div>
                                <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 id="realtime_time" class="tag-2">采样时间:---------- --:--:--</div>
                            </div>
                        </div>
                    </div>
                    <div class="ff-content ff-content-left ff-content-medium">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <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>
                                <div class="flexbox margin-top match-width">
                                    <div id="realtime_temp" class="tag-2">温度:--℃</div>
                                    <div id="realtime_hum" class="margin-left tag-2">湿度:--%</div>
                                    <div id="realtime_wind_direction" class="margin-left tag-2">风向:--</div>
                                    <div id="realtime_wind_speed" class="margin-left tag-2">风速:--m/s</div>
                                    <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 id="realtime_time" class="tag-2">采样时间:---------- --:--:--</div>
                                </div>
                            </div>
                        </div>
                        <div class="ff-footer flexbox flex-center">
                        </div>
                        <div class="ff-triangle">
                            <div class="ff-triangle-border"></div>
                        </div>
                    </div>
                </div>
                <div class="ff-toggle-btn-right ff-toggle-btn ff-btn-medium">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content flexbox-col">
                            <img src="./asset/mipmap/shrink_left.png" class="ff-img">
                            实<br>时<br>监<br>测
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 实时浓度变化 -->
        <div id="realtimebox2" class="map-realtime-data-2" style="display: none;">
            <div class="ff-toggle-btn-left ff-toggle-btn ff-btn-medium">
                <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">
                        实<br />时<br />趋<br />势
                    </div>
                </div>
            </div>
            <div class="ff-toggle-block flexbox-col">
                <div class="ff-content ff-content-top-right ff-content-small-borderless-t">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div id="realtime_chart_2_factorbox" class="factorbox ff-border-content"></div>
                    </div>
                </div>
                <div class="ff-content ff-content-right ff-content-medium">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div id="chart_2"></div>
                    </div>
                    <div class="ff-footer flexbox flex-end align-items">
                    <div class="ff-footer flexbox flex-center">
                    </div>
                    <div class="ff-triangle">
                        <div class="ff-triangle-border"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id='backgroundbox' class=" map-backgroud-data map-float-panel" style="display: none;">
            <div class="flexbox flex-space-between">
                <div id="bg_time" class="time"></div>
                <div class="factor-title margin-left" style="color: white;">空气质量背景</div>
                <div class="location margin-left"><i class="fa fa-map-marker"></i> 浦东新区</div>
            </div>
            <div class="flexbox align-items">
                <div class="flexbox-col">
                    <div id="bg_temp" class="big-number">16℃</div>
                    <div id="bg_temp_range">4℃-16℃</div>
                </div>
                <div id="bg_aqi" class="tag">
                    69良
                </div>
            </div>
        </div>
        <div id="legend" class="map-legend" style="visibility: visible;">
            <div class="ff-content ff-content-left ff-content-medium">
            <div class="ff-toggle-btn-right ff-toggle-btn ff-btn-medium">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content">
                        <div><img src="./asset/mipmap/data_chart.png" class="ff-img" style="margin-right: 4px;">图例</div>
                        <div id="legend_content">
                            <div class="flexbox align-items margin-top">
                                <div class="rectangle" style="background-color: #0DE707;"></div>
                                <div>0~200 μg/m³</div>
                            </div>
                            <div class="flexbox align-items margin-top">
                                <div class="rectangle" style="background-color: #97BB06;"></div>
                                <div>200~400 μg/m³</div>
                            </div>
                            <div class="flexbox align-items margin-top">
                                <div class="rectangle" style="background-color: #DBB70D;"></div>
                                <div>400~600 μg/m³</div>
                            </div>
                            <div class="flexbox align-items margin-top">
                                <div class="rectangle" style="background-color: #D84210;"></div>
                                <div>600~800 μg/m³</div>
                            </div>
                            <div class="flexbox align-items margin-top">
                                <div class="rectangle" style="background-color: #990D0D;"></div>
                                <div>800~1000 μg/m³</div>
                            </div>
                            <div class="flexbox align-items margin-top">
                                <div class="rectangle" style="background-color: #6B0707;"></div>
                                <div>>=1000 μg/m³</div>
                            </div>
                        </div>
                    <div class="ff-border-content flexbox-col">
                        <img src="./asset/mipmap/shrink_left.png" class="ff-img">
                        实<br>时<br>监<br>测
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 实时浓度变化 -->
    <div id="realtimebox2" class="map-realtime-data-2" style="display: none;">
        <div class="ff-toggle-btn-left ff-toggle-btn ff-btn-medium">
            <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">
                    实<br />时<br />趋<br />势
                </div>
            </div>
        </div>
        <div class="ff-toggle-block flexbox-col">
            <div class="ff-content ff-content-top-right ff-content-small-borderless-t">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div id="realtime_chart_2_factorbox" class="factorbox ff-border-content"></div>
                </div>
            </div>
            <div class="ff-content ff-content-right ff-content-medium">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div id="chart_2"></div>
                </div>
                <div class="ff-footer flexbox flex-end align-items">
                </div>
                <div class="ff-triangle">
                    <div class="ff-triangle-border"></div>
                </div>
            </div>
        </div>
    </div>
    <div id='backgroundbox' class=" map-backgroud-data map-float-panel" style="display: none;">
        <div class="flexbox flex-space-between">
            <div id="bg_time" class="time"></div>
            <div class="factor-title margin-left" style="color: white;">空气质量背景</div>
            <div class="location margin-left"><i class="fa fa-map-marker"></i> 浦东新区</div>
        </div>
        <div class="flexbox align-items">
            <div class="flexbox-col">
                <div id="bg_temp" class="big-number">16℃</div>
                <div id="bg_temp_range">4℃-16℃</div>
            </div>
            <div id="bg_aqi" class="tag">
                69良
            </div>
        </div>
    </div>
    <div id="legend" class="map-legend" style="visibility: visible;">
        <div class="ff-content ff-content-left ff-content-medium">
            <div class="ff-border-bottom"></div>
            <div class="ff-border-top">
                <div class="ff-border-content">
                    <div><img src="./asset/mipmap/data_chart.png" class="ff-img" style="margin-right: 4px;">图例</div>
                    <div id="legend_content">
                        <div class="flexbox align-items margin-top">
                            <div class="rectangle" style="background-color: #0DE707;"></div>
                            <div>0~200 μg/m³</div>
                        </div>
                        <div class="flexbox align-items margin-top">
                            <div class="rectangle" style="background-color: #97BB06;"></div>
                            <div>200~400 μg/m³</div>
                        </div>
                        <div class="flexbox align-items margin-top">
                            <div class="rectangle" style="background-color: #DBB70D;"></div>
                            <div>400~600 μg/m³</div>
                        </div>
                        <div class="flexbox align-items margin-top">
                            <div class="rectangle" style="background-color: #D84210;"></div>
                            <div>600~800 μg/m³</div>
                        </div>
                        <div class="flexbox align-items margin-top">
                            <div class="rectangle" style="background-color: #990D0D;"></div>
                            <div>800~1000 μg/m³</div>
                        </div>
                        <div class="flexbox align-items margin-top">
                            <div class="rectangle" style="background-color: #6B0707;"></div>
                            <div>>=1000 μg/m³</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ff-triangle">
                <div class="ff-triangle-border"></div>
            </div>
        </div>
        <div id="complaint_type" class="map-complaint-type" style="display: none;">
            <div class="ff-content ff-content-left ff-content-medium">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content">
                        <div><img src="./asset/mipmap/data_chart.png" class="ff-img" style="margin-right: 4px;">信访投诉类型</div>
                        <div class="flexbox-col">
                            <div class="flexbox label-date margin-left-2">
                                <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">
                                        <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">
                                        <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">
                                        <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">
                                        <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">
                                        <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">
                                        <label for="complaint_type_5" style="margin: 0px 0px 0px 4px;">其他</label>
                                    </div>
    </div>
    <div id="complaint_type" class="map-complaint-type" style="display: none;">
        <div class="ff-content ff-content-left ff-content-medium">
            <div class="ff-border-bottom"></div>
            <div class="ff-border-top">
                <div class="ff-border-content">
                    <div><img src="./asset/mipmap/data_chart.png" class="ff-img" style="margin-right: 4px;">信访投诉类型</div>
                    <div class="flexbox-col">
                        <div class="flexbox label-date margin-left-2">
                            <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">
                                    <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">
                                    <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">
                                    <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">
                                    <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">
                                    <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">
                                    <label for="complaint_type_5" style="margin: 0px 0px 0px 4px;">其他</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ff-triangle">
                    <div class="ff-triangle-border"></div>
                </div>
            </div>
            <div class="ff-triangle">
                <div class="ff-triangle-border"></div>
            </div>
        </div>
        <div id="epw_model" class="map-legend" style="display: none;">
            <!-- <div class="ff-content ff-content-left ff-content-medium">
    </div>
    <div id="epw_model" class="map-legend" style="display: none;">
        <!-- <div class="ff-content ff-content-left ff-content-medium">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content">
@@ -653,207 +658,218 @@
                </div>
            </div> -->
            <!-- 网格风险权重分析 -->
            <div class="ff-content ff-content-left ff-content-medium">
                <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="flexbox-col">
                            <div class="label-date margin-left-2">
                                <span class="factor-title">设备编号</span>
                                <select class="input-date margin-left-8" id="epw_device_code">
                                </select>
                            </div>
                            <div class="label-date margin-left-2">
                                <span class="factor-title">起止时间</span>
                                <a id="epw_date_2" class="nav-link">
                                    <span id="epw_starttime_text" class="rectangle">2018-08-24 00:01:07</span>
                                    <span>~</span>
                                    <span id="epw_endtime_text" class="rectangle">2018-08-25 00:01:07</span>
                                    <span class="float-right"><i class="right fa fa-angle-down"></i></span>
                                </a>
                            </div>
                            <div class="flexbox label-date margin-left-2">
                                <span class="factor-title">要素</span>
                                <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">
                                            <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">
                                            <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">
                                            <label for="epw-factor-2_2" style="margin: 0px 0px 0px 4px;">NO2</label>
                                        </div>
        <!-- 网格风险权重分析 -->
        <div class="ff-content ff-content-left ff-content-medium">
            <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="flexbox-col">
                        <div class="label-date margin-left-2">
                            <span class="factor-title">设备编号</span>
                            <select class="input-date margin-left-8" id="epw_device_code">
                            </select>
                        </div>
                        <div class="label-date margin-left-2">
                            <span class="factor-title">起止时间</span>
                            <a id="epw_date_2" class="nav-link">
                                <span id="epw_starttime_text" class="rectangle">2018-08-24 00:01:07</span>
                                <span>~</span>
                                <span id="epw_endtime_text" class="rectangle">2018-08-25 00:01:07</span>
                                <span class="float-right"><i class="right fa fa-angle-down"></i></span>
                            </a>
                        </div>
                        <div class="flexbox label-date margin-left-2">
                            <span class="factor-title">要素</span>
                            <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">
                                        <label for="epw-factor-2_0" style="margin: 0px 0px 0px 4px;">VOC</label>
                                    </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">
                                            <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">
                                            <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">
                                            <label for="epw-factor-2_5" style="margin: 0px 0px 0px 4px;">O3</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">
                                        <label for="epw-factor-2_1" style="margin: 0px 0px 0px 4px;">H2S</label>
                                    </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">
                                            <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">
                                            <label for="epw-factor-2_7" style="margin: 0px 0px 0px 4px;">PM10</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">
                                        <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">
                                        <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">
                                        <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">
                                        <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">
                                        <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">
                                        <label for="epw-factor-2_7" style="margin: 0px 0px 0px 4px;">PM10</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="factor-title">图例</div>
                            <div class="flexbox margin-right-8">
                                <div class="flexbox align-items">
                                    <div class="rectangle" style="background-color: #0DE707;"></div>
                                    <span>低风险</span>
                                </div>
                                <div class="flexbox align-items margin-left-8">
                                    <div class="rectangle" style="background-color: #DBB70D;"></div>
                                    <span>中风险</span>
                                </div>
                                <div class="flexbox align-items margin-left-8">
                                    <div class="rectangle" style="background-color: #990D0D;"></div>
                                    <span>高风险</span>
                                </div>
                            </div>
                        </div>
                        <div class="flexbox flex-space-between">
                            <div class="map-btn-group">
                                <div class="btn-search" id="btn_search_epw_2">分析</div>
                                <div class="btn-search margin-left-8" id="btn_clear_epw_2">清空</div>
                            </div>
                            <div>
                                <div class="factor-title">图例</div>
                                <div class="flexbox margin-right-8">
                                    <div class="flexbox align-items">
                                        <div class="rectangle" style="background-color: #0DE707;"></div>
                                        <span>低风险</span>
                                    </div>
                                    <div class="flexbox align-items margin-left-8">
                                        <div class="rectangle" style="background-color: #DBB70D;"></div>
                                        <span>中风险</span>
                                    </div>
                                    <div class="flexbox align-items margin-left-8">
                                        <div class="rectangle" style="background-color: #990D0D;"></div>
                                        <span>高风险</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flexbox flex-space-between">
                                <div class="map-btn-group">
                                    <div class="btn-search" id="btn_search_epw_2">分析</div>
                                    <div class="btn-search margin-left-8" id="btn_clear_epw_2">清空</div>
                                <div>
                                    <input type="checkbox" id="epw_transparent_grid">
                                    <label for="epw_transparent_grid">透明网格</label>
                                </div>
                                <div>
                                    <div>
                                        <input type="checkbox" id="epw_transparent_grid" >
                                        <label for="epw_transparent_grid">透明网格</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="epw_text" >
                                        <label for="epw_text">数据显示</label>
                                    </div>
                                    <input type="checkbox" id="epw_text">
                                    <label for="epw_text">数据显示</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ff-triangle">
                    <div class="ff-triangle-border"></div>
                </div>
            </div>
            <div class="ff-triangle">
                <div class="ff-triangle-border"></div>
            </div>
        </div>
    </div>
        <!-- 用电量日分析 -->
        <div id="elec_model" class="map-legend" style="display: none;">
            <div class="ff-content ff-content-left ff-content-medium">
                <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="flexbox-col">
                            <div class="label-date margin-left-2">
                                <span class="factor-title">企业</span>
                                <select class="input-date margin-left-8" id="elec_company">
                                </select>
                            </div>
                            <div class="label-date margin-left-2 flexbox">
                                <span class="factor-title">起止时间</span>
                                <a id="elec_date" class="nav-link">
                                    <span id="elec_starttime_text" class="rectangle">2018-08-24 00:01:07</span>
                                    <span>~</span>
                                    <span id="elec_endtime_text" class="rectangle">2018-08-25 00:01:07</span>
                                    <span class="float-right"><i class="right fa fa-angle-down"></i></span>
                                </a>
                            </div>
                            <div class="map-btn-group">
                                <div class="btn-search" id="btn_search_elec">分析</div>
                            </div>
                            <div id="analysis_result"></div>
    <!-- 用电量日分析 -->
    <div id="elec_model" class="map-legend" style="display: none;">
        <div class="ff-content ff-content-left ff-content-medium">
            <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="flexbox-col">
                        <div class="label-date margin-left-2">
                            <span class="factor-title">企业</span>
                            <select class="input-date margin-left-8" id="elec_company">
                            </select>
                        </div>
                        <div class="label-date margin-left-2 flexbox">
                            <span class="factor-title">起止时间</span>
                            <a id="elec_date" class="nav-link">
                                <span id="elec_starttime_text" class="rectangle">2018-08-24 00:01:07</span>
                                <span>~</span>
                                <span id="elec_endtime_text" class="rectangle">2018-08-25 00:01:07</span>
                                <span class="float-right"><i class="right fa fa-angle-down"></i></span>
                            </a>
                        </div>
                        <div class="map-btn-group">
                            <div class="btn-search" id="btn_search_elec">分析</div>
                        </div>
                        <div id="analysis_result"></div>
                    </div>
                </div>
                <div class="ff-triangle">
                    <div class="ff-triangle-border"></div>
                </div>
            </div>
            <div class="ff-triangle">
                <div class="ff-triangle-border"></div>
            </div>
        </div>
    </div>
        <div id="historybox" class="map-history">
            <div class="flexbox align-items-start">
                <div class="flexbox-col ff-toggle-block" style="display: none;">
                    <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <div id='history_chart_factorbox' class="factorbox"></div>
                            </div>
                        </div>
                    </div>
                    <div class="ff-content ff-content-left ff-content-medium">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <div class="flexbox">
                                    <!-- <button style="background-color: transparent;"><img src="./asset/mipmap/shrink_left.png" class="ff-img"></button> -->
                                    <div id="chart"></div>
                                    <!-- <button style="background-color: transparent;"><img src="./asset/mipmap/shrink_right.png" class="ff-img"></button> -->
                                    <div id="electrcity_status_box" style='display: none;'>
                                        <input type="checkbox" id="electrcity_status" >
                                        <label for="electrcity_status">状态切换</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ff-footer flexbox flex-center ">
                            <!-- 单页数据量-->
                            <div class="label-date">
                                <span class="label-date-title time">数据量</span>
                                <select id="select_page_size" class="input-date margin-left-2">
                                    <!-- <option value="50">50</option>
                  <option value="100">100</option> -->
                                    <option value="200">200</option>
                                    <option value="500">500</option>
                                </select>
                            </div>
                            <div id="sliderParent" class="margin-left"></div>
                        </div>
                        <div class="ff-triangle">
                            <div class="ff-triangle-border"></div>
                        </div>
                    </div>
                </div>
                <div class="ff-toggle-btn-right ff-toggle-btn ff-btn-medium">
    <div id="historybox" class="map-history">
        <div class="flexbox align-items-start">
            <div class="flexbox-col ff-toggle-block" style="display: none;">
                <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content flexbox-col">
                            <img src="./asset/mipmap/shrink_left.png" class="ff-img">
                            监<br>测<br>要<br>素<br>趋<br>势<br>分<br>析
                        <div class="ff-border-content">
                            <div id='history_chart_factorbox' class="factorbox"></div>
                        </div>
                    </div>
                </div>
                <div class="ff-content ff-content-left ff-content-medium">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <div class="flexbox">
                                <!-- <button style="background-color: transparent;"><img src="./asset/mipmap/shrink_left.png" class="ff-img"></button> -->
                                <div id="chart"></div>
                                <!-- <button style="background-color: transparent;"><img src="./asset/mipmap/shrink_right.png" class="ff-img"></button> -->
                                <div id="electrcity_status_box" style='display: none;'>
                                    <input type="checkbox" id="electrcity_status">
                                    <label for="electrcity_status">状态切换</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ff-footer flexbox flex-center ">
                        <!-- 单页数据量-->
                        <div class="label-date">
                            <span class="label-date-title time">数据量</span>
                            <select id="select_page_size" class="input-date margin-left-2">
                                <!-- <option value="50">50</option>
                  <option value="100">100</option> -->
                                <option value="200">200</option>
                                <option value="500">500</option>
                            </select>
                        </div>
                        <div id="sliderParent" class="margin-left"></div>
                    </div>
                    <div class="ff-triangle">
                        <div class="ff-triangle-border"></div>
                    </div>
                </div>
            </div>
            <div class="ff-toggle-btn-right ff-toggle-btn ff-btn-medium">
                <div class="ff-border-bottom"></div>
                <div class="ff-border-top">
                    <div class="ff-border-content flexbox-col">
                        <img src="./asset/mipmap/shrink_left.png" class="ff-img">
                        监<br>测<br>要<br>素<br>趋<br>势<br>分<br>析
                    </div>
                </div>
            </div>
        </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,29 +879,52 @@
                </div>
            </div>
            <div class="ff-toggle-block flexbox align-items-end" style="display: none;">
                <div class="ff-content ff-content-right ff-content-medium">
            <!-- <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>历史浓度数据</div> -->
                        <div class="ff-border-content">
                            <table id="history_table" class="border-table scrollbar"></table>
                            <div class="my-page"></div>
                        <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 class="ff-footer flexbox flex-end align-items">
                        <!-- 总数据量-->
                        <div id="table_data_count" class="text-nowrap">数据量</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="ff-triangle">
                        <div class="ff-triangle-border"></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">
                    <!-- <div>历史浓度数据</div> -->
                    <div class="ff-border-content">
                        <table id="history_table" class="border-table scrollbar"></table>
                        <div class="my-page"></div>
                    </div>
                </div>
                <div class="flexbox-col flex-space-between">
                    <!-- <div class="ff-content ff-content-top-right ff-content-small-borderless-r">
                <div class="ff-footer flexbox flex-end align-items">
                    <!-- 总数据量-->
                    <div id="table_data_count" class="text-nowrap">数据量</div>
                </div>
                <div class="ff-triangle">
                    <div class="ff-triangle-border"></div>
                </div>
            </div>
            <div class="flexbox-col flex-space-between">
                <!-- <div class="ff-content ff-content-top-right ff-content-small-borderless-r">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
@@ -893,235 +932,243 @@
                            </div>
                        </div>
                    </div> -->
                    <div class="ff-content ff-content-left ff-content-small-borderless-r">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div></div>
                            <div id="history_table_factorbox" class="flexbox-col ff-border-content"></div>
                        </div>
                <div class="ff-content ff-content-left ff-content-small-borderless-r">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div></div>
                        <div id="history_table_factorbox" class="flexbox-col ff-border-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- 任务管理 -->
        <div id="task_manage" class="map-task" style="display: none;">
            <div class="flexbox align-items-start" style="margin: auto;">
                <div class="flexbox-col">
    <!-- 任务管理 -->
    <div id="task_manage" class="map-task" style="display: none;">
        <div class="flexbox align-items-start" style="margin: auto;">
            <div class="flexbox-col">
                    <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <i class="fa fa-list" aria-hidden="true"></i>
                                走航任务管理
                            </div>
                <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <i class="fa fa-list" aria-hidden="true"></i>
                            走航任务管理
                        </div>
                    </div>
                </div>
                    <div class="ff-content ff-content-left ff-content-medium">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <div class="flexbox align-items-start">
                                    <table id="task_table" class="easy-table scrollbar" style="max-height: 60vh;"></table>
                                    <div class="map-btn-group flexbox-col margin-left-8">
                                        <input type="button" value="新建任务" id="btn_new_task" class="btn-search">
                                        <input type="button" value="数据导入" id="btn_import" class="btn-search margin-top">
                                        <input type="button" value="下载模板" id="btn_download" class="btn-search margin-top">
                                    </div>
                <div class="ff-content ff-content-left ff-content-medium">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <div class="flexbox align-items-start">
                                <table id="task_table" class="easy-table scrollbar" style="max-height: 60vh;"></table>
                                <div class="map-btn-group flexbox-col margin-left-8">
                                    <input type="button" value="新建任务" id="btn_new_task" class="btn-search">
                                    <input type="button" value="数据导入" id="btn_import" class="btn-search margin-top">
                                    <input type="button" value="下载模板" id="btn_download" class="btn-search margin-top">
                                </div>
                            </div>
                        </div>
                        <div class="ff-footer flexbox flex-center ">
                    </div>
                    <div class="ff-footer flexbox flex-center ">
                        </div>
                        <div class="ff-triangle">
                            <div class="ff-triangle-border"></div>
                        </div>
                    </div>
                    <div class="ff-triangle">
                        <div class="ff-triangle-border"></div>
                    </div>
                </div>
            </div>
                <div class="ff-content ff-content-left ff-content-small-borderless-r">
            <div class="ff-content ff-content-left ff-content-small-borderless-r">
                <div class="ff-border-bottom"></div>
                <div id="btn_task_close" class="ff-border-top btn-search">
                    <div class="ff-border-content">
                        <i class="fa fa-times" aria-hidden="true" style="height: 22px;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="task_create" class="map-task" style="display: none;">
        <div class="flexbox align-items-start" style="margin: auto;">
            <div class="flexbox-col">
                <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                    <div class="ff-border-bottom"></div>
                    <div id="btn_task_close" class="ff-border-top btn-search">
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <i class="fa fa-times" aria-hidden="true" style="height: 22px;"></i>
                            <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                            新建走航任务
                        </div>
                    </div>
                </div>
                <div class="ff-content ff-content-left ff-content-medium">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <form name='new_task_form' action="" class="flexbox-col align-items">
                                <table class="text-table">
                                    <tr>
                                        <td>任务编号</td>
                                        <td><input type="text" class="rectangle" id="taskcode"></td>
                                    </tr>
                                    <tr>
                                        <td>设备类型</td>
                                        <td>
                                            <!-- <input type="text" class="rectangle" id="devicetype"> -->
                                            <select class="rectangle" id="devicetype">
                                                <option value="0a">车载</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>
                                    </tr>
                                    <tr>
                                        <td>起止时间</td>
                                        <td>
                                            <div id="task_starttime_text" class="rectangle">2018-08-24 00:01:07</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <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">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="ff-footer flexbox flex-center ">
                    </div>
                    <div class="ff-triangle">
                        <div class="ff-triangle-border"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div id="task_create" class="map-task" style="display: none;">
            <div class="flexbox align-items-start" style="margin: auto;">
                <div class="flexbox-col">
    <div id="task_import" class="map-task" style="display: none;">
        <div class="flexbox align-items-start" style="margin: auto;">
            <div class="flexbox-col">
                    <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                                新建走航任务
                            </div>
                <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                            走航数据导入
                        </div>
                    </div>
                </div>
                    <div class="ff-content ff-content-left ff-content-medium">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <form name='new_task_form' action="" class="flexbox-col align-items">
                                    <table class="text-table">
                                        <tr>
                                            <td>任务编号</td>
                                            <td><input type="text" class="rectangle" id="taskcode"></td>
                                        </tr>
                                        <tr>
                                            <td>设备类型</td>
                                            <td>
                                                <!-- <input type="text" class="rectangle" id="devicetype"> -->
                                                <select class="rectangle" id="devicetype">
                                                    <option value="0a">车载</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>
                                        </tr>
                                        <tr>
                                            <td>起止时间</td>
                                            <td>
                                                <div id="task_starttime_text" class="rectangle">2018-08-24 00:01:07</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>
                                                <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">
                <div class="ff-content ff-content-left ff-content-medium">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <form name='new_task_form' action="" class="flexbox-col align-items">
                                <div class="label-date margin-left-2">
                                    <span class="label-date-title">设备号</span>
                                    <select class="input-date margin-left-8" id="import_device_code">
                                        <option value="0a0000000001">0a0000000001</option>
                                        <option value="0a0000000002">0a0000000002</option>
                                        <option value="0a0000000003">0a0000000003</option>
                                    </select>
                                </div>
                                <div class="flexbox-col align-items">
                                    <input type="file" class="btn-search" id="file_path" accept=".xlsx">
                                    <div id="file_import_loading" class="margin-top">
                                        <i class="fa fa-file-excel-o fa-5x" aria-hidden="true"></i>
                                    </div>
                                </form>
                            </div>
                                </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">
                                </div>
                            </form>
                        </div>
                        <div class="ff-footer flexbox flex-center ">
                    </div>
                    <div class="ff-footer flexbox flex-center ">
                        </div>
                        <div class="ff-triangle">
                            <div class="ff-triangle-border"></div>
                        </div>
                    </div>
                    <div class="ff-triangle">
                        <div class="ff-triangle-border"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div id="task_import" class="map-task" style="display: none;">
            <div class="flexbox align-items-start" style="margin: auto;">
                <div class="flexbox-col">
    <div id="dialog_check" class="map-task" style="display: none;">
        <div class="flexbox align-items-start" style="margin: auto;">
            <div class="flexbox-col">
                    <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                                走航数据导入
                            </div>
                <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                            删除任务确认
                        </div>
                    </div>
                </div>
                    <div class="ff-content ff-content-left ff-content-medium">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <form name='new_task_form' action="" class="flexbox-col align-items">
                                    <div class="label-date margin-left-2">
                                        <span class="label-date-title">设备号</span>
                                        <select class="input-date margin-left-8" id="import_device_code">
                                            <option value="0a0000000001">0a0000000001</option>
                                            <option value="0a0000000002">0a0000000002</option>
                                            <option value="0a0000000003">0a0000000003</option>
                                        </select>
                                    </div>
                                    <div class="flexbox-col align-items">
                                        <input type="file" class="btn-search" id="file_path" accept=".xlsx">
                                        <div id="file_import_loading" class="margin-top">
                                            <i class="fa fa-file-excel-o fa-5x" aria-hidden="true"></i>
                                        </div>
                                    </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">
                                    </div>
                                </form>
                            </div>
                <div class="ff-content ff-content-left ff-content-medium">
                    <div class="ff-border-bottom"></div>
                    <div class="ff-border-top">
                        <div class="ff-border-content">
                            <form action="" class="flexbox-col align-items">
                                <div class="flexbox-col align-items">
                                    <span>是否删除任务</span>
                                </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">
                                </div>
                            </form>
                        </div>
                        <div class="ff-footer flexbox flex-center ">
                    </div>
                    <div class="ff-footer flexbox flex-center ">
                        </div>
                        <div class="ff-triangle">
                            <div class="ff-triangle-border"></div>
                        </div>
                    </div>
                    <div class="ff-triangle">
                        <div class="ff-triangle-border"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div id="dialog_check" class="map-task" style="display: none;">
            <div class="flexbox align-items-start" style="margin: auto;">
                <div class="flexbox-col">
                    <div class="ff-content ff-content-top-left ff-content-small-borderless-t">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                                删除任务确认
                            </div>
                        </div>
                    </div>
                    <div class="ff-content ff-content-left ff-content-medium">
                        <div class="ff-border-bottom"></div>
                        <div class="ff-border-top">
                            <div class="ff-border-content">
                                <form action="" class="flexbox-col align-items">
                                    <div class="flexbox-col align-items">
                                        <span>是否删除任务</span>
                                    </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">
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="ff-footer flexbox flex-center ">
                        </div>
                        <div class="ff-triangle">
                            <div class="ff-triangle-border"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="mode_change" class="map-mode-change flexbox flex-space-between" style="visibility: visible;">
            <a id="btn_history" class="mode-btn btn-selected">
                <div>污染溯源</div>
            </a>
            <a id="btn_realtime" class="mode-btn btn-unselected margin-left-8">
                <div>走航监测</div>
            </a>
            <!-- <div class="flexbox-col">
    <div id="mode_change" class="map-mode-change flexbox flex-space-between" style="visibility: visible;">
        <a id="btn_history" class="mode-btn btn-selected">
            <div>污染溯源</div>
        </a>
        <a id="btn_realtime" class="mode-btn btn-unselected margin-left-8">
            <div>走航监测</div>
        </a>
        <a id="btn_gridmonitor" class="mode-btn mode-btn-other btn-unselected margin-left-8">
            <div>网格化监测</div>
        </a>
        <!-- <div class="flexbox-col">
                <a id="btn_more" class="btn-unselected margin-left-8">
                    <div id="mode_selected">其他模式</div>
                </a>
@@ -1137,7 +1184,7 @@
                    </a>
                </div>
            </div> -->
        </div>
    </div>
    </div>
    <div id="loading" class="loading" style="display: none;">
@@ -1157,7 +1204,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>
@@ -1180,7 +1228,7 @@
    <script src="./componet/myPage.js"></script>
    <script src="./lib/tableutil.js?v=11"></script>
    <script src="./componet/table.js?v=3"></script>
    <script src="./componet/checkbox.js?v=3"></script>
    <script src="./componet/checkbox.js?v=5"></script>
    <script src="./lib/multiselect.js"></script>
    <script src="./lib/jackwei.slider.js?v=2"></script>
    <script src="./debugdata.js?v=2"></script>
@@ -1192,21 +1240,22 @@
    <script src="./lib/dialog.js"></script>
    <script src="./map.util.js?v=9"></script>
    <script src="./httpservice.js?v=12"></script>
    <script src="./httpservice.js?v=13"></script>
    <script src="./dataprocesser.js?v=12"></script>
    <script src="./entity/Legend.js?v=9"></script>
    <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>
    <script src="./history.mode.js?v=21"></script>
    <script src="./task.manage.js?v=3"></script>
    <script src="./company.layer.js?v=3"></script>
    <script src="./complaint.layer.js?v=4"></script>
    <script src="./complaint.layer2.js?v=2"></script>
    <script src="./complaint.layer2.js?v=3"></script>
    <script src="./electrcity.mode.js?v=12"></script>
    <script src="./underway.js?v=23"></script>
    <script src="./underway.js?v=24"></script>
    <script src="./test.js"></script>
    <!-- <script type="text/javascript" src="./asset/data/data.json?callback=debugJson"></script> -->
</body>