mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-05 00:40:24 +08:00
feat: 小功能优化&前端基于setup语法糖重构
This commit is contained in:
meilin.huang
302
mayfly_go_web/src/views/home/Home.vue
Normal file
302
mayfly_go_web/src/views/home/Home.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<el-row :gutter="15">
|
||||
<el-col :sm="6" class="mb15">
|
||||
<div @click="toPage({ id: 'personal' })" class="home-card-item home-card-first">
|
||||
<div class="flex-margin flex">
|
||||
<img :src="getUserInfos.photo" />
|
||||
<div class="home-card-first-right ml15">
|
||||
<div class="flex-margin">
|
||||
<div class="home-card-first-right-title">{{ `${currentTime}, ${getUserInfos.username}`
|
||||
}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :sm="3" class="mb15" v-for="(v, k) in topCardItemList as any" :key="k">
|
||||
<div @click="toPage(v)" class="home-card-item home-card-item-box" :style="{ background: v.color }">
|
||||
<div class="home-card-item-flex">
|
||||
<div class="home-card-item-title pb3">{{ v.title }}</div>
|
||||
<div class="home-card-item-title-num pb6" :id="v.id"></div>
|
||||
</div>
|
||||
<i :class="v.icon" :style="{ color: v.iconColor }"></i>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
|
||||
import { useStore } from '@/store/index.ts';
|
||||
// import * as echarts from 'echarts';
|
||||
import { CountUp } from 'countup.js';
|
||||
import { formatAxis } from '@/common/utils/formatTime.ts';
|
||||
import { indexApi } from './api';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
topCardItemList: [
|
||||
{
|
||||
title: 'Linux机器',
|
||||
id: 'machineNum',
|
||||
color: '#F95959',
|
||||
},
|
||||
{
|
||||
title: '数据库',
|
||||
id: 'dbNum',
|
||||
color: '#8595F4',
|
||||
},
|
||||
{
|
||||
title: 'redis',
|
||||
id: 'redisNum',
|
||||
color: '#1abc9c',
|
||||
},
|
||||
{
|
||||
title: 'Mongo',
|
||||
id: 'mongoNum',
|
||||
color: '#FEBB50',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const {
|
||||
topCardItemList,
|
||||
} = toRefs(state)
|
||||
|
||||
// 当前时间提示语
|
||||
const currentTime = computed(() => {
|
||||
return formatAxis(new Date());
|
||||
});
|
||||
|
||||
// 初始化数字滚动
|
||||
const initNumCountUp = async () => {
|
||||
const res: any = await indexApi.getIndexCount.request();
|
||||
nextTick(() => {
|
||||
new CountUp('mongoNum', res.mongoNum).start();
|
||||
new CountUp('machineNum', res.machineNum).start();
|
||||
new CountUp('dbNum', res.dbNum).start();
|
||||
new CountUp('redisNum', res.redisNum).start();
|
||||
});
|
||||
};
|
||||
|
||||
const toPage = (item: any) => {
|
||||
switch (item.id) {
|
||||
case 'personal': {
|
||||
router.push('/personal');
|
||||
break;
|
||||
}
|
||||
case 'mongoNum': {
|
||||
router.push('/mongo/mongo-data-operation');
|
||||
break;
|
||||
}
|
||||
case 'machineNum': {
|
||||
router.push('/machine/machines');
|
||||
break;
|
||||
}
|
||||
case 'dbNum': {
|
||||
router.push('/dbms/sql-exec');
|
||||
break;
|
||||
}
|
||||
case 'redisNum': {
|
||||
router.push('/redis/data-operation');
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initNumCountUp();
|
||||
// initHomeLaboratory();
|
||||
// initHomeOvertime();
|
||||
});
|
||||
|
||||
// 获取用户信息 vuex
|
||||
const getUserInfos = computed(() => {
|
||||
return store.state.userInfos.userInfos;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-container {
|
||||
overflow-x: hidden;
|
||||
|
||||
.home-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: gray;
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.home-card-item-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
|
||||
.home-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
|
||||
.home-card-item-title,
|
||||
.home-card-item-tip {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home-card-item-title-num {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.home-card-item-tip-num {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-card-first {
|
||||
background: white;
|
||||
border: 1px solid #ebeef5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid var(--color-primary-light-5);
|
||||
}
|
||||
|
||||
.home-card-first-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.home-card-first-right-msg {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-monitor {
|
||||
height: 200px;
|
||||
|
||||
.flex-warp-item {
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
|
||||
.flex-warp-item-box {
|
||||
margin: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-warning-card {
|
||||
height: 292px;
|
||||
|
||||
::v-deep(.el-card) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic {
|
||||
height: 200px;
|
||||
|
||||
.home-dynamic-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
|
||||
&:first-of-type {
|
||||
.home-dynamic-item-line {
|
||||
i {
|
||||
color: orange !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic-item-left {
|
||||
text-align: right;
|
||||
|
||||
.home-dynamic-item-left-time1 {}
|
||||
|
||||
.home-dynamic-item-left-time2 {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic-item-line {
|
||||
height: 60px;
|
||||
border-right: 2px dashed #dfdfdf;
|
||||
margin: 0 20px;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
color: var(--color-primary);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -6px;
|
||||
transform: rotate(46deg);
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic-item-right {
|
||||
flex: 1;
|
||||
|
||||
.home-dynamic-item-right-title {
|
||||
i {
|
||||
margin-right: 5px;
|
||||
border: 1px solid #dfdfdf;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
padding: 3px 2px 2px;
|
||||
text-align: center;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic-item-right-label {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user