Merge branch 'dev' of https://gitee.com/liqianglog/django-vue-admin into dev
commit
9d84d5e408
|
@ -9,7 +9,7 @@
|
|||
<el-col :span="12">
|
||||
<div class="card-content-label">附件统计</div>
|
||||
<div class="card-content">
|
||||
<div class="card-content-value">{{ total || 0 }}</div>
|
||||
<div class="card-content-value">{{ count}}</div>
|
||||
<div class="el-icon-document-copy">
|
||||
附件数量</div>
|
||||
</div>
|
||||
|
@ -17,7 +17,7 @@
|
|||
<el-col :span="12" :offset="6" style="text-align: right">
|
||||
<i class="real-time">实时</i>
|
||||
<div class="card-content-time">
|
||||
<div class="attachment-value">{{ total || 0 }}MB</div>
|
||||
<div class="attachment-value">{{ occupy_space }}MB</div>
|
||||
<div class="el-icon-s-flag">
|
||||
附件大小</div>
|
||||
</div>
|
||||
|
@ -42,18 +42,20 @@
|
|||
isResizable: true,
|
||||
data() {
|
||||
return {
|
||||
total: 0,
|
||||
count:"",
|
||||
occupy_space:"",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initGet() {
|
||||
request({
|
||||
url: "",
|
||||
}).then((res) => {
|
||||
const { data } = res;
|
||||
// this.total = data.total;
|
||||
});
|
||||
},
|
||||
initGet () {
|
||||
request({
|
||||
url: '/api/system/homepage_statistics/'
|
||||
}).then((res)=>{
|
||||
this.count=res.data.sum_file.count;
|
||||
this.occupy_space=res.data.sum_file.occupy_space;
|
||||
;
|
||||
})
|
||||
},
|
||||
// 生成一个随机整数
|
||||
randomColor() {
|
||||
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<el-col :span="12">
|
||||
<div class="card-content-label">数据库统计</div>
|
||||
<div class="card-content">
|
||||
<div class="card-content-value">{{ total || 0 }}</div>
|
||||
<div class="card-content-value">{{count }}</div>
|
||||
<div class="el-icon-coin">
|
||||
数据库数量</div>
|
||||
</div>
|
||||
|
@ -17,7 +17,7 @@
|
|||
<el-col :span="12" :offset="6" style="text-align: right">
|
||||
<i class="real-time">实时</i>
|
||||
<div class="card-content-time">
|
||||
<div class="attachment-value">{{ total || 0 }}MB</div>
|
||||
<div class="attachment-value">{{ occupy_space}}MB</div>
|
||||
<div class="el-icon-s-flag">
|
||||
占用空间</div>
|
||||
</div>
|
||||
|
@ -41,18 +41,19 @@
|
|||
isResizable: true,
|
||||
data() {
|
||||
return {
|
||||
total: 0,
|
||||
count:"",
|
||||
occupy_space:"",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initGet() {
|
||||
request({
|
||||
url: "",
|
||||
}).then((res) => {
|
||||
const { data } = res;
|
||||
// this.total = data.total;
|
||||
});
|
||||
},
|
||||
initGet () {
|
||||
request({
|
||||
url: '/api/system/homepage_statistics/'
|
||||
}).then((res)=>{
|
||||
this.count=res.data.sum_file.count;
|
||||
this.occupy_space=res.data.sum_file.occupy_space;
|
||||
})
|
||||
},
|
||||
// 生成一个随机整数
|
||||
randomColor() {
|
||||
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<el-col :span="12">
|
||||
<div class="card-content">
|
||||
<div class="card-content-label">用户总数</div>
|
||||
<div class="card-content-value">{{total || 0}}</div>
|
||||
<div class="card-content-value">{{sum_register}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :offset="6" style="text-align: right;">
|
||||
|
@ -31,18 +31,17 @@
|
|||
isResizable: true,
|
||||
data () {
|
||||
return {
|
||||
total: 0
|
||||
sum_register:"",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initGet () {
|
||||
request({
|
||||
url: ''
|
||||
}).then(res => {
|
||||
const { data } = res
|
||||
// this.total = data.total
|
||||
})
|
||||
},
|
||||
request({
|
||||
url: '/api/system/homepage_statistics/'
|
||||
}).then((res)=>{
|
||||
this.sum_register=res.data.sum_register
|
||||
})
|
||||
},
|
||||
// 生成一个随机整数
|
||||
randomColor () {
|
||||
const color = [
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
</el-col>
|
||||
<el-col :span="20" class="orange-box">
|
||||
<div class="enroll-time">
|
||||
<div class="enroll-number"><h3>{{total || 0}}</h3>
|
||||
<div class="enroll-number"><h3>{{ newName }}</h3>
|
||||
</div>
|
||||
<div class="enroll-text">今日注册
|
||||
</div>
|
||||
|
@ -24,7 +24,7 @@
|
|||
</el-col>
|
||||
<el-col :span="20" class="orange-box">
|
||||
<div class="enroll-time">
|
||||
<div class="enroll-number"><h3>{{total || 1}}</h3>
|
||||
<div class="enroll-number"><h3>{{today_login}}</h3>
|
||||
</div>
|
||||
<div class="enroll-text">今日登录
|
||||
</div>
|
||||
|
@ -39,7 +39,7 @@
|
|||
</el-col>
|
||||
<el-col :span="20" class="orange-box">
|
||||
<div class="enroll-time">
|
||||
<div class="enroll-number"><h3>{{total || 7}}</h3>
|
||||
<div class="enroll-number"><h3>{{Three_days_register}}</h3>
|
||||
</div>
|
||||
<div class="enroll-text">三日新增
|
||||
</div>
|
||||
|
@ -54,7 +54,7 @@
|
|||
</el-col>
|
||||
<el-col :span="20" class="orange-box">
|
||||
<div class="enroll-time">
|
||||
<div class="enroll-number"><h3>{{total || 15}}</h3>
|
||||
<div class="enroll-number"><h3>{{Seven_days_register}}</h3>
|
||||
</div>
|
||||
<div class="enroll-text">七日新增
|
||||
</div>
|
||||
|
@ -69,7 +69,7 @@
|
|||
</el-col>
|
||||
<el-col :span="20" class="orange-box">
|
||||
<div class="enroll-time">
|
||||
<div class="enroll-number"><h3>{{total || 24}}</h3>
|
||||
<div class="enroll-number"><h3>{{Seven_days_login}}</h3>
|
||||
</div>
|
||||
<div class="enroll-text">七日活跃
|
||||
</div>
|
||||
|
@ -84,7 +84,7 @@
|
|||
</el-col>
|
||||
<el-col :span="20" class="orange-box">
|
||||
<div class="enroll-time">
|
||||
<div class="enroll-number"><h3>{{total || 89}}</h3>
|
||||
<div class="enroll-number"><h3>{{month_login}}</h3>
|
||||
</div>
|
||||
<div class="enroll-text">月活跃
|
||||
</div>
|
||||
|
@ -96,6 +96,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from '@/api/service'
|
||||
import log from '../init'
|
||||
export default {
|
||||
title: '用户新增活跃图',
|
||||
icon: 'el-icon-user-solid',
|
||||
|
@ -107,19 +109,29 @@
|
|||
isResizable: true,
|
||||
data () {
|
||||
return {
|
||||
total: 0
|
||||
newName:"",
|
||||
today_login:"",
|
||||
Three_days_register:"",
|
||||
Seven_days_register:"",
|
||||
Seven_days_login:"",
|
||||
month_login:"",
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initGet()
|
||||
},
|
||||
methods: {
|
||||
initGet () {
|
||||
initGet () {
|
||||
request({
|
||||
url: ''
|
||||
}).then(res => {
|
||||
const { data } = res
|
||||
// this.total = data.total
|
||||
url: '/api/system/homepage_statistics/'
|
||||
}).then((res)=>{
|
||||
this.newName=res.data.today_register;
|
||||
this. today_login=res.data.today_login;
|
||||
this. Three_days_register=res.data.Three_days_register;
|
||||
this. Seven_days_register=res.data.Seven_days_register;
|
||||
this. Seven_days_login=res.data.Seven_days_login;
|
||||
this. month_login=res.data.month_login;
|
||||
;
|
||||
})
|
||||
},
|
||||
// 生成一个随机整数
|
||||
|
|
|
@ -1,92 +1,99 @@
|
|||
<template>
|
||||
<el-card
|
||||
class="card-view"
|
||||
:style="{
|
||||
backgroundColor: randomColor(),
|
||||
}"
|
||||
>
|
||||
<div id="main" style="width: 530px; height: 300px; left: -18px"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<el-card
|
||||
class="card-view"
|
||||
:style="{
|
||||
backgroundColor: randomColor(),
|
||||
}"
|
||||
>
|
||||
<div id="main" style="width: 530px; height: 300px; left: -18px"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from "@/api/service";
|
||||
export default {
|
||||
title: "注册用户数折线图",
|
||||
icon: "el-icon-s-data",
|
||||
description: "用户注册",
|
||||
name: "registeredUser",
|
||||
height: 28,
|
||||
width: 10,
|
||||
minH: 10,
|
||||
minW: 4,
|
||||
isResizable: true,
|
||||
name: "eCharts",
|
||||
data() {
|
||||
return {};
|
||||
import { request } from "@/api/service";
|
||||
export default {
|
||||
title: "注册用户数折线图",
|
||||
icon: "el-icon-s-data",
|
||||
description: "用户注册",
|
||||
name: "registeredUser",
|
||||
height: 28,
|
||||
width: 10,
|
||||
minH: 10,
|
||||
minW: 4,
|
||||
isResizable: true,
|
||||
name: "eCharts",
|
||||
data() {
|
||||
this.myChart = null;
|
||||
return {
|
||||
time: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initGet() {
|
||||
request({
|
||||
url: "/api/system/homepage_statistics/",
|
||||
}).then((res) => {
|
||||
this.time = res.data.sum_days_register_list;
|
||||
this.drawLine(this.time);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initGet() {
|
||||
request({
|
||||
url: "",
|
||||
});
|
||||
},
|
||||
// 生成一个随机整数
|
||||
randomColor() {
|
||||
const color = ["#fffff"];
|
||||
const ran = Math.floor(Math.random() * 4);
|
||||
return color[ran];
|
||||
},
|
||||
drawLine() {
|
||||
// 基于准备好的dom,初始化echarts实例
|
||||
let myChart = this.$echarts.init(document.getElementById("main"));
|
||||
// 绘制图表
|
||||
myChart.setOption({
|
||||
title: { text: "" },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ["2023-4-8", "2023-4-9", "2023-4-10", "2023-4-11", "2023-4-12"],
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
interval: 0, //强制显示所有刻度
|
||||
// 生成一个随机整数
|
||||
randomColor() {
|
||||
const color = ["#fffff"];
|
||||
const ran = Math.floor(Math.random() * 4);
|
||||
return color[ran];
|
||||
},
|
||||
drawLine() {
|
||||
// 基于准备好的dom,初始化echarts实例
|
||||
// 绘制图表
|
||||
this.myChart.setOption({
|
||||
title: { text: "" },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: this.time.map((item) => item.time),
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
interval: 0, //强制显示所有刻度
|
||||
rotate: 6,
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
legend: {
|
||||
data: ["注册用户数"],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "注册用户数",
|
||||
type: "line",
|
||||
data: this.time.map((item) => item.count),
|
||||
//折线图的背景色
|
||||
areaStyle: {
|
||||
color: "rgb(98,206,178)",
|
||||
},
|
||||
//折线的颜色
|
||||
itemStyle: {
|
||||
color: "rgb(38,204,164)", // 设置折线图为红色
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
legend: {
|
||||
data: ["注册用户数"],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "注册用户数",
|
||||
type: "line",
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
//折线图的背景色
|
||||
areaStyle: {
|
||||
color: "rgb(98,206,178)",
|
||||
},
|
||||
//折线的颜色
|
||||
itemStyle: {
|
||||
color: "rgb(38,204,164)", // 设置折线图为红色
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.initGet();
|
||||
this.drawLine();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
},
|
||||
mounted() {
|
||||
this.myChart = this.$echarts.init(document.getElementById("main"));
|
||||
this.initGet();
|
||||
this.drawLine();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card-view {
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-card{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
.card-view {
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<el-col :span="12">
|
||||
<div class="card-content-label">附件总数</div>
|
||||
<div class="card-content">
|
||||
<div class="card-content-value">{{ total || 0 }}</div>
|
||||
<div class="card-content-value">{{ count }}</div>
|
||||
<div class="el-icon-document-copy">
|
||||
附件总数量</div>
|
||||
</div>
|
||||
|
@ -17,7 +17,7 @@
|
|||
<el-col :span="12" :offset="6" style="text-align: right">
|
||||
<i class="real-time">实时</i>
|
||||
<div class="card-content-time">
|
||||
<div class="attachment-value">{{ total || 0 }}MB</div>
|
||||
<div class="attachment-value">{{ occupy_space}}MB</div>
|
||||
<div class="el-icon-s-flag">
|
||||
占用空间</div>
|
||||
</div>
|
||||
|
@ -42,18 +42,20 @@
|
|||
isResizable: true,
|
||||
data() {
|
||||
return {
|
||||
total: 0,
|
||||
count:"",
|
||||
occupy_space:"",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initGet() {
|
||||
request({
|
||||
url: "",
|
||||
}).then((res) => {
|
||||
const { data } = res;
|
||||
// this.total = data.total;
|
||||
});
|
||||
},
|
||||
initGet () {
|
||||
request({
|
||||
url: '/api/system/homepage_statistics/'
|
||||
}).then((res)=>{
|
||||
this.count=res.data.today_file.count;
|
||||
this.occupy_space=res.data.today_file.occupy_space;
|
||||
;
|
||||
})
|
||||
},
|
||||
// 生成一个随机整数
|
||||
randomColor() {
|
||||
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
|
||||
|
@ -95,7 +97,7 @@
|
|||
}
|
||||
.el-icon-s-flag {
|
||||
font-size: 12px;
|
||||
margin-right: 132px;
|
||||
margin-right: 130px;
|
||||
}
|
||||
}
|
||||
.real-time {
|
||||
|
|
|
@ -1,98 +1,106 @@
|
|||
<template>
|
||||
<el-card
|
||||
class="card-view"
|
||||
:style="{
|
||||
backgroundColor: randomColor(),
|
||||
}"
|
||||
>
|
||||
<!-- shadow="always" -->
|
||||
<div id="myChart" style="width: 530px; height: 300px; left: -18px"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from "@/api/service";
|
||||
export default {
|
||||
title: "用户登录折线图",
|
||||
icon: "el-icon-s-data",
|
||||
description: "用户登陆",
|
||||
name: "userIogin",
|
||||
height: 28,
|
||||
<el-card
|
||||
class="card-view"
|
||||
:style="{
|
||||
backgroundColor: randomColor(),
|
||||
}"
|
||||
>
|
||||
<!-- shadow="always" -->
|
||||
<div id="myChart" style="width: 530px; height: 300px; left: -15px"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request } from "@/api/service";
|
||||
export default {
|
||||
title: "用户登录折线图",
|
||||
icon: "el-icon-s-data",
|
||||
description: "用户登陆",
|
||||
name: "user",
|
||||
height: 28,
|
||||
width: 10,
|
||||
minH: 10,
|
||||
minW: 4,
|
||||
isResizable: true,
|
||||
name: "eCharts",
|
||||
data() {
|
||||
return {};
|
||||
isResizable: true,
|
||||
name: "eCharts",
|
||||
data() {
|
||||
this.myChart=null
|
||||
return {
|
||||
time:[]
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initGet () {
|
||||
request({
|
||||
url: '/api/system/homepage_statistics/'
|
||||
}).then((res)=>{
|
||||
this.time=res.data.sum_days_login_list
|
||||
this.drawLine(this.time)
|
||||
})
|
||||
},
|
||||
// 生成一个随机整数
|
||||
randomColor() {
|
||||
const color = ["#fffff"];
|
||||
const ran = Math.floor(Math.random() * 4);
|
||||
return color[ran];
|
||||
},
|
||||
methods: {
|
||||
initGet() {
|
||||
request({
|
||||
url: "",
|
||||
});
|
||||
},
|
||||
// 生成一个随机整数
|
||||
randomColor() {
|
||||
const color = ["#fffff"];
|
||||
const ran = Math.floor(Math.random() * 4);
|
||||
return color[ran];
|
||||
},
|
||||
drawLine() {
|
||||
// 基于准备好的dom,初始化echarts实例
|
||||
let myChart = this.$echarts.init(document.getElementById("myChart"));
|
||||
// 绘制图表
|
||||
myChart.setOption({
|
||||
title: { text: "" },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ["2023-4-8", "2023-4-9", "2023-4-10", "2023-4-11", "2023-4-12"],
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
interval: 0, //强制显示所有刻度
|
||||
drawLine() {
|
||||
// 基于准备好的dom,初始化echarts实例
|
||||
// 绘制图表
|
||||
this. myChart.setOption({
|
||||
title: { text: "" },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: this.time.map(item=>item.time),
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
interval: 0, //强制显示所有刻度
|
||||
rotate: 6,
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
legend: {
|
||||
data: ["用户登陆数"],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "用户登陆数",
|
||||
type: "line",
|
||||
data: this.time.map(item=>item.count),
|
||||
areaStyle: {},
|
||||
areaStyle: {
|
||||
//折线的颜色
|
||||
color: "rgb(116,135,206)",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgb(67,89,185)", // 设置折线图为红色
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
legend: {
|
||||
data: ["用户登陆数"],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "用户登陆数",
|
||||
type: "line",
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
areaStyle: {},
|
||||
areaStyle: {
|
||||
//折线的颜色
|
||||
color: "rgb(116,135,206)",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgb(67,89,185)", // 设置折线图为红色
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.initGet();
|
||||
this.drawLine();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card-view {
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-card{
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-card__body {
|
||||
width: 470px;
|
||||
height: 300px;
|
||||
},
|
||||
mounted() {
|
||||
this. myChart =this.$echarts.init(document.getElementById("myChart"));
|
||||
this.initGet();
|
||||
this.drawLine();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card-view {
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-card{
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-card__body {
|
||||
width: 470px;
|
||||
height: 300px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue