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

<template>
	<div class="home-page">
		<div class="background-box">
			<div class="left-content">
				<div class="message-box">
					<el-carousel height="32px" direction="vertical" indicator-position="none" autoplay>
						<el-carousel-item v-for="(item, index) in messages" :key="'message-' + index">
							<p class="text-row-1" style="line-height: 32px;" :class="{'is-link': item.link}"
								 @click="() => {item.link && router.push(item.link)}">【{{ item.type }}】 {{ item.content }}</p>
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="header-box">
					<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">
						<NumberChart/>
					</div>
					<div class="echart-item">
						<NumberPieChart/>
					</div>
					<div class="echart-item">
						<TimeChart/>
					</div>
					<div class="echart-item">
						<TimeBarChart/>
					</div>
				</div>
			</div>
			<div class="right-content">
				<div class="week-calendar">
					<WeekCalendar/>
				</div>
				<div class="system-logs">
					<div class="title">
						<span>系统日志</span>
						<span class="f14" style="cursor: pointer;" @click="router.push('./logs-manage/logs-manage')">更多</span>
					</div>
					<div class="content">
						<SystemLogs/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang='ts' setup>
import {onMounted, ref} 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";
import * as dailyPlanApi from "@/api/daily-plan";
import {dateFormater} from "@/utils/date-util";


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

const messages = ref([] as any)
const total = ref(0) // 日历添加的记录提醒统计

messages.value.push({
	type: '通知',
	content: '测试测试测试测试测试测试测试测试测试测试',
	link: '/system-manage/system-home'
})
messages.value.push({
	type: '公告',
	content: '公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试公告测试'
})

onMounted(() => {
	getTodoCount();
})

function getTodoCount() {
	dailyPlanApi.getTodoCountByDate(dateFormater("yyyy-MM-dd", new Date())).then((res: any) => {
		if (res.code == 0) {
			total.value = res.data;
		}
	});
}

</script>

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

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

	}

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

		.message-box {
			height: 34px;
			background: #f8f8f8;
			color: $text-color;
			padding: 0 30px;
			border: 1px solid $border1-color;
			margin-bottom: 20px;

			.is-link {
				cursor: pointer;
				color: $main-color;
			}
		}

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

			.header-item {
				width: calc(60% - 20px);
				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: 40%;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
				}
			}
		}

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

			.echart-item {
				width: calc(60% - 20px);
				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: 40%;
				}

				&:nth-child(n + 3) {
					margin-top: 20px;
				}
			}
		}
	}

	.right-content {
		width: 330px;
		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>