Skip to content

Commit 002ad3e

Browse files
SunQQQSunQQQ
committed
1、新增数据统计页面，初步完成指标区、折线图、访问列表；2、引入echart；
1 parent 9e66421 commit 002ad3e

File tree

6 files changed

+257
-15
lines changed

6 files changed

+257
-15
lines changed

‎src/components/BrotherCompnent/TopBar.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<span>Sunq's Blog</span>
88
</div>
99
<div class="MediaRight">
10+
<div :class="Active == 5 ? 'MenuItemActive' : 'MenuItem'" @click="ChangeRouter('analytics')">数据统计</div>
1011
<div :class="Active == 4 ? 'MenuItemActive' : 'MenuItem'" @click="ChangeRouter('AboutMe')">关于</div>
1112
<div :class="Active == 3 ? 'MenuItemActive' : 'MenuItem'" @click="ChangeRouter('FriendUrl')">圈子</div>
1213
<div :class="Active == 2 ? 'MenuItemActive' : 'MenuItem'" @click="ChangeRouter('TimeLine')">时间轴</div>
@@ -405,7 +406,7 @@
405406
}
406407
407408
.MediaLeft {
408-
width: 60%;
409+
width: 50%;
409410
font-size: 1.2rem;
410411
cursor: pointer;
411412
}
@@ -415,7 +416,7 @@
415416
416417
.MediaRight {
417418
flex: 1px;
418-
width: 40%;
419+
width: 50%;
419420
.myflex('middle');
420421
text-align: right;
421422
flex-direction: row-reverse;

‎src/components/MainPage/AboutMe.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,7 @@
110110
Heartfelt
111111
},
112112
mounted:function () {
113-
// 切换Topbar高亮
114-
Store.commit("ChangeActive", 4);
113+
Store.commit("ChangeActive", 4);// 切换Topbar高亮
115114
}
116115
}
117116
</script>

