1078 lines
52 KiB
HTML
1078 lines
52 KiB
HTML
{extend name="foxcms_apply" /}
|
||
|
||
{block name="css"}
|
||
<style>
|
||
#tabsCardAccess{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
#tabsCardEnter{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.content-top-operation{
|
||
padding: 12px 16px !important;
|
||
}
|
||
.content-top-operation .item-input {
|
||
width: 220px !important;
|
||
}
|
||
#tabsCardVisitorAnalyse .foxui-tabs-item{
|
||
padding: 0 30px !important;
|
||
}
|
||
#tabsCardEnter .foxui-tabs-item{
|
||
padding: 0 30px !important;
|
||
}
|
||
#tabsCardAccess .foxui-tabs-item{
|
||
padding: 0 30px !important;
|
||
}
|
||
</style>
|
||
{/block}
|
||
|
||
{block name="body"}
|
||
|
||
<div class="foxcms-content-inner">
|
||
<!-- page content -->
|
||
<div id="tabsCardHeader" class="foxui-tabs foxui-type-line">
|
||
<div class="foxui-tabs-header">
|
||
<div class="foxui-tabs-item is-active" data-index="0">概况</div>
|
||
<div class="foxui-tabs-item" data-index="1">访客分析</div>
|
||
<div class="foxui-tabs-item" data-index="2">入口页面</div>
|
||
<div class="foxui-tabs-item " data-index="3">受访页面</div>
|
||
</div>
|
||
<div class="foxui-tabs-content">
|
||
<div class="foxui-tabs-pane">
|
||
|
||
<div class="index-content" >
|
||
<div class="foxui-row">
|
||
<div class="section">
|
||
<div class="foxui-row foxui-gutter-6">
|
||
<div class="foxui-col-sm-24 foxui-col-xs-24">
|
||
<div class="foxui-bg-white foxui-padding-top-20 foxui-padding-left-20 foxui-padding-right-20">今日流量</div>
|
||
<div class="foxui-table foxui-padding-20">
|
||
<ul class="foxui-table-thead">
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-th"></div>
|
||
<div class="foxui-table-th">浏览量(PV)</div>
|
||
<div class="foxui-table-th">访客数(UV)</div>
|
||
<div class="foxui-table-th">IP数</div>
|
||
<div class="foxui-table-th">平均访问时长</div>
|
||
</li>
|
||
</ul>
|
||
<ul class="foxui-table-tbody">
|
||
|
||
{foreach traffics as $key=>$vo }
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-td">{$vo.text}</div>
|
||
<div class="foxui-table-td" style="font-weight:bold;">{$vo.pv}</div>
|
||
<div class="foxui-table-td" style="font-weight:bold;">{$vo.uv}</div>
|
||
<div class="foxui-table-td" style="font-weight:bold;">{$vo.ip}</div>
|
||
<div class="foxui-table-td" style="font-weight:bold">{$vo.avgTime}</div>
|
||
</li>
|
||
{/foreach}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foxui-col-sm-14 foxui-col-xs-14">
|
||
<div class="section section-panel">
|
||
<div class="foxui-bg-white">
|
||
|
||
<div class="panel-title">
|
||
<h3>
|
||
<i class="foxui-icon-xiaoxi-o"></i>
|
||
<span>访问概况</span>
|
||
</h3>
|
||
</div>
|
||
<div class="content">
|
||
<div class="foxui-tabs foxui-type-line foxui-position-right" id="viewTabs">
|
||
<div class="foxui-tabs-header">
|
||
<div class="foxui-tabs-item is-active">今日</div>
|
||
<div class="foxui-tabs-item">昨日</div>
|
||
<div class="foxui-tabs-item">近7日</div>
|
||
<div class="foxui-tabs-item">近30日</div>
|
||
</div>
|
||
<div class="foxui-tabs-content">
|
||
<div class="foxui-tabs-pane todayChart">
|
||
<div class="foxui-row foxui-align-items-center">
|
||
<div class="foxui-col-xs-6 foxui-col-sm-6">
|
||
<div class="pv">
|
||
<p>
|
||
<span>总浏览量(PV)</span>
|
||
<i class="foxui-icon-wenti-f pv-tip"></i>
|
||
</p>
|
||
<h1>4</h1>
|
||
</div>
|
||
<div class="uv">
|
||
<p>
|
||
<span>总访问量(UV)</span>
|
||
<i class="foxui-icon-question-solid uv-tip"></i>
|
||
</p>
|
||
<h1>5</h1>
|
||
</div>
|
||
</div>
|
||
<div class="foxui-col-xs-18 foxui-col-sm-18">
|
||
<div class="echart-box" id="todayChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foxui-tabs-pane yesterdayChart">
|
||
<div class="foxui-row foxui-align-items-center">
|
||
<div class="foxui-col-xs-6 foxui-col-sm-6">
|
||
<div class="pv">
|
||
<p>
|
||
<span>总浏览量(PV)</span>
|
||
<i class="foxui-icon-wenti-f pv-tip"></i>
|
||
</p>
|
||
<h1>48</h1>
|
||
</div>
|
||
<div class="uv">
|
||
<p>
|
||
<span>总访问量(UV)</span>
|
||
<i class="foxui-icon-question-solid uv-tip"></i>
|
||
</p>
|
||
<h1>25</h1>
|
||
</div>
|
||
</div>
|
||
<div class="foxui-col-xs-18 foxui-col-sm-18">
|
||
<div class="echart-box" id="yesterdayChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foxui-tabs-pane weekChart">
|
||
<div class="foxui-row foxui-align-items-center">
|
||
<div class="foxui-col-xs-6 foxui-col-sm-6">
|
||
<div class="pv">
|
||
<p>
|
||
<span>总浏览量(PV)</span>
|
||
<i class="foxui-icon-wenti-f pv-tip"></i>
|
||
</p>
|
||
<h1>460</h1>
|
||
</div>
|
||
<div class="uv">
|
||
<p>
|
||
<span>总访问量(UV)</span>
|
||
<i class="foxui-icon-question-solid uv-tip"></i>
|
||
</p>
|
||
<h1>115</h1>
|
||
</div>
|
||
</div>
|
||
<div class="foxui-col-xs-18 foxui-col-sm-18">
|
||
<div class="echart-box" id="weekChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foxui-tabs-pane monthChart">
|
||
<div class="foxui-row foxui-align-items-center">
|
||
<div class="foxui-col-xs-6 foxui-col-sm-6">
|
||
<div class="pv">
|
||
<p>
|
||
<span>总浏览量(PV)</span>
|
||
<i class="foxui-icon-wenti-f pv-tip"></i>
|
||
</p>
|
||
<h1>46</h1>
|
||
</div>
|
||
<div class="uv">
|
||
<p>
|
||
<span>总访问量(UV)</span>
|
||
<i class="foxui-icon-question-solid uv-tip"></i>
|
||
</p>
|
||
<h1>15</h1>
|
||
</div>
|
||
</div>
|
||
<div class="foxui-col-xs-18 foxui-col-sm-18">
|
||
<div class="echart-box" id="monthChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="foxui-col-sm-10 foxui-col-xs-10">
|
||
<div class="section section-panel" style="min-height: 100%">
|
||
<div class="foxui-bg-white">
|
||
|
||
<div class="foxui-col-sm-24 foxui-col-xs-24">
|
||
<div class="foxui-bg-white foxui-padding-top-20 foxui-padding-left-20 foxui-padding-right-20">Top10入口页面</div>
|
||
<div class="foxui-table foxui-padding-20">
|
||
<ul class="foxui-table-thead">
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-th" style="width: 60%; flex:inherit;">入口页面</div>
|
||
<div class="foxui-table-th">浏览量(PV)</div>
|
||
<div class="foxui-table-th">占比</div>
|
||
</li>
|
||
</ul>
|
||
<ul class="foxui-table-tbody">
|
||
{foreach $entranceList as $key=>$vo}
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-td" style="width: 60%; flex:inherit;cursor: pointer;">
|
||
<a>
|
||
{$vo.from_page}
|
||
</a>
|
||
</div>
|
||
<div class="foxui-table-td" style="font-weight:bold">{$vo.count}</div>
|
||
<div class="foxui-table-td" style="font-weight:bold">{$vo.percent}</div>
|
||
</li>
|
||
{/foreach}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!---隔开-->
|
||
<div class="foxui-col-sm-14 foxui-col-xs-14">
|
||
<div class="section section-panel">
|
||
<div class="foxui-bg-white">
|
||
|
||
<div class="panel-title">
|
||
<h3>
|
||
<i class="foxui-icon-xiaoxi-o"></i>
|
||
<span>地域分布</span>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="foxui-tabs foxui-type-line" id="viewRegionTabs">
|
||
<div class="foxui-tabs-header">
|
||
<div class="foxui-tabs-item is-active">今日</div>
|
||
<div class="foxui-tabs-item">昨日</div>
|
||
<div class="foxui-tabs-item">近7日</div>
|
||
</div>
|
||
<div class="foxui-tabs-content">
|
||
|
||
<div class="foxui-tabs-pane">
|
||
<div id="containerToday" style="height: 600px;width: 100%;background:white;margin:20px 0 0;"></div>
|
||
</div>
|
||
|
||
<div class="foxui-tabs-pane">
|
||
<div id="containerYesterday" style="height: 600px;width: 100%;background:white;margin:20px 0 0;"></div>
|
||
</div>
|
||
|
||
<div class="foxui-tabs-pane">
|
||
<div id="containerWeek" style="height: 600px;width: 100%;background:white;margin:20px 0 0;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foxui-col-sm-10 foxui-col-xs-10">
|
||
<div class="section section-panel" style="min-height: 100%">
|
||
<div class="foxui-bg-white">
|
||
|
||
<div class="foxui-col-sm-24 foxui-col-xs-24">
|
||
<div class="foxui-bg-white foxui-padding-top-20 foxui-padding-left-20 foxui-padding-right-20">Top10受访页面</div>
|
||
<div class="foxui-table foxui-padding-20">
|
||
<ul class="foxui-table-thead">
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-th" style="width: 60%; flex:inherit;">受访页面</div>
|
||
<div class="foxui-table-th">浏览量(PV)</div>
|
||
<div class="foxui-table-th">占比</div>
|
||
</li>
|
||
</ul>
|
||
<ul class="foxui-table-tbody">
|
||
|
||
{foreach $visitedList as $key=>$vo}
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-td" style="width: 60%; flex:inherit;cursor: pointer;">
|
||
<a>
|
||
{$vo.from_page}
|
||
</a>
|
||
</div>
|
||
<div class="foxui-table-td" style="font-weight:bold">{$vo.count}</div>
|
||
<div class="foxui-table-td" style="font-weight:bold">{$vo.percent}</div>
|
||
</li>
|
||
{/foreach}
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="foxui-tabs-pane">
|
||
|
||
<div class="diy-form-content">
|
||
<div class="content-top-operation">
|
||
<div class="left">
|
||
<div id="tabsCardVisitorAnalyse" class="foxui-tabs foxui-type-card foxui-margin-top-24">
|
||
<div class="foxui-tabs-header" style="height:32px;">
|
||
<div class="foxui-tabs-item is-active" data-index="0">今天</div>
|
||
<div class="foxui-tabs-item" data-index="1">昨天</div>
|
||
<div class="foxui-tabs-item" data-index="2">最近7天</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right display-flex tabsCardVisitorAnalyse">
|
||
<div class="foxui-input-group">
|
||
<input class="foxui-size-small" placeholder="输入访问IP" value="" name="ip" style="width: 318px;">
|
||
</div>
|
||
<div class="btn-box foxui-margin-left-20">
|
||
<button class="foxui-solid-primary foxui-size-small search-btn-visitorAnalyse">搜索</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section section-panel margin-top-10">
|
||
<div class="foxui-table foxui-table-border-bottom foxui-table-hover foxui-checkbox-group">
|
||
|
||
<ul class="foxui-table-thead foxui-checkbox-head">
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-th">访问时间</div>
|
||
<div class="foxui-table-th">地域</div>
|
||
<div class="foxui-table-th">页面标题</div>
|
||
<div class="foxui-table-th">入口页面</div>
|
||
<div class="foxui-table-th">访问IP</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="foxui-table-tbody foxui-checkbox-list" id="visitorAnalyseTable">
|
||
<!--表格内容-->
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="pagination2" class="margin-top-24"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="foxui-tabs-pane">
|
||
|
||
<div class="diy-form-content">
|
||
<div class="content-top-operation">
|
||
<div class="left">
|
||
<div id="tabsCardEnterPage" class="foxui-tabs foxui-type-card">
|
||
<div class="foxui-tabs-header" style="height:32px;">
|
||
<div class="foxui-tabs-item is-active" data-index="0">今天</div>
|
||
<div class="foxui-tabs-item" data-index="1">昨天</div>
|
||
<div class="foxui-tabs-item" data-index="2">最近7天</div>
|
||
<div class="foxui-tabs-item" data-index="3">最近30天</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right display-flex tabsCardEnterPage">
|
||
<div class="foxui-input-group">
|
||
<input class="foxui-size-small" placeholder="输入标题" value="" name="keyword" style="width: 318px;">
|
||
</div>
|
||
<div class="btn-box foxui-margin-left-20">
|
||
<button class="foxui-solid-primary foxui-size-small search-btn-enterpage">搜索</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section section-panel margin-top-10">
|
||
<div class="foxui-table foxui-table-border-bottom foxui-table-hover foxui-checkbox-group">
|
||
|
||
<ul class="foxui-table-thead foxui-checkbox-head">
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-th">页面标题</div>
|
||
<div class="foxui-table-th">页面URL</div>
|
||
<div class="foxui-table-th">访客数(UV)</div>
|
||
<div class="foxui-table-th">IP数</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="foxui-table-tbody foxui-checkbox-list" id="enterTable">
|
||
<!--表格内容-->
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="pagination1" class="margin-top-24"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="foxui-tabs-pane">
|
||
|
||
<div class="diy-form-content">
|
||
<div class="content-top-operation">
|
||
<div class="left">
|
||
<div id="tabsCardAccessPage" class="foxui-tabs foxui-type-card ">
|
||
<div class="foxui-tabs-header" style="height:32px;">
|
||
<div class="foxui-tabs-item is-active" data-index="0">今天</div>
|
||
<div class="foxui-tabs-item" data-index="1">昨天</div>
|
||
<div class="foxui-tabs-item" data-index="2">最近7天</div>
|
||
<div class="foxui-tabs-item" data-index="3">最近30天</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="right display-flex tabsCardAccessPage">
|
||
<div class="foxui-input-group">
|
||
<input class="foxui-size-small" placeholder="输入标题" value="" name="keyword" style="width: 318px;">
|
||
</div>
|
||
<div class="btn-box foxui-margin-left-20">
|
||
<button class="foxui-solid-primary foxui-size-small search-btn-access-page" name="search">搜索</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section section-panel margin-top-10">
|
||
<div class="foxui-table foxui-table-border-bottom foxui-table-hover foxui-checkbox-group">
|
||
|
||
<ul class="foxui-table-thead foxui-checkbox-head">
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-th">页面标题</div>
|
||
<div class="foxui-table-th">页面URL</div>
|
||
<div class="foxui-table-th">浏览量(PV)</div>
|
||
<div class="foxui-table-th">访客数(UV)</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="foxui-table-tbody foxui-checkbox-list" id="accessTable">
|
||
<!--表格内容-->
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="pagination" class="margin-top-24"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{include file="footed-copy"/}
|
||
{/block}
|
||
|
||
|
||
{block name="js"}
|
||
<script src="{$staticPath}js/index.js"></script>
|
||
<script src="{$staticPath}js/china.js"></script>
|
||
<script>
|
||
$.ajax({
|
||
type: "get",
|
||
url:"{:url('SiteProfile/del30AccessStat')}",
|
||
dataType: "json",
|
||
success: function (res) {
|
||
},
|
||
error: function (res) {
|
||
}
|
||
});
|
||
</script>
|
||
<script type="text/javascript">
|
||
//访问概况
|
||
function accessProfile(param) {
|
||
let indexItem = param.type;
|
||
foxui.loading();
|
||
$.ajax({
|
||
type: "post",
|
||
url: "{:url('SiteProfile/accessProfile')}",
|
||
dataType: "json",
|
||
data:param,
|
||
success: function (res) {
|
||
foxui.closeLoading();
|
||
if (res.code == 1) {
|
||
let data = res.data;
|
||
if(indexItem == 2){
|
||
let pvList = data.pvList;
|
||
let uvList = data.uvList;
|
||
let labelList = data.labelList;
|
||
let pvTotal = data.pvTotal;
|
||
let uvTotal = data.uvTotal;
|
||
$('.yesterdayChart .pv h1').html(pvTotal);
|
||
$('.yesterdayChart .uv h1').html(uvTotal);
|
||
// 昨日
|
||
let yesterdayChart = echarts.init(document.getElementById('yesterdayChart'));
|
||
yesterdayChart.setOption(chartOption({ pvList, uvList, labelList }));
|
||
window.onresize = () => {
|
||
yesterdayChart.resize();
|
||
};
|
||
}else if(indexItem == 3){
|
||
let pvList = data.pvList;
|
||
let uvList = data.uvList;
|
||
let labelList = data.labelList;
|
||
let pvTotal = data.pvTotal;
|
||
let uvTotal = data.uvTotal;
|
||
$('.weekChart .pv h1').html(pvTotal);
|
||
$('.weekChart .uv h1').html(uvTotal);
|
||
|
||
// 近7日
|
||
let weekChart = echarts.init(document.getElementById('weekChart'));
|
||
weekChart.setOption(chartOption({ pvList, uvList, labelList }));
|
||
window.onresize = () => {
|
||
weekChart.resize();
|
||
};
|
||
}else if(indexItem == 4){
|
||
let pvList = data.pvList;
|
||
let uvList = data.uvList;
|
||
let labelList = data.labelList;
|
||
let pvTotal = data.pvTotal;
|
||
let uvTotal = data.uvTotal;
|
||
$('.monthChart .pv h1').html(pvTotal);
|
||
$('.monthChart .uv h1').html(uvTotal);
|
||
|
||
// 近30日
|
||
let monthChart = echarts.init(document.getElementById('monthChart'));
|
||
monthChart.setOption(chartOption({ pvList, uvList, labelList }));
|
||
window.onresize = () => {
|
||
monthChart.resize();
|
||
};
|
||
}else {
|
||
let pvList = data.pvList;
|
||
let uvList = data.uvList;
|
||
let labelList = data.labelList;
|
||
let pvTotal = data.pvTotal;
|
||
let uvTotal = data.uvTotal;
|
||
$('.todayChart .pv h1').html(pvTotal);
|
||
$('.todayChart .uv h1').html(uvTotal);
|
||
// 今日
|
||
let todayChart = echarts.init(document.getElementById('todayChart'));
|
||
todayChart.setOption(chartOption({ pvList, uvList, labelList }));
|
||
window.onresize = () => {
|
||
todayChart.resize();
|
||
};
|
||
}
|
||
}
|
||
},
|
||
error: function (res) {
|
||
foxui.closeLoading();
|
||
}
|
||
});
|
||
}
|
||
//初始化当日（默认）
|
||
accessProfile({'type':1});
|
||
|
||
//地域分布
|
||
function region(param){
|
||
let indexItem = param.type;
|
||
foxui.loading();
|
||
$.ajax({
|
||
type: "get",
|
||
url:"{:url('SiteProfile/region')}",
|
||
dataType: "json",
|
||
data:param,
|
||
success: function (res) {
|
||
foxui.closeLoading();
|
||
if (res.code == 1) {
|
||
let data = res.data;
|
||
if( data.is_auth == 1){
|
||
let dataMap = [],specialMap=[];
|
||
//授权
|
||
dataMap = data.provinceMap;
|
||
specialMap = data.specialMap;
|
||
// // 全国省份列表
|
||
// var dataMap = [{ name: '北京', value:8 }, { name: '天津' }, { name: '上海' }, { name: '重庆' }, { name: '河北' }, { name: '河南' }, { name: '云南' }, { name: '辽宁' },
|
||
// { name: '黑龙江' }, { name: '湖南' }, { name: '安徽' }, { name: '山东' }, { name: '新疆' }, { name: '江苏' }, { name: '浙江' }, { name: '江西' }, { name: '湖北' },
|
||
// { name: '广西' }, { name: '甘肃' }, { name: '山西' }, { name: '内蒙古' }, { name: '陕西' }, { name: '吉林' }, { name: '福建' }, { name: '贵州' }, { name: '广东' },
|
||
// { name: '青海' }, { name: '西藏' }, { name: '四川' }, { name: '宁夏' }, { name: '海南' }, { name: '台湾' }, { name: '香港' }, { name: '澳门' }]
|
||
// // 需要在页面上直接标记出来的城市
|
||
// var specialMap = ['浙江', '云南', '陕西','四川','天津'];
|
||
// 对dataMap进行处理，使其可以直接在页面上展示
|
||
for (var i = 0; i < specialMap.length; i++) {
|
||
for (var j = 0; j < dataMap.length; j++) {
|
||
if (specialMap[i] == dataMap[j].name) {
|
||
dataMap[j].selected = true;
|
||
break;
|
||
}
|
||
|
||
}
|
||
}
|
||
// 绘制图表，准备数据
|
||
let option = {
|
||
tooltip: {
|
||
formatter: function (params) {
|
||
var info = '<p style="font-size:18px">' + params.name + "---" + params.value +'</p><p style="font-size:14px">这里可以写一些，想展示在页面上的别的信息</p>'
|
||
return info;
|
||
},
|
||
backgroundColor: "#ff7f50",//提示标签背景颜色
|
||
textStyle: { color: "#fff" } //提示标签字体颜色
|
||
},
|
||
series: [
|
||
{
|
||
name: '中国',
|
||
type: 'map',
|
||
mapType: 'china',
|
||
selectedMode: 'multiple',
|
||
label: {
|
||
normal: {
|
||
show: true,//显示省份标签
|
||
// textStyle:{color:"#c71585"}//省份标签字体颜色
|
||
},
|
||
emphasis: {
|
||
show: true,//对应的鼠标悬浮效果
|
||
// textStyle:{color:"#800080"}
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: .5,//区域边框宽度
|
||
// borderColor: '#009fe8',//区域边框颜色
|
||
// areaColor:"#ffefd5",//区域颜色
|
||
},
|
||
emphasis: {
|
||
borderWidth: .5,
|
||
borderColor: '#045aca',
|
||
areaColor: "#145eff",
|
||
}
|
||
},
|
||
data: dataMap
|
||
}
|
||
]
|
||
};
|
||
//初始化echarts实例
|
||
if(indexItem == 1){
|
||
let myChart = echarts.init(document.getElementById('containerToday'));
|
||
//使用制定的配置项和数据显示图表
|
||
myChart.setOption(option);
|
||
}else if (indexItem == 2){
|
||
let myChart = echarts.init(document.getElementById('containerYesterday'));
|
||
//使用制定的配置项和数据显示图表
|
||
myChart.setOption(option);
|
||
}else if (indexItem == 3){
|
||
let myChart = echarts.init(document.getElementById('containerWeek'));
|
||
//使用制定的配置项和数据显示图表
|
||
myChart.setOption(option);
|
||
}
|
||
}else{
|
||
//未授权或过期
|
||
let html = `<div class="authorize-content-inner" style="border-radius:0px;text-align: center; color: #909399">
|
||
<div class="authorize-content-body">
|
||
<div class="foxui-padding-top-12 foxui-padding-bottom-20">
|
||
<i class="foxui-icon-warn-solid unauthorized-icon"></i>
|
||
<p class="unauthorized-info">尚未获得商业授权或授权已过期!</p>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
if(indexItem == 1){
|
||
$('#containerToday').empty().append(html);
|
||
}else if (indexItem == 2){
|
||
$('#containerYesterday').empty().append(html);
|
||
}else if (indexItem == 3){
|
||
$('#containerWeek').empty().append(html);
|
||
}
|
||
}
|
||
}else{
|
||
//未授权或过期
|
||
let html = `<div class="authorize-content-inner" style="border-radius:0px;text-align: center; color: #909399">
|
||
<div class="authorize-content-body">
|
||
<div class="foxui-padding-top-12 foxui-padding-bottom-20">
|
||
<i class="foxui-icon-warn-solid unauthorized-icon"></i>
|
||
<p class="unauthorized-info">尚未获得商业授权或授权已过期!</p>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
if(indexItem == 1){
|
||
$('#containerToday').empty().append(html);
|
||
}else if (indexItem == 2){
|
||
$('#containerYesterday').empty().append(html);
|
||
}else if (indexItem == 3){
|
||
$('#containerWeek').empty().append(html);
|
||
}
|
||
}
|
||
},
|
||
error: function (res) {
|
||
foxui.closeLoading();
|
||
}
|
||
});
|
||
}
|
||
region({'type':1});
|
||
|
||
foxui.tabs.$on(function ({ index, id }) {
|
||
if(id === 'tabsCardHeader'){
|
||
if (index === 0) {
|
||
//初始化当日（默认）
|
||
accessProfile({'type':1});
|
||
//地域分布
|
||
region({'type':1});
|
||
} else if (index === 1) {
|
||
//访客分析初始化
|
||
visitorAnalyseInit({'type':1});
|
||
} else if (index === 2) {
|
||
//受访页面初始化
|
||
enterInit({'index':0});
|
||
} else if (index === 3) {
|
||
//受访页面初始化
|
||
accessInit({'index':0});
|
||
}
|
||
}else if (id === 'viewRegionTabs') {
|
||
if (index === 0) {
|
||
region({'type':1});
|
||
} else if (index === 1) {
|
||
region({'type':2});
|
||
} else if (index === 2) {
|
||
region({'type':3});
|
||
}
|
||
}else if (id === 'viewTabs') {
|
||
if (index === 0) {
|
||
accessProfile({'type':1});
|
||
} else if (index === 1) {
|
||
accessProfile({'type':2});
|
||
} else if (index === 2) {
|
||
accessProfile({'type':3});
|
||
} else if (index === 3) {
|
||
accessProfile({'type':4});
|
||
}
|
||
}else if (id === 'tabsCardVisitorAnalyse') {
|
||
//访客分析
|
||
if (index === 0) {
|
||
visitorAnalyseInit({'type':1});
|
||
} else if (index === 1) {
|
||
visitorAnalyseInit({'type':2});
|
||
} else if (index === 2) {
|
||
visitorAnalyseInit({'type':3});
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
|
||
//访客分析
|
||
function visitorAnalyseInit(param){
|
||
let ip = $(".tabsCardVisitorAnalyse").find('input[name="ip"]').val();
|
||
if(param == undefined){
|
||
param = new Object();
|
||
}
|
||
param.ip = ip;
|
||
visitorAnalysePage(param)
|
||
}
|
||
//访客分析
|
||
function visitorAnalysePage(param){
|
||
foxui.loading();
|
||
$.ajax({
|
||
type: "post",
|
||
url:"{:url('SiteProfile/visitorAnalyse')}",
|
||
dataType: "json",
|
||
data:param,
|
||
success: function (res) {
|
||
foxui.closeLoading();
|
||
if (res.code == 1 && res.data) {
|
||
let data = res.data;
|
||
let paginationData = {
|
||
pageSize: data.per_page,
|
||
total: data.total,
|
||
currentPage: data.current_page
|
||
};
|
||
initTable2(paginationData, data.data);
|
||
}
|
||
},
|
||
error: function (res) {
|
||
foxui.closeLoading();
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* @description: 初始化表格
|
||
* @param {*} pageSize
|
||
* @param {*} total
|
||
* @param {*} currentPage
|
||
* @param {*} dataList
|
||
* @return {*}
|
||
* @Date: 2022-01-12 10:55:11
|
||
*/
|
||
function initTable2({ pageSize, total, currentPage }, dataList) {
|
||
// 追加表格 html
|
||
_appendToTable2(dataList);
|
||
//分页
|
||
foxui.pagination(
|
||
{
|
||
el: '#pagination2',
|
||
currentPage: currentPage,
|
||
total: total,
|
||
onchange: function ({ currentPage, pageSize, total }, callback) {
|
||
callback({ total, pageSize, currentPage });
|
||
let param = {pageSize, currentPage};
|
||
visitorAnalyseInit(param);
|
||
},
|
||
},
|
||
{
|
||
type: 'plain',
|
||
size: 'mini',
|
||
isShowTotal: true,
|
||
isShowSize: true,
|
||
pageSize: pageSize
|
||
}
|
||
|
||
);
|
||
}
|
||
|
||
/**
|
||
* @description: 追加表格 html
|
||
* @param {*} dataList
|
||
* @return {*}
|
||
* @Date: 2022-01-12 00:18:40
|
||
*/
|
||
function _appendToTable2(dataList) {
|
||
const html = _trsHtml2(dataList);
|
||
$('#visitorAnalyseTable').empty().append(html);
|
||
}
|
||
|
||
/**
|
||
* @description: 表格 html
|
||
* @param {*} dataList
|
||
* @return {*}
|
||
* @Date: 2022-01-12 00:18:52
|
||
*/
|
||
function _trsHtml2(dataList) {
|
||
let htmlArr = [];
|
||
dataList.forEach(item => {
|
||
htmlArr.push(`
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-td">${item.create_time}</div>
|
||
<div class="foxui-table-td">${item.area}</div>
|
||
<div class="foxui-table-td">${item.page_title??""}</div>
|
||
<div class="foxui-table-td blue-color"><a href="${item.from_page}" target="_blank">${item.from_page}</a></div>
|
||
<div class="foxui-table-td">${item.ip}</div>
|
||
</li>
|
||
`);
|
||
});
|
||
return htmlArr.join('');
|
||
}
|
||
|
||
$('.search-btn-visitorAnalyse').click(function () {
|
||
visitorAnalyseInit();
|
||
})
|
||
</script>
|
||
|
||
<script>
|
||
//入口页面
|
||
//点击切换
|
||
$("#tabsCardEnterPage").find(".foxui-tabs-header").children('.foxui-tabs-item').click(function () {
|
||
let index = $(this).attr('data-index');
|
||
enterPage({"index": index})
|
||
})
|
||
|
||
function enterInit(param){
|
||
if(param == undefined){
|
||
param = new Object();
|
||
}
|
||
let keyword = $(".tabsCardEnterPage").find('input[name="keyword"]').val();
|
||
param.keyword = keyword;
|
||
enterPage(param)
|
||
}
|
||
//受访页面
|
||
function enterPage(param){
|
||
$.ajax({
|
||
type: "post",
|
||
url:"{:url('SiteProfile/enterPage')}",
|
||
dataType: "json",
|
||
data:param,
|
||
success: function (res) {
|
||
if (res.code == 1 && res.data) {
|
||
let data = res.data;
|
||
let paginationData = {
|
||
pageSize: data.per_page,
|
||
total: data.total,
|
||
currentPage: data.current_page
|
||
};
|
||
initTable1(paginationData, data.data);
|
||
}
|
||
},
|
||
error: function (res) {
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @description: 初始化表格
|
||
* @param {*} pageSize
|
||
* @param {*} total
|
||
* @param {*} currentPage
|
||
* @param {*} dataList
|
||
* @return {*}
|
||
* @Date: 2022-01-12 10:55:11
|
||
*/
|
||
function initTable1({ pageSize, total, currentPage }, dataList) {
|
||
// 追加表格 html
|
||
_appendToTable1(dataList);
|
||
//分页
|
||
foxui.pagination(
|
||
{
|
||
el: '#pagination1',
|
||
currentPage: currentPage,
|
||
total: total,
|
||
onchange: function ({ currentPage, pageSize, total }, callback) {
|
||
callback({ total, pageSize, currentPage });
|
||
let param = {pageSize, currentPage};
|
||
enterInit(param);
|
||
},
|
||
},
|
||
{
|
||
type: 'plain',
|
||
size: 'mini',
|
||
isShowTotal: true,
|
||
isShowSize: true,
|
||
pageSize: pageSize
|
||
}
|
||
|
||
);
|
||
}
|
||
|
||
/**
|
||
* @description: 追加表格 html
|
||
* @param {*} dataList
|
||
* @return {*}
|
||
* @Date: 2022-01-12 00:18:40
|
||
*/
|
||
function _appendToTable1(dataList) {
|
||
const html = _trsHtml1(dataList);
|
||
$('#enterTable').empty().append(html);
|
||
}
|
||
|
||
/**
|
||
* @description: 表格 html
|
||
* @param {*} dataList
|
||
* @return {*}
|
||
* @Date: 2022-01-12 00:18:52
|
||
*/
|
||
function _trsHtml1(dataList) {
|
||
let htmlArr = [];
|
||
dataList.forEach(item => {
|
||
htmlArr.push(`
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-td">${item.page_title??""}</div>
|
||
<div class="foxui-table-td blue-color"><a href="${item.from_page}" target="_blank">${item.from_page}</a></div>
|
||
<div class="foxui-table-td">${item.uvcount}</div>
|
||
<div class="foxui-table-td">${item.ipcount}</div>
|
||
</li>
|
||
`);
|
||
});
|
||
return htmlArr.join('');
|
||
}
|
||
|
||
$('.search-btn-enterpage').click(function () {
|
||
enterInit();
|
||
})
|
||
</script>
|
||
|
||
<script>
|
||
//受访页面
|
||
//点击切换
|
||
$("#tabsCardAccessPage").find(".foxui-tabs-header").children('.foxui-tabs-item').click(function () {
|
||
let index = $(this).attr('data-index');
|
||
let param = {"index":index};
|
||
accessPage(param)
|
||
})
|
||
|
||
function accessInit(param){
|
||
if(param == undefined){
|
||
param = new Object();
|
||
}
|
||
let keyword = $(".tabsCardAccessPage").find('input[name="keyword"]').val();
|
||
param.keyword = keyword;
|
||
accessPage(param)
|
||
}
|
||
//受访页面
|
||
function accessPage(param){
|
||
foxui.loading();
|
||
$.ajax({
|
||
type: "post",
|
||
url:"{:url('SiteProfile/accessPage')}",
|
||
dataType: "json",
|
||
data:param,
|
||
success: function (res) {
|
||
foxui.closeLoading();
|
||
if (res.code == 1 && res.data) {
|
||
let data = res.data;
|
||
let paginationData = {
|
||
pageSize: data.per_page,
|
||
total: data.total,
|
||
currentPage: data.current_page
|
||
};
|
||
initTable(paginationData, data.data);
|
||
}
|
||
},
|
||
error: function (res) {
|
||
foxui.closeLoading();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @description: 初始化表格
|
||
* @param {*} pageSize
|
||
* @param {*} total
|
||
* @param {*} currentPage
|
||
* @param {*} dataList
|
||
* @return {*}
|
||
* @Date: 2022-01-12 10:55:11
|
||
*/
|
||
function initTable({ pageSize, total, currentPage }, dataList) {
|
||
// 追加表格 html
|
||
_appendToTable(dataList);
|
||
//分页
|
||
foxui.pagination(
|
||
{
|
||
el: '#pagination',
|
||
currentPage: currentPage,
|
||
total: total,
|
||
onchange: function ({ currentPage, pageSize, total }, callback) {
|
||
callback({ total, pageSize, currentPage });
|
||
let param = {pageSize, currentPage};
|
||
accessInit(param);
|
||
},
|
||
},
|
||
{
|
||
type: 'plain',
|
||
size: 'mini',
|
||
isShowTotal: true,
|
||
isShowSize: true,
|
||
pageSize: pageSize
|
||
}
|
||
|
||
);
|
||
}
|
||
|
||
/**
|
||
* @description: 追加表格 html
|
||
* @param {*} dataList
|
||
* @return {*}
|
||
* @Date: 2022-01-12 00:18:40
|
||
*/
|
||
function _appendToTable(dataList) {
|
||
const html = _trsHtml(dataList);
|
||
$('#accessTable').empty().append(html);
|
||
}
|
||
|
||
/**
|
||
* @description: 表格 html
|
||
* @param {*} dataList
|
||
* @return {*}
|
||
* @Date: 2022-01-12 00:18:52
|
||
*/
|
||
function _trsHtml(dataList) {
|
||
let htmlArr = [];
|
||
dataList.forEach(item => {
|
||
htmlArr.push(`
|
||
<li class="foxui-table-tr">
|
||
<div class="foxui-table-td">${item.page_title??""}</div>
|
||
<div class="foxui-table-td blue-color"><a href="${item.from_page}" target="_blank">${item.from_page}</a></div>
|
||
<div class="foxui-table-td">${item.pvcount}</div>
|
||
<div class="foxui-table-td">${item.uvcount}</div>
|
||
</li>
|
||
`);
|
||
});
|
||
return htmlArr.join('');
|
||
}
|
||
|
||
$('.search-btn-access-page').click(function () {
|
||
accessInit();
|
||
})
|
||
</script>
|
||
|
||
{/block}
|