gitee
/
django-vue-admin
mirror of https://gitee.com/liqianglog/django-vue-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

添加控制台部件

pull/95/head
sanfengpeng 2023-04-14 18:43:38 +08:00
parent 2be51eb992
commit fb53e8b6cb
13 changed files with 774 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

6
package-lock.json generated Normal file
View File

@ -0,0 +1,6 @@
{
"name": "django-vue-admin",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}

2
web/.env.development
View File

@ -5,5 +5,5 @@ VUE_APP_TITLE=企业级后台管理系统
# 启用权限管理
VUE_APP_PM_ENABLED = true
# 后端接口地址及端口(域名)
VUE_APP_API = "http://127.0.0.1:8000"
VUE_APP_API = "https://demo.django-vue-admin.com/api"

2
web/package.json
View File

@ -23,7 +23,7 @@
"d2-crud-x": "^2.17.9",
"d2p-extends": "^2.17.9",
"dayjs": "^1.8.17",
"echarts": "^5.1.2",
"echarts": "^5.4.2",
"el-phone-number-input": "^1.1.5",
"element-ui": "^2.15.5",
"faker": "^4.1.0",

4
web/src/main.js
View File

@ -36,13 +36,15 @@ import md5 from 'js-md5'
import websocket from '@/api/websocket'
import util from '@/libs/util'
//引入echarts
import * as echarts from "echarts"
// 核心插件
Vue.use(d2Admin)
Vue.use(VXETable)
Vue.prototype.$md5 = md5
Vue.prototype.$util = util
Vue.prototype.$websocket = websocket
Vue.prototype.$echarts = echarts //注册echarts组件
new Vue({
router,
store,

0
web/src/views/dashboard/workbench/components/ aac.vue
View File

109
web/src/views/dashboard/workbench/components/attachment.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<el-card
class="card-view"
:style="{ backgroundColor: randomColor() }"
shadow="always"
>
<div>
<el-row type="flex" justify="space-around">
<el-col :span="12">
<div class="card-content-label">附件统计</div>
<div class="card-content">
<div class="card-content-value">{{ total || 0 }}</div>
<div class="el-icon-document-copy">
附件数量</div>
</div>
</el-col>
<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="el-icon-s-flag">
附件大小</div>
</div>
</el-col>
</el-row>
</div>
</el-card>
</template>
<script>
import { request } from "@/api/service";
export default {
title: "附件统计图",
icon: "el-icon-s-order",
description: "总附件数",
name: "attachment",
height: 14,
width: 8,
minH: 14,
minW: 8,
isResizable: true,
data() {
return {
total: 0,
};
},
methods: {
initGet() {
request({
url: "",
}).then((res) => {
const { data } = res;
// this.total = data.total;
});
},
// 生成一个随机整数
randomColor() {
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
const ran = Math.floor(Math.random() * 4);
return color[ran];
},
},
mounted() {
this.initGet();
},
};
</script>
<style scoped lang="scss">
.card-view {
border-radius: 10px;
color: #ffffff;
.card-content {
.card-content-label {
font-size: 0.8em;
color: #ffffff;
}
.card-content-value {
color: #ffffff;
margin-top: 5px;
font-size: 1.5em;
font-weight: bold;
}
}
.attachment-value {
color: #ffffff;
margin-top: 5px;
font-size: 1.5em;
font-weight: bold;
margin-right: 180px;
}
.el-icon-document-copy {
font-size: 12px;
}
.el-icon-s-flag {
font-size: 12px;
margin-right: 130px;
}
}
.real-time {
background: rgb(53, 59, 86);
font-size: 14px;
font-style: normal;
padding: 0 7px 0 7px;
border-radius: 4px;
}
</style>

108
web/src/views/dashboard/workbench/components/database.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<el-card
class="card-view"
:style="{ backgroundColor: randomColor() }"
shadow="always"
>
<div>
<el-row type="flex" justify="space-around">
<el-col :span="12">
<div class="card-content-label">数据库统计</div>
<div class="card-content">
<div class="card-content-value">{{ total || 0 }}</div>
<div class="el-icon-coin">
数据库数量</div>
</div>
</el-col>
<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="el-icon-s-flag">
占用空间</div>
</div>
</el-col>
</el-row>
</div>
</el-card>
</template>
<script>
import { request } from "@/api/service";
export default {
title: "数据库统计图",
icon: "el-icon-coin",
description: "数据库统计",
name: "database",
height: 14,
width: 8,
minH: 14,
minW: 8,
isResizable: true,
data() {
return {
total: 0,
};
},
methods: {
initGet() {
request({
url: "",
}).then((res) => {
const { data } = res;
// this.total = data.total;
});
},
// 生成一个随机整数
randomColor() {
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
const ran = Math.floor(Math.random() * 4);
return color[ran];
},
},
mounted() {
this.initGet();
},
};
</script>
<style scoped lang="scss">
.card-view {
border-radius: 10px;
color: #ffffff;
.card-content {
.card-content-label {
font-size: 0.8em;
color: #ffffff;
}
.card-content-value {
color: #ffffff;
margin-top: 5px;
font-size: 1.5em;
font-weight: bold;
}
}
.attachment-value {
color: #ffffff;
margin-top: 5px;
font-size: 1.5em;
font-weight: bold;
margin-right: 180px;
}
.el-icon-coin{
font-size: 12px;
}
.el-icon-s-flag {
font-size: 12px;
margin-right: 132px;
}
}
.real-time {
background: rgb(53, 59, 86);
font-size: 14px;
font-style: normal;
padding: 0 7px 0 7px;
border-radius: 4px;
}
</style>

85
web/src/views/dashboard/workbench/components/member.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<el-card class="card-view" :style= "{backgroundColor:randomColor()}" shadow="always">
<div>
<el-row type="flex" justify="space-around" style="padding:10px">
<el-col :span="12">
<div class="card-content">
<div class="card-content-label">用户总数</div>
<div class="card-content-value">{{total || 0}}</div>
</div>
</el-col>
<el-col :span="6" :offset="6" style="text-align: right;">
<i class="el-icon-user-solid" size="48px"></i>
</el-col>
</el-row>
</div>
</el-card>
</template>
<script>
import { request } from '@/api/service'
export default {
title: '用户总数',
icon: 'el-icon-user-solid',
description: '总会员数',
name: 'summarizing',
height: 14,
width: 8,
minH: 14,
minW: 8,
isResizable: true,
data () {
return {
total: 0
}
},
methods: {
initGet () {
request({
url: ''
}).then(res => {
const { data } = res
// this.total = data.total
})
},
// 生成一个随机整数
randomColor () {
const color = [
'#50A8F4FF',
'#FD6165FF',
'#E679D8FF',
'#F9AB5BFF'
]
const ran = Math.floor(Math.random() * 4)
return color[ran]
}
},
mounted () {
this.initGet()
}
}
</script>
<style scoped lang="scss">
.card-view{
border-radius: 10px;
color: #FFFFFF;
.card-content{
.card-content-label{
font-size: 1em;
color: #FFFFFF;
}
.card-content-value{
color: #FFFFFF;
margin-top: 10px;
font-size: 1.5em;
font-weight: bold;
}
}
}
.el-icon-user-solid{
font-size: 30px;
}
</style>

162
web/src/views/dashboard/workbench/components/newUsers.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<el-card class="card-view" :style= "{backgroundColor:randomColor()}" shadow="always" >
<div style="display:flex;flex: 1; flex-wrap: wrap;justify-content: space-between; margin-top: 10px;">
<div style="flex: 1; min-width: 180px;max-width:180px;height: 80px; display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
<i class="el-icon-s-promotion"></i>
</div>
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{total || 0}}</h3>
</div>
<div class="enroll-text">今日注册
</div>
</div>
</el-col>
</div>
<div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
<i class="el-icon-chat-line-square"></i>
</div>
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{total || 1}}</h3>
</div>
<div class="enroll-text">今日登录
</div>
</div>
</el-col>
</div>
<div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
<i class="el-icon-date"></i>
</div>
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{total || 7}}</h3>
</div>
<div class="enroll-text">三日新增
</div>
</div>
</el-col>
</div>
<div style="flex: 1;min-width: 180px;max-width:180px;height: 80px;display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
<i class="el-icon-folder-add"></i>
</div>
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{total || 15}}</h3>
</div>
<div class="enroll-text">七日新增
</div>
</div>
</el-col>
</div>
<div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
<i class="el-icon-user-solid"></i>
</div>
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{total || 24}}</h3>
</div>
<div class="enroll-text">七日活跃
</div>
</div>
</el-col>
</div>
<div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
<i class="el-icon-user"></i>
</div>
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{total || 89}}</h3>
</div>
<div class="enroll-text">月活跃
</div>
</div>
</el-col>
</div>
</div>
</el-card>
</template>
<script>
export default {
title: '用户新增活跃图',
icon: 'el-icon-user-solid',
description: '用户新增',
height: 28,
minH: 8,
width: 10,
minW: 5,
isResizable: true,
data () {
return {
total: 0
}
},
mounted () {
this.initGet()
},
methods: {
initGet () {
request({
url: ''
}).then(res => {
const { data } = res
// this.total = data.total
})
},
// 生成一个随机整数
randomColor () {
const color = [
'#fffff',
]
const ran = Math.floor(Math.random() * 4)
return color[ran]
}
}
}
</script>
<style scoped>
.card-view{
border-radius: 10px;
color: rgb(37,176,138);
}
.lightgreen-box {
border-bottom: 2px solid rgb(37,176,138);
height:60px;
margin-bottom: 10px;
}
.underline i{
font-size: 30px;
}
.orange-box {
height:60px;
color: black;
border-bottom:2px solid rgb(242,242,242);
}
.enroll-time{
margin-left: 10px;
}
.enroll-text{
color: rgb(138,138,138);
}
</style>

