Skip to content

N
nse-ui
Commit 6f7d2487 by wanglizhen
Options

首页上传

parent 7ced7262
正在显示 包含 98 行增加 和 45 行删除
src/api/home.js 0 → 100644
import request from '@/utils/request'
/**
* 获取数据信息
* @param {*} data
* @returns
*/
export function getHomePage(data) {
return request({
url: '/core/datasystem/getHomePage',
method: 'post',
data: data
})
}
\ No newline at end of file
src/components/HomeCharts/index.vue
......@@ -4,15 +4,6 @@ import * as echarts from "echarts";
const homeChartData: any = inject("homeChartData");
const barChart = ref();
const colorList =[
"#9c27b0",
"#00bcd4",
"#ff7800",
"#2598f3",
"#53b257",
"#2598f3",
"#9c27b0",
]
let myChart;
watch(
......@@ -77,7 +68,7 @@ watch(
itemStyle: {
normal: {
color: (params) => {
return colorList[params.dataIndex]
return generateRandomColors();
},
},
},
......@@ -103,6 +94,14 @@ watch(
{ deep: true, immediate: true }
);
const generateRandomColors = () => {
const hue = Math.floor(Math.random() * 360);
const saturation = Math.floor(Math.random() * 30) + 70;
const lightness = Math.floor(Math.random() * 20) + 40;
const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
return color;
}
onMounted(() => {
myChart = echarts.init(barChart.value);
});
......
src/views/index.vue
......@@ -3,51 +3,80 @@ 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: 1,
num: 0,
unit: '个'
},
{
name: '数据源',
icon: img.icon2,
num: 4,
num: 0,
unit: '个'
},
{
name: '表',
icon: img.icon3,
num: 680,
num: 0,
unit: '个'
},
{
name: '字段',
icon: img.icon4,
num: 8090,
num: 0,
unit: '个'
},
{
name: '加密表数量',
icon: img.icon5,
num: 1,
num: 0,
unit: '个'
},
{
name: '加密字段数量',
icon: img.icon6,
num: 1,
num: 0,
unit: '个'
}
])
const dataObj = ref({
cpuCount: 0,
percentCpuLoad: 0,
totalvirtualMemory: 0,
percentMemoryLoad: 0,
})
const homeChartData = reactive({
xList: ['/run/user/0','/boot/efi','/boot','/run/lock','/dev/shm','/','/run'],
yList1: [4,0.01,0.25,0.00,0.00,14.00,0.00],
yList2: [1.6,1.10,1.5,0.00,,7.9,97.00,1.60],
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
console.log(dataObj.value)
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>
......@@ -59,7 +88,9 @@ provide('homeChartData', homeChartData)
<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>
<CountUp :end="item.num" :duration="3" />
</div>
<div class="unit">{{ item.unit }}</div>
</div>
</div>
......@@ -67,17 +98,21 @@ provide('homeChartData', homeChartData)
</el-card>
<el-card class="box-card mt20" :body-style="{ padding: '0' }">
<div class="title">系统资源</div>
<div class="bottom">
<div class="bottom" v-if="dataObj">
<div class="bottomItem">
<img class="icon" :src="img.img1" alt="">
<div class="name name1">
<div><CountUp :end="8" :duration="2" /></div>
<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="25">
<el-progress type="circle" width="140" :indeterminate="true" :percentage="dataObj.percentCpuLoad">
<div class="circle">
<span class="name1"><CountUp :end="1" :duration="3" />%</span>
<span class="name1">
<CountUp :end="dataObj.percentCpuLoad" :duration="3" />%
</span>
<div>使用率</div>
</div>
</el-progress>
......@@ -86,13 +121,17 @@ provide('homeChartData', homeChartData)
<div class="bottomItem">
<img class="icon" :src="img.img2" alt="">
<div class="name name2">
<div><CountUp :end="16" :duration="2" /></div>
<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="25">
<el-progress type="circle" width="140" color="rgb(250, 114, 86)" :indeterminate="true" :percentage="dataObj.percentMemoryLoad">
<div class="circle">
<span class="name2"><CountUp :end="95" :duration="3" />%</span>
<span class="name2">
<CountUp :end="dataObj.percentMemoryLoad" :duration="3" />%
</span>
<div>使用率</div>
</div>
</el-progress>
......@@ -117,89 +156,89 @@ provide('homeChartData', homeChartData)
color: #333;
font-weight: 700;
}
.top{
.top {
display: flex;
justify-content: space-around;
padding: 40px 20px;
align-items: center;
height: calc(400px - 120px - 25px);
.topItem{
.topItem {
width: calc(100% / 6);
display: flex;
flex-direction: column;
align-items: center;
.icon{
.icon {
width: 90px;
height: 90px;
}
.name{
.name {
margin-top: -10px;
margin-bottom: 5px;
font-size: 12px;
color: #7a8495;
text-align: center;
}
.num{
.num {
display: flex;
align-items: center;
font-size: 18px;
color: #666;
.unit{
.unit {
margin-left: 5px;
font-size: calc(0.46875vw);
}
}
}
}
.bottom{
.bottom {
display: flex;
align-items: center;
padding: 20px;
height: 304px;
.bottomItem{
.bottomItem {
width: calc(((100% - 2px) / 3) - 50px);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
.name{
.name {
display: flex;
align-items: center;
font-size: 30px;
.unit{
.unit {
margin-top: 5px;
margin-left: 3px;
font-weight: bold;
font-size: 18px;
}
}
.name1{
.name1 {
color: rgb(31, 133, 223);
}
.name2{
.name2 {
color: rgb(250, 114, 86);
}
.type{
.type {
font-size: 16px;
padding-bottom: 15px;
color: #7a8495;
}
.circle{
span{
.circle {
span {
font-size: 16px;
font-weight: bold;
}
div{
div {
line-height: 20px;
font-size: 14px;
}
}
}
.bottomItem:last-child{
.bottomItem:last-child {
padding: 0 50px;
width: calc(((100% - 2px) / 3) + 100px);
}
.line{
.line {
background: #dfe1e3;
height: 150px;
width: 1px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论