HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
landaiqing
2023-07-11 11:53:16 +08:00
parent cbe1999b51
commit 1eaf929a99
20 changed files with 752 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
src/components/System/AdminHome.vue
View File

@@ -19,7 +19,7 @@
</div>
<div class="text item" style="display: flex;justify-content: flex-start">
<span style="font-size: 16px;color: #9ca3af">
登录时间: 2023-7-9
登录时间: {{loginTime}}
</span>
</div>
</el-card>
@@ -47,7 +47,7 @@
></i>
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
<span style="font-size: 30px;font-weight: bold">
678993 <span>/个</span>
{{projectTotal}} <span>/个</span>
</span>
<span style="font-size: 15px;color: #9ca3af">总共项目数量</span>
</div>
@@ -67,7 +67,7 @@
></i>
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
<span style="font-size: 30px;font-weight: bold">
678993 <span>/个</span>
{{userTotal}} <span>/个</span>
</span>
<span style="font-size: 15px;color: #9ca3af">总共用户数量</span>
</div>
@@ -87,7 +87,7 @@
></i>
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
<span style="font-size: 30px;font-weight: bold">
678993 <span>/个</span>
{{AdminTotal}} <span>/个</span>
</span>
<span style="font-size: 15px;color: #9ca3af">总共管理员数量</span>
</div>
@@ -107,7 +107,7 @@
></i>
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
<span style="font-size: 30px;font-weight: bold">
678993 <span>/个</span>
{{ArticleTotal}} <span>/个</span>
</span>
<span style="font-size: 15px;color: #9ca3af">总共文章数量</span>
</div>
@@ -127,7 +127,7 @@
></i>
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
<span style="font-size: 30px;font-weight: bold">
678993 <span>/个</span>
{{CategoryTotal}} <span>/个</span>
</span>
<span style="font-size: 15px;color: #9ca3af">总共标签数量</span>
</div>
@@ -147,7 +147,7 @@
></i>
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
<span style="font-size: 30px;font-weight: bold">
678993 <span>/个</span>
{{CommentTotal}} <span>/个</span>
</span>
<span style="font-size: 15px;color: #9ca3af">总共评论数量</span>
</div>
@@ -157,7 +157,9 @@
<!-- eChart 图-->
<div style="margin-top: 23px;margin-left: 40px">
<el-card style="border: none">
<div id="echart_2" style="width: 20vw;height: 30vh">
</div>
</el-card>
</div>
</div>
@@ -165,22 +167,340 @@
</template>
<script>
import * as echarts from 'echarts'
import Vue from "vue";
import axios from "axios";
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;
export default {
data() {
return {
userTotal:null,
projectTotal:null,
loginTime:'',
ArticleTotal:'',
CategoryTotal:'',
CommentTotal:'',
AdminTotal:'',
date:[],
Month:[],
Year:[],
}
},
methods: {
getAdminLoginTime(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/retlogintime',
// URL 中的查询参数
params: {
adminName:this.$cookie.get('adminName')
}
}).then((res)=>{
that.loginTime=res.data;
});
},
getUserTotal(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/userNum',
// URL 中的查询参数
params: {
}
}).then((res)=>{
that.userTotal=res.data;
});
},
getProjectTotal(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/countNum',
// URL 中的查询参数
params: {
}
}).then((res)=>{
that.projectTotal=res.data;
});
},
getArticleTotal(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/countArticle',
// URL 中的查询参数
params: {
}
}).then((res)=>{
that.ArticleTotal=res.data;
});
},
getAdminTotal(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/countAdmin',
// URL 中的查询参数
params: {
}
}).then((res)=>{
that.AdminTotal=res.data;
});
},
getCommentTotal(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/countComment',
// URL 中的查询参数
params: {
}
}).then((res)=>{
that.CommentTotal=res.data;
});
},
getCategoryTotal(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/countCategory',
// URL 中的查询参数
params: {
}
}).then((res)=>{
that.CategoryTotal=res.data;
});
},
getProjectByTime(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/retProjectByTime',
// URL 中的查询参数
params: {
}
}).then((res)=>{
console.log(res);
that.date=res.data.Date;
that.Month=res.data.Month;
that.Year=res.data.Year;
console.log(that.date)
});
},
eChartPic1(){
var myChart =this.$echarts.init(document.getElementById('echart_2'));
const cols = ['#3BDBDB', '#6CEBEB', '#C2FFFF', '#FFFFFF']
var data = this.date;
var data2 = this.Month;
var data3 = this.Year;
var xData = [],
yData = [], xData2 = [],
yData2 = [], xData3 = [],
yData3 = [];
data.map(function (a) {
xData.push(a.date);
yData.push(a.num);
});
data2.map(function (a) {
xData2.push(a.date);
yData2.push(a.num);
});
data3.map(function (a) {
xData3.push(a.date);
yData3.push(a.num);
});
let unit = '个'
var option = {
// backgroundColor: '#FFF',
animation: false,
grid: {
top: '4%',
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
backgroundColor: '#FFF',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)',
axisPointer: {
type: 'shadow'
}
},
xAxis: [{
type: 'category',
axisLabel: {
show: true,
},
axisLine: {
show: false,
lineStyle: {
color: '#8c8c8c',
}
},
axisTick: {
show: false,
alignWithLabel: true,
},
splitLine: {
show: false,
},
data: xData,
},
],
yAxis: [{
name: '数量(' + unit + ')',
type: 'value',
// max: this.setCeil(this.tz_filetransfer_dTotal),
// interval: this.setCeil(this.tz_filetransfer_dTotal)/10,//间隔
// min: 0,
axisLabel: {
show: true,
color: 'rgba(255, 255, 255,.8)',
},
axisLine: {
show: false,
lineStyle: {
color: '#8c8c8c',
}
},
axisTick: {
show: false,
alignWithLabel: true,
},
splitLine: {
show: true,
lineStyle: {
color: '#888888',
},
},
},
],
dataZoom: [
{
type: 'inside', //无滑动条内置缩放 type: 'slider', //缩放滑动条
show: true, //开启
// yAxisIndex: [0], //Y轴滑动
// xAxisIndex: [0],//X轴滑动
start: 1, //初始化时，滑动条宽度开始标度
end: 10, //初始化时，滑动条宽度结束标度
},
],
series: [{
name: '数量',
type: 'line',
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 3,
color: cols[1],
},
itemStyle: {
color: cols[1],
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0.4,
color: 'rgba(194, 255, 255,0.1)',
},
{
offset: 1,
color: 'rgba(108, 235, 235,0.9)',
},
]),
},
},
data: yData,
},
],
}
myChart.setOption(option);
//图表大小变动从新渲染，动态自适应
window.addEventListener("resize", function () {
myChart.resize();
});
myChart.resize({
width: 647,
height: 147
});
let lastdiff = 0
myChart.on('dataZoom', function (params) {
let start = params.batch[0].start
let end = params.batch[0].end
let diff = end - start
// mircodiff > 1，说明是放大而不是拖拽
let mircodiff = Math.abs(diff - lastdiff)
if (diff < 30 && mircodiff > 1) {
// 放大之后的操作
let option = myChart.getOption()
// option.xAxis[0].axisLabel.rotate = 0 // 当缩放程度小于40的时候让字体倾斜为0
option.xAxis[0].data = xData;
option.series[0].data = yData;
myChart.clear()
myChart.setOption(option, true)
} else if (diff > 50 && mircodiff > 1) {
// 放大之后的操作
let option = myChart.getOption()
// option.xAxis[0].axisLabel.rotate = 0 // 当缩放程度小于40的时候让字体倾斜为0
option.xAxis[0].data = xData2;
option.series[0].data = yData2;
myChart.clear()
myChart.setOption(option, true)
}
if (diff >= 80 && mircodiff > 1) {
// 缩小回去的操作
let option = myChart.getOption()
// option.xAxis[0].axisLabel.rotate = 50 // 当缩放程度大于40的时候让字体开始倾斜
option.xAxis[0].data = xData3;
option.series[0].data = yData3;
myChart.clear()
myChart.setOption(option, true)
}
lastdiff = diff;
});
}
},
mounted() {
this.getUserTotal();
this.getProjectTotal();
this.getAdminLoginTime();
this.getArticleTotal();
this.getCommentTotal();
this.getAdminTotal();
this.getCategoryTotal();
this.getProjectByTime();
this.eChartPic1();
}
}