92
web/src/views/dashboard/workbench/components/registeredUser.vue Normal file
View File

@ -0,0 +1,92 @@
<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 {};
},
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, //强制显示所有刻度
},
},
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>
<style scoped lang="scss">
.card-view {
border-radius: 10px;
color: #ffffff;
}
.el-card{
height: 100%;
}
</style>

109
web/src/views/dashboard/workbench/components/sumTotal.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<el-card
class="card-view"
:style="{ backgroundColor: randomColor() }"
shadow="always"
>
<div>
<el-row type="flex" justify="space-around">
<el-col :span="12">
<div class="card-content-label">附件总数</div>
<div class="card-content">
<div class="card-content-value">{{ total || 0 }}</div>
<div class="el-icon-document-copy">
附件总数量</div>
</div>
</el-col>
<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="el-icon-s-flag">
占用空间</div>
</div>
</el-col>
</el-row>
</div>
</el-card>
</template>
<script>
import { request } from "@/api/service";
export default {
title: "附件总数统计图",
icon: "el-icon-s-order",
description: "附件总数量",
name: "sumTotal",
height: 14,
width: 8,
minH: 14,
minW: 8,
isResizable: true,
data() {
return {
total: 0,
};
},
methods: {
initGet() {
request({
url: "",
}).then((res) => {
const { data } = res;
// this.total = data.total;
});
},
// 生成一个随机整数
randomColor() {
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
const ran = Math.floor(Math.random() * 4);
return color[ran];
},
},
mounted() {
this.initGet();
},
};
</script>
<style scoped lang="scss">
.card-view {
border-radius: 10px;
color: #ffffff;
.card-content {
.card-content-label {
font-size: 0.8em;
color: #ffffff;
}
.card-content-value {
color: #ffffff;
margin-top: 5px;
font-size: 1.5em;
font-weight: bold;
}
}
.attachment-value {
color: #ffffff;
margin-top: 5px;
font-size: 1.5em;
font-weight: bold;
margin-right: 180px;
}
.el-icon-document-copy {
font-size: 12px;
}
.el-icon-s-flag {
font-size: 12px;
margin-right: 132px;
}
}
.real-time {
background: rgb(53, 59, 86);
font-size: 14px;
font-style: normal;
padding: 0 7px 0 7px;
border-radius: 4px;
}
</style>

98
web/src/views/dashboard/workbench/components/userIogin.vue Normal file
View File

@ -0,0 +1,98 @@
<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,
width: 10,
minH: 10,
minW: 4,
isResizable: true,
name: "eCharts",
data() {
return {};
},
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, //强制显示所有刻度
},
},
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;
}
</style>