1、index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>大数据经纪智慧屏</title>
<script type="text/javascript" src="../static/js/jquery.js"></script>
<link rel="stylesheet" href="../static/css/comon0.css">
</head>
<script type="text/javascript">
$(document).ready(function(){
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var mon = myDate.getMonth() + 1;//当前月
var ndate = myDate.getDate();//当前日
myDate.setTime(myDate.getTime() + 24*60*60*1000);
var ldate = myDate.getDate(); //明天
var lyear = year + 1 ; //明年年份
if (`${mon}`.length == 1) {
mon = "0" + mon;
}
if (`${ndate}`.length == 1) {
ndate = "0" + ndate;
}
if (`${ldate}`.length == 1) {
ldate = "0" + ldate;
}
var nowDate =year+'-'+mon+'-'+ndate;//今天
var lastDate =year+'-'+mon+'-'+ldate;//明天
var nowYear =year + "-01-01";//今年
var lastYear = lyear + "-01-01";//明年
//新增代码
//智慧屏
$(function(){
//请求参数会员信息，会员信息和保费
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/getVipAndPremium",
//数据，json字符串
data : null,
//请求成功
success : function(vipPResult) {
// <li><h2>1824</h2><span>当月保费</span></li> <li><h2>1920</h2><span>上月保费</span></li> <li><h2>19%</h2><span>上个月环比增长率</span></li>
// {"c_VALID_VIP": 169879,"up_PRM_SCALE": 0.67,"c_MONTH_PREMIUM": 5140250.96,"up_MONTH_PREMIUM": 18926591.56,
// "c_VIP_MONEYTOT": 442401.8,"c_PREMIUM_TASK": 45000,"c_TIME_PROGRESS": 508843.43 }
var monthP = (vipPResult.c_MONTH_PREMIUM/10000).toFixed(2); //当月保费
var upMonthP = (vipPResult.up_MONTH_PREMIUM/10000).toFixed(2);//上个月保费
var upMonthS = vipPResult.up_PRM_SCALE;//上个月环比率
var vaildVip = vipPResult.c_VALID_VIP;//会籍期内会员
var VipMoney = (vipPResult.c_VIP_MONEYTOT/10000).toFixed(2);//权益余额
//时间进度达成率
var timePro = (vipPResult.c_TIME_PROGRESS/10000).toFixed(2);//时间进度达成率
month_pre="<li><h2>"+monthP+"</h2><span>当月保费/万元</span></li> <li><h2>"+upMonthP+"</h2><span>上月保费/万元</span></li> <li><h2>"+upMonthS+"%</h2><span>上月环比增长率</span></li>";
document.getElementById("month_pre").innerHTML = month_pre;
// <li><h2>1824</h2><span>会籍期内会员</span></li><li><h2>1920</h2><span>权益余额</span></li><li><h2>19%</h2><span>保费时间达成率</span></li>
month_vip="<li><h2>"+vaildVip+"</h2><span>会籍期内会员</span></li><li><h2>"+VipMoney+"</h2><span>权益余额/万元</span></li><li><h2>"+timePro+"%</h2><span>保费时间达成率</span></li>";
document.getElementById("month_vip").innerHTML = month_vip;
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
});
//
//保费和会员
$.get("/queryVipPremiun", {crt_tm: nowDate},function (result) {
//{c_YEAR_PREMIUM: 4280.4, c_CRT_TM: "2020-07-01", c_VIP_TOTAL: 144525}
var yearpremium = (result.c_YEAR_PREMIUM/10000).toFixed(2);//年保费
var crttm = result.c_CRT_TM;//时间
var viptotal = result.c_VIP_TOTAL;
//保费和会员数
vip_premium = "<ul class=\"clearfix\"><li class=\"pulll_left counter\">"+ yearpremium +"</li><li class=\"pulll_left counter\">"+ viptotal +"</li></ul>";
document.getElementById("vip_premium").innerHTML = vip_premium;
//日期和天气
weather = "<span>日期：</span><span>" + crttm + "</span>";
document.getElementById("weather").innerHTML = weather;
});
//新会员
$.get("/queryUserNow",{indexName:"xls_member_sum", groupName:"lookupResult.group_worker.keyword",
groupList:"车险转换,车险批量转换", registerTime:"lookupResult.register_time",
registerFrom:nowDate,registerTo:lastDate,
includes:"lookupResult.name,lookupResult.group_worker,lookupResult.member_level,lookupResult.depname3",
lookupResult:"lookupResult"}, function (data) {
//{name: "用户H00184093", groupWorker: "默认", memberLevel: "黑铁", depName3: "深圳宝安营业部"}
//{name: "黄护安", groupWorker: "默认", memberLevel: "黄金", depName3: "惠州营业部"}
//{name: "用户H00183986", groupWorker: "默认", memberLevel: "钻石", depName3: "深圳宝安营业部"}
for(j = 0,len=data.length; j < len; j++) {
var name = data[j].name;
var memberLevel = data[j].memberLevel;
var groupWorker = data[j].groupWorker;
var depName3 = data[j].depName3;
//日期和天气
vip_desc = "<li><p>" + name + " - " + memberLevel + " - " + groupWorker +" - " + depName3 + "</p></li>";
$("#vip_desc ul").append(vip_desc);
}
//document.getElementById("vip_desc").innerHTML = vip_desc;
//$("#vip_desc ul").html(vip_desc);
var html=$(".wrap ul").html()
$(".wrap ul").append(html)
var ls=$(".wrap li").length/2+1
i=0
ref = setInterval(function(){
i++
if(i==ls){
i=1
$(".wrap ul").css({marginTop:0})
$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
}
$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
},2400);
});
//优秀店长
$.get("/queryRangAggs", {indexName:"xls_member_sum",groupName:"lookupResult.group_worker.keyword",
groupList:"车险转换,车险批量转换,互联网业务部双十一抽奖会员引流", codeName:"lookupResult.top_code.keyword",
codeList:"H00002539,H00013960,H00002014,H00003737",registerTime:"lookupResult.register_time",
registerFrom:nowYear,registerTo:lastYear,endTime:"lookupResult.vip_end_time",
endFrom:nowDate,endTo:"2099-01-01", aggName:"lookupResult.top_name.keyword",
aggSize:"5"},function (resultData) {
// "name": "严伟才","value": 1}
for(i = 0,len=resultData.length; i < len; i++) {
var group = resultData[i].name;
var groupCount = resultData[i].value;
var number = i+1;
//优秀店长
var dz_desc;
//<li class="clearfix"> <span class="pulll_left"><img src="../static/images/head.jpg">1今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>
dz_desc = "<li class=\"clearfix\"> <span class=\"pulll_left\"><img src=\"../static/images/head.jpg\">" + number + "优秀店长：</span> <span class=\"pulll_right\">" + group + ", 店员数据量：" + groupCount + "</span> </li>";
$("#dz_desc_ul").append(dz_desc);
//$("#dz_desc ul").html(dz_desc);
}
//document.getElementById("dz_desc_ul").innerHTML = dz_desc;
var html2=$(".adduser ul").html()
$(".adduser ul").append(html2)
var ls=$(".adduser li").length/2+1
a=0
ref = setInterval(function(){
a++
if(a==ls){
a=1
$(".adduser ul").css({marginTop:0})
$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
}
$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
},4300);
});
})
</script>
<body>
<div class="loading">
<div class="loadbox"> <img src="../static/images/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
<h1><img src="../static/images/logo.png">大数据经纪智慧屏</h1>
<div id="weather" class="weather"><img src="../static/images/weather.png"> </div>
</div>
<div class="mainbox">
<ul class="clearfix">
<li>
<div class="boxall" style="height: 2.7rem">
<div class="alltitle">智慧屏</div>
<div class="sycm">
<ul id="month_pre" class="clearfix">
<!--<li><h2>1824</h2><span>当月保费</span></li>-->
<!--<li><h2>1920</h2><span>上月保费</span></li>-->
<!--<li><h2>19%</h2><span>上个月环比增长率</span></li>-->
</ul>
<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
<ul id="month_vip" class="clearfix">
<!--<li><h2>1824</h2><span>会籍期内会员</span></li>-->
<!--<li><h2>1920</h2><span>权益余额</span></li>-->
<!--<li><h2>19%</h2><span>保费时间达成率</span></li>-->
</ul>
</div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 2.65rem">
<div class="alltitle">车险转换激活比例</div>
<div class="sy" id="echarts1"></div>
<div class="sy" id="echarts2"></div>
<div class="sy" id="echarts3"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 2.95rem">
<div class="alltitle">会员职群区分比例</div>
<div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
<div class="boxfoot"></div>
</div>
</li>
<li>
<div class="bar">
<div id="vip_premium" class="barbox">
<!-->数据展示<-->
</div>
<div class="barbox2">
<ul class="clearfix">
<li class="pulll_left">当年保费 / 万元</li>
<li class="pulll_left">当年会员</li>
</ul>
</div>
</div>
<div class="map">
<div class="map1"><img src="../static/images/lbx.png"></div>
<div class="map2"><img src="../static/images/jt.png"></div>
<div class="map3"><img src="../static/images/map.png"></div>
<div class="map4" id="map_1"></div>
</div>
</li>
<li>
<div class="boxall" style="height:5.2rem">
<div class="alltitle">会员信息</div>
<div class="tabs">
<ul class="clearfix">
<li><a class="active" href="#">当天</a></li>
<li><a href="#">当月</a></li>
<li><a href="#">当年</a></li>
</ul>
</div>
<div class="clearfix">
<div class="sy" id="echarts6"></div>
<div class="sy" id="echarts7"></div>
<div class="sy" id="echarts8"></div>
</div>
<div class="addnew">
<div class="tit02"><span>年度最佳店长(不包含车险转换，双十一)</span></div>
<div id="dz_desc" class="adduser">
<ul id="dz_desc_ul" class="clearfix">
<!--<li class="clearfix"> <span class="pulll_left"><img src="../static/images/head.jpg">1今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>-->
<!--<li class="clearfix"> <span class="pulll_left"><img src="../static/images/head.jpg">2今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>-->
<!--<li class="clearfix"> <span class="pulll_left"><img src="../static/images/head.jpg">3今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>-->
<!--<li class="clearfix"> <span class="pulll_left"><img src="../static/images/head.jpg">4今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>-->
</ul>
</div>
</div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.4rem">
<div class="alltitle">实时新增会员信息（不包含车险转换）</div>
<div id="vip_desc" class="wrap">
<ul id="vip_desc_ul">
<!--<li>-->
<!--<p>1李东梁-支付宝支付-120元-XXX门店</p>-->
<!--</li>-->
<!--<li>-->
<!--<p>2李东梁-支付宝支付-120元-XXX门店</p>-->
<!--</li>-->
<!--<li>-->
<!--<p>3李东梁-支付宝支付-120元-XXX门店</p>-->
<!--</li>-->
<!--<li>-->
<!--<p>4李东梁-支付宝支付-120元-XXX门店</p>-->
<!--</li>-->
<!--<li>-->
<!--<p>5李东梁-支付宝支付-120元-XXX门店</p>-->
<!--</li>-->
<!--<li>-->
<!--<p>6李东梁-支付宝支付-120元-XXX门店</p>-->
<!--</li>-->
</ul>
</div>
<div class="boxfoot"></div>
</div>
</li>
</ul>
</div>
<div class="back"></div>
<script language="JavaScript" src="../static/js/js.js"></script>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/china.js"></script>
<script type="text/javascript" src="../static/js/area_echarts.js"></script>
<script type="text/javascript">
$(document).ready(function () {
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart6.resize();
myChart7.resize();
myChart8.resize();
})
window.addEventListener("resize", function () {
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart6.resize();
myChart7.resize();
myChart8.resize();
});
</script>
<!--会员信息-->
<script type="text/javascript">
$(function(){
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var mon = myDate.getMonth() + 1;//当前月
var ndate = myDate.getDate();//当前日
myDate.setTime(myDate.getTime() + 24*60*60*1000);
var ldate = myDate.getDate(); //明天
if (`${mon}`.length == 1) {
mon = "0" + mon;
}
if (`${ndate}`.length == 1) {
ndate = "0" + ndate;
}
if (`${ldate}`.length == 1) {
ldate = "0" + ldate;
}
var nowDate = year + '-' + mon + '-' + ndate;//今天
var lastDate = year + '-' + mon + '-' + ldate;//明天
//请求参数会员信息，当天，当月，当年。
var bodyList = {
indexName: "xls_member_sum", registerTime: "lookupResult.register_time", registerFrom: nowDate,
registerTo: lastDate, groupName: "车险转换", vipEndTime: "lookupResult.vip_end_time"
};
$.ajax({
//请求方式
type: "GET",
//请求地址
url: "/dateQueryTotal",
//数据，json字符串
data: bodyList,
//请求成功
success: function (resultTotal) {
//{"vipTotal": 7,"groupTotal": 1,"endTotal": 3}
var vipTotal = resultTotal.vipTotal;
var groupTotal = resultTotal.groupTotal;
var endTotal = resultTotal.endTotal;
myChart6.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#0088cc',
label: {
normal: {
position: 'center'
}
},
data: [{
value: vipTotal,
name: '新增会员',
label: {
normal: {
formatter: vipTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}]
}]
});
myChart7.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#fccb00',
label: {
normal: {
position: 'center'
}
},
data: [{
value: groupTotal,
name: '车险转换会员',
label: {
normal: {
formatter: groupTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
},
{
value: groupTotal / vipTotal,
name: '车险转换会员占比',
label: {
normal: {
formatter: '占比' + Math.round(groupTotal / vipTotal * 100) + '%',
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
});
myChart8.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#62b62f',
label: {
normal: {
position: 'center'
}
},
data: [{
value: endTotal,
name: '新增付费会员',
label: {
normal: {
formatter: endTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}]
}]
})
},
//请求失败，包含具体的错误信息
error: function (e) {
console.log(e.status);
console.log(e.responseText);
}
});
});
// 间歇执行 setVipDesc是被调用的方法名称
$(function(){
setInterval(function(){setVipDesc()}, 60*1000*10);
});
//点击事件
//新增代码 定时异步调用
function setVipDesc() {
//$(function(){
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var mon = myDate.getMonth() + 1;//当前月
var ndate = myDate.getDate();//当前日
myDate.setTime(myDate.getTime() + 24*60*60*1000);
var ldate = myDate.getDate();//明日
if (`${mon}`.length == 1) {
mon = "0" + mon;
}
if (`${ndate}`.length == 1) {
ndate = "0" + ndate;
}
if (`${ldate}`.length == 1) {
ldate = "0" + ldate;
}
var nowDate = year + '-' + mon + '-' + ndate;//今天
var lastDate = year + '-' + mon + '-' + ldate;//明天
//请求参数会员信息，当天，当月，当年。
var bodyList = {
indexName: "xls_member_sum", registerTime: "lookupResult.register_time", registerFrom: nowDate,
registerTo: lastDate, groupName: "车险转换", vipEndTime: "lookupResult.vip_end_time"
};
$.ajax({
//请求方式
type: "GET",
//请求地址
url: "/dateQueryTotal",
//数据，json字符串
data: bodyList,
//请求成功
success: function (resultTotal) {
//{"vipTotal": 7,"groupTotal": 1,"endTotal": 3}
var vipTotal = resultTotal.vipTotal;
var groupTotal = resultTotal.groupTotal;
var endTotal = resultTotal.endTotal;
myChart6.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#0088cc',
label: {
normal: {
position: 'center'
}
},
data: [{
value: vipTotal,
name: '新增会员',
label: {
normal: {
formatter: vipTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}]
}]
});
myChart7.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#fccb00',
label: {
normal: {
position: 'center'
}
},
data: [{
value: groupTotal,
name: '车险转换会员',
label: {
normal: {
formatter: groupTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
},
{
value: groupTotal / vipTotal,
name: '车险转换会员占比',
label: {
normal: {
formatter: '占比' + Math.round(groupTotal / vipTotal * 100) + '%',
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
});
myChart8.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#62b62f',
label: {
normal: {
position: 'center'
}
},
data: [{
value: endTotal,
name: '新增付费会员',
label: {
normal: {
formatter: endTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}]
}]
})
},
//请求失败，包含具体的错误信息
error: function (e) {
console.log(e.status);
console.log(e.responseText);
}
});
}
//});
var myChart6 = echarts.init(document.getElementById('echarts6'));
option6 = {
series: []
};
var myChart7 = echarts.init(document.getElementById('echarts7'));
option7 = {
series: []
};
var myChart8 = echarts.init(document.getElementById('echarts8'));
option8 = {
series: []
};
setTimeout(function () {
myChart6.setOption(option6);
myChart7.setOption(option7);
myChart8.setOption(option8);
}, 500);
</script>
<!--会员激活比例-->
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('echarts1'));
option1 = {
series: []
};
var myChart3 = echarts.init(document.getElementById('echarts3'));
option3 = {
series: []
};
var myChart2 = echarts.init(document.getElementById('echarts2'));
option2 = {
series: []
};
//新增代码
$(function(){
//请求参数"车险转换","车险批量转换"
var bodyList = {indexName:"xls_member_sum",group1:"车险转换", group2:"车险批量转换"};
//
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/carStateQuery",
//数据，json字符串
data : bodyList,
//请求成功
success : function(carStateResult) {
var vipState=0;
var cxzhTotal=0;
var cxzhState=0;
var cxzhScale=0;
var cxplTotal=0;
var cxplState=0;
var cxplScale=0.0;
//[{"name": "车险转换","numCount": 4,"stateCount": 0},
//{"name": "车险批量转换","numCount": 2,"stateCount": 0}]
for (var i = 0; i < carStateResult.length; i++) {
if (carStateResult[i].name=="车险批量转换") {
cxplTotal=carStateResult[i].numCount;
cxplState=carStateResult[i].stateCount;
cxplScale=carStateResult[i].loginScale;
}
if (carStateResult[i].name=="车险转换") {
cxzhTotal=carStateResult[i].numCount;
cxzhState=carStateResult[i].stateCount;
cxzhScale=carStateResult[i].loginScale;
}
vipState +=carStateResult[i].stateCount;
}
//激活人数
myChart1.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#0088cc',
label: {
normal: {
position: 'center'
}
},
data: [{
value: vipState,
name: '激活人数',
label: {
normal: {
formatter: vipState + '',
textStyle: {
fontSize: 20,
color: '#fff'
}
}
}
},
]
}]
});
//车险批量转换
myChart3.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#fccb00',
label: {
normal: {
position: 'center'
}
},
data: [{
value: cxplState,
name: '激活人次',
label: {
normal: {
formatter: cxplState + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}, {
value: cxplScale,
name: '激活率',
label: {
normal: {
formatter: '占比' + cxplScale + '%',
// function (params) {
// return '占比' + Math.round(cxzhState / cxzhTotal * 100) + '%'
// },
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
});
//车险转换
myChart2.setOption({
series:{
type: 'pie',
radius: ['70%', '80%'],
color: '#62b62f',
label: {
normal: {
position: 'center'
}
},
data: [{
value: cxzhState,
name: '激活人次',
label: {
normal: {
formatter: cxzhState + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}, {
value: cxzhScale,
name: '激活率',
label: {
normal: {
formatter: '占比' + cxzhScale + '%',
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}
})
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
});
// 间歇执行 setVipDesc是被调用的方法名称
$(function(){
setInterval(function(){setVildDesc()}, 60*1000*10);
});
function setVildDesc() {
//请求参数"车险转换","车险批量转换"
var bodyList = {indexName:"xls_member_sum",group1:"车险转换", group2:"车险批量转换"};
//
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/carStateQuery",
//数据，json字符串
data : bodyList,
//请求成功
success : function(carStateResult) {
var vipState=0;
var cxzhTotal=0;
var cxzhState=0;
var cxzhScale=0;
var cxplTotal=0;
var cxplState=0;
var cxplScale=0.0;
//[{"name": "车险转换","numCount": 4,"stateCount": 0},
//{"name": "车险批量转换","numCount": 2,"stateCount": 0}]
for (var i = 0; i < carStateResult.length; i++) {
if (carStateResult[i].name=="车险批量转换") {
cxplTotal=carStateResult[i].numCount;
cxplState=carStateResult[i].stateCount;
cxplScale=carStateResult[i].loginScale;
}
if (carStateResult[i].name=="车险转换") {
cxzhTotal=carStateResult[i].numCount;
cxzhState=carStateResult[i].stateCount;
cxzhScale=carStateResult[i].loginScale;
}
vipState +=carStateResult[i].stateCount;
}
//激活人数
myChart1.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#0088cc',
label: {
normal: {
position: 'center'
}
},
data: [{
value: vipState,
name: '激活人数',
label: {
normal: {
formatter: vipState + '',
textStyle: {
fontSize: 20,
color: '#fff'
}
}
}
},
]
}]
});
//车险批量转换
myChart3.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#fccb00',
label: {
normal: {
position: 'center'
}
},
data: [{
value: cxplState,
name: '激活人次',
label: {
normal: {
formatter: cxplState + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}, {
value: cxplScale,
name: '激活率',
label: {
normal: {
formatter: '占比' + cxplScale + '%',
// function (params) {
// return '占比' + Math.round(cxzhState / cxzhTotal * 100) + '%'
// },
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
});
//车险转换
myChart2.setOption({
series:{
type: 'pie',
radius: ['70%', '80%'],
color: '#62b62f',
label: {
normal: {
position: 'center'
}
},
data: [{
value: cxzhState,
name: '激活人次',
label: {
normal: {
formatter: cxzhState + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}, {
value: cxzhScale,
name: '激活率',
label: {
normal: {
formatter: '占比' + cxzhScale + '%',
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}
})
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
};
setTimeout(function () {
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option3);
}, 500);
</script>
<!--职群分布-->
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('echarts4'));
//var plantCap = [{name: '工业', value: '222'}, {name: '农业', value: '115'}, {name: '互联网', value: '113'}, {name: '医疗', value: '95'}, {name: '文学', value: '92'}, {name: '服装', value: '87'}, {name: '裤子', value: '52'}];
var plantCap=[];
var datas = [];
$(function(){
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var lyear = year + 1 ;
var nowYear =year + "-01-01";//今年
var lastYear = lyear + "-01-01";//明年
//请求参数
var bodyList = {indexName:"xls_member_sum",rangeQueryTime:"lookupResult.register_time",
termsQueryName:"lookupResult.group_worker.keyword",termsQueryList:"车险转换,车险批量转换,默认,互联网业务部双十一抽奖会员引流",
from:nowYear,to:lastYear};
//
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/queryIndexNotMustRangAggs",
//数据，json字符串
data : bodyList,
//请求成功
success : function(rangAggsResult) {
for (var i = 0; i < rangAggsResult.length; i++) {
var item = rangAggsResult[i];
var itemToStyle = datalist[i];
datas.push({
name: item.value + '\n' + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 14
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity
}
},
})
}
myChart.setOption({
series: [{
data: datas
}]
});
var plantCap=rangAggsResult;
//plantCap = [...rangAggsResult];
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
});
//现在这个方法不能清理幕布
// 间歇执行 setVipDesc是被调用的方法名称
// $(function(){
// setInterval(function(){setGroupDesc()}, 6*1000);
// });
function setGroupDesc() {
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var lyear = year + 1 ;
var nowYear =year + "-01-01";//今年
var lastYear = lyear + "-01-01";//明年
//请求参数
var bodyList = {indexName:"xls_member_sum",rangeQueryTime:"lookupResult.register_time",
termsQueryName:"lookupResult.group_worker.keyword",termsQueryList:"车险转换,车险批量转换,默认,互联网业务部双十一抽奖会员引流",
from:nowYear,to:lastYear};
//
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/queryIndexNotMustRangAggs",
//数据，json字符串
data : bodyList,
//请求成功
success : function(rangAggsResult) {
for (var i = 0; i < rangAggsResult.length; i++) {
var item = rangAggsResult[i];
var itemToStyle = datalist[i];
datas.push({
name: item.value + '\n' + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 14
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity
}
},
})
}
//清理
myChart.clear();
myChart.setOption({
series: [{
data: datas
}]
});
// var plantCap=rangAggsResult;
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
};
var datalist = [{
offset: [56, 48],
symbolSize: 110,
color: 'rgba(73,188,247,.14)',
}, {
offset: [30, 70],
symbolSize: 70,
color: 'rgba(73,188,247,.14)'
}, {
offset: [0, 43],
symbolSize: 60,
color: 'rgba(73,188,247,.14)'
}, {
offset: [93, 30],
symbolSize: 70,
color: 'rgba(73,188,247,.14)'
}, {
offset: [26, 19],
symbolSize: 65,
color: 'rgba(73,188,247,.14)'
}, {
offset: [75, 75],
symbolSize: 60,
color: 'rgba(73,188,247,.14)'
}, {
offset: [100, 75],
symbolSize: 52,
color: 'rgba(73,188,247,.14)'
}];
option = {
grid: {
show: false,
top: 10,
bottom: 10
},
xAxis: [{
gridIndex: 0,
type: 'value',
show: false,
min: 0,
max: 100,
nameLocation: 'middle',
nameGap: 5
}],
yAxis: [{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: 'middle',
nameGap: 30
}],
series: [{
type: 'scatter',
symbol: 'circle',
symbolSize: 60,
label: {
normal: {
show: true,
formatter: '{b}',
color: '#FFF',
textStyle: {
fontSize: '14'
}
},
},
itemStyle: {
symbolSize: 60,
normal: {
color: '#F30'
}
},
data: datas
}]
};
myChart.setOption(option);
$(document).ready(function () {
myChart.resize();
})
window.addEventListener("resize", function () {
myChart.resize();
});
</script>
<script type="text/javascript" src="../static/js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.countup.min.js"></script>
<script type="text/javascript">
$('.counter').countUp();
</script>
</body>
</html>
1.1、前端目录结构
1.2 静态页面介绍
1、CSS目录为渲染样式；
2、images是图片，导入你自己的图片改成相同的名字就可以使用；
3、js是js依赖，以及开源的echarts
2、pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.7.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.test.bigdata</groupId>
<artifactId>es-tag</artifactId>
<version>1.0</version>
<name>bigdata-es</name>
<description>bigdata-es</description>
<properties>
<java.version>1.8</java.version>
<spark.version>2.1.0</spark.version>
<scala.version>2.11</scala.version>
</properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.codehaus.janino</groupId>
<artifactId>commons-compiler</artifactId>
<version>3.0.8</version>
</dependency>
<dependency>
<groupId>org.codehaus.janino</groupId>
<artifactId>janino</artifactId>
<version>3.0.8</version>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-elasticsearch</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.59</version>
</dependency>
<dependency>
<groupId>org.elasticsearch</groupId>
<artifactId>elasticsearch</artifactId>
<version>7.2.0</version>
</dependency>
<!-- Java High Level REST Client -->
<dependency>
<groupId>org.elasticsearch.client</groupId>
<artifactId>elasticsearch-rest-high-level-client</artifactId>
<version>7.2.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork>
</configuration>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/resources</directory>
<filtering>true</filtering>
<excludes>
<exclude>application-*.properties</exclude>
</excludes>
</resource>
<resource>
<directory>src/main/resources</directory>
<filtering>false</filtering>
<includes>
<include>application-${build.profile.id}.properties</include>
</includes>
</resource>
</resources>
</build>
<profiles>
<!--开发环境-->
<profile>
<id>dev</id>
<properties>
<build.profile.id>dev</build.profile.id>
</properties>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
</profile>
<!--生产环境-->
<profile>
<id>prod</id>
<properties>
<build.profile.id>prod</build.profile.id>
</properties>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
</profile>
</profiles>
</project>
3、application.properties
用于替换开发环境和生产环境的变量
spring.profiles.active=@build.profile.id@
4、application-dev.properties
server.port=8080
spring.devtools.livereload.enabled=true
spring.thymeleaf.prefix=classpath:/templates/
spring.mvc.static-path-pattern=/static/**
logging.config=classpath:logback.xml
# redis
spring.redis.host=redis
spring.redis.port=6379
# elasticsearch,多个逗号隔开
elasticsearch.ip=ip:9200,ip1:9200
5、application-prod.properties
server.port=8081
spring.devtools.livereload.enabled=false
spring.thymeleaf.prefix=classpath:/templates/
spring.mvc.static-path-pattern=/static/**
logging.config=classpath:logback.xml
# redis
spring.redis.host=redis
spring.redis.port=6379
# elasticsearch
elasticsearch.ip=ip:9200,ip1:9200
6、logback.xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<!-- 属性文件 -->
<property name="logDir" value="/test/log/bigdata/"/>
<!-- 默认的控制台日志输出，一般生产环境都是后台启动，这个没太大作用 -->
<appender name="stdout" class="ch.qos.logback.core.ConsoleAppender">
<!--<Encoding>UTF-8</Encoding>-->
<layout class="ch.qos.logback.classic.PatternLayout">
<pattern>[%date]|%level|%thread|${PID:-}| |traceId:%X{X-B3-TraceId}|spanId:%X{X-B3-SpanId}|parentId:%X{X-B3-ParentSpanId}|%logger{50}:%L >>> %msg%n</pattern>
</layout>
</appender>
<!-- 配置文件轮转 -->
<appender name="logfile" class="ch.qos.logback.core.rolling.RollingFileAppender">
<!--<Encoding>UTF-8</Encoding>-->
<File>${logDir}/bigdata.log</File>
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
<FileNamePattern>${logDir}/history/bigdata.%d{yyyy-MM-dd}.log.gz</FileNamePattern>
<maxHistory>180</maxHistory>
</rollingPolicy>
<layout class="ch.qos.logback.classic.PatternLayout">
<pattern>%date [%thread] %-5level %logger{50}:%L - %msg%n</pattern>
</layout>
<encoder>
<!--格式化输出：%d表示日期，%thread表示线程名，%-5level：级别从左显示5个字符宽度%msg：日志消息，%n是换行符-->
<pattern>[%date]|%level|%thread|${PID:-}| |traceId:%X{X-B3-TraceId}|spanId:%X{X-B3-SpanId}|parentId:%X{X-B3-ParentSpanId}|%logger{50}:%L >>> %msg%n</pattern>
<charset>UTF-8</charset>
</encoder>
</appender>
<!-- root 默认日志配置 ， 注意这里的级别哈！小心生产环境用DEBUG，压爆你的磁盘！-->
<root level="INFO">
<appender-ref ref="logfile"/>
<appender-ref ref="stdout"/>
</root>
</configuration>
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
