Apq
/
Masuit.MyBlogs
mirror of https://gitee.com/masuit/Masuit.MyBlogs.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
							@model Masuit.MyBlogs.Core.Models.Entity.Post

@{
	Layout = null;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章《@Model.Title》洞察分析</title>
	<meta content="webkit" name="renderer">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
	<link href="/Assets/layui/css/layui.min.css" media="all" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/gh/abodelot/jquery.json-viewer@master/json-viewer/jquery.json-viewer.css" media="all" rel="stylesheet">
	<style>
		.mp-results.mp-bottomleft {
			top: unset !important;
			bottom: 0;
		}
	</style>
</head>
<body style="overflow-x: hidden">
	<h3 align="center">文章《@Model.Title》洞察分析</h3>
	<div class="searchTable">
		<div class="layui-inline">
			<input class="layui-input" name="kw" id="kw">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>
	<table class="layui-hide" id="table" lay-filter="tableEvent"></table>
	<div id="chart" style="height: 500px"></div>
	<mini-profiler max-traces="5" />
</body>
</html>
<script type="text/html" id="actionButton">
  <a class="layui-btn layui-btn-xs" lay-event="showjson">查看</a>
</script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="/Assets/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/abodelot/jquery.json-viewer@master/json-viewer/jquery.json-viewer.js" type="text/javascript"></script>
<script>
	layui.use('table', function() {
		var table = layui.table;
		table.render({
			elem: '#table',
			url: '/@Model.Id/records',
			cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			cols: [
				[
					{ field: 'IP', title: 'IP', align: 'center', event: 'tool-ip', width:320 },
					{ field: 'Location', title: '位置和网络', align: 'center'},
					{ field: 'RequestUrl', title: '请求URL', align: 'center' },
					{ field: 'Referer', title: '页面来源', align: 'center', event: 'visit' },
					{ field: 'Time', title: '访问时间', align: 'center',width:180 },
					{ title:'请求头', toolbar: '#actionButton',width:80 }
				]
			],
			page: true,
			limit:20,
			request: {
				limitName: 'size' //每页数据量的参数名，默认：limit
			},
			parseData: function(res) { //res 即为原始返回的数据
				return {
					"code": res.TotalCount > 0 ? 0 : 1, //解析接口状态
					"msg": "暂无数据", //解析提示文本
					"count": res.TotalCount, //解析数据长度
					"data": res.Data //解析数据列表
				};
			}
		});
		table.on('tool(tableEvent)', function(obj){
			var data = obj.data;
			if(obj.event === 'tool-ip'){
				window.open("/tools/ip/"+data.IP);
			}

			if(obj.event === 'visit'){
				window.open(data.Referer);
			}
			
			if(obj.event === 'showjson'){
				layer.open({
				  type: 1,
				  area: ['600px', '80%'], //宽高
				  content: ""+data.RequestHeader
				});
				$('.layui-layer-content').jsonViewer(eval("("+data.RequestHeader+")"), {withQuotes: true, withLinks: true});
				$('.layui-layer-content').css("word-wrap"," break-word");
			}
		});

		var $ = layui.$;
		$('.searchTable .layui-btn').on('click', function () {
			table.reload('table', {
				page: {
					curr: 1
				},
				where: {
					kw: $('#kw').val()
				}
			});
		});
	});
	window.fetch("/@Model.Id/records-chart", {
		credentials: 'include',
		method: 'GET',
		mode: 'cors'
	}).then(function(response) {
		return response.json();
	}).then(function(res) {
		var data = [];
		for (let item of res) {
			data.push([Date.parse(item.Date), item.Count]);
		}
		var chartDom = document.getElementById('chart');
		var myChart = echarts.init(chartDom);
		var option = {
			tooltip: {
				trigger: 'axis',
				position: function(pt) {
					return [pt[0], '10%'];
				}
			},
			title: {
				left: 'center',
				text: '最近90天访问趋势，日均：' + (res.reduce((acr, cur) => acr + cur.Count, 0) / (new Date() - new Date(res[0].Date)) * (1000 * 60 * 60 * 24)).toFixed(2)
			},
			xAxis: {
				type: 'time',
				axisLabel: {
					formatter:function (value){
						var dt=new Date(value);
						return dt.toLocaleDateString();
					}
				}
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name: '访问量',
					type: 'line',
					smooth: true,
					symbol: 'none',
					areaStyle: {},
					data: data,
					markPoint: {
						data: [
							{ type: 'max', name: '最大值' },
							{ type: 'min', name: '最小值' }
						]
					},
					markLine: {
						data: [
							{ type: 'average', name: '平均值' }
						]
					}
				}
			]
		};
		myChart.setOption(option);
	});
</script>