pull/95/head
ahhui 2023-04-16 23:25:25 +08:00
commit 9d84d5e408
8 changed files with 257 additions and 226 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@ -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"];

View File

@ -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"];

View File

@ -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 = [

View File

@ -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;
;
})
},
//

View File

@ -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() {
// domecharts
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() {
// domecharts
//
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>

View File

@ -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 {

View File

@ -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() {
// domecharts
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() {
// domecharts
//
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>