Skip to content

N
nse-ui
Commit 42a4e27d by wanglizhen
Options

首页

parent d2cba459
正在显示 包含 925 行增加 和 412 行删除
src/assets/images/index/icon1.png 100755 → 100644
src/assets/images/index/icon1.png

12.2 KB | W: | H:

src/assets/images/index/icon1.png

4.58 KB | W: | H:

src/assets/images/index/icon1.png
src/assets/images/index/icon1.png
src/assets/images/index/icon1.png
src/assets/images/index/icon1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/index/icon2.png 100755 → 100644
src/assets/images/index/icon2.png

10.4 KB | W: | H:

src/assets/images/index/icon2.png

4.24 KB | W: | H:

src/assets/images/index/icon2.png
src/assets/images/index/icon2.png
src/assets/images/index/icon2.png
src/assets/images/index/icon2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/index/icon3.png 100755 → 100644
src/assets/images/index/icon3.png

9.06 KB | W: | H:

src/assets/images/index/icon3.png

4.02 KB | W: | H:

src/assets/images/index/icon3.png
src/assets/images/index/icon3.png
src/assets/images/index/icon3.png
src/assets/images/index/icon3.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/index/icon4.png 100755 → 100644
src/assets/images/index/icon4.png

11.1 KB | W: | H:

src/assets/images/index/icon4.png

4.45 KB | W: | H:

src/assets/images/index/icon4.png
src/assets/images/index/icon4.png
src/assets/images/index/icon4.png
src/assets/images/index/icon4.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/index/icon5.png 100755 → 100644
src/assets/images/index/icon5.png

11.7 KB | W: | H:

src/assets/images/index/icon5.png

4.1 KB | W: | H:

src/assets/images/index/icon5.png
src/assets/images/index/icon5.png
src/assets/images/index/icon5.png
src/assets/images/index/icon5.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/index/icon6.png 100755 → 100644
src/assets/images/index/icon6.png

10.5 KB | W: | H:

src/assets/images/index/icon6.png

4.21 KB | W: | H:

src/assets/images/index/icon6.png
src/assets/images/index/icon6.png
src/assets/images/index/icon6.png
src/assets/images/index/icon6.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/index/img1.png 100755 → 100644
src/assets/images/index/img1.png

1.68 KB | W: | H:

src/assets/images/index/img1.png

13.9 KB | W: | H:

src/assets/images/index/img1.png
src/assets/images/index/img1.png
src/assets/images/index/img1.png
src/assets/images/index/img1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/index/img2.png 100755 → 100644
src/assets/images/index/img2.png

1.5 KB | W: | H:

src/assets/images/index/img2.png

20 KB | W: | H:

src/assets/images/index/img2.png
src/assets/images/index/img2.png
src/assets/images/index/img2.png
src/assets/images/index/img2.png
  • 2-up
  • Swipe
  • Onion skin
