444 lines
20 KiB
Vue
444 lines
20 KiB
Vue
<template>
|
||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap">
|
||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap">
|
||
<div>
|
||
<el-card style="border: none">
|
||
<div slot="header" class="clearfix" style="display: flex;flex-direction: row;flex-wrap: nowrap">
|
||
<div style="width: 150px;height: 150px;cursor: pointer" >
|
||
<el-avatar style="background-color: #969896" :src="require('@/assets/logo/tx.png')"
|
||
:size="150"></el-avatar>
|
||
</div>
|
||
<div style="margin-left: 30px;margin-right: 30px;display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;justify-content: center">
|
||
<span style="font-size: 50px;">
|
||
{{ this.$cookie.get("adminName") }}
|
||
</span>
|
||
<span style="margin-top: 10px;font-size: 16px;color: #969896">
|
||
超级管理员
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="text item" style="display: flex;justify-content: flex-start">
|
||
<span style="font-size: 16px;color: #9ca3af">
|
||
登录时间: {{loginTime}}
|
||
</span>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<div style="margin-top: 20px">
|
||
<el-card class="box-card" style="border: none">
|
||
<div ref="echart1" style="width:300px;height:300px">
|
||
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap">
|
||
<div style="display: flex;flex-direction: row;flex-wrap: wrap">
|
||
<el-card style="margin-left: 40px;margin-bottom: 45px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
|
||
<div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
|
||
<i class="el-icon-s-finance"
|
||
style="width: 100px;
|
||
height: 100px;
|
||
background-color: #2ec7c9;
|
||
line-height: 100px;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
color: #fff;"
|
||
></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">
|
||
{{projectTotal}} <span>/个</span>
|
||
</span>
|
||
<span style="font-size: 15px;color: #9ca3af">总共项目数量</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card style="margin-left: 40px;margin-bottom: 45px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
|
||
<div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
|
||
<i class="el-icon-user-solid"
|
||
style="width: 100px;
|
||
height: 100px;
|
||
background-color: #ffb980;
|
||
line-height: 100px;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
color: #fff;"
|
||
></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">
|
||
{{userTotal}} <span>/个</span>
|
||
</span>
|
||
<span style="font-size: 15px;color: #9ca3af">总共用户数量</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card style="margin-left: 40px;margin-bottom: 45px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
|
||
<div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
|
||
<i class="el-icon-s-tools"
|
||
style="width: 100px;
|
||
height: 100px;
|
||
background-color: #5ab1ef;
|
||
line-height: 100px;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
color: #fff;"
|
||
></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">
|
||
{{AdminTotal}} <span>/个</span>
|
||
</span>
|
||
<span style="font-size: 15px;color: #9ca3af">总共管理员数量</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card style="margin-left: 40px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
|
||
<div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
|
||
<i class="el-icon-s-management"
|
||
style="width: 100px;
|
||
height: 100px;
|
||
background-color: rgb(255,208,20);
|
||
line-height: 100px;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
color: #fff;"
|
||
></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">
|
||
{{ArticleTotal}} <span>/个</span>
|
||
</span>
|
||
<span style="font-size: 15px;color: #9ca3af">总共文章数量</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card style="margin-left: 40px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
|
||
<div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
|
||
<i class="el-icon-s-flag"
|
||
style="width: 100px;
|
||
height: 100px;
|
||
background-color: rgba(87,218,93,0.86);
|
||
line-height: 100px;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
color: #fff;"
|
||
></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">
|
||
{{CategoryTotal}} <span>/个</span>
|
||
</span>
|
||
<span style="font-size: 15px;color: #9ca3af">总共标签数量</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card style="margin-left: 40px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
|
||
<div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
|
||
<i class="el-icon-s-comment"
|
||
style="width: 100px;
|
||
height: 100px;
|
||
background-color: #ea64bb;
|
||
line-height: 100px;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
color: #fff;"
|
||
></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">
|
||
{{CommentTotal}} <span>/个</span>
|
||
</span>
|
||
<span style="font-size: 15px;color: #9ca3af">总共评论数量</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<!-- eChart 图-->
|
||
<div style="margin-top: 23px;margin-left: 40px;">
|
||
<el-card style="border: none;height:450px">
|
||
<!-- <el-tabs v-model="activeName" @tab-click="handleClick">-->
|
||
<!-- <el-tab-pane label="日期统计" name="first">日期统计</el-tab-pane>-->
|
||
<!-- <el-tab-pane label="月度统计" name="second">月度统计</el-tab-pane>-->
|
||
<!-- <el-tab-pane label="年度统计" name="third">年度统计</el-tab-pane>-->
|
||
<!-- </el-tabs>-->
|
||
<div ref="echart2" style="width: 20vw;height: 30vh">
|
||
|
||
</div>
|
||
</el-card>
|
||
<el-button @click="test()"></el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from "vue";
|
||
import axios from "axios";
|
||
|
||
import * as echarts from 'echarts'
|
||
Vue.prototype.$echarts = echarts;
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
Myechart1:'',
|
||
Myechart2:'',
|
||
Myoption1:{},
|
||
Myoption2:{},
|
||
userTotal:null,
|
||
projectTotal:null,
|
||
loginTime:'',
|
||
ArticleTotal:'',
|
||
CategoryTotal:'',
|
||
CommentTotal:'',
|
||
AdminTotal:'',
|
||
// 日期目录：
|
||
datecate:[],
|
||
// 月份目录:
|
||
Moncate:[],
|
||
// 年份目录：
|
||
Yearcate:[],
|
||
// 日期折线单元：
|
||
dateLine:[],
|
||
// 月份折线单元：
|
||
monLine:[],
|
||
// 年份折线单元：
|
||
yearLine:[],
|
||
date:[],
|
||
Month:[],
|
||
Year:[],
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
initEchart(){
|
||
// var that = this;
|
||
// that.Myechart1 = that.$echarts.init(that.$refs.echart1);
|
||
// that.Myechart2 = that.$echarts.init(that.$refs.echart2);
|
||
},
|
||
test(){
|
||
this.getProjectByTime();
|
||
},
|
||
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;
|
||
console.log(that.projectTotal);
|
||
});
|
||
},
|
||
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);
|
||
for(let i=0;i<that.date.length;i++){
|
||
that.datecate.push(that.date[i]['date']);
|
||
let num = parseInt(that.date[i]['num']);
|
||
let datefac = {"value":num,"date":that.date[i]['date'],"type":"line"};
|
||
that.dateLine.push(datefac);
|
||
}
|
||
console.log(that.dateLine);
|
||
console.log(that.datecate);
|
||
});
|
||
},
|
||
eChartPic1(){
|
||
// 按日期折线图：
|
||
var that = this;
|
||
that.Myoption1 = {
|
||
//dataZoom-inside 内置型数据区域缩放组件 所谓内置 1平移：在坐标系中滑动拖拽进行数据区域平移。2缩放：PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同;移动端：在移动端触屏上，支持两指滑动缩放。
|
||
dataZoom: [{
|
||
type: 'inside', //1平移 缩放
|
||
throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
|
||
minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
|
||
start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
|
||
end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
|
||
zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
|
||
}],
|
||
// 主要用来控制图表四周留白
|
||
grid: {
|
||
left: '15%',
|
||
top: '10%',
|
||
},
|
||
// 提示框组件
|
||
tooltip: {
|
||
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
|
||
backgroundColor: '#377CFF', //提示框浮层的背景颜色。
|
||
axisPointer: { //去掉移动的指示线
|
||
type: 'none'
|
||
},
|
||
// 自定义提示框内容
|
||
formatter: function (params) {
|
||
var text = params[0].data.date + ': ' + params[0].data.value
|
||
return text;
|
||
}
|
||
},
|
||
//直角坐标系 grid 中的 x 轴，
|
||
xAxis: {
|
||
type: 'category', //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
|
||
// 坐标轴轴线相关设置
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#E5E5E5', // 坐标轴线线的颜色。
|
||
}
|
||
},
|
||
// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
|
||
axisLabel: {
|
||
// 是否显示坐标刻度标签(这了指是否显示x轴上的月份)
|
||
show: true,
|
||
// 标签文字的颜色
|
||
color: '#999'
|
||
},
|
||
//x轴刻度线设置
|
||
axisTick: {
|
||
"show": false
|
||
},
|
||
// 类目数据，在类目轴（type: 'category'）中有效。
|
||
data: that.datecate,
|
||
},
|
||
//直角坐标系 grid 中的 y 轴，
|
||
yAxis: {
|
||
type: 'value', //'value' 数值轴，适用于连续数据。
|
||
// 坐标轴轴线相关设置
|
||
axisLine: {
|
||
show: false //y轴线消失
|
||
},
|
||
// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
|
||
axisLabel: {
|
||
show: true,
|
||
// 标签文字的颜色
|
||
color: '#999'
|
||
},
|
||
//y轴刻度线设置
|
||
axisTick: {
|
||
"show": false
|
||
},
|
||
splitNumber: 5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整.在类目轴中无效。
|
||
},
|
||
series: that.dateLine,
|
||
};
|
||
that.Myechart1.setOption(that.Myoption1,true);
|
||
// 图表大小变动从新渲染，动态自适应
|
||
},
|
||
eChartPic2(){
|
||
|
||
}
|
||
},
|
||
// 初始化Echart
|
||
|
||
mounted() {
|
||
this.getUserTotal();
|
||
this.getProjectTotal();
|
||
this.getAdminLoginTime();
|
||
this.getArticleTotal();
|
||
this.getCommentTotal();
|
||
this.getAdminTotal();
|
||
this.getCategoryTotal();
|
||
this.getProjectByTime();
|
||
this.Myechart1 = this.$echarts.init(this.$refs.echart1);
|
||
this.Myechart2 = this.$echarts.init(this.$refs.echart2);
|
||
this.eChartPic1();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style> |