Skip to content

N
nse-ui
Commit 1a52474f by wanglizhen
Options

首页调整

parent 4c061ac4
正在显示 包含 262 行增加 和 13 行删除
src/router/index.js
......@@ -57,19 +57,19 @@ export const constantRoutes = [
component: () => import('@/views/error/401'),
hidden: true
},
{
path: '',
component: Layout,
redirect: '/index',
children: [
{
path: '/index',
component: () => import('@/views/index'),
name: 'Index',
meta: { title: '首页', icon: 'home', affix: true }
}
]
},
// {
// path: '',
// component: Layout,
// redirect: '/index',
// children: [
// {
// path: '/index',
// component: () => import('@/views/index'),
// name: 'Index',
// meta: { title: '首页', icon: 'home', affix: true }
// }
// ]
// },
{
path: '/user',
component: Layout,
......
src/views/index/index.vue 0 → 100644
<script setup name="Index">
import { onMounted, ref, reactive } from 'vue'
import { CountUp } from 'view-ui-plus';
import img from '@/assets/images/index/index.js'
import HomeCharts from '@/components/HomeCharts/index.vue'
import { getHomePage } from '@/api/home'
const topList = ref([
{
name: '应用',
icon: img.icon1,
num: 0,
unit: '个'
},
{
name: '数据源',
icon: img.icon2,
num: 0,
unit: '个'
},
{
name: '表',
icon: img.icon3,
num: 0,
unit: '个'
},
{
name: '字段',
icon: img.icon4,
num: 0,
unit: '个'
},
{
name: '加密表数量',
icon: img.icon5,
num: 0,
unit: '个'
},
{
name: '加密字段数量',
icon: img.icon6,
num: 0,
unit: '个'
}
])
const dataObj = ref({
cpuCount: 0,
percentCpuLoad: 0,
totalvirtualMemory: 0,
percentMemoryLoad: 0,
})
const homeChartData = reactive({
xList: [],
yList1: [],
yList2: [],
})
provide('homeChartData', homeChartData)
const getHomePageFunc = () => {
getHomePage({}).then(res => {
const { data } = res
dataObj.value = data
topList.value[0].num = data.projectNum
topList.value[1].num = data.dataBaseNum
topList.value[2].num = data.tableNum
topList.value[3].num = data.fieldNum
topList.value[4].num = data.encryptTableCount
topList.value[5].num = data.encryptColumnCount
if(!data.space) return
homeChartData.xList = data.space.map(item => item.path)
homeChartData.yList1 = data.space.map(item => item.usedpace)
homeChartData.yList2 = data.space.map(item => item.freespace)
})
}
onMounted(() => {
getHomePageFunc()
})
</script>
<template>
<div class="app-container home">
<el-card class="box-card mt20" :body-style="{ padding: '0' }">
<div class="title">数据统计</div>
<div class="top">
<div class="topItem" v-for="(item, index) in topList" :key="index">
<img class="icon" :src="item.icon" alt="">
<div class="name">{{ item.name }}</div>
<div class="num">
<div>
<CountUp :end="item.num" :duration="3" />
</div>
<div class="unit">{{ item.unit }}</div>
</div>
</div>
</div>
</el-card>
<el-card class="box-card mt20" :body-style="{ padding: '0' }">
<div class="title">系统资源</div>
<div class="bottom" v-if="dataObj">
<div class="bottomItem">
<img class="icon" :src="img.img1" alt="">
<div class="name name1">
<div>
<CountUp :end="dataObj.cpuCount" :duration="2" />
</div>
<div class="unit">核</div>
</div>
<div class="type">CPU</div>
<el-progress type="circle" width="140" :indeterminate="true" :percentage="dataObj.percentCpuLoad">
<div class="circle">
<span class="name1">
<CountUp :end="dataObj.percentCpuLoad" :duration="3" />%
</span>
<div>使用率</div>
</div>
</el-progress>
</div>
<div class="line"></div>
<div class="bottomItem">
<img class="icon" :src="img.img2" alt="">
<div class="name name2">
<div>
<CountUp :end="dataObj.totalvirtualMemory" :duration="2" />
</div>
<div class="unit">G</div>
</div>
<div class="type">内存</div>
<el-progress type="circle" width="140" color="rgb(250, 114, 86)" :indeterminate="true" :percentage="dataObj.percentMemoryLoad">
<div class="circle">
<span class="name2">
<CountUp :end="dataObj.percentMemoryLoad" :duration="3" />%
</span>
<div>使用率</div>
</div>
</el-progress>
</div>
<div class="line"></div>
<div class="bottomItem">
<HomeCharts />
</div>
</div>
</el-card>
</div>
</template>
<style scoped lang="scss">
.home {
.title {
height: 80px;
line-height: 80px;
border-bottom: 3px solid #f3f5fa;
padding-left: 50px;
font-size: 18px;
color: #333;
font-weight: 700;
}
.top {
display: flex;
justify-content: space-around;
padding: 40px 20px;
align-items: center;
height: calc(400px - 120px - 25px);
.topItem {
width: calc(100% / 6);
display: flex;
flex-direction: column;
align-items: center;
.icon {
width: 90px;
height: 90px;
}
.name {
margin-top: -10px;
margin-bottom: 5px;
font-size: 12px;
color: #7a8495;
text-align: center;
}
.num {
display: flex;
align-items: center;
font-size: 18px;
color: #666;
.unit {
margin-left: 5px;
font-size: calc(0.46875vw);
}
}
}
}
.bottom {
display: flex;
align-items: center;
padding: 20px;
height: 304px;
.bottomItem {
width: calc(((100% - 2px) / 3) - 50px);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
.name {
display: flex;
align-items: center;
font-size: 30px;
.unit {
margin-top: 5px;
margin-left: 3px;
font-weight: bold;
font-size: 18px;
}
}
.name1 {
color: rgb(31, 133, 223);
}
.name2 {
color: rgb(250, 114, 86);
}
.type {
font-size: 16px;
padding-bottom: 15px;
color: #7a8495;
}
.circle {
span {
font-size: 16px;
font-weight: bold;
}
div {
line-height: 20px;
font-size: 14px;
}
}
}
.bottomItem:last-child {
padding: 0 50px;
width: calc(((100% - 2px) / 3) + 100px);
}
.line {
background: #dfe1e3;
height: 150px;
width: 1px;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论