‎src/components/MainPage/analytics.vue‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<template>
2+
<div>
3+
<div class="FlexContent">
4+
<div class="LeftPart">
5+
<div class="block" style="margin-top: 0">
6+
<div class="quota-content">
7+
<div class="quota-item">
8+
<p>今日访问量</p>
9+
<p class="num">{{ todayVisit }}</p>
10+
</div>
11+
<div class="quota-item">
12+
<p>昨日访问量</p>
13+
<p class="num">{{ yesterdayVisit }}</p>
14+
</div>
15+
<div class="quota-item">
16+
<p>一周访问量</p>
17+
<p class="num">{{ yesterdayVisit }}</p>
18+
</div>
19+
<div class="quota-item">
20+
<p>历史访问量</p>
21+
<p class="num">{{ allVisitNum }}</p>
22+
</div>
23+
</div>
24+
</div>
25+
<div class="block">
26+
<div class="line-chart" id="line-chart"></div>
27+
</div>
28+
<div class="block">
29+
<!-- <div class="block-name">分日报表</div>-->
30+
<div class="list">
31+
<div class="list-head">
32+
<div class="list-td">访问时间</div>
33+
<div class="list-td align">访问位置</div>
34+
<div class="list-td align">访问浏览器</div>
35+
<div class="list-td align">访问IP</div>
36+
</div>
37+
<div :class="i%2==0 ? 'list-tr single' : 'list-tr'" v-for="(item,i) in visitListData">
38+
<div class="list-td">{{ item.time }}</div>
39+
<div class="list-td align">{{ item.location }}</div>
40+
<div class="list-td align">{{ item.browser }}</div>
41+
<div class="list-td align">{{ item.ip }}</div>
42+
</div>
43+
<div class="list-item"></div>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="RightPart">
48+
<div class="GitPart">
49+
<div class="TopBackBlack"></div>
50+
<div class="GitPic">
51+
<img src="../../static/img/ZhihuIcon.jpg">
52+
</div>
53+
<div class="GitBack">
54+
<i class="iconfont TopBackBlackGit icon-github1"></i>
55+
</div>
56+
<div class="Content">
57+
<div class="GitName">孙权的Github</div>
58+
<a class="BlueButton" href="https://github.com/SunQQQ" target="_blank">博客源码</a>
59+
<div class="BlogStatistic">
60+
<div class="BlogStatisticItem">
61+
<div class="BlogStatisticItemNum">13</div>
62+
<div class="BlogStatisticItemText AboutMeGitData">Followers</div>
63+
</div>
64+
<div class="BlogStatisticItem">
65+
<div class="BlogStatisticItemNum">17</div>
66+
<div class="BlogStatisticItemText AboutMeGitData">Repositories</div>
67+
</div>
68+
<div class="BlogStatisticItem">
69+
<div class="BlogStatisticItemNum">88</div>
70+
<div class="BlogStatisticItemText AboutMeGitData">Star</div>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
<div class="BigBlock AboutMeMarginTop">
76+
<div class="TitleFontLine">Contacts</div>
77+
<div class="BlogStatistic" style="border-top: none;padding-bottom: 0">
78+
<div class="BlogStatisticItem">
79+
<a href="https://github.com/SunQQQ" target="_blank"><i class="iconfont icon-github AboutMeIcon"
80+
style="color:#948aec"></i></a>
81+
</div>
82+
<div class="BlogStatisticItem">
83+
<a href="https://www.zhihu.com/people/s-q-51-44-23/activities" target="_blank"><i
84+
class="iconfont icon-zhihu AboutMeIcon" style="color:#3dbd7d"></i></a>
85+
</div>
86+
<div class="BlogStatisticItem">
87+
<a href="https://blog.csdn.net/sun_qqq" target="_blank"><i class="iconfont icon-CN_csdnnet AboutMeIcon"
88+
style="color:#f78e3d"></i></a>
89+
</div>
90+
<div class="BlogStatisticItem">
91+
<i class="iconfont icon-youxiang AboutMeIcon" style="color:#49a9ee"></i>
92+
</div>
93+
<div class="BlogStatisticItem">
94+
<a href="https://music.163.com/#/user/home?id=386558098" target="_blank"><i
95+
class="iconfont AboutMeIcon icon-CN_NetEasemusic" style="color:#f46e65"></i></a>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
102+
</div>
103+
</template>
104+
105+
<script>
106+
import Store from "../../store";
107+
108+
export default {
109+
name: "analytics",
110+
data: function () {
111+
return {
112+
todayVisit:'0',
113+
yesterdayVisit:'0',
114+
allVisitNum:'0',
115+
lineChartOption: {
116+
// title: {text: '数据趋势'},
117+
tooltip: {
118+
trigger: 'axis'
119+
},
120+
legend: {
121+
type: 'plain'
122+
},
123+
xAxis: {data: []},
124+
yAxis: {},
125+
series: [{
126+
name: '博客访问量(人/天)', type: 'line', data: [],
127+
itemStyle: {normal: {label: {show: true}}}
128+
}],
129+
grid:{
130+
bottom:'20px' // 图表距离容器下方边距
131+
}
132+
},
133+
mapChartOption: {},
134+
visitListData:[]
135+
}
136+
},
137+
methods: {
138+
// 渲染折线图
139+
setLineChart: function () {
140+
let that = this,
141+
lineChart = that.$echarts.init(document.getElementById('line-chart'));
142+
this.SQFrontAjax({
143+
Url: '/api/visitCount/foreend',
144+
UploadData: {
145+
endTime: this.getSQTime().split(' ')[0],
146+
dayNum: 7
147+
},
148+
Success: function (data) {
149+
that.todayVisit = data[0].reading;
150+
that.yesterdayVisit = data[1].reading;
151+
152+
let dates = [], readings = [];
153+
data.forEach(function (item) {
154+
dates.push(item.time);
155+
readings.push(item.reading);
156+
});
157+
that.lineChartOption.xAxis.data = dates.reverse();
158+
that.lineChartOption.series[0].data = readings.reverse();
159+
lineChart.setOption(that.lineChartOption);
160+
}
161+
});
162+
},
163+
setVisitList:function (){
164+
let that = this;
165+
this.SQFrontAjax({
166+
Url: '/api/visitRead/foreend',
167+
UploadData: {},
168+
Success: function (data) {
169+
that.allVisitNum = data.length;
170+
data.forEach(function (item){
171+
if(JSON.stringify(item.location) == '[]') item.location = '银河系';
172+
if(!item.browser) item.browser = "secret";
173+
item.ip = (item.ip).replace('::ffff:','');
174+
});
175+
that.visitListData = data;
176+
}
177+
});
178+
}
179+
},
180+
mounted: function () {
181+
Store.commit("ChangeActive", 5);// 切换Topbar高亮
182+
183+
this.setLineChart();
184+
this.setVisitList();
185+
}
186+
}
187+
</script>
188+
189+
<style scoped lang="less">
190+
@import "../../static/css/base";
191+
@import "../../static/css/AboutMe";
192+
193+
.quota-content {
194+
.myflex(center);
195+
color:rgba(0, 0, 0, 0.65);
196+
}
197+
.quota-item {
198+
flex: 1;
199+
text-align: center;
200+
}
201+
.quota-item .num{
202+
font-size:1.2rem;
203+
}
204+
.block{
205+
background-color: #FFFFFF;
206+
margin-top: 1rem;
207+
padding: 1rem;
208+
border-radius:2px;
209+
}
210+
.block-name{
211+
padding: 0.5rem;
212+
border-bottom: 1px solid #f0f0f0;
213+
}
214+
.line-chart {
215+
height: 300px;
216+
}
217+
.list-head{
218+
color:#8590a6;
219+
.myflex(center);
220+
border-bottom: 1px solid #f0f0f0;
221+
padding: 8px 0;
222+
}
223+
224+
.list-tr{
225+
.myflex(center);
226+
//border-bottom: 1px solid #f0f0f0;
227+
padding: 8px 0;
228+
}
229+
.list-td{
230+
flex: 1;
231+
padding-left: 1rem;
232+
}
233+
.list .single{
234+
background: #f6f6f6;
235+
}
236+
.list .align{
237+
text-align: right;
238+
padding-right: 1rem;
239+
}
240+
</style>

