Skip to content

N
nse-ui
Commit 42a4e27d by wanglizhen
Options

首页

parent d2cba459
正在显示 包含 814 行增加 和 301 行删除
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( ...@@ -14,12 +14,6 @@ watch(
if (newVal && myChart) { if (newVal && myChart) {
myChart.setOption({ myChart.setOption({
title: {
text: '磁盘空间',
textStyle: {
color: "#7a8495",
}
},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -28,6 +22,7 @@ watch( ...@@ -28,6 +22,7 @@ watch(
}, },
}, },
grid: { grid: {
top: "3%",
left: "3%", left: "3%",
right: "4%", right: "4%",
bottom: "3%", bottom: "3%",
...@@ -38,22 +33,28 @@ watch( ...@@ -38,22 +33,28 @@ watch(
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#808eb7", color: "#808eb7",
width: 2, width: 2
}, },
}, },
splitLine: {
lineStyle: {
color: "rgba(224, 230, 237, 1)",
type: "dashed",
}
}
}, },
yAxis: { yAxis: {
type: "category", type: "category",
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#808eb7", color: "#808eb7",
width: 2, width: 2
}, },
}, },
splitLine: { splitLine: {
//分割线配置 //分割线配置
lineStyle: { lineStyle: {
color: "#AAAAAA56", color: "#AAAAAA56"
}, },
}, },
data: homeChartData.xList, data: homeChartData.xList,
...@@ -67,9 +68,15 @@ watch( ...@@ -67,9 +68,15 @@ watch(
data: homeChartData.yList1, data: homeChartData.yList1,
itemStyle: { itemStyle: {
normal: { normal: {
color: (params) => { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
return generateRandomColors(); offset: 0,
color: 'rgba(120, 166, 252, 1)'
}, },
{
offset: 1,
color: 'rgba(45, 117, 250, 1)'
}
]),
}, },
}, },
}, },
...@@ -82,7 +89,7 @@ watch( ...@@ -82,7 +89,7 @@ watch(
data: homeChartData.yList2, data: homeChartData.yList2,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#dfe1e3", color: "rgba(236, 243, 254, 1)",
}, },
}, },
}, },
......
src/components/PageTitle/iconTitle.vue
...@@ -15,21 +15,31 @@ const props = withDefaults(defineProps<{ ...@@ -15,21 +15,31 @@ const props = withDefaults(defineProps<{
<template> <template>
<div class="pageTitle"> <div class="pageTitle">
<div class="left">
<img class="icon" :src="props.icon" alt=""> <img class="icon" :src="props.icon" alt="">
<span>{{ props.title }}</span> <span>{{ props.title }}</span>
</div> </div>
<div>
<slot />
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.pageTitle { .pageTitle {
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
letter-spacing: 0px; letter-spacing: 0px;
line-height: 22px; line-height: 22px;
color: rgba(53, 64, 79, 1); color: rgba(53, 64, 79, 1);
.left{
display: flex;
align-items: center;
}
.icon { .icon {
margin-right: 6px; margin-right: 6px;
......
src/views/index.vue
...@@ -10,37 +10,37 @@ const topList = ref([ ...@@ -10,37 +10,37 @@ const topList = ref([
name: '应用', name: '应用',
icon: img.icon1, icon: img.icon1,
num: 0, 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: '数据源', name: '数据源',
icon: img.icon2, icon: img.icon2,
num: 0, 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: '表', name: '表',
icon: img.icon3, icon: img.icon3,
num: 0, 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: '字段', name: '字段',
icon: img.icon4, icon: img.icon4,
num: 0, 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: '加密表数量', name: '加密表数量',
icon: img.icon5, icon: img.icon5,
num: 0, 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: '加密字段数量', name: '加密字段数量',
icon: img.icon6, icon: img.icon6,
num: 0, 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({ const dataObj = ref({
...@@ -80,168 +80,272 @@ onMounted(() => { ...@@ -80,168 +80,272 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="app-container home"> <div class="app-container home scroller">
<el-card class="box-card mt20" :body-style="{ padding: '0' }"> <IconTitle :icon="pageIcon" :title="projectName">
<div class="title">数据统计</div> <el-button type="primary" @click="pageProjectManage" icon="Back" plain style="height: 34px;">返回项目管理</el-button>
<div class="top"> </IconTitle>
<div class="topItem" v-for="(item, index) in topList" :key="index"> <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=""> <img class="icon" :src="item.icon" alt="">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="num"> <div class="num">
<div>
<CountUp :end="item.num" :duration="3" /> <CountUp :end="item.num" :duration="3" />
</div> </div>
<div class="unit">{{ item.unit }}</div>
</div>
</div> </div>
</div> </div>
</el-card> <div class="boxCard">
<el-card class="box-card mt20" :body-style="{ padding: '0' }"> <div class="line"></div>
<div class="title">系统资源</div> <div class="container">
<DividerTitle title-name="系统资源" style="margin-bottom: 50px;" />
<div class="bottom" v-if="dataObj"> <div class="bottom" v-if="dataObj">
<div class="bottomItem"> <div class="bottomItem">
<img class="icon" :src="img.img1" alt=""> <div class="infoBox" style="padding-left: 22px;">
<div class="name name1"> <img class="icon" :src="img.img1" style="width: 72px;height: 72px;" alt="">
<div class="type">CPU</div>
<div class="name">
<div> <div>
<CountUp :end="dataObj.cpuCount" :duration="2" /> <CountUp :end="dataObj.cpuCount" :duration="2" />
</div> </div>
<div class="unit">核</div> <div class="unit">核</div>
</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> </div>
</el-progress> <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> </div>
<div class="line"></div>
<div class="bottomItem"> <div class="bottomItem">
<img class="icon" :src="img.img2" alt=""> <div class="infoBox" style="padding-left: 14px;">
<div class="name name2"> <img class="icon" :src="img.img2" style="width: 78px;height: 78px;" alt="">
<div class="type">内存</div>
<div class="name">
<div> <div>
<CountUp :end="dataObj.totalvirtualMemory" :duration="2" /> <CountUp :end="dataObj.totalvirtualMemory" :duration="2" />
</div> </div>
<div class="unit">G</div> <div class="unit">G</div>
</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> </div>
</el-progress> <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> </div>
<div class="line"></div>
<div class="bottomItem"> <div class="bottomItem">
<div class="typeName" style="margin-bottom: 18px;">
<div class="point point1"></div>
<div>磁盘空间</div>
</div>
<HomeCharts /> <HomeCharts />
</div> </div>
</div> </div>
</el-card> </div>
</div>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.home { .home {
.title { padding: 20px 0 0 0;
height: 80px;
line-height: 80px; .return-logo {
border-bottom: 3px solid #f3f5fa; width: 16px;
padding-left: 50px; height: 12.25px;
font-size: 18px;
color: #333;
font-weight: 700;
} }
.top {
.topBox {
margin-top: 21px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 40px 20px;
align-items: center; align-items: center;
height: calc(400px - 120px - 25px); height: 94px;
.topItem { .topItem {
width: calc(100% / 6); position: relative;
margin-right: 16px;
width: 192.61px;
height: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center; 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 { .icon {
width: 90px; position: absolute;
height: 90px; top: -17px;
left: 16px;
width: 46px;
height: 42px;
} }
.name { .name {
margin-top: -10px; padding-left: 23px;
margin-bottom: 5px; font-size: 16px;
font-size: 12px; font-weight: 500;
color: #7a8495; color: rgba(51, 51, 51, 1);
text-align: center;
} }
.num { .num {
display: flex; padding-right: 30px;
align-items: center; font-size: 20px;
font-size: 18px; color: rgba(51, 51, 51, 1);
color: #666; }
.unit {
margin-left: 5px;
font-size: calc(0.46875vw);
} }
.topItem:last-child{
margin-right: 0;
} }
} }
.boxCard {
margin-top: 72px;
display: flex;
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;
.bottom { .bottom {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px; flex: 1;
height: 304px; overflow: hidden;
.bottomItem { .bottomItem {
width: calc(((100% - 2px) / 3) - 50px); margin-right: 20px;
width: 286px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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 { .name {
margin-left: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 30px;
.unit {
margin-top: 5px;
margin-left: 3px;
font-weight: bold;
font-size: 18px; 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);
} }
} }
.name1 {
color: rgb(31, 133, 223); .type {
margin-left: 13px;
font-size: 14px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
} }
.name2 {
color: rgb(250, 114, 86);
} }
.type {
font-size: 16px; .typeName {
padding-bottom: 15px; margin-bottom: 28px;
color: #7a8495; 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%;
} }
.circle {
span { .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; font-size: 16px;
font-weight: bold; line-height: 16px;
color: rgba(51, 51, 51, 1);
} }
div {
line-height: 20px;
font-size: 14px;
} }
} }
} }
.bottomItem:last-child { .bottomItem:last-child {
padding: 0 50px; padding: 0 50px;
width: calc(((100% - 2px) / 3) + 100px); flex: 1;
height: 100%;
margin-right: 0;
}
} }
.line {
background: #dfe1e3;
height: 150px;
width: 1px;
} }
} }
} }
......
src/views/index/index.vue
...@@ -10,37 +10,37 @@ const topList = ref([ ...@@ -10,37 +10,37 @@ const topList = ref([
name: '应用', name: '应用',
icon: img.icon1, icon: img.icon1,
num: 0, 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: '数据源', name: '数据源',
icon: img.icon2, icon: img.icon2,
num: 0, 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: '表', name: '表',
icon: img.icon3, icon: img.icon3,
num: 0, 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: '字段', name: '字段',
icon: img.icon4, icon: img.icon4,
num: 0, 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: '加密表数量', name: '加密表数量',
icon: img.icon5, icon: img.icon5,
num: 0, 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: '加密字段数量', name: '加密字段数量',
icon: img.icon6, icon: img.icon6,
num: 0, 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({ const dataObj = ref({
...@@ -80,168 +80,272 @@ onMounted(() => { ...@@ -80,168 +80,272 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="app-container home"> <div class="app-container home scroller">
<el-card class="box-card mt20" :body-style="{ padding: '0' }"> <IconTitle :icon="pageIcon" :title="projectName">
<div class="title">数据统计</div> <el-button type="primary" @click="pageProjectManage" icon="Back" plain style="height: 34px;">返回项目管理</el-button>
<div class="top"> </IconTitle>
<div class="topItem" v-for="(item, index) in topList" :key="index"> <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=""> <img class="icon" :src="item.icon" alt="">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="num"> <div class="num">
<div>
<CountUp :end="item.num" :duration="3" /> <CountUp :end="item.num" :duration="3" />
</div> </div>
<div class="unit">{{ item.unit }}</div>
</div>
</div> </div>
</div> </div>
</el-card> <div class="boxCard">
<el-card class="box-card mt20" :body-style="{ padding: '0' }"> <div class="line"></div>
<div class="title">系统资源</div> <div class="container">
<DividerTitle title-name="系统资源" style="margin-bottom: 50px;" />
<div class="bottom" v-if="dataObj"> <div class="bottom" v-if="dataObj">
<div class="bottomItem"> <div class="bottomItem">
<img class="icon" :src="img.img1" alt=""> <div class="infoBox" style="padding-left: 22px;">
<div class="name name1"> <img class="icon" :src="img.img1" style="width: 72px;height: 72px;" alt="">
<div class="type">CPU</div>
<div class="name">
<div> <div>
<CountUp :end="dataObj.cpuCount" :duration="2" /> <CountUp :end="dataObj.cpuCount" :duration="2" />
</div> </div>
<div class="unit">核</div> <div class="unit">核</div>
</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> </div>
</el-progress> <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> </div>
<div class="line"></div>
<div class="bottomItem"> <div class="bottomItem">
<img class="icon" :src="img.img2" alt=""> <div class="infoBox" style="padding-left: 14px;">
<div class="name name2"> <img class="icon" :src="img.img2" style="width: 78px;height: 78px;" alt="">
<div class="type">内存</div>
<div class="name">
<div> <div>
<CountUp :end="dataObj.totalvirtualMemory" :duration="2" /> <CountUp :end="dataObj.totalvirtualMemory" :duration="2" />
</div> </div>
<div class="unit">G</div> <div class="unit">G</div>
</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> </div>
</el-progress> <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> </div>
<div class="line"></div>
<div class="bottomItem"> <div class="bottomItem">
<div class="typeName" style="margin-bottom: 18px;">
<div class="point point1"></div>
<div>磁盘空间</div>
</div>
<HomeCharts /> <HomeCharts />
</div> </div>
</div> </div>
</el-card> </div>
</div>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.home { .home {
.title { padding: 20px 0 0 0;
height: 80px;
line-height: 80px; .return-logo {
border-bottom: 3px solid #f3f5fa; width: 16px;
padding-left: 50px; height: 12.25px;
font-size: 18px;
color: #333;
font-weight: 700;
} }
.top {
.topBox {
margin-top: 21px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 40px 20px;
align-items: center; align-items: center;
height: calc(400px - 120px - 25px); height: 94px;
.topItem { .topItem {
width: calc(100% / 6); position: relative;
margin-right: 16px;
width: 192.61px;
height: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center; 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 { .icon {
width: 90px; position: absolute;
height: 90px; top: -17px;
left: 16px;
width: 46px;
height: 42px;
} }
.name { .name {
margin-top: -10px; padding-left: 23px;
margin-bottom: 5px; font-size: 16px;
font-size: 12px; font-weight: 500;
color: #7a8495; color: rgba(51, 51, 51, 1);
text-align: center;
} }
.num { .num {
display: flex; padding-right: 30px;
align-items: center; font-size: 20px;
font-size: 18px; color: rgba(51, 51, 51, 1);
color: #666; }
.unit {
margin-left: 5px;
font-size: calc(0.46875vw);
} }
.topItem:last-child{
margin-right: 0;
} }
} }
.boxCard {
margin-top: 72px;
display: flex;
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;
.bottom { .bottom {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px; flex: 1;
height: 304px; overflow: hidden;
.bottomItem { .bottomItem {
width: calc(((100% - 2px) / 3) - 50px); margin-right: 20px;
width: 286px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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 { .name {
margin-left: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 30px;
.unit {
margin-top: 5px;
margin-left: 3px;
font-weight: bold;
font-size: 18px; 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);
} }
} }
.name1 {
color: rgb(31, 133, 223); .type {
margin-left: 13px;
font-size: 14px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
} }
.name2 {
color: rgb(250, 114, 86);
} }
.type {
font-size: 16px; .typeName {
padding-bottom: 15px; margin-bottom: 28px;
color: #7a8495; 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%;
} }
.circle {
span { .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; font-size: 16px;
font-weight: bold; line-height: 16px;
color: rgba(51, 51, 51, 1);
} }
div {
line-height: 20px;
font-size: 14px;
} }
} }
} }
.bottomItem:last-child { .bottomItem:last-child {
padding: 0 50px; padding: 0 50px;
width: calc(((100% - 2px) / 3) + 100px); flex: 1;
height: 100%;
margin-right: 0;
}
} }
.line {
background: #dfe1e3;
height: 150px;
width: 1px;
} }
} }
} }
......
src/views/indexManage/ItemManage/index.vue
...@@ -5,43 +5,46 @@ import { useRouter } from 'vue-router' ...@@ -5,43 +5,46 @@ import { useRouter } from 'vue-router'
import { changeRoute } from '@/utils/switchRoute' import { changeRoute } from '@/utils/switchRoute'
import img from '@/assets/images/index/index.js' import img from '@/assets/images/index/index.js'
import HomeCharts from '@/components/HomeCharts/index.vue' 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' import { getHomePage } from '@/api/home'
const router = useRouter() const router = useRouter()
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const projectName = ref(sessionStorage.getItem('projectName'))
const projectId = ref(sessionStorage.getItem('projectId')) // 项目id const projectId = ref(sessionStorage.getItem('projectId')) // 项目id
// 首页统计数据 // 首页统计数据
const topList = ref([ const topList = ref([
{ {
name: '数据源', name: '数据源',
icon: img.icon2, icon: img.icon2,
num: 0, 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: '表', name: '表',
icon: img.icon3, icon: img.icon3,
num: 0, 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: '字段', name: '字段',
icon: img.icon4, icon: img.icon4,
num: 0, 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: '加密表数量', name: '加密表数量',
icon: img.icon5, icon: img.icon5,
num: 0, 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: '加密字段数量', name: '加密字段数量',
icon: img.icon6, icon: img.icon6,
num: 0, 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%)'
} }
]) ])
...@@ -63,7 +66,7 @@ provide('homeChartData', homeChartData) ...@@ -63,7 +66,7 @@ provide('homeChartData', homeChartData)
// 获取首页数据 // 获取首页数据
const getHomePageFunc = () => { const getHomePageFunc = () => {
getHomePage({projectid: projectId.value}).then(res => { getHomePage({ projectid: projectId.value }).then(res => {
const { data } = res const { data } = res
dataObj.value = data dataObj.value = data
topList.value[0].num = data.dataBaseNum topList.value[0].num = data.dataBaseNum
...@@ -72,7 +75,7 @@ const getHomePageFunc = () => { ...@@ -72,7 +75,7 @@ const getHomePageFunc = () => {
topList.value[3].num = data.encryptTableCount topList.value[3].num = data.encryptTableCount
topList.value[4].num = data.encryptColumnCount topList.value[4].num = data.encryptColumnCount
if(!data.space) return if (!data.space) return
homeChartData.xList = data.space.map(item => item.path) homeChartData.xList = data.space.map(item => item.path)
homeChartData.yList1 = data.space.map(item => item.usedpace) homeChartData.yList1 = data.space.map(item => item.usedpace)
homeChartData.yList2 = data.space.map(item => item.freespace) homeChartData.yList2 = data.space.map(item => item.freespace)
...@@ -94,174 +97,269 @@ onMounted(() => { ...@@ -94,174 +97,269 @@ onMounted(() => {
<template> <template>
<div class="app-container home scroller"> <div class="app-container home scroller">
<PageTitle backProject @handleBackProject="pageProjectManage"> <IconTitle :icon="pageIcon" :title="projectName">
<template #title> <el-button type="primary" @click="pageProjectManage" icon="Back" plain style="height: 34px;">返回项目管理</el-button>
首页 </IconTitle>
</template> <div class="topBox">
</PageTitle> <div class="topItem" :style="`background: ${item.bgColor};`" v-for="(item, index) in topList" :key="index">
<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=""> <img class="icon" :src="item.icon" alt="">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="num"> <div class="num">
<div>
<CountUp :end="item.num" :duration="3" /> <CountUp :end="item.num" :duration="3" />
</div> </div>
<div class="unit">{{ item.unit }}</div>
</div>
</div> </div>
</div> </div>
</el-card> <div class="boxCard">
<el-card class="box-card mt20" :body-style="{ padding: '0' }"> <div class="line"></div>
<div class="title">系统资源</div> <div class="container">
<DividerTitle title-name="系统资源" style="margin-bottom: 50px;" />
<div class="bottom" v-if="dataObj"> <div class="bottom" v-if="dataObj">
<div class="bottomItem"> <div class="bottomItem">
<img class="icon" :src="img.img1" alt=""> <div class="infoBox" style="padding-left: 22px;">
<div class="name name1"> <img class="icon" :src="img.img1" style="width: 72px;height: 72px;" alt="">
<div class="type">CPU</div>
<div class="name">
<div> <div>
<CountUp :end="dataObj.cpuCount" :duration="2" /> <CountUp :end="dataObj.cpuCount" :duration="2" />
</div> </div>
<div class="unit">核</div> <div class="unit">核</div>
</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> </div>
</el-progress> <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> </div>
<div class="line"></div>
<div class="bottomItem"> <div class="bottomItem">
<img class="icon" :src="img.img2" alt=""> <div class="infoBox" style="padding-left: 14px;">
<div class="name name2"> <img class="icon" :src="img.img2" style="width: 78px;height: 78px;" alt="">
<div class="type">内存</div>
<div class="name">
<div> <div>
<CountUp :end="dataObj.totalvirtualMemory" :duration="2" /> <CountUp :end="dataObj.totalvirtualMemory" :duration="2" />
</div> </div>
<div class="unit">G</div> <div class="unit">G</div>
</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> </div>
</el-progress> <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> </div>
<div class="line"></div>
<div class="bottomItem"> <div class="bottomItem">
<div class="typeName" style="margin-bottom: 18px;">
<div class="point point1"></div>
<div>磁盘空间</div>
</div>
<HomeCharts /> <HomeCharts />
</div> </div>
</div> </div>
</el-card> </div>
</div>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.home { .home {
.title { padding: 20px 0 0 0;
height: 80px;
line-height: 80px; .return-logo {
border-bottom: 3px solid #f3f5fa; width: 16px;
padding-left: 50px; height: 12.25px;
font-size: 18px;
color: #333;
font-weight: 700;
} }
.top {
.topBox {
margin-top: 21px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 40px 20px;
align-items: center; align-items: center;
height: calc(400px - 120px - 25px); height: 94px;
.topItem { .topItem {
width: calc(100% / 6); position: relative;
margin-right: 16px;
width: 224px;
height: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center; 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 { .icon {
width: 90px; position: absolute;
height: 90px; top: -17px;
left: 16px;
width: 46px;
height: 42px;
} }
.name { .name {
margin-top: -10px; padding-left: 23px;
margin-bottom: 5px; font-size: 16px;
font-size: 12px; font-weight: 500;
color: #7a8495; color: rgba(51, 51, 51, 1);
text-align: center;
} }
.num { .num {
display: flex; padding-right: 30px;
align-items: center; font-size: 20px;
font-size: 18px; color: rgba(51, 51, 51, 1);
color: #666;
.unit {
margin-left: 5px;
font-size: calc(0.46875vw);
} }
} }
} }
.boxCard {
margin-top: 72px;
display: flex;
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;
.bottom { .bottom {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px; flex: 1;
height: 304px; overflow: hidden;
.bottomItem { .bottomItem {
width: calc(((100% - 2px) / 3) - 50px); margin-right: 20px;
width: 286px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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 { .name {
margin-left: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 30px;
.unit {
margin-top: 5px;
margin-left: 3px;
font-weight: bold;
font-size: 18px; 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);
} }
} }
.name1 {
color: rgb(31, 133, 223); .type {
margin-left: 13px;
font-size: 14px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
} }
.name2 {
color: rgb(250, 114, 86);
} }
.type {
font-size: 16px; .typeName {
padding-bottom: 15px; margin-bottom: 28px;
color: #7a8495; 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);
} }
.circle { }
span {
.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; font-size: 16px;
font-weight: bold; line-height: 16px;
color: rgba(51, 51, 51, 1);
} }
div {
line-height: 20px;
font-size: 14px;
} }
} }
} }
.bottomItem:last-child { .bottomItem:last-child {
padding: 0 50px; padding: 0 50px;
width: calc(((100% - 2px) / 3) + 100px); flex: 1;
height: 100%;
margin-right: 0;
}
} }
.line {
background: #dfe1e3;
height: 150px;
width: 1px;
} }
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论