Skip to content

Commit cc6ebca

Browse files
SunQQQSunQQQ
committed
开发分析数据页面用户行为功能
1 parent 5841eaa commit cc6ebca

File tree

1 file changed

+104
-21
lines changed

1 file changed

+104
-21
lines changed

‎src/components/MainPage/analytics.vue‎

Lines changed: 104 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -55,28 +55,62 @@
5555
<div class="map-chart" id="map"></div>
5656
</div>
5757
<div class="block">
58+
<div class="title-part">
59+
<div class="module-title">用户行为</div>
60+
<div class="day-switch">
61+
<div :class="userActionDateType == '1' ? 'item active' : 'item'" @click="setUserAction(1)">今天</div>
62+
<div :class="userActionDateType == '2' ? 'item active' : 'item'" @click="setUserAction(2)">最近2天</div>
63+
<div :class="userActionDateType == '3' ? 'item active' : 'item'" @click="setUserAction(3)">最近3天</div>
64+
</div>
65+
</div>
66+
<div class="list">
67+
<div class="list-head">
68+
<div class="list-td">访问IP</div>
69+
<div class="list-td">操作内容</div>
70+
<div class="list-td align">访问位置</div>
71+
<!-- <div class="list-td align">访问来源</div>-->
72+
<div class="list-td align">浏览器</div>
73+
<div class="list-td align">访问时间</div>
74+
</div>
75+
<div :class="i%2==0 ? 'list-tr single' : 'list-tr'" v-for="(item,i) in userActionData">
76+
<div class="list-td">{{ i }}</div>
77+
<div class="list-td">
78+
<!-- {{ item.action ? item.action : ''}}-->
79+
<ul>
80+
<li v-for="(item) in item.action">{{item}}</li>
81+
</ul>
82+
</div>
83+
<div class="list-td align">{{ item.location }}</div>
84+
<!--<div class="list-td align">{{ item.fromUrl }}</div>-->
85+
<div class="list-td align">{{ item.browser }}</div>
86+
<div class="list-td align">{{ item.time }}</div>
87+
</div>
88+
<div class="list-item"></div>
89+
</div>
90+
</div>
91+
<!--<div class="block">
5892
<div class="module-title">操作日志</div>
5993
<div class="list">
6094
<div class="list-head">
6195
<div class="list-td">访问IP</div>
6296
<div class="list-td align">操作内容</div>
6397
<div class="list-td align">访问位置</div>
64-
<!-- <div class="list-td align">访问来源</div>-->
65-
<div class="list-td align">访问浏览器</div>
98+
&lt;!&ndash; <div class="list-td align">访问来源</div>&ndash;&gt;
99+
<div class="list-td align">浏览器</div>
66100
<div class="list-td align">访问时间</div>
67101
</div>
68102
<div :class="i%2==0 ? 'list-tr single' : 'list-tr'" v-for="(item,i) in visitListData">
69103
<div class="list-td">{{ item.clientIp ? item.clientIp : '中国' }}</div>
70104
<div class="list-td">{{ item.operateType ? item.operateType + ':' + item.operateContent : '' }}</div>
71105
<div class="list-td align">{{ item.location }}</div>
72-
<!-- <div class="list-td align">{{ item.fromUrl }}</div>-->
106+
&lt;!&ndash; <div class="list-td align">{{ item.fromUrl }}</div>&ndash;&gt;
73107
<div class="list-td align">{{ item.browser }}</div>
74108
<div class="list-td align">{{ item.time }}</div>
75109
</div>
76110
<div class="list-item"></div>
77111
</div>
78112
<Pagination v-on:PaginationToParent="ValueByPagition" ref="Pagi"></Pagination>
79-
</div>
113+
</div>-->
80114
</div>
81115
<div class="RightPart">
82116
<div class="GitPart">
@@ -161,15 +195,14 @@ export default {
161195
},
162196
data: function () {
163197
return {
164-
lineDateType: '近7天',
165-
mapDateType: '今天',
166198
todayVisit: 0, // 今日浏览量
167199
todayIpNum: 0, // 今日IP数
168200
dateVisit: 0, // 近7/14/30天访问量
169201
yesterdayVisit: 0,
170202
yesterdayIpNum: 0,
171203
allVisitNum: 0,
172204
// 折线图数据
205+
lineDateType: '近7天',
173206
lineChartOption: {
174207
// title: {text: '数据趋势'},
175208
tooltip: {
@@ -209,6 +242,7 @@ export default {
209242
},
210243
visitListData: [],
211244
// 地图参数
245+
mapDateType: '今天',
212246
mapList: [],
213247
mapOption: {
214248
legend: {
@@ -270,7 +304,9 @@ export default {
270304
}
271305
]
272306
},
273-
307+
// 用户行为
308+
userActionDateType: 1,
309+
userActionData: '',
274310
// 折线图对象
275311
lineChart: '',
276312
// 地图对象
@@ -293,7 +329,7 @@ export default {
293329
dayNum: dayNum ? dayNum : 7
294330
},
295331
Success: function (data) {
296-
let dates = [],readings = [],ipArray = [];
332+
let dates = [], readings = [], ipArray = [];
297333
298334
if (!that.todayVisit) that.todayVisit = data.dateCountList[0].reading; // 设置今日浏览量PV
299335
if (!that.todayIpNum) that.todayIpNum = data.dateCountList[0].ipNum; // 设置今日IP数
@@ -322,9 +358,9 @@ export default {
322358
operateContent: '近' + dayNum + '天'
323359
});
324360
325-
setTimeout(function () {
326-
that.setVisitList();
327-
}, 1000);
361+
// setTimeout(function () {
362+
// that.setVisitList();
363+
// }, 1000);
328364
}
329365
}
330366
});
@@ -360,7 +396,6 @@ export default {
360396
setMap: function (dayNum, init) {
361397
let that = this;
362398
that.mapDateType = dayNum;
363-
364399
that.mapList = [];
365400
366401
this.SQFrontAjax({
@@ -401,14 +436,31 @@ export default {
401436
operateContent: '近' + dayNum + '天'
402437
});
403438
404-
setTimeout(function () {
405-
that.setVisitList();
406-
}, 1000);
439+
// setTimeout(function () {
440+
// that.setVisitList();
441+
// }, 1000);
407442
}
408443
}
409444
});
410445
},
411-
//处理翻页
446+
// 渲染用户行为
447+
setUserAction: function (dayNum) {
448+
let that = this;
449+
that.userActionDateType = dayNum;
450+
451+
this.SQFrontAjax({
452+
Url: '/api/getUserAction/foreend',
453+
UploadData: {
454+
endTime: this.getSQTime().split(' ')[0],
455+
dayNum: dayNum ? dayNum : 1
456+
},
457+
Success: function (data) {
458+
console.log(data);
459+
that.userActionData = data.userAction;
460+
}
461+
});
462+
},
463+
// 处理翻页
412464
ValueByPagition: function (SelectPage) {
413465
var That = this;
414466
this.SQFrontAjax({
@@ -451,12 +503,14 @@ export default {
451503
},
452504
},
453505
mounted: function () {
506+
var that = this;
454507
Store.commit("ChangeActive", 5);// 切换Topbar高亮
455508
456509
Vue.prototype.$echarts = echarts;
457510
this.setLineChart(7, 'init');
458-
this.setVisitList();
459511
this.setMap(1, 'init');
512+
this.setUserAction(1);
513+
// this.setVisitList();
460514
461515
// 创建日志
462516
this.createLog({
@@ -465,9 +519,9 @@ export default {
465519
operateContent: '访问统计'
466520
});
467521
468-
setTimeout(function () {
469-
that.setVisitList();
470-
}, 1000);
522+
// setTimeout(function () {
523+
// that.setVisitList();
524+
// }, 1000);
471525
}
472526
}
473527
</script>
@@ -571,11 +625,40 @@ export default {
571625
.myflex(center);
572626
//border-bottom: 1px solid #f0f0f0;
573627
padding: 8px 0;
628+
border-bottom: 1px solid #e9e9e9;
574629
}
575630
576-
.list-td {
631+
.list-td{
577632
flex: 1;
578633
padding-left: 1rem;
634+
border-right: 1px solid #e9e9e9;
635+
}
636+
637+
.list-td:nth-child(1){
638+
flex: 18%;
639+
}
640+
641+
.list-td:nth-child(2){
642+
flex: 37%;
643+
}
644+
645+
.list-td:nth-child(3){
646+
flex: 10%;
647+
}
648+
649+
.list-td:nth-child(4){
650+
flex: 10%;
651+
}
652+
653+
.list-td:nth-child(5){
654+
flex: 25%;
655+
border-right: none;
656+
}
657+
658+
.list-td ul{
659+
margin-block-start: 0em;
660+
margin-block-end: 0em;
661+
padding-inline-start: 16px;
579662
}
580663
581664
.list .single {

0 commit comments

Comments
 (0)