mayfly-go/frontend/src/views/home/Home.vue

<template>
    <div class="home-container personal">
        <el-row :gutter="15">
            <!-- 个人信息 -->
            <el-col :xs="24" :sm="24">
                <el-card shadow="hover" :header="$t('home.personalInfo')">
                    <div class="personal-user">
                        <div class="personal-user-left">
                            <el-upload
                                class="!h-full personal-user-left-upload"
                                :action="getUploadFileUrl(`avatar_${userInfo.username}`)"
                                :limit="1"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload"
                                :on-success="handleAvatarSuccess"
                                accept=".png,.jpg,.jpeg"
                            >
                                <img :src="userInfo.photo" />
                            </el-upload>
                        </div>
                        <div class="personal-user-right">
                            <el-row>
                                <el-col :span="24" class="personal-title mb-4">
                                    {{ $t('home.welcomeMsg', { name: userInfo.name }) }}
                                </el-col>
                                <el-col :span="24">
                                    <el-row>
                                        <el-col :xs="24" :sm="12" class="personal-item !mb-1.5">
                                            <div class="personal-item-label">{{ $t('common.username') }}：</div>
                                            <div class="personal-item-value">{{ userInfo.username }}</div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" class="personal-item !mb-1.5">
                                            <div class="personal-item-label">{{ $t('common.role') }}：</div>
                                            <div class="personal-item-value">{{ roleInfo }}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-row>
                                        <el-col :xs="24" :sm="12" class="personal-item !mb-1.5">
                                            <div class="personal-item-label">{{ $t('home.lastLoginIp') }}：</div>
                                            <div class="personal-item-value">{{ userInfo.lastLoginIp }}</div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" class="personal-item !mb-1.5">
                                            <div class="personal-item-label">{{ $t('home.lastLoginTime') }}：</div>
                                            <div class="personal-item-value">{{ formatDate(userInfo.lastLoginTime) }}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="!mt-4 resource-info">
            <el-col :sm="12">
                <el-card shadow="hover">
                    <template #header>
                        <el-row justify="center">
                            <div class="resource-num pointer-icon" @click="toPage('machine')">
                                <SvgIcon
                                    class="mb-1 mr-1"
                                    :size="28"
                                    :name="TagResourceTypeEnum.Machine.extra.icon"
                                    :color="TagResourceTypeEnum.Machine.extra.iconColor"
                                />
                                <span class="">{{ state.machine.num }}</span>
                            </div>
                        </el-row>
                    </template>
                    <el-row>
                        <el-col :sm="24">
                            <el-table
                                :data="state.machine.opLogs"
                                :height="state.resourceOpTableHeight"
                                stripe
                                size="small"
                                :empty-text="$t('home.noOpRecord')"
                            >
                                <el-table-column prop="createTime" show-overflow-tooltip width="135">
                                    <template #default="scope">
                                        {{ formatDate(scope.row.createTime) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="codePath" min-width="400" show-overflow-tooltip>
                                    <template #default="scope">
                                        <TagCodePath :path="scope.row.codePath" :tagInfos="state.machine.tagInfos" />
                                    </template>
                                </el-table-column>
                                <el-table-column width="30">
                                    <template #default="scope">
                                        <el-link @click="toPage('machine', scope.row.codePath)" type="primary" icon="Position"></el-link>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :sm="12">
                <el-card shadow="hover">
                    <template #header>
                        <el-row justify="center">
                            <div class="resource-num pointer-icon" @click="toPage('db')">
                                <SvgIcon
                                    class="mb-1 mr-1"
                                    :size="28"
                                    :name="TagResourceTypeEnum.DbInstance.extra.icon"
                                    :color="TagResourceTypeEnum.DbInstance.extra.iconColor"
                                />
                                <span class="">{{ state.db.num }}</span>
                            </div>
                        </el-row>
                    </template>
                    <el-row>
                        <el-col :sm="24">
                            <el-table :data="state.db.opLogs" :height="state.resourceOpTableHeight" stripe size="small" :empty-text="$t('home.noOpRecord')">
                                <el-table-column prop="createTime" show-overflow-tooltip min-width="135">
                                    <template #default="scope">
                                        {{ formatDate(scope.row.createTime) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="codePath" min-width="380" show-overflow-tooltip>
                                    <template #default="scope">
                                        <TagCodePath :path="scope.row.codePath" :tagInfos="state.db.tagInfos" />
                                    </template>
                                </el-table-column>
                                <el-table-column width="30">
                                    <template #default="scope">
                                        <el-link @click="toPage('db', scope.row.codePath)" type="primary" icon="Position"></el-link>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="!mt-4 resource-info">
            <el-col :sm="12">
                <el-card shadow="hover">
                    <template #header>
                        <el-row justify="center">
                            <div class="resource-num pointer-icon" @click="toPage('redis')">
                                <SvgIcon
                                    class="mb-1 mr-1"
                                    :size="28"
                                    :name="TagResourceTypeEnum.Redis.extra.icon"
                                    :color="TagResourceTypeEnum.Redis.extra.iconColor"
                                />
                                <span class="">{{ state.redis.num }}</span>
                            </div>
                        </el-row>
                    </template>
                    <el-row>
                        <el-col :sm="24">
                            <el-table :data="state.redis.opLogs" :height="state.resourceOpTableHeight" stripe size="small" :empty-text="$t('home.noOpRecord')">
                                <el-table-column prop="createTime" show-overflow-tooltip min-width="135">
                                    <template #default="scope">
                                        {{ formatDate(scope.row.createTime) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="codePath" min-width="380" show-overflow-tooltip>
                                    <template #default="scope">
                                        <TagCodePath :path="scope.row.codePath" :tagInfos="state.redis.tagInfos" />
                                    </template>
                                </el-table-column>
                                <el-table-column width="30">
                                    <template #default="scope">
                                        <el-link @click="toPage('redis', scope.row.codePath)" type="primary" icon="Position"></el-link>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :sm="12">
                <el-card shadow="hover">
                    <template #header>
                        <el-row justify="center">
                            <div class="resource-num pointer-icon" @click="toPage('mongo')">
                                <SvgIcon
                                    class="mb-1 mr-1"
                                    :size="28"
                                    :name="TagResourceTypeEnum.Mongo.extra.icon"
                                    :color="TagResourceTypeEnum.Mongo.extra.iconColor"
                                />
                                <span class="">{{ state.mongo.num }}</span>
                            </div>
                        </el-row>
                    </template>
                    <el-row>
                        <el-col :sm="24">
                            <el-table :data="state.mongo.opLogs" :height="state.resourceOpTableHeight" stripe size="small" :empty-text="$t('home.noOpRecord')">
                                <el-table-column prop="createTime" show-overflow-tooltip min-width="135">
                                    <template #default="scope">
                                        {{ formatDate(scope.row.createTime) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="codePath" min-width="380" show-overflow-tooltip>
                                    <template #default="scope">
                                        <TagCodePath :path="scope.row.codePath" :tagInfos="state.mongo.tagInfos" />
                                    </template>
                                </el-table-column>
                                <el-table-column width="30">
                                    <template #default="scope">
                                        <el-link @click="toPage('mongo', scope.row.codePath)" type="primary" icon="Position"></el-link>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive } from 'vue';
// import * as echarts from 'echarts';
import { formatAxis, formatDate } from '@/common/utils/format';
import { indexApi } from './api';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '@/store/userInfo';
import { personApi } from '../personal/api';
import SvgIcon from '@/components/svgIcon/index.vue';
import { TagResourceTypeEnum } from '@/common/commonEnum';
import { resourceOpLogApi } from '../ops/tag/api';
import TagCodePath from '../ops/component/TagCodePath.vue';
import { useAutoOpenResource } from '@/store/autoOpenResource';
import { getAllTagInfoByCodePaths } from '../ops/component/tag';
import { ElMessage } from 'element-plus';
import { getFileUrl, getUploadFileUrl } from '@/common/request';
import { saveUser } from '@/common/utils/storage';

const router = useRouter();
const { userInfo } = storeToRefs(useUserInfo());

const state = reactive({
    accountInfo: {
        roles: [],
    },
    msgs: [],
    resourceOpTableHeight: 180,
    defaultLogSize: 5,
    machine: {
        num: 0,
        opLogs: [],
        tagInfos: {},
    },
    db: {
        num: 0,
        opLogs: [],
        tagInfos: {},
    },
    redis: {
        num: 0,
        opLogs: [],
        tagInfos: {},
    },
    mongo: {
        num: 0,
        opLogs: [],
        tagInfos: {},
    },
});

const roleInfo = computed(() => {
    if (state.accountInfo.roles.length == 0) {
        return '';
    }
    return state.accountInfo.roles.map((val: any) => val.roleName).join('、');
});

// 当前时间提示语
const currentTime = computed(() => {
    return formatAxis(new Date());
});

// 页面加载时
onMounted(() => {
    initData();
    getAccountInfo();
});

const getAccountInfo = async () => {
    state.accountInfo = await personApi.accountInfo.request();
};

const beforeAvatarUpload = (rawFile: any) => {
    if (rawFile.size >= 512 * 1024) {
        ElMessage.error('头像不能超过512KB!');
        return false;
    }
    return true;
};

const handleAvatarSuccess = (response: any, uploadFile: any) => {
    userInfo.value.photo = URL.createObjectURL(uploadFile.raw);

    const newUser = { ...userInfo.value };
    newUser.photo = getFileUrl(`avatar_${userInfo.value.username}`);
    // 存储用户信息到浏览器缓存
    saveUser(newUser);
};

// 初始化数字滚动
const initData = async () => {
    resourceOpLogApi.getAccountResourceOpLogs
        .request({ resourceType: TagResourceTypeEnum.Machine.value, pageSize: state.defaultLogSize })
        .then(async (res: any) => {
            const tagInfos = await getAllTagInfoByCodePaths(res.list?.map((item: any) => item.codePath));
            state.machine.tagInfos = tagInfos;
            state.machine.opLogs = res.list;
        });

    resourceOpLogApi.getAccountResourceOpLogs
        .request({ resourceType: TagResourceTypeEnum.DbInstance.value, pageSize: state.defaultLogSize })
        .then(async (res: any) => {
            const tagInfos = await getAllTagInfoByCodePaths(res.list?.map((item: any) => item.codePath));
            state.db.tagInfos = tagInfos;
            state.db.opLogs = res.list;
        });

    resourceOpLogApi.getAccountResourceOpLogs
        .request({ resourceType: TagResourceTypeEnum.Redis.value, pageSize: state.defaultLogSize })
        .then(async (res: any) => {
            const tagInfos = await getAllTagInfoByCodePaths(res.list?.map((item: any) => item.codePath));
            state.redis.tagInfos = tagInfos;
            state.redis.opLogs = res.list;
        });

    resourceOpLogApi.getAccountResourceOpLogs
        .request({ resourceType: TagResourceTypeEnum.Mongo.value, pageSize: state.defaultLogSize })
        .then(async (res: any) => {
            const tagInfos = await getAllTagInfoByCodePaths(res.list?.map((item: any) => item.codePath));
            state.mongo.tagInfos = tagInfos;
            state.mongo.opLogs = res.list;
        });

    indexApi.machineDashbord.request().then((res: any) => {
        state.machine.num = res.machineNum;
    });

    indexApi.dbDashbord.request().then((res: any) => {
        state.db.num = res.dbNum;
    });

    indexApi.redisDashbord.request().then((res: any) => {
        state.redis.num = res.redisNum;
    });

    indexApi.mongoDashbord.request().then((res: any) => {
        state.mongo.num = res.mongoNum;
    });
};

const toPage = (item: any, codePath = '') => {
    let path;
    switch (item) {
        case 'personal': {
            router.push('/personal');
            break;
        }
        case 'mongo': {
            useAutoOpenResource().setMongoCodePath(codePath);
            path = '/mongo/mongo-data-operation';
            break;
        }
        case 'machine': {
            useAutoOpenResource().setMachineCodePath(codePath);
            path = '/machine/machines-op';
            break;
        }
        case 'db': {
            useAutoOpenResource().setDbCodePath(codePath);
            path = '/dbms/sql-exec';
            break;
        }
        case 'redis': {
            useAutoOpenResource().setRedisCodePath(codePath);
            path = '/redis/data-operation';
            break;
        }
    }

    router.push({ path });
};
</script>

<style scoped lang="scss">
@use '@/theme/mixins/index.scss' as mixins;

.personal {
    .personal-user {
        height: 130px;
        display: flex;
        align-items: center;

        .personal-user-left {
            width: 100px;
            height: 130px;
            border-radius: 3px;

            ::v-deep(.el-upload) {
                height: 100%;
            }

            .personal-user-left-upload {
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 3px;
                }

                &:hover {
                    img {
                        animation: logoAnimation 0.3s ease-in-out;
                    }
                }
            }
        }

        .personal-user-right {
            flex: 1;
            padding: 0 15px;

            .personal-title {
                font-size: 18px;
                @include mixins.text-ellipsis(1);
            }

            .personal-item {
                display: flex;
                align-items: center;
                font-size: 13px;

                .personal-item-label {
                    color: gray;
                    @include mixins.text-ellipsis(1);
                }

                .personal-item-value {
                    @include mixins.text-ellipsis(1);
                }
            }
        }
    }

    .personal-info {
        .personal-info-more {
            float: right;
            color: gray;
            font-size: 13px;

            &:hover {
                color: var(--el-color-primary);
                cursor: pointer;
            }
        }

        .personal-info-box {
            height: 130px;
            overflow: hidden;

            .personal-info-ul {
                list-style: none;

                .personal-info-li {
                    font-size: 13px;
                    padding-bottom: 10px;

                    .personal-info-li-title {
                        display: inline-block;
                        @include mixins.text-ellipsis(1);
                        color: grey;
                        text-decoration: none;
                    }

                    & a:hover {
                        color: var(--el-color-primary);
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

.resource-info {
    text-align: center;

    ::v-deep(.el-card__header) {
        padding: 2px 20px;
    }

    .resource-num {
        font-weight: 700;
        font-size: 2vw;
    }
}

.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: 2vw;
            }

            .home-card-item-tip-num {
                font-size: 13px;
            }
        }
    }
}
</style>