Skip to content

Commit 5b52aaf

Browse files
SunQQQSunQQQ
committed
折线图再加一条ip线
1 parent 547f269 commit 5b52aaf

File tree

2 files changed

+154
-128
lines changed

2 files changed

+154
-128
lines changed

‎src/components/index.vue‎

Lines changed: 141 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<!--表格操作栏-->
88
<div class="partTitle">博客访问数据明细</div>
99
<el-table :data="blogVisitList" border style="width: 100%;" :header-cell-style="{background:'#eef1f6'}">
10-
<!-- <el-table-column prop="fromUrl" label="来源URL"></el-table-column>-->
10+
<!-- <el-table-column prop="fromUrl" label="来源URL"></el-table-column>-->
1111
<el-table-column prop="clientIp" label="访客ip"></el-table-column>
1212
<el-table-column prop="operateType" label="操作类型"></el-table-column>
1313
<el-table-column prop="operateContent" label="操作内容"></el-table-column>
@@ -34,147 +34,160 @@
3434
</template>
3535

3636
<script>
37-
export default {
38-
name: "index",
39-
data: function () {
40-
return {
41-
// 折线图数据
42-
lineChartOption: {
43-
title: {text: ''},
44-
tooltip: {
45-
trigger: 'axis'
37+
export default {
38+
name: "index",
39+
data: function () {
40+
return {
41+
// 折线图数据
42+
lineChartOption: {
43+
title: {text: ''},
44+
tooltip: {
45+
trigger: 'axis'
46+
},
47+
legend: {
48+
type: 'plain'
49+
},
50+
xAxis: {data: []},
51+
yAxis: {},
52+
series: [
53+
{
54+
name: '博客访问量(人/天)', type: 'line', data: [],
55+
itemStyle: {normal: {label: {show: true}}}
56+
},{
57+
name: '博客访问ip数(个/天)', type: 'line', data: [],
58+
itemStyle: {
59+
normal: {
60+
color: '#F72C5B',
61+
label: {show: true},
62+
lineStyle: {color: '#F72C5B'}
63+
}
64+
}
65+
}
66+
]
4667
},
47-
legend:{
48-
type:'plain'
49-
},
50-
xAxis: {data: []},
51-
yAxis: {},
52-
series: [{
53-
name: '博客访问量(人/天)', type: 'line', data: [],
54-
itemStyle: {normal: {label: {show: true}}}
55-
}]
56-
},
57-
// 地图数据
58-
mapChartOption:{
59-
},
60-
// 访客列表数据
61-
blogVisitList: [],
62-
// 访客数据总数
63-
listTotal: 0,
64-
// 一页数据条数
65-
pageSize:12,
66-
// 当前页
67-
MyCurPage:1,
68-
}
69-
},
70-
methods: {
71-
// 获取blog访问数据
72-
getBlogVisitList: function () {
73-
var That = this;
74-
That.SQAjax({
75-
Url: '/api/visitRead/foreend',
76-
RequestData: {
77-
PagnationData: {
78-
Skip: 0,
79-
Limit: That.pageSize
68+
// 地图数据
69+
mapChartOption: {},
70+
// 访客列表数据
71+
blogVisitList: [],
72+
// 访客数据总数
73+
listTotal: 0,
74+
// 一页数据条数
75+
pageSize: 12,
76+
// 当前页
77+
MyCurPage: 1,
78+
}
79+
},
80+
methods: {
81+
// 获取blog访问数据
82+
getBlogVisitList: function () {
83+
var That = this;
84+
That.SQAjax({
85+
Url: '/api/visitRead/foreend',
86+
RequestData: {
87+
PagnationData: {
88+
Skip: 0,
89+
Limit: That.pageSize
90+
}
91+
},
92+
Success: function (data) {
93+
data.list.forEach(function (item) {
94+
if (!item.fromUrl) item.fromUrl = '获取失败';
95+
});
96+
97+
That.blogVisitList = data.list;
98+
That.listTotal = data.totalNum;
8099
}
81-
},
82-
Success: function (data) {
83-
data.list.forEach(function (item) {
84-
if(!item.fromUrl) item.fromUrl = '获取失败';
85-
});
100+
});
101+
},
102+
// 设置线性图
103+
setLineChart: function () {
104+
var that = this;
105+
let lineChart = this.$echarts.init(document.getElementById('lineChart'));
86106
87-
That.blogVisitList = data.list;
88-
That.listTotal = data.totalNum;
89-
}
90-
});
91-
},
92-
// 设置线性图
93-
setLineChart: function () {
94-
var that = this;
95-
let lineChart = this.$echarts.init(document.getElementById('lineChart'));
107+
this.SQAjax({
108+
Url: '/api/visitCount/foreend',
109+
RequestData: {
110+
endTime: this.getSQTime().split(' ')[0],
111+
dayNum: 7
112+
},
113+
Success: function (data) {
114+
let dates = [], readings = [], ips = [];
115+
data.dateCountList.forEach(function (item) {
116+
dates.push(item.time);
117+
readings.push(item.reading);
118+
ips.push(item.ipNum);
119+
});
120+
that.lineChartOption.xAxis.data = dates.reverse();
121+
that.lineChartOption.series[0].data = readings.reverse();
122+
that.lineChartOption.series[1].data = ips.reverse();
123+
lineChart.setOption(that.lineChartOption);
124+
}
125+
});
126+
},
127+
// 删除访问记录
128+
Delete: function (Id) {
129+
var That = this;
96130
97-
this.SQAjax({
98-
Url: '/api/visitCount/foreend',
99-
RequestData: {
100-
endTime: this.getSQTime().split(' ')[0],
101-
dayNum: 7
102-
},
103-
Success: function (data) {
104-
let dates = [], readings = [];
105-
data.dateCountList.forEach(function (item) {
106-
dates.push(item.time);
107-
readings.push(item.reading);
108-
});
109-
that.lineChartOption.xAxis.data = dates.reverse();
110-
that.lineChartOption.series[0].data = readings.reverse();
111-
lineChart.setOption(that.lineChartOption);
112-
}
113-
});
114-
},
115-
// 删除访问记录
116-
Delete: function (Id) {
117-
var That = this;
131+
That.SQAjax({
132+
Url: '/api/visitDelete/backend',
133+
RequestData: {
134+
_id: Id
135+
},
136+
Success: function (data) {
137+
That.$message('删除成功');
138+
That.getBlogVisitList();
139+
}
140+
});
141+
},
142+
// 翻页方法
143+
ChangeCurPage: function (CurPage) {
144+
this.SkipTo(CurPage);
145+
this.MyCurPage = CurPage;
146+
},
147+
NextPage: function (CurPage) {
148+
this.SkipTo(CurPage);
149+
this.MyCurPage = CurPage;
150+
},
151+
// 翻到某一页
152+
SkipTo: function (CurPage) {
153+
var That = this;
118154
119-
That.SQAjax({
120-
Url: '/api/visitDelete/backend',
121-
RequestData: {
122-
_id: Id
123-
},
124-
Success: function (data) {
125-
That.$message('删除成功');
126-
That.getBlogVisitList();
127-
}
128-
});
129-
},
130-
// 翻页方法
131-
ChangeCurPage:function(CurPage){
132-
this.SkipTo(CurPage);
133-
this.MyCurPage = CurPage;
134-
},
135-
NextPage:function (CurPage) {
136-
this.SkipTo(CurPage);
137-
this.MyCurPage = CurPage;
138-
},
139-
// 翻到某一页
140-
SkipTo:function (CurPage) {
141-
var That = this;
155+
That.SQAjax({
156+
Url: '/api/visitRead/foreend',
157+
RequestData: {
158+
PagnationData: {
159+
Skip: (CurPage - 1) * That.pageSize,
160+
Limit: That.pageSize
161+
}
162+
},
163+
Success: function (data) {
164+
data.list.forEach(function (item) {
165+
if (!item.fromUrl) item.fromUrl = '获取失败';
166+
});
142167
143-
That.SQAjax({
144-
Url: '/api/visitRead/foreend',
145-
RequestData: {
146-
PagnationData: {
147-
Skip: (CurPage-1) * That.pageSize,
148-
Limit: That.pageSize
168+
That.blogVisitList = data.list;
149169
}
150-
},
151-
Success: function (data) {
152-
data.list.forEach(function (item) {
153-
if(!item.fromUrl) item.fromUrl = '获取失败';
154-
});
170+
});
171+
}
172+
},
173+
mounted: function () {
174+
this.getBlogVisitList();
175+
this.setLineChart();
155176
156-
That.blogVisitList = data.list;
157-
}
177+
this.bus.$emit('Topbar', {
178+
MenuHighLight: '0'
158179
});
159180
}
160-
},
161-
mounted: function () {
162-
this.getBlogVisitList();
163-
this.setLineChart();
164-
165-
this.bus.$emit('Topbar', {
166-
MenuHighLight: '0'
167-
});
168181
}
169-
}
170182
</script>
171183

172184
<style scoped>
173-
.lineChart {
174-
width: 100%;
175-
height: 400px;
176-
}
177-
.partTitle{
185+
.lineChart {
186+
width: 100%;
187+
height: 400px;
188+
}
189+
190+
.partTitle {
178191
padding: 1rem 0 1rem 0;
179192
color: rgb(18, 18, 18);
180193
font-weight: 500;

‎vue.config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,18 @@ module.exports = {
1010
msTilelmage:'./favicon.ico',
1111
}
1212
},
13+
configureWebpack:config=>{
14+
// GZip压缩
15+
const CompressionPlugin = require('compression-webpack-plugin');
16+
config.plugins.push(
17+
new CompressionPlugin({
18+
algorithm:'gzip',
19+
test:/\.(js|css|woff|woff2|svg)$/, // 要压缩的文件
20+
threshold:10240, // 压缩超过10k的数据
21+
deleteOriginalAssets:false, // 不删除压缩前的文件，如果浏览器不支持Gzip，则会加载源文件
22+
minRatio:0.8 // 压缩比大于0.8的文件将不会被压缩
23+
})
24+
);
25+
}
1326
}
1427

0 commit comments

Comments
 (0)