张家口产业监测
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.
 
 
 
 

544 lines
20 KiB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/ctx.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>酒店网评报告详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 自定义样式 -->
<link type="text/css" rel="stylesheet" href="${ctx}/hbcyjc/resourceNew/css/cjy_style.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/hbcyjc/resourceNew/css/cjy_style2.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/hbcyjc/resourceNew/css/cjy_zlmxg.css" />
<%-- <script type="text/javascript" src="${ctx }/hbcyjc/resourceNew/js/jquery.min.js"></script> --%>
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/echarts/echarts-wordcloud.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var sysName = "网络评价分析系统";
$("#sysName").html(sysName);
$("#current_page").css('display','none');
var my_menu_html =
'<a href="${ctx}/network/index.do" class="caid_xiang">网评综合分析</a>' +
'<a href="${ctx}/indexscenicgood/scenicReport.do" class="caid_xiang">景区网评报告</a>' +
'<a href="${ctx}/indexscenicgood/scenicanalysis.do" class="caid_xiang">景区网评分析</a>' +
'<a href="${ctx}/indexhotelgood/hotelReport.do" class="caid_xiang active">酒店网评报告</a>' +
'<a href="${ctx}/indexhotelgood/hotelanalysis.do" class="caid_xiang">酒店网评分析</a>'+
'<a href="${ctx}/network/gotolist.do" class="caid_xiang">综合评价查询</a>';
$("#menuList").html(my_menu_html);
});
</script>
</head>
<body>
<div class="xingk"></div>
<%@include file="/common/menu.jsp" %>
<div class="wpbg_con">
<div class="wpbg_sxxjz">
<div class="wpbg_sxx">
<ul class="wpbg_sxxk">
<li onclick="showitem(this,'month')">按月</li>
<li class="active" onclick="showitem(this,'quarter')">按季度</li>
<li onclick="showitem(this,'year')">按年份</li>
</ul>
<div class="wpbg_sxxbox">
<div class="wpbg_sxxnr" id="div_month" style="display:none;">
<div class="form_input" style="width: 100px; display: inline-block;">
<input id="month_now_year" value="${nowYear}" />
</div>
<div class="wpbg_sxx_yue">
<a href="javascript:chooseMonth('01');" id="month_01" class="bttn active">一月</a>
<a href="javascript:chooseMonth('02');" id="month_02" class="bttn">二月</a>
<a href="javascript:chooseMonth('03');" id="month_03" class="bttn">三月</a>
<a href="javascript:chooseMonth('04');" id="month_04" class="bttn">四月</a>
<a href="javascript:chooseMonth('05');" id="month_05" class="bttn">五月</a>
<a href="javascript:chooseMonth('06');" id="month_06" class="bttn">六月</a>
<a href="javascript:chooseMonth('07');" id="month_07" class="bttn">七月</a>
<a href="javascript:chooseMonth('08');" id="month_08" class="bttn">八月</a>
<a href="javascript:chooseMonth('09');" id="month_09" class="bttn">九月</a>
<a href="javascript:chooseMonth('10');" id="month_10" class="bttn">十月</a>
<a href="javascript:chooseMonth('11');" id="month_11" class="bttn">十一月</a>
<a href="javascript:chooseMonth('12');" id="month_12" class="bttn">十二月</a>
</div>
</div>
<div class="wpbg_sxxnr" id="div_quarter">
<div class="form_input" style="width: 100px; display: inline-block;">
<input id="quarter_now_year" value="${nowYear}" />
</div>
<!-- <div class="form_select">
<select id="quarter_now_year">
<option>2019</option>
<option>2018</option>
<option>2017</option>
<option>2016</option>
</select>
</div> -->
<div class="wpbg_sxx_jidu">
<a href="javascript:chooseQuarter('1');" id="quarter_1" class="bttn active">第一季度</a>
<a href="javascript:chooseQuarter('2');" id="quarter_2" class="bttn">第二季度</a>
<a href="javascript:chooseQuarter('3');" id="quarter_3" class="bttn">第三季度</a>
<a href="javascript:chooseQuarter('4');" id="quarter_4" class="bttn">第四季度</a>
</div>
</div>
<div class="wpbg_sxxnr" id="div_year" style="display:none;">
<div class="nian_gd">
<div class="JQ-slide">
<div class="JQ-slide-nav">
<a class="prev"></a> <a class="next"></a>
</div>
<div class="wrap">
<ul class="JQ-slide-content">
<li><a href="javascript:chooseYear('${nowYear}')" id="year_${nowYear}" class="bttn active">${nowYear}</a></li>
<c:forEach var="x" begin="1" end="9" step="1">
<li><a href="javascript:chooseYear('${nowYear-x}')" id="year_${nowYear-x}" class="bttn">${nowYear-x}</a></li>
</c:forEach>
</ul>
</div>
</div>
</div>
</div>
<span class="jb-lefts"><img src="${ctx}/hbcyjc/resourceNew/images/jb-lefts.png" /></span>
<span class="jb-leftx"><img src="${ctx}/hbcyjc/resourceNew/images/jb-leftx.png" /></span>
<span class="jb-rights"><img src="${ctx}/hbcyjc/resourceNew/images/jb-rights.png" /></span>
<span class="jb-rightx"><img src="${ctx}/hbcyjc/resourceNew/images/jb-rightx.png" /></span>
</div>
</div>
</div>
<h3 class="wpbg_dbt" id="report_title"></h3>
<h2 class="wpbg_xbt">综合概况</h2>
<div class="wpbg_box">
<div class="wpbg_tbbf" style="width:55%;">
<div class="wpbg_tbbfnr">
<h4 class="wpbg_myd">
游客满意度:<span id="grade">4.5分</span>
</h4>
<div class="" style=" height:200px;" id="composite_detail"></div>
</div>
</div>
<div class="wpbg_wbsm" style="width:45%;">
<div class="wpbg_wbsmnr" style="padding-top:40px;">
<p class="wpbg_wb">
<strong class="col_qing" id="nowYear">${nowYear}年</strong><strong class="col_qing" id="now_month_quarter"></strong>,
<strong class="col_qing" id="dname">${dname}</strong>
5星级酒店总共收到<strong class="col_qing" id="total"></strong>条评论,环比下降97%,同比下降92%,其中
<strong class="col_qing" id="goodNum"></strong>条,占总评论数的88%,环比下降93%,同比下降97%,而
<strong class="col_qing" id="badNum"></strong>条,环比下降89%,同比下降92%.
</p>
<p class="wpbg_wb_bottom">
所有酒店游客满意度平均分值<strong class="col_huang" id="grade_avg">4.5分</strong>,总体表现良好!
</p>
</div>
</div>
<div class="clear"></div>
</div>
<h2 class="wpbg_xbt">榜单</h2>
<div class="wpbg_box">
<p class="wpbg_wbjs">
<strong class="col_qing" id="hot_name"></strong>获得最多游客关注,
<strong class="col_huang" id="score_red_name"></strong>表现优异,获得最高满意度评分,
<strong class="col_huang" id="score_black_name"></strong>,游客评价普遍较低.
</p>
<div class="wpbg_boxgs">
<div class="wpbg_tbbf" style="width:33.33333%;">
<div class="wpbg_plbd wpbg_phrm" id="hot_hotel_list">
</div>
</div>
<div class="wpbg_tbbf" style="width:33.33333%;">
<div class="wpbg_plbd wpbg_phhb" id="score_red_hotel_list">
</div>
</div>
<div class="wpbg_wbsm" style="width:33.33333%;">
<div class="wpbg_plbd wpbg_phheib" id="score_black_hotel_list">
</div>
</div>
<div class="clear"></div>
</div>
</div>
<h2 class="wpbg_xbt">游客关注维度</h2>
<div class="wpbg_box">
<div class="wpbg_tbbf" style="width:55%;">
<div class="wpbg_tbbfnr">
<div class="" style=" height:200px;" id="people_dimension"></div>
</div>
</div>
<div class="wpbg_wbsm" style="width:45%;">
<div class="wpbg_wbsmnr" style="padding-top:40px;">
<p class="wpbg_wb">
旅客对酒店点评内容关注点主要分布在<strong class="col_qing" id="f_dimension_name"></strong>等方面,对
<strong class="col_qing" id="s_dimension_name"></strong>方面关注较少.
</p>
<p class="wpbg_wb_bottom">
其中<strong class="col_qing" id="good_dimension_name">文化特色,景区颜值</strong>等方面好评率较高,希望继续保持.而
<strong class="col_qing" id="bed_dimension_name"></strong>等方面差评率较高,有待改进.
</p>
</div>
</div>
<div class="clear"></div>
</div>
<h2 class="wpbg_xbt">评价来源分析</h2>
<div class="wpbg_box">
<div class="wpbg_tbbf" style="width:65%;">
<div class="wpbg_tbbfnr">
<div class="" style=" height:200px;" id="criticism_source"></div>
</div>
</div>
<div class="wpbg_wbsm" style="width:35%;">
<div class="wpbg_wbsmnr" style="padding-top:40px;">
<p class="wpbg_wb">
游客评论主要分布在以<strong class="col_qing" id="first_name"></strong>为主的OTA平台。对美团,途牛,飞猪,同程,携程,猫途鹰,蚂蜂窝,艺龙,大众点评,安可达,缤客,驴妈妈这些平台的评论进行统计,其中
<strong class="col_qing" id="first_name_again"></strong>以<strong class="col_qing" id="first_num"></strong>条评论占总评论量的
<strong class="col_qing" id="first_rate"></strong>%,去哪儿,途牛,飞猪,同程,携程,猫途鹰,蚂蜂窝,艺龙,大众点评,安可达,缤客,驴妈妈共占评论量
<strong class="col_qing" id="other_rate"></strong>%,
<strong class="col_qing" id="pour_first_name"></strong>和<strong class="col_qing" id="pour_second_name"></strong>
垫底,不超过<strong class="col_qing" id="pour_rate"></strong>%。
</p>
</div>
</div>
<div class="clear"></div>
</div>
<h2 class="wpbg_xbt">评论热词</h2>
<div class="wpbg_box">
<div class="wpbg_tbbf" style="width:33%;">
<div class="wpbg_tbbfnr">
<h2 class="wpbg_boxphbt">正面热词</h2>
<div class="" style=" height:200px;" id="positive_word"></div>
</div>
</div>
<div class="wpbg_tbbf" style="width:33%;">
<div class="wpbg_tbbfnr">
<h2 class="wpbg_boxphbt">负面热词</h2>
<div class="" style=" height:200px;" id="negative_word"></div>
</div>
</div>
<div class="wpbg_wbsm" style="width:34%;">
<div class="wpbg_wbsmnr" style="padding-top:60px;">
<p class="wpbg_wb" id="good_words"></p>
<p class="wpbg_wb_bottom" id="bed_words"></p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 页面echarts展示 -->
<script type="text/javascript" src="${ctx }/hbcyjc/indexhotelgood/hotel_report.js"></script>
<!--年份滚动-->
<script>
$(function() {
btnClick();
})
function btnClick() {
var i = 1;
var x = $(".wrap li").length;
/*上一页*/
$(".prev").click(function() {
if (i == 1) {
$(".JQ-slide-content").css('left', 0);
} else {
$(".JQ-slide-content").css('left', i * -80);
i--;
}
});
/*下一页*/
$(".next").click(function() {
if (i < x - 9) {
$(".JQ-slide-content").css('left', i * -80);
i++
} else {
i = x - 10;
$(".JQ-slide-content").css('left', i * -80);
}
});
}
</script>
<script type="text/javascript">
//查询条件
var starttime = "";
var endtime = "";
var date_type = "";
var composite_time = "";
$(document).ready(function() {
chooseQuarter('1');
});
//选项卡
function showitem(e, type) {
$(e).parent().find('li').removeClass('active');
$(e).addClass('active');
$('.wpbg_sxxnr').css("display", 'none');
$('#div_'+type).css("display", 'block');
if(type=="month"){
chooseMonth('01');
}else if(type=="quarter"){
chooseQuarter('1');
}else if(type=="year"){
chooseYear('${nowYear}');
}
}
//选择月
function chooseMonth(month){
if(isEmpty(month)){month = "01"};
//修改选中样式
$("#month_"+month).parent().find('a').removeClass('active');
$("#month_"+month).addClass('active');
var year = $("#month_now_year").val();
starttime = year+"-"+month+"-01";
var date = new Date(starttime);
var lastDateOfCurrentMonth = new Date(year,month,0);
endtime = year+"-"+month+"-"+lastDateOfCurrentMonth.getDate();
date_type = 'MONTH';
composite_time = year+"-"+month;
$("#now_month_quarter").html(parseInt(month)+'月');//综合概况 季度或月
queryPageData();
}
//选择季度
function chooseQuarter(quarter){
if(isEmpty(quarter)){quarter = "1"};
//修改选中样式
$("#quarter_"+quarter).parent().find('a').removeClass('active');
$("#quarter_"+quarter).addClass('active');
var year = $("#quarter_now_year").val();
if(quarter=="1"){//第一季度
starttime = year+"-01-01";
endtime = year+"-03-31";
}else if(quarter=="2"){//第二季度
starttime = year+"-04-01";
endtime = year+"-06-30";
}else if(quarter=="3"){//第三季度
starttime = year+"-07-01";
endtime = year+"-09-30";
}else if(quarter=="4"){//第四季度
starttime = year+"-10-01";
endtime = year+"-12-31";
}
date_type = "QUARTER";
composite_time = year+"-"+quarter;
$("#now_month_quarter").html(parseInt(quarter)+'季度');//综合概况 季度或月
queryPageData();
}
//选择年
function chooseYear(year){
if(isEmpty(year)){year = "${nowYear}"};
$("#year_"+year).parent().parent().find('a').removeClass('active');
$("#year_"+year).addClass('active');
starttime = year+"-01-01";
endtime = year+"-12-31";
date_type = 'YEAR';
composite_time = year;
$("#quarter_now_year").val(year);
$("#month_now_year").val(year);
$("#now_month_quarter").html('');//综合概况 季度或月
queryPageData();
}
//查询页面中的所有信息
function queryPageData(){
var year = $("#quarter_now_year").val();
$("#report_title").html(year+'年${dname}酒店网评报告');//标题
$("#nowYear").html(year+'年');//综合概况 年
//查询综合概况
queryCompositeDetail_hotel();
//查询榜单
queryHotList_hotel();
//游客关注维度
queryPeopleDimension_hotel();
//评价来源分析
queryCriticismSource_Hotel();
//评论热词--正面热词
queryPositiveWord_hotel();
//评论热词--负面热词
queryNegativeWord_hotel();
}
/**
* 查询榜单
*/
function queryHotList_hotel(){
$.ajax({
type : 'POST',
url : "${ctx}/indexhotelgood/queryHotelTopList.do?starttime="+starttime+"&endtime="+endtime,
dataType : 'json',
success : function(data) {
var hotList = data.hotList;
var scoreRedList = data.scoreRedList;
var scoreBlackList = data.scoreBlackList;
var hot_name = "";
if(hotList.length>3){
hot_name = hotList[0].cname+","+hotList[1].cname+","+hotList[2].cname;
}
$("#hot_name").html(hot_name);
var score_red_name = "";
if(scoreRedList.length>3){
score_red_name = scoreRedList[0].cname+","+scoreRedList[1].cname+","+scoreRedList[2].cname;
}
$("#score_red_name").html(score_red_name);
var score_black_name = "";
if(scoreBlackList.length>3){
score_black_name = scoreBlackList[0].cname+","+scoreBlackList[1].cname+","+scoreBlackList[2].cname;
}
$("#score_black_name").html(score_black_name);
showHotList_hotel(data);
}
});
}
//显示榜单
function showHotList_hotel(data){
var hotList = data.hotList;
var scoreRedList = data.scoreRedList;
var scoreBlackList = data.scoreBlackList;
var hot_hotel_list_html = '<h2 class="wpbg_boxphbt">热门排行TOP10</h2>';
for (var i = 0; i < hotList.length; i++) {
hot_hotel_list_html +=
'<div class="pf-2">'+
'<p class="ph_top'+(i+1)+'">'+
'<span class="ph_xh"><strong>'+(i+1)+'</strong></span>'+
'<span class="ph_mc">'+hotList[i].cname+'</span>'+
'<span class="ph_sz">'+hotList[i].cnum+'</span>'+
'</p>'+
'</div>';
}
hot_hotel_list_html += '<div class="clear"></div>';
$("#hot_hotel_list").html(hot_hotel_list_html);
var score_red_hotel_list_html = '<h2 class="wpbg_boxphbt">评分<span class="col_hongb">红榜</span>TOP10</h2>';
for (var i = 0; i < scoreRedList.length; i++) {
score_red_hotel_list_html +=
'<div class="pf-2">'+
'<p class="ph_top'+(i+1)+'">'+
'<span class="ph_xh"><strong>'+(i+1)+'</strong></span>'+
'<span class="ph_mc">'+scoreRedList[i].cname+'</span>'+
'<span class="ph_sz">'+scoreRedList[i].grade+'</span>'+
'</p>'+
'</div>';
}
score_red_hotel_list_html += '<div class="clear"></div>';
$("#score_red_hotel_list").html(score_red_hotel_list_html);
var score_black_hotel_list_html = '<h2 class="wpbg_boxphbt">评分<span class="col_heib">黑榜</span>TOP10</h2>';
for (var i = 0; i < scoreBlackList.length; i++) {
score_black_hotel_list_html +=
'<div class="pf-2">'+
'<p class="ph_top'+(i+1)+'">'+
'<span class="ph_xh"><strong>'+(i+1)+'</strong></span>'+
'<span class="ph_mc">'+scoreRedList[i].cname+'</span>'+
'<span class="ph_sz">'+scoreRedList[i].grade+'</span>'+
'</p>'+
'</div>';
}
score_black_hotel_list_html += '<div class="clear"></div>';
$("#score_black_hotel_list").html(score_black_hotel_list_html);
}
/**
* 查询评价来源分析
*/
function queryCriticismSource_Hotel(){
$.ajax({
type : 'POST',
url : "${ctx}/indexhotelgood/hotelCriticismSource.do?starttime="+starttime+"&endtime="+endtime,
dataType : 'json',
success : function(data) {
if(data.length>0){
//计算总数, 其他合起来的总数
var totalNum = 0, otherNum = 0;
for (var i = 0; i < data.length; i++) {
totalNum += parseInt(data[i].sourceNum);
if(i!=0){
otherNum += parseInt(data[i].sourceNum);
}
}
showCriticismSourceInfo(data, totalNum, otherNum);
//echarts的数据
var xAxisData=[], seriesData=[], backgroundData=[];
var colorData=['#f36847','#ddad35','#636daa'];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].criticismSource);
seriesData.push(data[i].sourceNum);
backgroundData.push(totalNum);
if(i>2){
colorData.push('#00feff');
}
}
showCriticismSource_hotel(xAxisData, seriesData, backgroundData, colorData);
}
}
});
}
//显示评价来源分析
function showCriticismSourceInfo(data, totalNum, otherNum){
var first_rate = parseInt(data[0].sourceNum/totalNum*100);
var other_rate = parseInt(otherNum/totalNum*100);
var pour_rate = parseInt((parseInt(data[data.length-1].sourceNum)+parseInt(data[data.length-2].sourceNum))/totalNum*100);
$("#first_name").html(data[0].criticismSource);
$("#first_num").html(data[0].sourceNum);
$("#first_rate").html(first_rate);
$("#other_rate").html(other_rate);
$("#pour_first_name").html(data[data.length-1].criticismSource);
$("#pour_second_name").html(data[data.length-2].criticismSource);
$("#pour_rate").html(pour_rate);
}
function isEmpty(text) {
if (text != null && text != "null" && text != "" && text != "undefined" && text!=undefined) {
return false;
} else {
return true;
}
}
</script>
<script type="text/javascript" src="${ctx}/js/laydate5.09/laydate.js"></script>
<script type="text/javascript">
//时间选择器
laydate.render({
elem: '#month_now_year',
theme: "datecolor",
type: 'year',
max: new Date().getTime(),
done: function(value, date, endDate){//选择完回调(日期生成的值, 日期时间对象, 得结束的日期时间对象 开启范围选择(range: true)才会返回)
$("#quarter_now_year").val(value);
$("#month_now_year").val(value);
chooseMonth('01');
}
});
laydate.render({
elem: '#quarter_now_year',
theme: "datecolor",
type: 'year',
max: new Date().getTime(),
done: function(value, date, endDate){//选择完回调
$("#quarter_now_year").val(value);
$("#month_now_year").val(value);
chooseQuarter('1');
}
});
</script>
</body>
</html>