{extend name="common/base"/}
{block name="style"}
<style>
.stat-card .layui-card-body{padding:18px 20px;}
.stat-label{color:rgba(0,0,0,.65);font-size:14px;margin-bottom:10px;}
.stat-num{font-size:28px;line-height:1.2;font-weight:600;color:rgba(0,0,0,.85);}
.stat-num.stat-muted{color:#c2c2c2;}
.stat-sub{color:#999;font-size:12px;margin-top:8px;}
.stat-up{color:#16b777;}
.stat-down{color:#ff5722;}
.stat-hold{color:#999;}
.layui-card-header .card-tip{float:right;color:#999;font-size:12px;font-weight:400;}
.panel-placeholder{padding:24px 0;text-align:center;color:#bbb;}
.gen-tip{background:#fff8e6;border:1px solid #ffe1a8;color:#8a6d3b;border-radius:4px;padding:12px 14px;line-height:1.9;margin-bottom:18px;}
.gen-tip .layui-icon{margin-right:6px;color:#ffb800;}
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
	{if condition="$statOpen eq false"}
	<div class="gen-tip">
		<i class="layui-icon layui-icon-tips"></i>
		网站统计开关未打开，如需查看统计数据，统计开关在 基础-&gt;网站配置-&gt;核心配置-&gt;统计开关。Tips：开启后会略微加重数据库负担，请酌情开启。
	</div>
	{/if}
	<!-- 今日概览 -->
	<div class="layui-row layui-col-space15">
		<div class="layui-col-xs6 layui-col-md3">
			<div class="layui-card stat-card">
				<div class="layui-card-body">
					<div class="stat-label">今日访问量（PV）</div>
					<div class="stat-num" id="cardPv">-</div>
					<div class="stat-sub" id="cardPvSub">较昨日 —</div>
				</div>
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-md3">
			<div class="layui-card stat-card">
				<div class="layui-card-body">
					<div class="stat-label">今日访客数（UV）</div>
					<div class="stat-num" id="cardUv">-</div>
					<div class="stat-sub" id="cardUvSub">较昨日 —</div>
				</div>
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-md3">
			<div class="layui-card stat-card">
				<div class="layui-card-body">
					<div class="stat-label">今日 IP 数</div>
					<div class="stat-num" id="cardIp">-</div>
					<div class="stat-sub" id="cardIpSub">较昨日 —</div>
				</div>
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-md3">
			<div class="layui-card stat-card">
				<div class="layui-card-body">
					<div class="stat-label">平均停留时长</div>
					<div class="stat-num" id="cardStay">-</div>
					<div class="stat-sub" id="cardStaySub">较昨日 —</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 趋势 / 浏览器 -->
	<div class="layui-row layui-col-space15">
		<div class="layui-col-xs12 layui-col-md8">
			<div class="layui-card">
				<div class="layui-card-header">近 7 天访问趋势<span class="card-tip">最近 30 分钟在线访客 <b id="cardOnline">0</b><span id="cardOnlineUnit"> 人</span></span></div>
				<div class="layui-card-body"><div class="chart-box" id="trendChart" style="height:320px;"></div></div>
			</div>
		</div>
		<div class="layui-col-xs12 layui-col-md4">
			<div class="layui-card">
				<div class="layui-card-header">浏览器分布<span class="card-tip">近 7 天</span></div>
				<div class="layui-card-body"><div class="chart-box" id="browserChart" style="height:320px;"></div></div>
			</div>
		</div>
	</div>

	<!-- 小时 / 系统 -->
	<div class="layui-row layui-col-space15">
		<div class="layui-col-xs12 layui-col-md8">
			<div class="layui-card">
				<div class="layui-card-header">今日 24 小时访问分布</div>
				<div class="layui-card-body"><div class="chart-box" id="hourChart" style="height:280px;"></div></div>
			</div>
		</div>
		<div class="layui-col-xs12 layui-col-md4">
			<div class="layui-card">
				<div class="layui-card-header">操作系统分布<span class="card-tip">近 7 天</span></div>
				<div class="layui-card-body"><div class="chart-box" id="osChart" style="height:280px;"></div></div>
			</div>
		</div>
	</div>

	<!-- 入口页 / 受访页 Top10 -->
	<div class="layui-row layui-col-space15">
		<div class="layui-col-xs12 layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">入口页面 Top10<span class="card-tip">访客从这些页面进入网站</span></div>
				<div class="layui-card-body"><table class="layui-hide" id="entryTop" lay-filter="entryTop"></table></div>
			</div>
		</div>
		<div class="layui-col-xs12 layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">受访页面 Top10<span class="card-tip">被访问最多的页面</span></div>
				<div class="layui-card-body"><table class="layui-hide" id="viewTop" lay-filter="viewTop"></table></div>
			</div>
		</div>
	</div>

	<!-- 待接入 -->
	<div class="layui-row layui-col-space15">
		<div class="layui-col-xs12 layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="stat-label">转化率</div>
					<div class="stat-num stat-muted">—</div>
					<div class="stat-sub">暂未接入数据源，后续再做</div>
				</div>
			</div>
		</div>
		<div class="layui-col-xs12 layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="stat-label">下载数量</div>
					<div class="stat-num stat-muted">—</div>
					<div class="stat-sub">暂未接入数据源，后续再做</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script src="{__ADMIN__}/js/third/echart/echarts.min.js"></script>
<script>
function tr(text) {
	return window.MiuAdminI18n ? window.MiuAdminI18n.translate(text) : text;
}

function isEnglish() {
	return window.MiuAdminI18n && window.MiuAdminI18n.getLocale() === 'en';
}

function durationPart(value, unit) {
	return value + (isEnglish() ? ' ' : '') + tr(unit);
}

//把秒数说成人话：45秒 / 3分20秒 / 1小时5分
function fmtStay(sec) {
	sec = parseInt(sec, 10) || 0;
	if (sec < 60) return durationPart(sec, '秒');
	var m = Math.floor(sec / 60), r = sec % 60;
	if (m < 60) return durationPart(m, '分') + (r ? durationPart(r, '秒') : '');
	return durationPart(Math.floor(m / 60), '小时') + durationPart(m % 60, '分');
}

//较昨日：返回一段带颜色的 HTML
function deltaHtml(cur, prev, suffix) {
	cur = parseInt(cur, 10) || 0;
	prev = parseInt(prev, 10) || 0;
	if (prev <= 0) {
		var translatedSuffix = suffix ? (isEnglish() ? ' ' : '') + tr(suffix) : '';
		return cur > 0
			? tr('较昨日') + ' <span class="stat-up">' + tr('新增') + ' ' + cur + translatedSuffix + '</span>'
			: tr('较昨日') + ' <span class="stat-hold">—</span>';
	}
	var diff = cur - prev;
	var pct = Math.round(diff / prev * 100);
	if (diff === 0) return tr('较昨日') + ' <span class="stat-hold">' + tr('持平') + '</span>';
	var cls = diff > 0 ? 'stat-up' : 'stat-down';
	var sign = diff > 0 ? '+' : '';
	return tr('较昨日') + ' <span class="' + cls + '">' + sign + pct + '%</span>';
}

layui.use(['jquery', 'table'], function () {
	var $ = layui.jquery, table = layui.table;
	var dashboardData = null;

	$.getJSON('{:url("admin/analysis/index")}', function (res) {
		if (res.code !== 0) {
			layer.msg(res.msg || tr('数据加载失败'));
			return;
		}
		dashboardData = res.data;
		renderDashboard(dashboardData);
	});

	window.addEventListener('miu-admin-locale-change', function () {
		if (dashboardData) renderDashboard(dashboardData);
	});

	function renderDashboard(d) {
		var c = d.cards;

		//四张卡片
		$('#cardPv').text(c.pv);
		$('#cardPvSub').html(deltaHtml(c.pv, c.pv_prev));
		$('#cardUv').text(c.uv);
		$('#cardUvSub').html(deltaHtml(c.uv, c.uv_prev));
		$('#cardIp').text(c.ip);
		$('#cardIpSub').html(deltaHtml(c.ip, c.ip_prev));
		$('#cardStay').text(fmtStay(c.stay));
		$('#cardStaySub').html(deltaHtml(c.stay, c.stay_prev, '秒'));
		$('#cardOnline').text(c.online);
		$('#cardOnlineUnit').text(isEnglish() ? ' people' : ' 人');

		drawTrend(d.trend);
		drawHour(d.hours);
		drawPie('browserChart', translateBreakdown(d.browser));
		drawPie('osChart', translateBreakdown(d.os));

		renderTop('#entryTop', [
			{field: 'title', title: tr('页面标题'), minWidth: 140},
			{field: 'url', title: tr('页面网址'), minWidth: 160, templet: function (d) {
				return '<span title="' + layui.util.escape(d.url) + '">' + layui.util.escape(d.url) + '</span>';
			}},
			{field: 'cnt', title: tr('入口次数'), width: 90, align: 'center'}
		], d.entry_top);

		renderTop('#viewTop', [
			{field: 'title', title: tr('页面标题'), minWidth: 140},
			{field: 'url', title: tr('页面网址'), minWidth: 160, templet: function (d) {
				return '<span title="' + layui.util.escape(d.url) + '">' + layui.util.escape(d.url) + '</span>';
			}},
			{field: 'pv', title: tr('浏览量'), width: 80, align: 'center'},
			{field: 'uv', title: tr('访客数'), width: 80, align: 'center'}
		], d.view_top);
	}

	//Top10 小表：数据直接给，不分页
	function renderTop(elem, cols, data) {
		table.render({
			elem: elem,
			data: data || [],
			page: false,
			limit: 10,
			height: 380,
			text: {none: tr('暂无数据')},
			cols: [cols]
		});
	}

	function drawTrend(t) {
		var chart = getChart('trendChart');
		chart.setOption({
			tooltip: {trigger: 'axis'},
			legend: {data: [tr('访问量(PV)'), tr('访客数(UV)')], right: 0, top: 0},
			grid: {left: 40, right: 20, top: 40, bottom: 30},
			xAxis: {type: 'category', boundaryGap: false, data: t.dates},
			yAxis: {type: 'value', minInterval: 1},
			series: [
				{
					name: tr('访问量(PV)'), type: 'line', smooth: true, showSymbol: false,
					itemStyle: {color: '#1e9fff'}, areaStyle: {opacity: 0.15},
					data: t.pv
				},
				{
					name: tr('访客数(UV)'), type: 'line', smooth: true, showSymbol: false,
					itemStyle: {color: '#16b777'}, data: t.uv
				}
			]
		});
	}

	function drawHour(h) {
		var chart = getChart('hourChart');
		chart.setOption({
			tooltip: {trigger: 'axis'},
			grid: {left: 40, right: 20, top: 20, bottom: 30},
			xAxis: {type: 'category', data: h.labels, axisLabel: {interval: 1}},
			yAxis: {type: 'value', minInterval: 1},
			series: [{
				name: tr('访问量'), type: 'bar', barMaxWidth: 18,
				itemStyle: {color: '#1e9fff', borderRadius: [3, 3, 0, 0]},
				data: h.pv
			}]
		});
	}

	function drawPie(id, list) {
		var chart = getChart(id);
		chart.setOption({
			tooltip: {trigger: 'item', formatter: function (p) {
				var english = window.MiuAdminI18n && window.MiuAdminI18n.getLocale() === 'en';
				return p.name + (english ? ': ' : '：') + p.value + (english ? ' (' : '（') + p.percent + '%' + (english ? ')' : '）');
			}},
			legend: {bottom: 0, left: 'center', icon: 'circle', itemWidth: 10, itemHeight: 10},
			series: [{
				type: 'pie', radius: ['42%', '68%'], center: ['50%', '44%'],
				avoidLabelOverlap: true,
				label: {show: false},
				emphasis: {label: {show: true, fontSize: 14, formatter: function (p) {
					return p.name + '\n' + p.value;
				}}},
				data: list && list.length ? list : [{name: tr('暂无数据'), value: 1, itemStyle: {color: '#eee'}}]
			}]
		});
	}

	function translateBreakdown(list) {
		return (list || []).map(function (item) {
			var name = item.name;
			if (name === '未知浏览器' || name === '未知系统') name = tr(name);
			return $.extend({}, item, {name: name});
		});
	}

	function getChart(id) {
		var element = document.getElementById(id);
		var chart = echarts.getInstanceByDom(element);
		if (chart) return chart;
		chart = echarts.init(element);
		window.addEventListener('resize', function () { chart.resize(); });
		return chart;
	}
});
</script>
{/block}
<!-- /脚本 -->