You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1592 lines
66 KiB
1592 lines
66 KiB
<%-- 旅游安全预警系统 - 气象环境监测--%>
|
|
<%@ page import="com.cjy.core.facade.UserAttrFacade" %>
|
|
<%@ page import="com.cjy.sysdept.entity.SysDept" %>
|
|
<%@ page language="java" contentType="text/html;charset=UTF-8"
|
|
pageEncoding="UTF-8" %>
|
|
<%@ taglib uri="http://tags.clayton.io/blacklayout" prefix="bl" %>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
|
<bl:set var="title" value="天气监测系统"/>
|
|
<bl:set var='sys_name' value='旅游安全预警系统-气象环境监测'/>
|
|
<bl:set var="hide_location" value="true"/>
|
|
<%-- 设置 回显菜单 的 id --%>
|
|
<bl:set var='menu_id' value='014804'/>
|
|
|
|
<%-- 继承页面 --%>
|
|
<bl:extends page="/common/layout/secondaryMenuLayout.jsp"/>
|
|
|
|
<%
|
|
SysDept sysDept = UserAttrFacade.getDeptInfo(request);
|
|
String earecodets = sysDept.getDcode();
|
|
String areacode = "";
|
|
if (sysDept.getLevel() == 1) {//省级
|
|
areacode = sysDept.getDremark().substring(0, 2);
|
|
} else if (sysDept.getLevel() == 2) {//市
|
|
if (sysDept.getDremark().equals("131401")) {
|
|
areacode = "131401";
|
|
} else {
|
|
areacode = sysDept.getDremark().substring(0, 4);
|
|
}
|
|
} else if (sysDept.getLevel() == 3) {//县级
|
|
areacode = sysDept.getDremark();
|
|
} else if (sysDept.getLevel() == 4) {//地级市
|
|
areacode = sysDept.getDremark();
|
|
}
|
|
%>
|
|
|
|
<bl:block name="style">
|
|
<link type="text/css" rel="stylesheet" href="./kendo/kendo.common.min.css">
|
|
<link type="text/css" rel="stylesheet" href="./kendo/kendo.default.min.css">
|
|
<link type="text/css" rel="stylesheet" href="./kendo/skin.css">
|
|
<link rel="stylesheet" href="${ctx}/theme/common/css/layout.css"/>
|
|
<link rel="stylesheet" href="${ctx}/js/swiper.min.css">
|
|
<link rel="stylesheet" href="${ctx}/js/swiper.min.css">
|
|
|
|
|
|
<script src="${ctx}/js/swiper.min.js"></script>
|
|
<style>
|
|
.old_pg_wrap {
|
|
margin-top: 0 !important;
|
|
}
|
|
.ts_ul li span{
|
|
background: #4f9aff;
|
|
}
|
|
.p_1>a{
|
|
color: #ffa800;
|
|
}
|
|
.p_1>a>span{
|
|
background: #ffa800 !important;
|
|
}
|
|
</style>
|
|
</bl:block>
|
|
<bl:block name="main-secondary">
|
|
|
|
<div class="old_pg_wrap wlp_sm_1 wlpjfxxt">
|
|
<div class="col-box" style="width:440px;">
|
|
<div class="com_box_zsy mgn_t_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_content" style="height:327px;">
|
|
<div class="holiday_tianqi jianbian" style="border:none">
|
|
<div style="width:100%;" id="now">
|
|
<span class="calendar"></span>
|
|
<span class="day color8"></span>
|
|
<span class="tianqi_yinli color8"></span>
|
|
<span class="tianqi_qing"> </span>
|
|
<span class="tianqi_du"> </span>
|
|
</div>
|
|
</div>
|
|
<div class="weather-list">
|
|
<p class="weather-list-p"><span>6月30日</span><span>星期二</span><span> </span><span>26℃</span><span>17℃</span>
|
|
</p>
|
|
<p class="weather-list-p"><span>7月01日</span><span>星期三</span><span> </span><span>28℃</span><span>19℃</span>
|
|
</p>
|
|
<p class="weather-list-p"><span>7月02日</span><span>星期四</span><span> </span><span>31℃</span><span>20℃</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="com_box_zsy mgn_t_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_title"><span>空气质量</span></div>
|
|
<div class="gird_content air-quality" style="height:240px;">
|
|
<div id="weather-air" ></div>
|
|
<div class="weather-air-list">
|
|
<p><span style="width: 65%">可吸入颗粒物(PM10)</span><span id="PM10" style="width: 20%">35</span></p>
|
|
<p><span style="width: 55%">细颗粒物(PM2.5)</span><span id="PM25" style="width: 40%">14</span></p>
|
|
<p><span>二氧化氮(NO2)</span><span id="NO2">12</span></p>
|
|
<p><span>二氧化硫(SO2)</span><span id="SO2">8</span></p>
|
|
<p><span>臭氧(O3)</span><span id="O3">122</span></p>
|
|
<p><span>一氧化碳(CO)</span><span id="CO">0.7</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="com_box_zsy mgn_t_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_title"><span>舒适度、风力风向</span></div>
|
|
<div class="gird_content weather-cozy" style="height:240px;">
|
|
<p class="zozy-text" style=""><span class="color8">舒适度</span><span class="color1"
|
|
id="shushi">舒适</span></p>
|
|
<div>
|
|
<div id="weather_pic" _echarts_instance_="ec_1593482585179"
|
|
style="-webkit-tap-highlight-color: transparent; user-select: none; background: transparent;">
|
|
<div style="position: relative; overflow: hidden; width: 189px; height: 124px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
|
|
<canvas width="189" height="124" data-zr-dom-id="zr_0"
|
|
style="position: absolute; left: 0px; top: 0px; width: 189px; height: 124px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
|
|
</div>
|
|
</div>
|
|
<p><span class="color8">体感温度</span><span class="color1" id="fl">22℃</span></p>
|
|
<p><span class="color8">气压</span><span class="color1" id="pres">989</span></p>
|
|
</div>
|
|
<div>
|
|
<div><img src="${ctx}/theme/common/images/weather-img.png" alt=""></div>
|
|
<p><span class="color8">风向</span><span class="color1" id="wind_dir">东风</span></p>
|
|
<p><span class="color8">风力</span><span class="color1" id="wind_sc">3级别</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-box" style="width:calc(100% - 940px);height:calc(100% - 120px)">
|
|
<div class="com_box_zsy mgn_t_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_content" style="height:100">
|
|
<div class="swiper-container swiper-container-vertical swiper-container-wp8-vertical" id="tianqiyujing">
|
|
<div class="swiper-wrapper" style="transition-duration: 300ms; transform: translate3d(0px, -1.67772e+08px, 0px);">
|
|
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="56" style="height: 3.35544e+07px; margin-bottom: 20px;">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--<div class="weather-warning">
|
|
<p><span style="float:left;" class="color1 ">河北省隆化县发布暴雨蓝色预警</span><span
|
|
style="float: right;text-align: right;" class="color1 ">关键词:蓝色,暴雨预警</span></p>
|
|
<p class="color8" style="cursor: pointer"
|
|
title="隆化县气象台2020年07月06日13时33分发布暴雨蓝色预警信号：目前，我县湾沟门乡娘娘庙村降水量已达53.1毫米且降水仍将持续，预计未来12小时内，我县部分乡镇降水量将达到50毫米以上，请有关单位和部门注意防范，预防地质灾害。（预警信息来源：国家预警信息发布中心）">
|
|
隆化县气象台2020年07月06日13时33分发布暴雨蓝色预警信号：目前，我县湾沟门乡娘娘庙村降水量已达53.1毫米且降水仍将持续，预计未来12小时内，我县部分乡镇降水量将达到50毫米以上，请有关单位和部门注意防范，预防地质灾害。（预警信息来源：国家预警信息发布中心）</p>
|
|
<p class="color1">2020-07-06 13:36:57</p>
|
|
</div>--%>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- flexbox begin -->
|
|
<div class="flexbox">
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy mgn_r_15 mgn_t_15"><span class="zuos_jiao"></span> <span
|
|
class="yous_jiao"></span>
|
|
<div class="gird_title"><span>近三十天气象预警趋势</span></div>
|
|
<div style=" height:240px;" id="zx-trend"></div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy mgn_t_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_title"><span>近三十天气象预警分类统计</span></div>
|
|
<div style=" height:240px;" id="pipe-fenglei"></div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
</div>
|
|
<!-- flexbox end -->
|
|
|
|
<div class="com_box_zsy mgn_t_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="gird_title"><span>地市气象数据</span></div>
|
|
<div class="gird_content" style="height:467px;">
|
|
<table class="pp-list" id="table_wather">
|
|
<thead>
|
|
<tr>
|
|
<th class="no-sort" style="width: 14%">城市名称</th>
|
|
<th style="width: 14%">天气状况</th>
|
|
<th style="width: 14%" class="sorted descending">最高温度</th>
|
|
<th style="width: 14%">最低温度</th>
|
|
<th style="width: 14%">空气质量</th>
|
|
<th style="width: 14%">AQI指数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>绥化</td>
|
|
<td>雷阵雨</td>
|
|
<td>27℃</td>
|
|
<td>18℃</td>
|
|
<td>优</td>
|
|
<td>21</td>
|
|
</tr>
|
|
<tr>
|
|
<td>齐齐哈尔</td>
|
|
<td>多云</td>
|
|
<td>27℃</td>
|
|
<td>17℃</td>
|
|
<td>优</td>
|
|
<td>40</td>
|
|
</tr>
|
|
<tr>
|
|
<td>哈尔滨</td>
|
|
<td>雷阵雨</td>
|
|
<td>27℃</td>
|
|
<td>18℃</td>
|
|
<td>优</td>
|
|
<td>22</td>
|
|
</tr>
|
|
<tr>
|
|
<td>大庆</td>
|
|
<td>多云</td>
|
|
<td>26℃</td>
|
|
<td>18℃</td>
|
|
<td>优</td>
|
|
<td>27</td>
|
|
</tr>
|
|
<tr>
|
|
<td>大兴安岭</td>
|
|
<td>雷阵雨</td>
|
|
<td>26℃</td>
|
|
<td>13℃</td>
|
|
<td>优</td>
|
|
<td>14</td>
|
|
</tr>
|
|
<tr>
|
|
<td>佳木斯</td>
|
|
<td>小雨</td>
|
|
<td>25℃</td>
|
|
<td>16℃</td>
|
|
<td>优</td>
|
|
<td>24</td>
|
|
</tr>
|
|
<tr>
|
|
<td>黑河</td>
|
|
<td>阵雨</td>
|
|
<td>25℃</td>
|
|
<td>16℃</td>
|
|
<td>优</td>
|
|
<td>12</td>
|
|
</tr>
|
|
<tr>
|
|
<td>牡丹江</td>
|
|
<td>阵雨</td>
|
|
<td>25℃</td>
|
|
<td>16℃</td>
|
|
<td>优</td>
|
|
<td>20</td>
|
|
</tr>
|
|
<tr>
|
|
<td>鹤岗</td>
|
|
<td>阵雨</td>
|
|
<td>23℃</td>
|
|
<td>14℃</td>
|
|
<td>优</td>
|
|
<td>20</td>
|
|
</tr>
|
|
<tr>
|
|
<td>伊春</td>
|
|
<td>阵雨</td>
|
|
<td>23℃</td>
|
|
<td>14℃</td>
|
|
<td>优</td>
|
|
<td>19</td>
|
|
</tr>
|
|
<tr>
|
|
<td>双鸭山</td>
|
|
<td>阵雨</td>
|
|
<td>23℃</td>
|
|
<td>15℃</td>
|
|
<td>优</td>
|
|
<td>32</td>
|
|
</tr>
|
|
<tr>
|
|
<td>鸡西</td>
|
|
<td>小雨</td>
|
|
<td>22℃</td>
|
|
<td>14℃</td>
|
|
<td>优</td>
|
|
<td>20</td>
|
|
</tr>
|
|
<tr>
|
|
<td>七台河</td>
|
|
<td>阵雨</td>
|
|
<td>22℃</td>
|
|
<td>16℃</td>
|
|
<td>优</td>
|
|
<td>25</td>
|
|
</tr>
|
|
<tr>
|
|
<td>黑龙江</td>
|
|
<td>--</td>
|
|
<td>--</td>
|
|
<td>--</td>
|
|
<td>优</td>
|
|
<td>22</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-box" style="width:500px;">
|
|
<div class="com_box_zsy mgn_t_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="weather-echarts" style="height:933px;">
|
|
<div style="width:100%;padding-left: 100px;padding-top:10px;">
|
|
<ul class="ts_ul1">
|
|
<li class="p_1"><a href="####" data-date-type="1"> <span></span>按月分析 </a></li>
|
|
<li class=""><a href="####" data-date-type="2"> <span></span>按年分析</a></li>
|
|
</ul>
|
|
<ul class="ts_list1" id="app">
|
|
<li style="display: list-item;">
|
|
<span class="k-widget k-datepicker k-header" style="width: 142px;"><span class="k-picker-wrap k-state-default k-state-hover">
|
|
<input id="datepicker_1" value="" title="datepicker" data-role="datepicker" type="text"
|
|
class="k-input" role="combobox" aria-expanded="false" aria-owns="datepicker_1_dateview"
|
|
aria-disabled="false" ><span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="datepicker_1_dateview"><span class="k-icon k-i-calendar"></span></span></span></span>
|
|
</li>
|
|
<li style="display: none;">
|
|
<span class="k-widget k-datepicker k-header" style="width: 142px;"><span class="k-picker-wrap k-state-default">
|
|
<input id="datepicker_2" value="" title="datepicker" data-role="datepicker" type="text" class="k-input" role="combobox"
|
|
aria-expanded="false" aria-owns="datepicker_2_dateview" aria-disabled="false"><span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="datepicker_2_dateview"><span class="k-icon k-i-calendar"></span></span></span></span>
|
|
</li>
|
|
</ul>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
<div class="gird_weather">
|
|
<div class="gird_title"><span>气温变化</span></div>
|
|
<div class="gird_content" style=" height:175px;">
|
|
<div id="weather_Temperature" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1594025596207"><div style="position: relative; overflow: hidden; width: 428px; height: 159px; padding: 0px; margin: 0px; border-width: 0px;"><canvas width="428" height="159" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 428px; height: 159px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="gird_weather">
|
|
<div class="gird_title"><span>空气质量统计</span></div>
|
|
<div class="gird_content" style=" height:175px;">
|
|
<div id="weather_tongji" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1594025596209"><div style="position: relative; overflow: hidden; width: 428px; height: 159px; padding: 0px; margin: 0px; border-width: 0px;"><canvas width="428" height="159" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 428px; height: 159px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="gird_weather">
|
|
<div class="gird_title"><span>空气质量天数统计</span></div>
|
|
<div class="gird_content weather-times">
|
|
<div id="weather_time" _echarts_instance_="ec_1594025596208" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;"><div style="position: relative; overflow: hidden; width: 204px; height: 159px; padding: 0px; margin: 0px; border-width: 0px;"><canvas width="204" height="159" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 204px; height: 159px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
|
|
<div class="weather-air-list">
|
|
<p><span>优</span><span id="you">3天</span></p>
|
|
<p><span>良</span><span id="liang">3天</span></p>
|
|
<p><span>轻度</span><span id="qingdu">0天</span></p>
|
|
<p><span>中度</span><span id="zhondu">0天</span></p>
|
|
<p><span>重度</span><span id="zhongdu">0天</span></p>
|
|
<p><span>严重</span><span id="yanzhong">0天</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gird_weather">
|
|
<div class="gird_title"><span>气象天数统计</span></div>
|
|
<div class="gird_content" style=" height:175px;">
|
|
<div id="weather_qixiang" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1594025596206"><div style="position: relative; overflow: hidden; width: 428px; height: 159px; padding: 0px; margin: 0px; border-width: 0px;"><canvas width="428" height="159" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 428px; height: 159px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</bl:block>
|
|
|
|
<bl:block name="script-secondary">
|
|
<script type="text/javascript" src="./kendo/kendo.custom.min.js"></script>
|
|
<script type="text/javascript" src="./kendo/kendo.tabstrip.min.js"></script>
|
|
<script type="text/javascript" src="./kendo/kendo.messages.zh-CN.min.js"></script>
|
|
<script type="text/javascript" src="./kendo/kendo.culture.zh-CN.min.js"></script>
|
|
|
|
<script src="${ctx }/hbcyjc/kll/kll_structure/areacode.js"></script>
|
|
<script type="text/javascript" src="${ctx}/hbcyjc/resource/js/echarts/echarts.min.js"></script>
|
|
<script src="${ctx}/hbcyjc/tour_group/js/tour_group_ui.js"></script>
|
|
<script src="${ctx}/hbcyjc/tour_group/js/outbound.js"></script>
|
|
<script type="text/javascript" src="${ctx }/js/laydate5.09/laydate.js"></script>
|
|
<script type="text/javascript" src="${ctx }/util/date_region_filter.js"></script>
|
|
<script>
|
|
|
|
var areacode = '<%=areacode %>';
|
|
var earecodets = '<%=earecodets%>';
|
|
|
|
|
|
$('#div_search').initDateFilter({
|
|
initTime: new Date().getFullYear() + '',
|
|
areacode: areacode,
|
|
visible: {day: false},
|
|
earecodets: earecodets,
|
|
callback: function (param) {
|
|
|
|
var date = new Date();
|
|
var type = 'year';
|
|
var fmt = param.fmt;
|
|
var arr = fmt.split('-');
|
|
if (arr.length === 2) {
|
|
type = 'month';
|
|
date.setMonth(arr[1] - 1);
|
|
}
|
|
date.setFullYear(arr[0]);
|
|
|
|
// in tour_group_ui.js
|
|
GLOBAL_QUERY_TYPE = 'internal';
|
|
|
|
|
|
// /hbcyjc/tour_group/js/outbound.js
|
|
render(date, type, param.region, fmt);
|
|
|
|
// /hbcyjc/tour_group/js/outbound.js
|
|
renderReceiveTravelAgencyTop(fmt, {
|
|
domId: 'reception-agency'
|
|
});
|
|
|
|
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
var lon = 114.514859;
|
|
var lat = 38.042306;
|
|
alarm();//预警
|
|
warnTrend();//近三十天气象预警趋势
|
|
warnType();//近三十天气象预警分类统计
|
|
weatherTable();//天气列表
|
|
paramsChange1();//右上角 气温变化
|
|
|
|
airQuality(lon, lat);//空气质量
|
|
initNow(lon, lat);//左上角
|
|
initWeatherList(lon, lat);//左上角
|
|
tigan(lon, lat);//左上角
|
|
var time = new Date();
|
|
var mon = time.getMonth() + 1;//月
|
|
var day = time.getDate();//日
|
|
|
|
var now_date = (mon<10?"0"+mon:mon) + "月" +(day<10?"0"+day:day) + "日";
|
|
$(".calendar").html(now_date);
|
|
|
|
var week = "星期" + "日一二三四五六".charAt(new Date().getDay());
|
|
$(".day").html(week);
|
|
|
|
});
|
|
//切换按年、按月、按日查询
|
|
$(".ts_ul li").click(function () {
|
|
var index = $(this).index();
|
|
$('.ts_ul li').removeClass("p_1");
|
|
$(this).addClass('p_1');
|
|
// $(".ts_ul li span").css('background', '#4f9aff');
|
|
// $(this).find("span").css('background', '#ffa800');
|
|
$('.ts_list li.date-type').hide();
|
|
$('.ts_list li:eq(' + index + ')').show();
|
|
getSelectType();
|
|
});
|
|
$(".ts_ul1 li").click(function () {
|
|
var index = $(this).index();
|
|
$('.ts_ul1 li').removeClass("p_1");
|
|
$(this).addClass('p_1');
|
|
$('.ts_list1 li').hide();
|
|
$('.ts_list1 li:eq(' + index + ')').show();
|
|
paramsChange1();
|
|
});
|
|
|
|
window.onload = function () {
|
|
$("#datepicker_1").kendoDatePicker({
|
|
format: "yyyy-MM",
|
|
value: new Date(),
|
|
culture: "zh-CN",
|
|
depth: "year",
|
|
start: "year",
|
|
change: paramsChange1
|
|
});
|
|
$("#datepicker_2").kendoDatePicker({
|
|
format: "yyyy",
|
|
value: new Date(),
|
|
culture: "zh-CN",
|
|
depth: "decade",
|
|
start: "decade",
|
|
change: paramsChange1
|
|
});
|
|
}
|
|
function paramsChange1() {
|
|
var dateType = $(".ts_ul1>li.p_1>a").data("date-type");
|
|
var date = $("#datepicker_" + dateType).val();
|
|
var type = 'month';
|
|
if (dateType == 2) {
|
|
type = 'year';
|
|
}
|
|
tempTrend(type, date);
|
|
airAqi(type, date);
|
|
airAqiDay(type, date);
|
|
weatherCondition(type, date);
|
|
}
|
|
function tigan(lon, lat) {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "https://free-api.heweather.com/s6/weather?location=" + lon + "," + lat + "&key=8160b18d68884db1ad53e2955c97be5e",
|
|
datatype: "json",
|
|
success: function (result) {
|
|
if (result.HeWeather6[0].status == "ok") {
|
|
var now = result.HeWeather6[0].now;
|
|
var lifestyle = result.HeWeather6[0].lifestyle;
|
|
|
|
var comf = "未知";
|
|
var pres = "未知";
|
|
var hum = "未知";
|
|
if (now) {
|
|
pres = now.pres;
|
|
hum = now.hum;
|
|
}
|
|
$.each(lifestyle, function (idx, obj) {
|
|
if (obj.type == "uv") {
|
|
uv = obj.brf;
|
|
}
|
|
if (obj.type == "comf") {
|
|
comf = obj.brf;
|
|
}
|
|
})
|
|
var fl = now.fl;
|
|
var wind_sc = now.wind_sc;
|
|
var wind_dir = now.wind_dir;
|
|
$("#fl").text(fl + "℃");
|
|
$("#wind_sc").text(wind_sc + "级别");
|
|
$("#wind_dir").text(wind_dir);
|
|
$("#pres").text(pres)
|
|
$("#shushi").text(comf)
|
|
pic(hum);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//左上未来几天天气预测
|
|
function initWeatherList(lon, lat) {
|
|
$(".weather-list").empty();
|
|
$.ajax({
|
|
type: "get",
|
|
url: "https://free-api.heweather.net/s6/weather/forecast?location=" + lon + "," + lat + "&key=8160b18d68884db1ad53e2955c97be5e",
|
|
success: function (data) {
|
|
if (data.HeWeather6[0] && data.HeWeather6[0].status == "ok") {
|
|
var dialyForecast = data.HeWeather6[0].daily_forecast;
|
|
$.each(dialyForecast, function (key, object) {
|
|
var dates = object.date.split("-");
|
|
//判断是否为0开头
|
|
var pattern1 = /^0.*/g;
|
|
var month = "";
|
|
if (pattern1.test(dates[1])) {
|
|
month = dates[1].substring(1);
|
|
} else {
|
|
month = dates[1];
|
|
}
|
|
var content =
|
|
'<p class="weather-list-p">' +
|
|
'<span>' + month + '月' + dates[2] + '日' + '</span>' +
|
|
'<span>星期' + ("日一二三四五六".charAt(new Date(object.date).getDay())) + '</span>' +
|
|
'<span><img src="/oss/weather-icon/' + object.cond_code_d + '.png" style="width: 40px;height: 40px;margin-top: -7px;margin-left: 15px;" alt=""></span>' +
|
|
'<span>' + object.tmp_max + '℃</span>' +
|
|
'<span>' + object.tmp_min + '℃</span>' +
|
|
'</p>';
|
|
$(".weather-list").append(content);
|
|
});
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//左上当前天气
|
|
function initNow(lon, lat) {
|
|
$.ajax({
|
|
type: "get",
|
|
url: "https://free-api.heweather.com/s6/weather/now?location=" + lon + "," + lat + "&key=8160b18d68884db1ad53e2955c97be5e",
|
|
success: function (data) {
|
|
if (data.HeWeather6[0].status == "ok") {
|
|
var weather = data.HeWeather6[0];
|
|
var today = new Date();
|
|
var y = today.getFullYear().toString();
|
|
var m = (today.getMonth() + 1).toString();
|
|
var d = today.getDate().toString();
|
|
var now = getBigDate(y, m, d);
|
|
now = now.substring(now.indexOf("年") + 1);
|
|
var imageUrl = "/oss/weather-icon/" + weather.now.cond_code + ".png";
|
|
var content =
|
|
'<span class="tianqi_yinli color8">' + now + '</span>' +
|
|
'<span class="tianqi_qing"><img src="' + imageUrl + '" width="48px" height="48px" alt="">' + weather.now.cond_txt + '</span>' +
|
|
'<span class="tianqi_du">' + weather.now.tmp + '℃</span>';
|
|
}
|
|
$("#now").append(content);
|
|
},
|
|
error: function () {
|
|
notify("暂未获取到实时数据", "error", true);
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
//判断当前日期与传入日期相差多大 格式为YYYY-MM-DD
|
|
function judgeNow(dateTwo) {
|
|
var date = new Date();
|
|
var seperator1 = "-";
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth() + 1;
|
|
var strDate = date.getDate();
|
|
if (month >= 1 && month <= 9) {
|
|
month = "0" + month;
|
|
}
|
|
if (strDate >= 0 && strDate <= 9) {
|
|
strDate = "0" + strDate;
|
|
}
|
|
var currentdate = year + seperator1 + month + seperator1 + strDate;
|
|
return daysBetween(currentdate, dateTwo);
|
|
}
|
|
|
|
function daysBetween(DateOne, DateTwo) {
|
|
var OneMonth = DateOne.substring(5, DateOne.lastIndexOf('-'));
|
|
var OneDay = DateOne.substring(DateOne.length, DateOne.lastIndexOf('-') + 1);
|
|
var OneYear = DateOne.substring(0, DateOne.indexOf('-'));
|
|
|
|
var TwoMonth = DateTwo.substring(5, DateTwo.lastIndexOf('-'));
|
|
var TwoDay = DateTwo.substring(DateTwo.length, DateTwo.lastIndexOf('-') + 1);
|
|
var TwoYear = DateTwo.substring(0, DateTwo.indexOf('-'));
|
|
|
|
var cha = ((Date.parse(OneMonth + '/' + OneDay + '/' + OneYear) - Date.parse(TwoMonth + '/' + TwoDay + '/' + TwoYear)) / 86400000);
|
|
return Math.abs(cha);
|
|
}
|
|
function getBigDate(y, m, d) {
|
|
var chinese = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
|
|
var result = "";
|
|
for (var i = 0; i < y.length; i++) {
|
|
result += chinese[y.charAt(i)];
|
|
}
|
|
result += "年";
|
|
if (m.length == 2) {
|
|
if (m.charAt(0) == "1") {
|
|
result += ("十" + chinese[m.charAt(1)] + "月");
|
|
}
|
|
} else {
|
|
result += (chinese[m.charAt(0)] + "月");
|
|
}
|
|
if (d.length == 2) {
|
|
result += (chinese[d.charAt(0)] + "十" + chinese[d.charAt(1)] + "日");
|
|
} else {
|
|
result += (chinese[d.charAt(0)] + "日");
|
|
}
|
|
return result;
|
|
}
|
|
//预警轮播
|
|
function alarm() {
|
|
$.ajax({
|
|
url: "${ctx}/hbcyjc/earlywarning/findWeaWarns.json",
|
|
type: "get",
|
|
dataType: "json",
|
|
success: function (result) {
|
|
$("#tianqiyujing>.swiper-wrapper").empty();
|
|
var html;
|
|
if (result != null && result.length > 0) {
|
|
result.forEach(function (item, index) {
|
|
html = '<div class="swiper-slide">' +
|
|
' <div class="weather-warning">' +
|
|
' <p class="color1 "><span style="float:left;">' + item.head + '</span><span style="float: right;text-align: right;">关键词:' + item.alarmLevel + "," + item.alarmType
|
|
+ '</span></p>' +
|
|
' <p class="color8" style="cursor: pointer" title="' + item.issueContent + '">' + item.issueContent + '</p>' +
|
|
' <p class="color1">' + item.issueTime + '</p>' +
|
|
' </div>' +
|
|
'</div>';
|
|
$("#tianqiyujing>.swiper-wrapper").append(html)
|
|
})
|
|
} else {
|
|
html = '<div class="swiper-slide">' +
|
|
' <div style="padding: 42px 20px 0 23px;text-align:center">' +
|
|
' <p>' + '本地区无预警' + '</p>' +
|
|
' </div>' +
|
|
'</div>';
|
|
$("#tianqiyujing>.swiper-wrapper").append(html)
|
|
}
|
|
// 天气预警
|
|
$('#tianqiyujing').hover(function () {
|
|
scenicSwiper1.autoplay.stop();
|
|
}, function () {
|
|
scenicSwiper1.autoplay.start();
|
|
});
|
|
|
|
var scenicSwiper1 = new Swiper("#tianqiyujing", {
|
|
// initialSlide:3,
|
|
slidesPerView: 1,
|
|
spaceBetween: 20,
|
|
direction: 'vertical',
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 3000,
|
|
disableOnInteraction: false,
|
|
},
|
|
observer: true,//修改swiper自己或子元素时，自动初始化swiper
|
|
observeParents: false,//修改swiper的父元素时，自动初始化swiper
|
|
});
|
|
},
|
|
error: function (data) {
|
|
notify("接口异常", "warn", true)
|
|
}
|
|
})
|
|
}
|
|
function warnTrend() {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "${ctx}/hbcyjc/earlywarning/getWeatherWarnTrend.json",
|
|
datatype: "json",
|
|
success: function (result) {
|
|
if (result && result.length > 0) {
|
|
var xData = [];
|
|
var yData = [];
|
|
result.forEach(function (item, index) {
|
|
xData.push(item.name);
|
|
yData.push(item.data);
|
|
})
|
|
warnTrendLine(xData, yData);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
function warnType() {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "${ctx}/hbcyjc/earlywarning/getWeaWarnsTypeCount.json",
|
|
datatype: "json",
|
|
success: function (result) {
|
|
if (result && result.length > 0) {
|
|
warnTypePipe(result);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//空气质量
|
|
function airQuality(lon, lat) {
|
|
var lon1 = lon;
|
|
var lat1 = lat;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "${ctx}/hbcyjc/earlywarning/now.json",
|
|
datatype: "json",
|
|
success: function (result) {
|
|
if (result.HeWeather6[0].status == "ok") {
|
|
var airNowCity = result.HeWeather6[0].air_now_city;
|
|
if (airNowCity) {
|
|
var aqi = airNowCity.aqi;
|
|
var qlty = airNowCity.qlty;
|
|
var pm25 = airNowCity.pm25 ? airNowCity.pm25 : "未知";
|
|
var pm10 = airNowCity.pm10 ? airNowCity.pm10 : "未知";
|
|
var no2 = airNowCity.no2 ? airNowCity.no2 : "未知";
|
|
var so2 = airNowCity.so2 ? airNowCity.so2 : "未知";
|
|
var co = airNowCity.co ? airNowCity.co : "未知";
|
|
var o3 = airNowCity.o3 ? airNowCity.o3 : "未知";
|
|
var data = {value: aqi, label: qlty, color: '#ee0'};
|
|
yibiao(data);
|
|
$("#PM10").text(pm10);
|
|
$("#PM25").text(pm25);
|
|
$("#NO2").text(no2);
|
|
$("#SO2").text(so2);
|
|
$("#O3").text(o3);
|
|
$("#CO").text(co);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
// 中下列表页
|
|
function weatherTable() {
|
|
$.ajax({
|
|
url: "${ctx}/weathersregion",
|
|
type: "get",
|
|
dataType: "json",
|
|
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
|
|
success: function (data) {
|
|
$("#table_wather>tbody").empty();
|
|
if (data && data.length > 0) {
|
|
data.forEach(function (item, idx) {
|
|
var html = '<tr>' +
|
|
' <td title="'+item.city_name+'">' + (item.city_name ? item.city_name : "--") + '</td>' +
|
|
' <td>' + (item.weathers ? item.weathers : "--") + '</td>' +
|
|
' <td>' + (item.high_temp ? item.high_temp : "--") + '</td>' +
|
|
' <td>' + (item.low_temp ? item.low_temp : "--") + '</td>' +
|
|
' <td>' + (item.quality ? item.quality : "--") + '</td>' +
|
|
' <td>' + (item.aqi ? item.aqi : "--") + '</td>' +
|
|
'</tr>';
|
|
$("#table_wather>tbody").append(html)
|
|
});
|
|
}
|
|
},
|
|
error: function (data) {
|
|
notify("接口异常", "warn", true)
|
|
}
|
|
})
|
|
}
|
|
// 右上气温变化折线图
|
|
function tempTrend(type, date) {
|
|
var url = "${ctx}/hbcyjc/earlywarning/getWeatherTempTrend.json";
|
|
if(type=='year'){
|
|
url= "${ctx}/hbcyjc/earlywarning/getWeatherTempTrendyear.json";
|
|
}
|
|
$.ajax({
|
|
type: "GET",
|
|
url: url,
|
|
datatype: "json",
|
|
success: function (result) {
|
|
if (result && result.code == 200) {
|
|
line(result, type);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//空气质量统计
|
|
function airAqi(type, date) {
|
|
var url = "${ctx}/hbcyjc/earlywarning/getAirAqiTrend.json";
|
|
if(type=='year'){
|
|
url= "${ctx}/hbcyjc/earlywarning/getAirAqiTrendyear.json";
|
|
}
|
|
$.ajax({
|
|
type: "GET",
|
|
url: url,
|
|
datatype: "json",
|
|
success: function (result) {
|
|
if (result && result.code == 200) {
|
|
tongji_line(result, type);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//空气质量天数统计
|
|
function airAqiDay(type, date) {
|
|
var url = "${ctx}/hbcyjc/earlywarning/getAirAqiDayByDate.json";
|
|
if(type=='year'){
|
|
url= "${ctx}/hbcyjc/earlywarning/getAirAqiDayByDateyear.json";
|
|
}
|
|
$.ajax({
|
|
type: "GET",
|
|
url: url,
|
|
datatype: "json",
|
|
success: function (result) {
|
|
if (result && result.code == 200) {
|
|
times(result);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//气象天数统计
|
|
function weatherCondition(type, date) {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "${ctx}/hbcyjc/earlywarning/getWeatherConditionByDate.json",
|
|
datatype: "json",
|
|
success: function (result) {
|
|
if (result && result.code == 200) {
|
|
qixiang(result.data);
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
//ECHARTS 渲染
|
|
function yibiao(data) {
|
|
var max = 100;
|
|
var barChart = echarts.init(document.getElementById("weather-air"));
|
|
option = {
|
|
min: 0,
|
|
max: max,
|
|
tooltip: {
|
|
formatter: "{a} <br/>{b} : {c}%"
|
|
},
|
|
title: {
|
|
x: "center",
|
|
bottom: 0,
|
|
text: '污染指数',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 14,
|
|
color: "#4AE9F5"
|
|
},
|
|
|
|
},
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
radius: '100%',
|
|
startAngle: 245,
|
|
endAngle: -65,
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: { // 属性lineStyle控制线条样式
|
|
color: [
|
|
[data.value / 100, '#5EFEAD'],
|
|
[1, '#306C94']
|
|
],
|
|
width: 6
|
|
}
|
|
},
|
|
splitLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {show: false},
|
|
splitLabel: {show: false},
|
|
pointer: {show: false},
|
|
itemStyle: {
|
|
borderWidth: 30,
|
|
color: '#0f0',
|
|
},
|
|
title: {
|
|
offsetCenter: [0, '0%'],
|
|
color: '#5efead',
|
|
fontSize: 50,
|
|
fontWeight: 700,
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 25,
|
|
color: "#5efead"
|
|
},
|
|
},
|
|
detail: {
|
|
formatter:function(e){
|
|
return data.label;
|
|
},
|
|
color: '#62fead',
|
|
offsetCenter: [0, '60%'],
|
|
fontSize: 15,
|
|
},
|
|
data: [{value: data.value, name: data.value}]
|
|
}
|
|
]
|
|
};
|
|
barChart.setOption(option);
|
|
}
|
|
function pic(hum) {
|
|
var barChart = echarts.init(document.getElementById("weather_pic"));
|
|
option = {
|
|
color: ['red', '#ff733f', '#ec4863'],
|
|
grid: {
|
|
left: '1%',
|
|
right: '35%',
|
|
top: '16%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
"axisLine": {
|
|
show: false,
|
|
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
|
|
},
|
|
|
|
|
|
},
|
|
yAxis: {
|
|
"axisLine": {
|
|
show: false,
|
|
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
center: ['50%', '50%'],
|
|
radius: ['70%', '80%'],
|
|
label: {
|
|
normal: {
|
|
position: 'center'
|
|
}
|
|
},
|
|
data: [{
|
|
value: 60,
|
|
name: '湿度',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#6CFEA5'
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '{c}',
|
|
textStyle: {
|
|
color: '#6CFEA5',
|
|
fontSize: 16
|
|
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
value: 100 - hum,
|
|
name: '占位',
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#306C94'
|
|
|
|
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
textStyle: {
|
|
color: '#6CFEA5',
|
|
},
|
|
formatter: '\n湿度'
|
|
}
|
|
}
|
|
}]
|
|
}]
|
|
}
|
|
barChart.setOption(option);
|
|
}
|
|
function warnTrendLine(xData, yData) {
|
|
var color1 = 'rgba(255,168,0, 0.3)';
|
|
var color2 = 'rgba(255,168,0, 0)';
|
|
var color3 = 'rgb(255,168,0)';
|
|
var barChart = echarts.init(document.getElementById("zx-trend"));
|
|
option = {
|
|
color: ['#37B8CA'],
|
|
|
|
title: [{
|
|
text: '',
|
|
left: '1%',
|
|
top: '6%',
|
|
textStyle: {
|
|
color: '#37B8CA'
|
|
}
|
|
}],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
x: 300,
|
|
top: '0%',
|
|
left: '60%',
|
|
textStyle: {
|
|
color: ['#37B8CA', '']
|
|
},
|
|
data: ['最高', '最低']
|
|
},
|
|
grid: {
|
|
left: '1%',
|
|
right: '5%',
|
|
top: '19%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#244F98',
|
|
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff',
|
|
}
|
|
},
|
|
boundaryGap: false,
|
|
data: xData
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#244F98',
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#353E5E',
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
name: '气象预警趋势',
|
|
smooth: true,
|
|
type: 'line',
|
|
symbolSize: 8,
|
|
symbol: 'circle',
|
|
data: yData,
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: color1
|
|
}, {
|
|
offset: 0.8,
|
|
color: color2
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: color3
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
barChart.setOption(option);
|
|
}
|
|
function warnTypePipe(result) {
|
|
var legArr = [];
|
|
var dataArr = [];
|
|
result.forEach(function (item, idx) {
|
|
legArr.push(item.name);
|
|
var dataObj = {};
|
|
dataObj.value = item.data;
|
|
dataObj.name = item.name;
|
|
dataArr.push(dataObj);
|
|
})
|
|
var barChart = echarts.init(document.getElementById("pipe-fenglei"));
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: '15%',
|
|
top: '30%',
|
|
itemWidth: 14,
|
|
itemHeight: 14,
|
|
align: 'left',
|
|
|
|
data: legArr,
|
|
textStyle: {
|
|
color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9', '#60a900', '#01949b', ' #f17677'],
|
|
}
|
|
},
|
|
series: [{
|
|
name: '天气',
|
|
type: 'pie',
|
|
radius: ['50%', '65%'],
|
|
center: ['40%', '50%'],
|
|
color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9', '#60a900', '#01949b', ' #f17677'],
|
|
label: {
|
|
normal: {
|
|
formatter: '{d}%'
|
|
},
|
|
|
|
},
|
|
data: dataArr
|
|
}
|
|
]
|
|
};
|
|
barChart.setOption(option);
|
|
}
|
|
function tongji_line(result, type) {
|
|
var legArr = [];
|
|
if (type == 'year') {
|
|
legArr.push("本年");
|
|
legArr.push("去年");
|
|
} else {
|
|
legArr.push("本月");
|
|
legArr.push("上月");
|
|
}
|
|
var lastArr = result.data.last;
|
|
var nowArr = result.data.now;
|
|
;
|
|
var len = lastArr.length;
|
|
var xData = [];
|
|
if (type == 'year') {
|
|
for (var i = 1; i <= len; i++) {
|
|
xData.push(i + '月');
|
|
}
|
|
} else {
|
|
if (lastArr.length < nowArr.length) {
|
|
len = nowArr.length;
|
|
}
|
|
for (var i = 1; i <= len; i++) {
|
|
xData.push(i + '日');
|
|
}
|
|
}
|
|
|
|
var barChart = echarts.init(document.getElementById("weather_tongji"));
|
|
option = {
|
|
color: ['#ffa800', '#43D6E3', '#ec4863'],
|
|
title: [{
|
|
// text: '',
|
|
left: '10%',
|
|
// top: '10%',
|
|
textStyle: {
|
|
color: 'white',
|
|
fontSize: 12
|
|
},
|
|
text: '小于等于100即达标，超过100即超标',
|
|
}],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
x: 300,
|
|
top: '0%',
|
|
left: '60%',
|
|
textStyle: {
|
|
color: ['#ffd285', '']
|
|
},
|
|
data: legArr
|
|
},
|
|
grid: {
|
|
left: '0%',
|
|
right: '5%',
|
|
top: '10%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
"show": false,
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
"axisLine": {
|
|
lineStyle: {
|
|
color: '#244F98',
|
|
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff',
|
|
|
|
}
|
|
},
|
|
boundaryGap: false,
|
|
data: xData
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#244F98',
|
|
}
|
|
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#353E5E',
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
name: legArr[0],
|
|
smooth: true,
|
|
type: 'line',
|
|
symbolSize: 8,
|
|
symbol: 'circle',
|
|
data: nowArr
|
|
}, {
|
|
name: legArr[1],
|
|
smooth: true,
|
|
type: 'line',
|
|
symbolSize: 8,
|
|
symbol: 'circle',
|
|
data: lastArr
|
|
}]
|
|
}
|
|
barChart.setOption(option);
|
|
}
|
|
function line(result, type) {
|
|
var xData = [];
|
|
var len = result.data.maxTemp.length;
|
|
if (type == 'year') {
|
|
for (var i = 1; i <= len; i++) {
|
|
xData.push(i + '月');
|
|
}
|
|
} else {
|
|
for (var i = 1; i <= len; i++) {
|
|
xData.push(i + '日');
|
|
}
|
|
}
|
|
var maxTempArr = result.data.maxTemp;
|
|
var minTempArr = result.data.minTemp;
|
|
var barChart = echarts.init(document.getElementById("weather_Temperature"));
|
|
option = {
|
|
color: ['#ffa800', '#43D6E3', '#ec4863'],
|
|
|
|
title: [{
|
|
text: '',
|
|
left: '1%',
|
|
top: '6%',
|
|
textStyle: {
|
|
color: '#ffd285'
|
|
}
|
|
}],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
x: 300,
|
|
top: '0%',
|
|
left: '60%',
|
|
textStyle: {
|
|
color: ['#ffd285', '']
|
|
},
|
|
data: ['最高', '最低']
|
|
},
|
|
grid: {
|
|
left: '1%',
|
|
right: '5%',
|
|
top: '19%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
"show": false,
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
"axisLine": {
|
|
lineStyle: {
|
|
color: '#244F98',
|
|
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff',
|
|
|
|
}
|
|
},
|
|
boundaryGap: false,
|
|
data: xData
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#244F98',
|
|
|
|
}
|
|
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#353E5E',
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
type: 'value',
|
|
name: '单位(℃)',
|
|
nameTextStyle: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
series: [{
|
|
name: '最高',
|
|
smooth: true,
|
|
type: 'line',
|
|
symbolSize: 8,
|
|
symbol: 'circle',
|
|
data: maxTempArr
|
|
}, {
|
|
name: '最低',
|
|
smooth: true,
|
|
type: 'line',
|
|
symbolSize: 8,
|
|
symbol: 'circle',
|
|
data: minTempArr
|
|
}]
|
|
}
|
|
barChart.setOption(option);
|
|
}
|
|
function times(result) {
|
|
if (!$.isEmptyObject(result.data)) {
|
|
var max = 0;
|
|
var indicator = [];
|
|
var value = [];
|
|
$.each(result.data, function (key, obj) {
|
|
if (max < obj) {
|
|
max = obj;
|
|
}
|
|
})
|
|
$.each(result.data, function (key, obj) {
|
|
var indic = {};
|
|
indic.name = key;
|
|
indic.max = max * 1.5;
|
|
indicator.push(indic)
|
|
value.push(obj);
|
|
})
|
|
$("#you").text(result.data['优'] + "天");
|
|
$("#liang").text(result.data['良'] + "天");
|
|
$("#qingdu").text(result.data['轻度'] + "天");
|
|
$("#zhondu").text(result.data['中度'] + "天");
|
|
$("#zhongdu").text(result.data['重度'] + "天");
|
|
$("#yanzhong").text(result.data['严重'] + "天");
|
|
}
|
|
|
|
|
|
var barChart = echarts.init(document.getElementById("weather_time"));
|
|
option = {
|
|
title: {
|
|
text: ''
|
|
},
|
|
tooltip: {},
|
|
radar: {
|
|
// shape: 'circle',
|
|
indicator: indicator,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#449cff'
|
|
}
|
|
},
|
|
radius: '60%',
|
|
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#449cff'
|
|
}
|
|
},
|
|
name: {
|
|
formatter: '{value}',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
|
|
},
|
|
|
|
series: [{
|
|
name: '天气天数',
|
|
type: 'radar',
|
|
areaStyle: {
|
|
normal: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#ffa800'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(0,0,0,.3)'
|
|
}],
|
|
globalCoord: false
|
|
}
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: '#ffa800',
|
|
width: 1
|
|
}
|
|
},
|
|
// areaStyle: {normal: {}},
|
|
data: [
|
|
{
|
|
value: value,
|
|
name: 'AQI'
|
|
}
|
|
]
|
|
}]
|
|
};
|
|
barChart.setOption(option);
|
|
}
|
|
function qixiang(result) {
|
|
var legArr = [];
|
|
var dataArr = [];
|
|
if (!$.isEmptyObject(result)) {
|
|
$.each(result, function (key, obj) {
|
|
legArr.push(key);
|
|
var dataObj = {};
|
|
dataObj.value = obj;
|
|
dataObj.name = key;
|
|
dataArr.push(dataObj);
|
|
})
|
|
} else {
|
|
legArr.push("雨");
|
|
legArr.push("晴");
|
|
legArr.push("阴");
|
|
var dataObj = {};
|
|
dataObj.value = 0;
|
|
dataObj.name = "雨";
|
|
var dataObj1 = {};
|
|
dataObj1.value = 0;
|
|
dataObj1.name = "晴";
|
|
var dataObj2 = {};
|
|
dataObj2.value = 0;
|
|
dataObj2.name = "阴";
|
|
dataArr.push(dataObj);
|
|
dataArr.push(dataObj1);
|
|
dataArr.push(dataObj2);
|
|
}
|
|
var barChart = echarts.init(document.getElementById("weather_qixiang"));
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
|
|
},
|
|
legend: {
|
|
|
|
orient: 'vertical',
|
|
right: '20%',
|
|
top: '15%',
|
|
itemWidth: 14,
|
|
itemHeight: 14,
|
|
align: 'left',
|
|
|
|
data: legArr,
|
|
textStyle: {
|
|
color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9', '#60a900', '#01949b', ' #f17677'],
|
|
}
|
|
},
|
|
series: [{
|
|
name: '天气',
|
|
type: 'pie',
|
|
radius: ['50%', '65%'],
|
|
center: ['30%', '50%'],
|
|
color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9', '#60a900', '#01949b', ' #f17677'],
|
|
label: {
|
|
normal: {
|
|
formatter: '{d}%'
|
|
},
|
|
|
|
},
|
|
data: dataArr
|
|
}
|
|
]
|
|
};
|
|
barChart.setOption(option);
|
|
}
|
|
</script>
|
|
</bl:block>
|
|
|
|
<bl:finish/> |