|
|
@@ -0,0 +1,124 @@
|
|
|
+@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">
|
|
|
+</head>
|
|
|
+<body style="overflow-x: hidden">
|
|
|
+ <h3 align="center">文章《@Model.Title》洞察分析</h3>
|
|
|
+ <table class="layui-hide" id="table" lay-filter="tableEvent"></table>
|
|
|
+ <div id="chart" style="height: 500px"></div>
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+<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>
|
|
|
+ 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', fixed: 'left',width:320 },
|
|
|
+ { field: 'Location', title: '位置和网络', align: 'center'},
|
|
|
+ { field: 'Referer', title: '页面来源', align: 'center', event: 'visit' },
|
|
|
+ { field: 'Time', title: '访问时间', align: 'center',width:180 }
|
|
|
+ ]
|
|
|
+ ],
|
|
|
+ page: true,
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ 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天访问趋势'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'time',
|
|
|
+ axisLabel: {
|
|
|
+ formatter:function (value){
|
|
|
+ var dt=new Date(value);
|
|
|
+ return dt.toLocaleDateString();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 70,
|
|
|
+ end: 100,
|
|
|
+ minValueSpan: 100
|
|
|
+ }, {
|
|
|
+ start: 70,
|
|
|
+ end: 100,
|
|
|
+ minValueSpan: 100
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '访问量',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ areaStyle: {},
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ });
|
|
|
+</script>
|