src/components/HomeCharts/dashboard.vue 0 → 100644
<script setup lang="ts" name="DashboardCharts">
import { ref, onMounted, watch, nextTick, inject } from "vue";
import * as echarts from "echarts";
const props = defineProps(['color', 'chartNum']);
const DashboardCharts = ref();
let myChart;
watch(
() => props.chartNum,
(newVal) => {
nextTick().then(() => {
myChart = echarts.init(DashboardCharts.value);
if (newVal.toString() && myChart) {
myChart.setOption({
series: [
// 低圈--外环
{
type: 'pie',
zlevel: 1,
radius: ['137%', '152%'],
center: ['50%', '80%'],
startAngle: 180,
endAngle: 0,
animation: false,
itemStyle: {
borderRadius: 20
},
data: [
{
value: 100,
itemStyle: {
color: 'rgba(247, 247, 247, 1)',
},
}
],
},
{
type: 'gauge',
center: ['50%', '76%'],
radius: '115%',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: props.color[0]
},
{
offset: 1,
color: props.color[1]
}
]),
},
progress: {
show: true,
roundCap: true,
width: 18,
},
axisLine: {
roundCap: true,
lineStyle: {
color: [
[1, props.color[2]]
],
width: 18
}
},
pointer: {
show: false,
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
title: {
show: false
},
detail: {
show: false
},
data: [
{
value: props.chartNum
}
]
},
{
z:10,
type: 'gauge',
center: ['50%', '76%'],
radius: '115%',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
itemStyle: {
color: 'rgba(255,255,255,0)',
},
progress: {
show: false,
itemStyle: {
opacity: 0
},
},
pointer: {
icon: 'circle',
width: 20,
length: 20,
offsetCenter: ['3%', '-83%'],
itemStyle: {
z: 10,
zlevel: 3,
color: props.color[1],
borderWidth: 6,
borderColor: '#fff',
shadowBlur: 6,
shadowColor: 'rgba(53, 64, 79, 0.2)',
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
title: {
show: false
},
detail: {
show: false
},
data: [
{
value: props.chartNum
}
]
}
]
});
}
});
},
{ 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(DashboardCharts.value);
});
</script>
<template>
<div class="echarts-wrapper">
<div ref="DashboardCharts" id="DashboardCharts" class="bar-chart" />
</div>
</template>
<style lang="scss" scoped>
.echarts-wrapper {
height: 100%;
width: 100%;
.bar-chart {
height: 100%;
width: 100%;
}
}
</style>
\ No newline at end of file
src/components/HomeCharts/index.vue
......@@ -14,12 +14,6 @@ watch(
if (newVal && myChart) {
myChart.setOption({
title: {
text: '磁盘空间',
textStyle: {
color: "#7a8495",
}
},
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -28,6 +22,7 @@ watch(
},
},
grid: {
top: "3%",
left: "3%",
right: "4%",
bottom: "3%",
......@@ -38,22 +33,28 @@ watch(
axisLine: {
lineStyle: {
color: "#808eb7",
width: 2,
width: 2
},
},
splitLine: {
lineStyle: {
color: "rgba(224, 230, 237, 1)",
type: "dashed",
}
}
},
yAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#808eb7",
width: 2,
width: 2
},
},
splitLine: {
//分割线配置
lineStyle: {
color: "#AAAAAA56",
color: "#AAAAAA56"
},
},
data: homeChartData.xList,
......@@ -67,9 +68,15 @@ watch(
data: homeChartData.yList1,
itemStyle: {
normal: {
color: (params) => {
return generateRandomColors();
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(120, 166, 252, 1)'
},
{
offset: 1,
color: 'rgba(45, 117, 250, 1)'
}
]),
},
},
},
......@@ -82,7 +89,7 @@ watch(
data: homeChartData.yList2,
itemStyle: {
normal: {
color: "#dfe1e3",
color: "rgba(236, 243, 254, 1)",
},
},
},
......
src/components/PageTitle/iconTitle.vue
......@@ -15,8 +15,13 @@ const props = withDefaults(defineProps<{
<template>
<div class="pageTitle">
<img class="icon" :src="props.icon" alt="">
<span>{{ props.title }}</span>
<div class="left">
<img class="icon" :src="props.icon" alt="">
<span>{{ props.title }}</span>
</div>
<div>
<slot />
</div>
</div>
</template>
......@@ -24,12 +29,17 @@ const props = withDefaults(defineProps<{
.pageTitle {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
font-weight: 500;
letter-spacing: 0px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
.left{
display: flex;
align-items: center;
}
.icon {
margin-right: 6px;
......
src/views/index.vue
......@@ -10,37 +10,37 @@ const topList = ref([
name: '应用',
icon: img.icon1,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(164, 213, 252, 1) 0%, rgba(212, 233, 255, 1) 47.92%, rgba(172, 216, 252, 1) 100%)'
},
{
name: '数据源',
icon: img.icon2,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(161, 230, 230, 1) 0%, rgba(211, 240, 241, 1) 47.92%, rgba(194, 238, 237, 1) 95.83%)'
},
{
name: '表',
icon: img.icon3,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(189, 213, 248, 1) 0%, rgba(217, 232, 255, 1) 47.92%, rgba(189, 213, 248, 1) 100%)'
},
{
name: '字段',
icon: img.icon4,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(185, 229, 253, 1) 0%, rgba(209, 240, 255, 1) 47.92%, rgba(196, 234, 251, 1) 100%)'
},
{
name: '加密表数量',
icon: img.icon5,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(170, 187, 242, 1) 0%, rgba(223, 228, 247, 1) 47.92%, rgba(196, 202, 245, 1) 100%)'
},
{
name: '加密字段数量',
icon: img.icon6,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(205, 220, 250, 1) 0%, rgba(222, 234, 255, 1) 47.92%, rgba(200, 214, 250, 1) 100%)'
}
])
const dataObj = ref({
......@@ -80,169 +80,273 @@ onMounted(() => {
</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 class="app-container home scroller">
<IconTitle :icon="pageIcon" :title="projectName">
<el-button type="primary" @click="pageProjectManage" icon="Back" plain style="height: 34px;">返回项目管理</el-button>
</IconTitle>
<div class="topBox">
<div class="topItem" :style="`background: ${item.bgColor};`" v-for="(item, index) in topList" :key="index">
<img class="icon" :src="item.icon" alt="">
<div class="name">{{ item.name }}</div>
<div class="num">
<CountUp :end="item.num" :duration="3" />
</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="boxCard">
<div class="line"></div>
<div class="container">
<DividerTitle title-name="系统资源" style="margin-bottom: 50px;" />
<div class="bottom" v-if="dataObj">
<div class="bottomItem">
<div class="infoBox" style="padding-left: 22px;">
<img class="icon" :src="img.img1" style="width: 72px;height: 72px;" alt="">
<div class="type">CPU</div>
<div class="name">
<div>
<CountUp :end="dataObj.cpuCount" :duration="2" />
</div>
<div class="unit">核</div>
</div>
</div>
<div class="typeName">
<div class="point point1"></div>
<div>CPU占用</div>
</div>
<div class="chart">
<DashboardCharts :chartNum="dataObj.percentCpuLoad"
:color="['rgba(121, 167, 252, 1)', 'rgba(45, 117, 250, 1)','rgba(236, 243, 254, 1)']" />
<div class="num">
<CountUp :end="dataObj.percentCpuLoad" :duration="3" />
<span class="unit">%</span>
</div>
</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 class="bottomItem">
<div class="infoBox" style="padding-left: 14px;">
<img class="icon" :src="img.img2" style="width: 78px;height: 78px;" alt="">
<div class="type">内存</div>
<div class="name">
<div>
<CountUp :end="dataObj.totalvirtualMemory" :duration="2" />
</div>
<div class="unit">G</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 class="typeName">
<div class="point point2"></div>
<div>内存占用</div>
</div>
<div class="chart">
<DashboardCharts :chartNum="dataObj.percentMemoryLoad"
:color="['rgba(245, 126, 7, 1)', 'rgba(245, 126, 7, 1)','rgba(255, 246, 237, 1)']" />
<div class="num">
<CountUp :end="dataObj.percentMemoryLoad" :duration="3" />
<span class="unit">%</span>
</div>
</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 class="bottomItem">
<div class="typeName" style="margin-bottom: 18px;">
<div class="point point1"></div>
<div>磁盘空间</div>
</div>
</el-progress>
</div>
<div class="line"></div>
<div class="bottomItem">
<HomeCharts />
<HomeCharts />
</div>
</div>
</div>
</el-card>
</div>
</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;
padding: 20px 0 0 0;
.return-logo {
width: 16px;
height: 12.25px;
}
.top {
.topBox {
margin-top: 21px;
display: flex;
justify-content: space-around;
padding: 40px 20px;
align-items: center;
height: calc(400px - 120px - 25px);
height: 94px;
.topItem {
width: calc(100% / 6);
position: relative;
margin-right: 16px;
width: 192.61px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 8px;
box-shadow: 0px 2px 5px 2px rgba(78, 128, 126, 0.13);
backdrop-filter: blur(4px);
.icon {
width: 90px;
height: 90px;
position: absolute;
top: -17px;
left: 16px;
width: 46px;
height: 42px;
}
.name {
margin-top: -10px;
margin-bottom: 5px;
font-size: 12px;
color: #7a8495;
text-align: center;
padding-left: 23px;
font-size: 16px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.num {
display: flex;
align-items: center;
font-size: 18px;
color: #666;
.unit {
margin-left: 5px;
font-size: calc(0.46875vw);
}
padding-right: 30px;
font-size: 20px;
color: rgba(51, 51, 51, 1);
}
}
.topItem:last-child{
margin-right: 0;
}
}
.bottom {
.boxCard {
margin-top: 72px;
display: flex;
align-items: center;
padding: 20px;
height: 304px;
.bottomItem {
width: calc(((100% - 2px) / 3) - 50px);
height: 100%;
width: 100%;
height: 556px;
background: rgba(255, 255, 255, 1);
display: flex;
flex-direction: column;
.line {
width: 100%;
height: 2px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(90deg,
rgba(33, 103, 217, 1) 0%,
rgba(17, 200, 250, 1) 34.03%,
rgba(33, 103, 217, 1) 64.58%,
rgba(48, 128, 255, 1) 100%);
}
.container {
padding: 45px 36px;
height: calc(100% - 2px);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
.name {
.bottom {
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;
flex: 1;
overflow: hidden;
.bottomItem {
margin-right: 20px;
width: 286px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
.infoBox {
margin-bottom: 46px;
width: 100%;
height: 102px;
border-radius: 5px;
background: linear-gradient(90deg, rgba(228, 240, 252, 1) 0%, rgba(234, 244, 247, 1) 44.44%, rgba(238, 250, 242, 1) 100%);
display: flex;
align-items: center;
.name {
margin-left: 8px;
display: flex;
align-items: center;
font-size: 18px;
font-weight: 700;
color: rgba(33, 103, 217, 1);
.unit {
font-size: 14px;
font-weight: 700;
color: rgba(33, 103, 217, 1);
}
}
.type {
margin-left: 13px;
font-size: 14px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
}
}
.typeName {
margin-bottom: 28px;
font-size: 14px;
font-weight: 500;
line-height: 22px;
color: rgba(0, 0, 0, 1);
width: 100%;
display: flex;
align-items: center;
.point {
margin-right: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
}
.point1 {
background: rgba(33, 103, 217, 1);
}
.point2 {
background: rgba(245, 126, 7, 1);
}
}
.chart {
position: relative;
width: 100%;
flex: 1;
pointer-events: none;
.num {
position: absolute;
bottom: 35px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
.unit {
font-size: 16px;
line-height: 16px;
color: rgba(51, 51, 51, 1);
}
}
}
}
div {
line-height: 20px;
font-size: 14px;
.bottomItem:last-child {
padding: 0 50px;
flex: 1;
height: 100%;
margin-right: 0;
}
}
}
.bottomItem:last-child {
padding: 0 50px;
width: calc(((100% - 2px) / 3) + 100px);
}
.line {
background: #dfe1e3;
height: 150px;
width: 1px;
}
}
}
</style>
......
src/views/index/index.vue
......@@ -10,37 +10,37 @@ const topList = ref([
name: '应用',
icon: img.icon1,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(164, 213, 252, 1) 0%, rgba(212, 233, 255, 1) 47.92%, rgba(172, 216, 252, 1) 100%)'
},
{
name: '数据源',
icon: img.icon2,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(161, 230, 230, 1) 0%, rgba(211, 240, 241, 1) 47.92%, rgba(194, 238, 237, 1) 95.83%)'
},
{
name: '表',
icon: img.icon3,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(189, 213, 248, 1) 0%, rgba(217, 232, 255, 1) 47.92%, rgba(189, 213, 248, 1) 100%)'
},
{
name: '字段',
icon: img.icon4,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(185, 229, 253, 1) 0%, rgba(209, 240, 255, 1) 47.92%, rgba(196, 234, 251, 1) 100%)'
},
{
name: '加密表数量',
icon: img.icon5,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(170, 187, 242, 1) 0%, rgba(223, 228, 247, 1) 47.92%, rgba(196, 202, 245, 1) 100%)'
},
{
name: '加密字段数量',
icon: img.icon6,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(205, 220, 250, 1) 0%, rgba(222, 234, 255, 1) 47.92%, rgba(200, 214, 250, 1) 100%)'
}
])
const dataObj = ref({
......@@ -80,169 +80,273 @@ onMounted(() => {
</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 class="app-container home scroller">
<IconTitle :icon="pageIcon" :title="projectName">
<el-button type="primary" @click="pageProjectManage" icon="Back" plain style="height: 34px;">返回项目管理</el-button>
</IconTitle>
<div class="topBox">
<div class="topItem" :style="`background: ${item.bgColor};`" v-for="(item, index) in topList" :key="index">
<img class="icon" :src="item.icon" alt="">
<div class="name">{{ item.name }}</div>
<div class="num">
<CountUp :end="item.num" :duration="3" />
</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="boxCard">
<div class="line"></div>
<div class="container">
<DividerTitle title-name="系统资源" style="margin-bottom: 50px;" />
<div class="bottom" v-if="dataObj">
<div class="bottomItem">
<div class="infoBox" style="padding-left: 22px;">
<img class="icon" :src="img.img1" style="width: 72px;height: 72px;" alt="">
<div class="type">CPU</div>
<div class="name">
<div>
<CountUp :end="dataObj.cpuCount" :duration="2" />
</div>
<div class="unit">核</div>
</div>
</div>
<div class="typeName">
<div class="point point1"></div>
<div>CPU占用</div>
</div>
<div class="chart">
<DashboardCharts :chartNum="dataObj.percentCpuLoad"
:color="['rgba(121, 167, 252, 1)', 'rgba(45, 117, 250, 1)','rgba(236, 243, 254, 1)']" />
<div class="num">
<CountUp :end="dataObj.percentCpuLoad" :duration="3" />
<span class="unit">%</span>
</div>
</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 class="bottomItem">
<div class="infoBox" style="padding-left: 14px;">
<img class="icon" :src="img.img2" style="width: 78px;height: 78px;" alt="">
<div class="type">内存</div>
<div class="name">
<div>
<CountUp :end="dataObj.totalvirtualMemory" :duration="2" />
</div>
<div class="unit">G</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 class="typeName">
<div class="point point2"></div>
<div>内存占用</div>
</div>
<div class="chart">
<DashboardCharts :chartNum="dataObj.percentMemoryLoad"
:color="['rgba(245, 126, 7, 1)', 'rgba(245, 126, 7, 1)','rgba(255, 246, 237, 1)']" />
<div class="num">
<CountUp :end="dataObj.percentMemoryLoad" :duration="3" />
<span class="unit">%</span>
</div>
</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 class="bottomItem">
<div class="typeName" style="margin-bottom: 18px;">
<div class="point point1"></div>
<div>磁盘空间</div>
</div>
</el-progress>
</div>
<div class="line"></div>
<div class="bottomItem">
<HomeCharts />
<HomeCharts />
</div>
</div>
</div>
</el-card>
</div>
</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;
padding: 20px 0 0 0;
.return-logo {
width: 16px;
height: 12.25px;
}
.top {
.topBox {
margin-top: 21px;
display: flex;
justify-content: space-around;
padding: 40px 20px;
align-items: center;
height: calc(400px - 120px - 25px);
height: 94px;
.topItem {
width: calc(100% / 6);
position: relative;
margin-right: 16px;
width: 192.61px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 8px;
box-shadow: 0px 2px 5px 2px rgba(78, 128, 126, 0.13);
backdrop-filter: blur(4px);
.icon {
width: 90px;
height: 90px;
position: absolute;
top: -17px;
left: 16px;
width: 46px;
height: 42px;
}
.name {
margin-top: -10px;
margin-bottom: 5px;
font-size: 12px;
color: #7a8495;
text-align: center;
padding-left: 23px;
font-size: 16px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.num {
display: flex;
align-items: center;
font-size: 18px;
color: #666;
.unit {
margin-left: 5px;
font-size: calc(0.46875vw);
}
padding-right: 30px;
font-size: 20px;
color: rgba(51, 51, 51, 1);
}
}
.topItem:last-child{
margin-right: 0;
}
}
.bottom {
.boxCard {
margin-top: 72px;
display: flex;
align-items: center;
padding: 20px;
height: 304px;
.bottomItem {
width: calc(((100% - 2px) / 3) - 50px);
height: 100%;
width: 100%;
height: 556px;
background: rgba(255, 255, 255, 1);
display: flex;
flex-direction: column;
.line {
width: 100%;
height: 2px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(90deg,
rgba(33, 103, 217, 1) 0%,
rgba(17, 200, 250, 1) 34.03%,
rgba(33, 103, 217, 1) 64.58%,
rgba(48, 128, 255, 1) 100%);
}
.container {
padding: 45px 36px;
height: calc(100% - 2px);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
.name {
.bottom {
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;
flex: 1;
overflow: hidden;
.bottomItem {
margin-right: 20px;
width: 286px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
.infoBox {
margin-bottom: 46px;
width: 100%;
height: 102px;
border-radius: 5px;
background: linear-gradient(90deg, rgba(228, 240, 252, 1) 0%, rgba(234, 244, 247, 1) 44.44%, rgba(238, 250, 242, 1) 100%);
display: flex;
align-items: center;
.name {
margin-left: 8px;
display: flex;
align-items: center;
font-size: 18px;
font-weight: 700;
color: rgba(33, 103, 217, 1);
.unit {
font-size: 14px;
font-weight: 700;
color: rgba(33, 103, 217, 1);
}
}
.type {
margin-left: 13px;
font-size: 14px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
}
}
.typeName {
margin-bottom: 28px;
font-size: 14px;
font-weight: 500;
line-height: 22px;
color: rgba(0, 0, 0, 1);
width: 100%;
display: flex;
align-items: center;
.point {
margin-right: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
}
.point1 {
background: rgba(33, 103, 217, 1);
}
.point2 {
background: rgba(245, 126, 7, 1);
}
}
.chart {
position: relative;
width: 100%;
flex: 1;
pointer-events: none;
.num {
position: absolute;
bottom: 35px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
.unit {
font-size: 16px;
line-height: 16px;
color: rgba(51, 51, 51, 1);
}
}
}
}
div {
line-height: 20px;
font-size: 14px;
.bottomItem:last-child {
padding: 0 50px;
flex: 1;
height: 100%;
margin-right: 0;
}
}
}
.bottomItem:last-child {
padding: 0 50px;
width: calc(((100% - 2px) / 3) + 100px);
}
.line {
background: #dfe1e3;
height: 150px;
width: 1px;
}
}
}
</style>
......
src/views/indexManage/ItemManage/index.vue
......@@ -5,43 +5,46 @@ import { useRouter } from 'vue-router'
import { changeRoute } from '@/utils/switchRoute'
import img from '@/assets/images/index/index.js'
import HomeCharts from '@/components/HomeCharts/index.vue'
import DashboardCharts from '@/components/HomeCharts/dashboard.vue'
import pageIcon from '@/assets/images/ruleConfig/discoverPage.png'
import { getHomePage } from '@/api/home'
const router = useRouter()
const { proxy } = getCurrentInstance()
const projectName = ref(sessionStorage.getItem('projectName'))
const projectId = ref(sessionStorage.getItem('projectId')) // 项目id
// 首页统计数据
// 首页统计数据
const topList = ref([
{
name: '数据源',
icon: img.icon2,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(161, 230, 230, 1) 0%, rgba(211, 240, 241, 1) 47.92%, rgba(194, 238, 237, 1) 95.83%)'
},
{
name: '表',
icon: img.icon3,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(189, 213, 248, 1) 0%, rgba(217, 232, 255, 1) 47.92%, rgba(189, 213, 248, 1) 100%)'
},
{
name: '字段',
icon: img.icon4,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(185, 229, 253, 1) 0%, rgba(209, 240, 255, 1) 47.92%, rgba(196, 234, 251, 1) 100%)'
},
{
name: '加密表数量',
icon: img.icon5,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(170, 187, 242, 1) 0%, rgba(223, 228, 247, 1) 47.92%, rgba(196, 202, 245, 1) 100%)'
},
{
name: '加密字段数量',
icon: img.icon6,
num: 0,
unit: '个'
bgColor: 'linear-gradient(136.52deg, rgba(205, 220, 250, 1) 0%, rgba(222, 234, 255, 1) 47.92%, rgba(200, 214, 250, 1) 100%)'
}
])
......@@ -51,7 +54,7 @@ const dataObj = ref({
percentCpuLoad: 0,
totalvirtualMemory: 0,
percentMemoryLoad: 0,
})
})
// 磁盘空间图表数据
const homeChartData = reactive({
......@@ -63,7 +66,7 @@ provide('homeChartData', homeChartData)
// 获取首页数据
const getHomePageFunc = () => {
getHomePage({projectid: projectId.value}).then(res => {
getHomePage({ projectid: projectId.value }).then(res => {
const { data } = res
dataObj.value = data
topList.value[0].num = data.dataBaseNum
......@@ -72,7 +75,7 @@ const getHomePageFunc = () => {
topList.value[3].num = data.encryptTableCount
topList.value[4].num = data.encryptColumnCount
if(!data.space) return
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)
......@@ -94,174 +97,269 @@ onMounted(() => {
<template>
<div class="app-container home scroller">
<PageTitle backProject @handleBackProject="pageProjectManage">
<template #title>
首页
</template>
</PageTitle>
<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>
<IconTitle :icon="pageIcon" :title="projectName">
<el-button type="primary" @click="pageProjectManage" icon="Back" plain style="height: 34px;">返回项目管理</el-button>
</IconTitle>
<div class="topBox">
<div class="topItem" :style="`background: ${item.bgColor};`" v-for="(item, index) in topList" :key="index">
<img class="icon" :src="item.icon" alt="">
<div class="name">{{ item.name }}</div>
<div class="num">
<CountUp :end="item.num" :duration="3" />
</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="boxCard">
<div class="line"></div>
<div class="container">
<DividerTitle title-name="系统资源" style="margin-bottom: 50px;" />
<div class="bottom" v-if="dataObj">
<div class="bottomItem">
<div class="infoBox" style="padding-left: 22px;">
<img class="icon" :src="img.img1" style="width: 72px;height: 72px;" alt="">
<div class="type">CPU</div>
<div class="name">
<div>
<CountUp :end="dataObj.cpuCount" :duration="2" />
</div>
<div class="unit">核</div>
</div>
</div>
<div class="typeName">
<div class="point point1"></div>
<div>CPU占用</div>
</div>
<div class="chart">
<DashboardCharts :chartNum="dataObj.percentCpuLoad"
:color="['rgba(121, 167, 252, 1)', 'rgba(45, 117, 250, 1)','rgba(236, 243, 254, 1)']" />
<div class="num">
<CountUp :end="dataObj.percentCpuLoad" :duration="3" />
<span class="unit">%</span>
</div>
</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 class="bottomItem">
<div class="infoBox" style="padding-left: 14px;">
<img class="icon" :src="img.img2" style="width: 78px;height: 78px;" alt="">
<div class="type">内存</div>
<div class="name">
<div>
<CountUp :end="dataObj.totalvirtualMemory" :duration="2" />
</div>
<div class="unit">G</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 class="typeName">
<div class="point point2"></div>
<div>内存占用</div>
</div>
<div class="chart">
<DashboardCharts :chartNum="dataObj.percentMemoryLoad"
:color="['rgba(245, 126, 7, 1)', 'rgba(245, 126, 7, 1)','rgba(255, 246, 237, 1)']" />
<div class="num">
<CountUp :end="dataObj.percentMemoryLoad" :duration="3" />
<span class="unit">%</span>
</div>
</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 class="bottomItem">
<div class="typeName" style="margin-bottom: 18px;">
<div class="point point1"></div>
<div>磁盘空间</div>
</div>
</el-progress>
</div>
<div class="line"></div>
<div class="bottomItem">
<HomeCharts />
<HomeCharts />
</div>
</div>
</div>
</el-card>
</div>
</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;
padding: 20px 0 0 0;
.return-logo {
width: 16px;
height: 12.25px;
}
.top {
.topBox {
margin-top: 21px;
display: flex;
justify-content: space-around;
padding: 40px 20px;
align-items: center;
height: calc(400px - 120px - 25px);
height: 94px;
.topItem {
width: calc(100% / 6);
position: relative;
margin-right: 16px;
width: 224px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 8px;
box-shadow: 0px 2px 5px 2px rgba(78, 128, 126, 0.13);
backdrop-filter: blur(4px);
.icon {
width: 90px;
height: 90px;
position: absolute;
top: -17px;
left: 16px;
width: 46px;
height: 42px;
}
.name {
margin-top: -10px;
margin-bottom: 5px;
font-size: 12px;
color: #7a8495;
text-align: center;
padding-left: 23px;
font-size: 16px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.num {
display: flex;
align-items: center;
font-size: 18px;
color: #666;
.unit {
margin-left: 5px;
font-size: calc(0.46875vw);
}
padding-right: 30px;
font-size: 20px;
color: rgba(51, 51, 51, 1);
}
}
}
.bottom {
.boxCard {
margin-top: 72px;
display: flex;
align-items: center;
padding: 20px;
height: 304px;
.bottomItem {
width: calc(((100% - 2px) / 3) - 50px);
height: 100%;
width: 100%;
height: 556px;
background: rgba(255, 255, 255, 1);
display: flex;
flex-direction: column;
.line {
width: 100%;
height: 2px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(90deg,
rgba(33, 103, 217, 1) 0%,
rgba(17, 200, 250, 1) 34.03%,
rgba(33, 103, 217, 1) 64.58%,
rgba(48, 128, 255, 1) 100%);
}
.container {
padding: 45px 36px;
height: calc(100% - 2px);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
.name {
.bottom {
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;
flex: 1;
overflow: hidden;
.bottomItem {
margin-right: 20px;
width: 286px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
.infoBox {
margin-bottom: 46px;
width: 100%;
height: 102px;
border-radius: 5px;
background: linear-gradient(90deg, rgba(228, 240, 252, 1) 0%, rgba(234, 244, 247, 1) 44.44%, rgba(238, 250, 242, 1) 100%);
display: flex;
align-items: center;
.name {
margin-left: 8px;
display: flex;
align-items: center;
font-size: 18px;
font-weight: 700;
color: rgba(33, 103, 217, 1);
.unit {
font-size: 14px;
font-weight: 700;
color: rgba(33, 103, 217, 1);
}
}
.type {
margin-left: 13px;
font-size: 14px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
}
}
.typeName {
margin-bottom: 28px;
font-size: 14px;
font-weight: 500;
line-height: 22px;
color: rgba(0, 0, 0, 1);
width: 100%;
display: flex;
align-items: center;
.point {
margin-right: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
}
.point1 {
background: rgba(33, 103, 217, 1);
}
.point2 {
background: rgba(245, 126, 7, 1);
}
}
.chart {
position: relative;
width: 100%;
flex: 1;
pointer-events: none;
.num {
position: absolute;
bottom: 35px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
.unit {
font-size: 16px;
line-height: 16px;
color: rgba(51, 51, 51, 1);
}
}
}
}
div {
line-height: 20px;
font-size: 14px;
.bottomItem:last-child {
padding: 0 50px;
flex: 1;
height: 100%;
margin-right: 0;
}
}
}
.bottomItem:last-child {
padding: 0 50px;
width: calc(((100% - 2px) / 3) + 100px);
}
.line {
background: #dfe1e3;
height: 150px;
width: 1px;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论