‎src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import CommonFunction from './util/util';
66
import './static/iconfont/iconfont.css';
77
import store from './store';
88
import VueParticles from 'vue-particles'; // 离子动画背景
9+
import * as echarts from 'echarts'
910

1011
Vue.use(VueParticles);
1112
Vue.config.productionTip = false;
1213
Vue.use(CommonFunction);
1314
Vue.prototype.bus = new Vue;
15+
Vue.prototype.$echarts = echarts;
1416

1517
new Vue({
1618
render:function (h) {

‎src/router/index.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import MessageBoard from '@/components/MainPage/MessageBoard';
66
import FriendUrl from '@/components/MainPage/FriendUrl';
77
import TimeLine from '@/components/MainPage/TimeLine';
88
import AboutMe from '@/components/MainPage/AboutMe';
9+
import analytics from '@/components/MainPage/analytics';
910

1011
Vue.use(Router);
1112

@@ -17,31 +18,30 @@ export default new Router({
1718
path: '/',
1819
name: 'BlogIndex',
1920
component: BlogIndex
20-
},
21-
{
21+
}, {
2222
path: '/BlogDetail',
2323
name: 'BlogDetail',
2424
component: BlogDetail
25-
},
26-
{
25+
}, {
2726
path: '/MessageBoard',
2827
name: 'MessageBoard',
2928
component: MessageBoard
30-
},
31-
{
29+
}, {
3230
path: '/FriendUrl',
3331
name: 'FriendUrl',
3432
component: FriendUrl
35-
},
36-
{
33+
}, {
3734
path:'/TimeLine',
3835
name:'TimeLine',
3936
component:TimeLine
40-
},
41-
{
37+
}, {
4238
path:'/AboutMe',
4339
name:'AboutMe',
4440
component:AboutMe
41+
},{
42+
path:'/analytics',
43+
name:'analytics',
44+
component:analytics
4545
}
4646
]
4747
});

‎src/util/util.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ CommonFunction.install = function (Vue) {
235235
return 'Edge';
236236
}
237237
if (isFF) {
238-
return 'FF';
238+
return 'FireFox';
239239
}
240240
if (isSafari) {
241241
return 'Safari';

0 commit comments

Comments
 (0)