From 7578c3ff65329b2269f099475eb687e963efac1c Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 27 二月 2024 17:13:29 +0800
Subject: [PATCH] 地图3D模型、折线图和表格三者点击联动效果
---
underway.html | 1426 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 736 insertions(+), 690 deletions(-)
diff --git a/underway.html b/underway.html
index 37cf900..3dfad25 100644
--- a/underway.html
+++ b/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 </span>
- <input id="in_min" type="text" class="ff-input-range margin-left-2">
- <span class="time"> Max </span>
- <input id="in_max" type="text" class="ff-input-range margin-left-2">
+ </div>
+ <div class="flexbox align-items">
+ <span class="time">Min </span>
+ <input id="in_min" type="text" class="ff-input-range margin-left-2">
+ <span class="time"> Max </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,240 @@
</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>
+ <!-- <div class="flexbox-col">
<a id="btn_more" class="btn-unselected margin-left-8">
<div id="mode_selected">鍏朵粬妯″紡</div>
</a>
@@ -1137,7 +1181,7 @@
</a>
</div>
</div> -->
- </div>
+ </div>
</div>
<div id="loading" class="loading" style="display: none;">
@@ -1157,7 +1201,8 @@
</div>
</div>
- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.5&key=c55f27799afbfa69dc5a3fad90cafe51&plugin=Map3D,ElasticMarker,AMap.ControlBar"></script>
+ <script type="text/javascript"
+ src="https://webapi.amap.com/maps?v=1.4.5&key=c55f27799afbfa69dc5a3fad90cafe51&plugin=Map3D,ElasticMarker,AMap.ControlBar"></script>
<script src="./lib/jquery-3.5.1.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script> -->
<script src="./lib/plugin/bootstrap/js/popper.min.js"></script>
@@ -1198,6 +1243,7 @@
<script src="./entity/Factor.js?v=9"></script>
<script src="./entity/FactorDatas.js?v=7"></script>
<script src="./util/grid.analysis.js?v=1"></script>
+ <script src="./util/data.summary.js"></script>
<script src="./grid.monitor.js?v=14"></script>
<script src="./realtime.mode.js?v=34"></script>
<script src="./history.mode.js?v=19"></script>
--
Gitblit v1.9.3