rax-medical/src/views/home/index.vue

<template>
    <div class="home-page">
        <div class="background-box">
            <div class="left-content">
                <div class="header-box swing_skew_1">
                    <div class="header-item">
                        <span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
                        <span class="text2-color f14">{{ userInfo.permissions }}</span>
                    </div>
                    <div class="header-item">
                        <el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;">
                            <Calendar />
                        </el-icon>
                        <div>
                            <p class="text1-color f14">待办任务</p>
                            <p class="main-color f20">{{ total }}</p>
                        </div>
                    </div>
                </div>
                <div class="echart-box">
                    <div class="echart-item swing_skew_2">
                        <NumberChart />
                    </div>
                    <div class="echart-item swing_skew_2">
                        <NumberPieChart />
                    </div>
                    <div class="echart-item swing_skew_1">
                        <TimeChart />
                    </div>
                    <div class="echart-item swing_skew_1">
                        <TimeBarChart />
                    </div>
                </div>
            </div>
            <div class="right-content">
                <div class="week-calendar">
                    <WeekCalendar />
                </div>
                <div class="system-logs move_2">
                    <div class="title">
                        <span>系统日志</span>
                        <span class="f14" style="cursor: pointer;" @click="router.push('./logs-manage')">更多</span>
                    </div>
                    <div class="content move_2">
                        <SystemLogs />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginStore } from '@/stores/user-info-store'
import NumberChart from "./number-chart.vue";
import NumberPieChart from "./number-pie-chart.vue";
import TimeChart from "./time-chart.vue";
import TimeBarChart from "./time-bar-chart.vue";
import WeekCalendar from "./week-calendar.vue";
import SystemLogs from "@/components/system-logs.vue";

const router = useRouter()
const userInfo = useLoginStore().getlogin()

const total = ref(0) // 日历添加的记录提醒统计

</script>

<style lang='scss' scoped>
.home-page {
    width: 100%;
    height: 100%;
    padding: 15px;

    .background-box {
        width: 100%;
        height: 100%;
        background: white;
        padding: 20px 35px;
        display: flex;
        justify-content: space-between;
    }

    .left-content {
        width: calc(100% - 550px);
        height: 100%;

        .header-box {
            width: 100%;
            height: 140px;
            display: flex;
            justify-content: space-between;

            .header-item {
                width: calc(100% - 600px);
                height: 100%;
                border: 1px solid $border-color;
                border-radius: 5px;
                box-shadow: 1px 1px 5px $border2-color;
                padding: 0 90px;
                line-height: 1.5;
                display: flex;
                flex-direction: column;
                justify-content: center;

                &~.header-item {
                    width: 580px;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                }
            }
        }

        .echart-box {
            width: 100%;
            height: calc(100% - 160px);
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .echart-item {
                width: calc(100% - 600px);
                height: calc(50% - 10px);
                border: 1px solid $border-color;
                border-radius: 5px;
                padding: 20px;
                box-shadow: 1px 1px 5px $border2-color;
                
                &:nth-child(even) {
                    width: 580px;
                }
                &:nth-child(n + 3) {
                    margin-top: 20px;
                }
            }
        }
    }

    .right-content {
        width: 530px;
        height: 100%;
        .week-calendar {
            width: 100%;
            height: 50%;
        }
        .system-logs {
            width: 100%;
            height: calc(50% - 20px);
            margin-top: 20px;
            overflow: hidden;

            .title {
                width: 100%;
                height: 40px;
                padding: 0 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .content {
                width: 100%;
                height: calc(100% - 50px);
                margin-top: 10px;
                border: 1px solid $border-color;
                padding: 30px;
                overflow-x: hidden;
                overflow-y: auto;
            }
        }
    }
}</style>