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.
397 lines
21 KiB
397 lines
21 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"/>
|
|
<%--<bl:set var='menu_id' value='010507'/>--%> <%-- 设置 回显菜单 的 id --%>
|
|
<bl:extends page="/common/layout/secondaryMenuLayout.jsp"/>
|
|
|
|
<%
|
|
SysDept sysDept = UserAttrFacade.getDeptInfo();
|
|
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 rel="stylesheet" href="${ctx}/hbcyjc/tour_group/css/layout.css"/>
|
|
<style>
|
|
.old_pg_wrap {
|
|
margin-top: 0 !important;
|
|
}
|
|
</style>
|
|
</bl:block>
|
|
|
|
<bl:block name="main-secondary">
|
|
|
|
<!--漂浮-筛选条件 使用 jquery 初始化。。-->
|
|
<div class="gy_sx">
|
|
<a class="bttn_tssx"><span class="bttn_sxdh"></span></a>
|
|
<div class="sx_nr" id="div_search"></div>
|
|
</div>
|
|
|
|
<div class="old_pg_wrap wlp_sm_1 wlpjfxxt">
|
|
<!-- flexbox begin -->
|
|
<div class="flexbox">
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy mgn_r_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>国内游团队数人次数</span></h3>
|
|
</div>
|
|
<div style=" height:240px;">
|
|
|
|
|
|
<div class="tourist-box">
|
|
<div class="tourist-count">
|
|
<div class="tourist-title">总团数</div>
|
|
<span class="scroll-number-cont" id="2016_tuan"> </span> <span class="unit">个</span>
|
|
</div>
|
|
<div class="tourist-form">
|
|
<div class="tourist-form_v"><span>环比</span>
|
|
<p class="data-down" id="group-rate"><i class="data-down-img"></i>--.-%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tourist-box">
|
|
<div class="tourist-count">
|
|
<div class="tourist-title">总人数</div>
|
|
<span class="scroll-number-cont" id="2016_tuan1"> </span> <span class="unit">人</span>
|
|
</div>
|
|
<div class="tourist-form">
|
|
<div class="tourist-form_v"><span>环比</span>
|
|
<p class="data-down" id="tourist-rate"><i class="data-down-img"></i>--.-%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var num1 = 0;
|
|
var num2 = 0;
|
|
//数字滚动效果方法
|
|
var scrollNumberText = '<ul class="scroll-num-list">' + '<li class="scroll-num-value">0</li>' + '<li class="scroll-num-value">1</li>' + '<li class="scroll-num-value">2</li>' + '<li class="scroll-num-value">3</li>' + '<li class="scroll-num-value">4</li>' + '<li class="scroll-num-value">5</li>' + '<li class="scroll-num-value">6</li>' + '<li class="scroll-num-value">7</li>' + '<li class="scroll-num-value">8</li>' + '<li class="scroll-num-value">9</li>' + '<li class="scroll-num-value">.</li>' + '</ul>';
|
|
var scrollNumber = function (target, number) {
|
|
var numberValueList = String(number);
|
|
var numberEles = target.find('.scroll-single-number');
|
|
var len = numberValueList.length;
|
|
var numberNowLen = numberEles.length;
|
|
|
|
if (numberNowLen < len) {
|
|
for (var i = 0; i < len - numberNowLen; i++) {
|
|
target.append('<span class="scroll-single-number"><span class="scroll-line"></span>' + scrollNumberText + '</span>');
|
|
}
|
|
} else {
|
|
for (var i = 0; i < numberNowLen - len; i++) {
|
|
numberValueList = "0" + numberValueList;
|
|
}
|
|
}
|
|
|
|
var scrollNumList = target.find('.scroll-num-value');
|
|
var unitHeight = scrollNumList.eq(0).height();
|
|
|
|
scrollNumList.height(unitHeight);
|
|
//console.log(numberEles)
|
|
for (var i = 0; i < numberValueList.length; i++) {
|
|
var marginValue = Number(numberValueList[i]) * unitHeight;
|
|
if (isNaN(Number(numberValueList[i]))) {
|
|
marginValue = 700;
|
|
}
|
|
numberEles.eq(i).find('.scroll-num-list').animate({
|
|
'marginTop': -marginValue
|
|
}, 1000);
|
|
|
|
}
|
|
}
|
|
//初始化累计进出车辆
|
|
$('#2016_tuan>.scroll-single-number').each(function () {
|
|
$(this).append(scrollNumberText);
|
|
});
|
|
|
|
scrollNumber($("#2016_tuan"), 111111)
|
|
scrollNumber($("#2016_tuan1"), 111111)
|
|
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- flex-l end -->
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy mgn_r_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>团队趋势</span></h3>
|
|
</div>
|
|
<div style=" height:240px;" id="trend-div"></div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>团队来源地</span></h3>
|
|
</div>
|
|
<div style=" height:240px;" id="group-from"></div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
</div>
|
|
<!-- flexbox end -->
|
|
|
|
<!-- flexbox begin -->
|
|
<div class="flexbox mt15">
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy mgn_r_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>国内游目的地团队数排行TOP10</span></h3>
|
|
</div>
|
|
<div style=" height:240px;">
|
|
<div class="Ranking-hot-spots red">
|
|
<ul class="Ranking-hot-spots-ul" id="teamTop10-1">
|
|
<li data-value="中国台湾"><span>1</span><span class="title_name"
|
|
title="--">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
<li data-value="日本"><span>2</span><span class="title_name"
|
|
title="--">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
<li data-value="泰国"><span>3</span><span class="title_name"
|
|
title="--">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
<li data-value="印度尼西亚"><span>4</span><span class="title_name"
|
|
title="印度尼西亚">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
<li data-value="新加坡"><span>5</span><span class="title_name" title="新加坡">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
</ul>
|
|
<ul class="Ranking-hot-spots-ul" id="teamTop10-2">
|
|
<li data-value="澳大利亚"><span>6</span><span class="title_name"
|
|
title="澳大利亚">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
<li data-value="葡萄牙"><span>7</span><span class="title_name" title="葡萄牙">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
<li data-value="新西兰"><span>8</span><span class="title_name" title="新西兰">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
<li data-value="西班牙"><span>9</span><span class="title_name" title="西班牙">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
<li data-value="缅甸"><span>10</span><span class="title_name"
|
|
title="缅甸">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy mgn_r_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>国内游目的地游客数排行TOP10</span></h3>
|
|
</div>
|
|
<div style=" height:240px;">
|
|
<div class="Ranking-hot-spots blue">
|
|
<ul class="Ranking-hot-spots-ul" id="touristTop10-1">
|
|
<li data-value="中国台湾"><span>1</span><span class="title_name"
|
|
title="中国台湾">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
<li data-value="日本"><span>2</span><span class="title_name"
|
|
title="日本">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
<li data-value="泰国"><span>3</span><span class="title_name"
|
|
title="泰国">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
<li data-value="印度尼西亚"><span>4</span><span class="title_name"
|
|
title="印度尼西亚">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
<li data-value="新加坡"><span>5</span><span class="title_name" title="新加坡">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
</ul>
|
|
<ul class="Ranking-hot-spots-ul" id="touristTop10-2">
|
|
<li data-value="澳大利亚"><span>6</span><span class="title_name"
|
|
title="澳大利亚">--</span><span>--</span><span
|
|
class="data-down-img"></span></li>
|
|
<li data-value="葡萄牙"><span>7</span><span class="title_name" title="葡萄牙">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
<li data-value="新西兰"><span>8</span><span class="title_name" title="新西兰">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
<li data-value="西班牙"><span>9</span><span class="title_name" title="西班牙">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
<li data-value="缅甸"><span>10</span><span class="title_name"
|
|
title="缅甸">--</span><span>--</span><span
|
|
class="data-up-img"></span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>旅行社接待团队数排行</span></h3>
|
|
</div>
|
|
<div style=" height:240px;" id="reception-agency"></div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
</div>
|
|
<!-- flexbox end -->
|
|
|
|
<!-- flexbox begin -->
|
|
<div class="flexbox mt15">
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy mgn_r_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>国内游客性别分布</span></h3>
|
|
</div>
|
|
<div style=" height:260px;">
|
|
<div class="ts_sex">
|
|
<div class="pic_sex"><img src="${ctx}/hbcyjc/tour_group/images/sex.png">
|
|
<div class="txt_sex">
|
|
<h3> 女性<span id="nv">61.38%</span></h3>
|
|
<h4><span id="nan">38.62%</span>男性 </h4>
|
|
</div>
|
|
<div class="sex_wp">
|
|
<div class="female_bfb" style="width: 61.38%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy mgn_r_15"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>国内游客年龄段分析</span></h3>
|
|
</div>
|
|
<div style=" height:260px;">
|
|
<div id="div_age" class="tsyk_nlbl fadeInUp">
|
|
<div class="yk_nian"><img src="${ctx}/hbcyjc/tour_group/images/cd_l.png" class="yk_img">
|
|
<div id="div_shao" class="fudiv nian_shao">
|
|
<div class="hx_block" style="width:1.26%"><span>1.26%</span></div>
|
|
<h4>少年（1-18岁）</h4>
|
|
</div>
|
|
</div>
|
|
<div class="yk_nian"><img src="${ctx}/hbcyjc/tour_group/images/yg_l.png" class="yk_img">
|
|
<div id="div_qing" class="fudiv nian_qing">
|
|
<div class="hx_block" style="width:33.91%"><span>33.91%</span></div>
|
|
<h4>青年（19-30岁）</h4>
|
|
</div>
|
|
</div>
|
|
<div class="yk_nian"><img src="${ctx}/hbcyjc/tour_group/images/me_l.png" class="yk_img">
|
|
<div id="div_zhong" class="fudiv nian_zhong">
|
|
<div class="hx_block" style="width:61.54%"><span>61.54%</span></div>
|
|
<h4>中年（31-60岁）</h4>
|
|
</div>
|
|
</div>
|
|
<div class="yk_nian"><img src="${ctx}/hbcyjc/tour_group/images/ol_l.png" class="yk_img">
|
|
<div id="div_lao" class="fudiv nian_lao">
|
|
<div class="hx_block" style="width:3.3%"><span>3.3%</span></div>
|
|
<h4>老年（>60岁）</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>国内游客游玩时间</span></h3>
|
|
</div>
|
|
<div style=" height:260px;" id="stay-time"></div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
<!-- flex-l begin -->
|
|
<div class="flex-1">
|
|
<div class="com_box_zsy"><span class="zuos_jiao"></span> <span class="yous_jiao"></span>
|
|
<div class="dl_sub_bt">
|
|
<h3><span>出行方式</span></h3>
|
|
</div>
|
|
<div style=" height:260px;" id="ways_of_traveling"></div>
|
|
</div>
|
|
</div>
|
|
<!-- flex-l end -->
|
|
</div>
|
|
<!-- flexbox end -->
|
|
</div>
|
|
|
|
</bl:block>
|
|
|
|
<bl:block name="script-secondary">
|
|
<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>
|
|
</bl:block>
|
|
|
|
<bl:finish/> |