hotline-admin-wex/src/views/home/index.vue

<template>
	<div class="home-container layout-pd">
		<el-row :gutter="20">
			<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16" class="left-content">
				<el-row :gutter="20">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
						<div class="statistics-item box" v-loading="state.loading">
							<div class="statistics-title">
								<img v-lazy="getImageUrl('home/Call.png')" alt=""  src=""/>
								今日来电
							</div>
							<div class="statistics-number">
								<div class="statistics-number-item">
									<p class="statistics-number-item-number"><b>520</b></p>
									<p class="statistics-number-item-tips">全部</p>
								</div>
								<div class="statistics-number-item">
									<p class="statistics-number-item-number"><b>200</b></p>
									<p class="statistics-number-item-tips">有效</p>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
						<div class="statistics-item box" v-loading="state.loading">
							<div class="statistics-title">
								<img v-lazy="getImageUrl('home/connectionRate.png')" alt=""  src=""/>
								今日接通率
							</div>
							<div class="statistics-number">
								<div class="statistics-number-item">
									<p class="statistics-number-item-number"><b>198</b></p>
									<p class="statistics-number-item-tips">接通</p>
								</div>
								<div class="statistics-number-item">
									<p class="statistics-number-item-number"><b>90%</b></p>
									<p class="statistics-number-item-tips">接通率</p>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
						<div class="statistics-item box" v-loading="state.loading">
							<div class="statistics-title">
								<img v-lazy="getImageUrl('home/workOrder.png')" alt=""  src=""/>
								受理工单
							</div>
							<div class="statistics-number">
								<p class="statistics-number-item-total"><b>10</b></p>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
						<div class="statistics-item box" v-loading="state.loading">
							<div class="statistics-title">
								<img v-lazy="getImageUrl('home/wait.png')" alt=""  src=""/>
								当前等待
							</div>
							<div class="statistics-number">
								<p class="statistics-number-item-total"><b>20</b></p>
								<p></p>
							</div>
						</div>
					</el-col>
				</el-row>

				<div class="list-content box w100 mb20" v-loading="state.listLoading">
					<div class="list-content-tabs">
						<div class="list-content-tabs-item" :class="state.active === 'gd' ? 'active' : ''" @click="changeList('gd')">
							工单池 <span v-show="state.activities.length">({{ state.activities.length }})</span>
						</div>
						<div class="list-content-tabs-item" :class="state.active === 'db' ? 'active' : ''" @click="changeList('db')">
							待办列表 <span v-show="state.activities.length">({{ state.activities.length }})</span>
						</div>
					</div>
					<div class="list-content-timeline">
						<p class="list-content-timeline-title">
							<span> <SvgIcon :name="getImageUrl('home/clock.png')" class="icons" size="28px" /><b>期满时间</b> </span>
							<el-button type="primary" text bg round v-show="state.activities.length" @click="more('workOrder')"
								>更多
								<SvgIcon name="ele-Right" class="ml5" color="var(--el-color-primary-light-4)" />
							</el-button>
						</p>
						<template v-if="state.activities.length">
							<el-timeline>
								<el-timeline-item
									v-for="(activity, index) in state.activities"
									:key="index"
									:type="activity.type"
									placement="top"
									:timestamp="activity.timestamp"
								>
									<el-card shadow="never">
										<h4>{{ activity.content }}</h4>
									</el-card>
								</el-timeline-item>
							</el-timeline>
						</template>
						<Empty v-else />
					</div>
				</div>
			</el-col>
			<!-- 常用入口 -->
			<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" class="right-content">
				<div class="right-entrance box w100" v-loading="state.entranceLoading">
					<p class="right-entrance-title">
						常用入口
						<span @click="customEntry"> <SvgIcon name="ele-Setting" class="mr5" />自定义 </span>
					</p>
					<template v-if="state.entranceList.length">
						<ul class="right-entrance-list">
							<li
								class="right-entrance-list-item"
								v-for="item in state.entranceList"
								:key="item.id"
								:data-id="item.id"
								@click="goLink(item.path)"
							>
								<img v-lazy="getImageUrl(item.fastIcon)" alt="" class="my-handle"  src=""/>
								<p>{{ item.pageName }}</p>
							</li>
						</ul>
					</template>
					<Empty descriptionData="暂无常用入口" v-else />
				</div>
				<div class="right-notice mt20 box w100" v-loading="state.noticeLoading">
					<p class="right-notice-title">
						通知公告
						<el-button type="primary" text bg round v-show="state.noticeList.length" @click="more('notice')">
							更多
							<SvgIcon name="ele-Right" class="ml5" color="var(--el-color-primary-light-4)" />
						</el-button>
					</p>
					<template v-if="state.noticeList.length">
						<vue3-seamless-scroll :list="state.noticeList" class="right-notice-scroll" :hover="true" :limitScrollNum="6">
							<div class="right-notice-scroll-item" v-for="(item, index) in state.noticeList" :key="index">
								<span class="right-notice-scroll-item-name text-no-wrap" :title="item.title">
									<SvgIcon name="iconfont icon-jiadayinliang" class="mr5 vd" />{{ item.title }}</span
								>
								<span class="right-notice-scroll-item-date"
									>{{ formatDate(item.date, 'YYYY-mm-dd') }}
									<SvgIcon name="ele-DArrowRight" class="ml5" />
								</span>
							</div>
						</vue3-seamless-scroll>
					</template>
					<Empty v-else descriptionData="暂无通知公告" />
				</div>
			</el-col>
		</el-row>
		<entrance ref="entranceRef" @updateEntrance="getEntrance" />
	</div>
</template>

<script lang="ts" setup name="home">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { getImageUrl } from '/@/utils/tools';
import { formatDate } from '/@/utils/formatTime';
import { geFastMenu } from '/@/api/home';
const Entrance = defineAsyncComponent(() => import('/@/views/home/component/Entrance.vue'));

const router = useRouter();
const state = reactive({
	entranceList: <EmptyArrayType>[],
	noticeList: [
		{
			title: '市城区迁改23处盲道优化446个临时停车泊位',
			date: Date.now(),
		},
		{
			title: '彭清华在成都调研指导疫情防控工作时强调',
			date: Date.now(),
		},
		{
			title: '广元市第二次全国污染源普查公报',
			date: Date.now(),
		},
		{
			title: '昭化：发展高效农林产业 打造乡村振兴“新引擎”',
			date: Date.now(),
		},
		{
			title: '市城区迁改23处盲道优化446个临时停车泊位',
			date: Date.now(),
		},
		{
			title: '广元市第二次全国污染源普查公报',
			date: Date.now(),
		},
	],
	active: 'gd',
	activities: [
		{
			content: '这是内容',
			timestamp: '2018-04-12 20:46',
			type: 'primary',
		},
		{
			content: '这是内容',
			timestamp: '2018-04-03 20:46',
			type: 'primary',
		},
	],
	loading: false, //头部
	listLoading: false, // 列表
	entranceLoading: false, //入口
	noticeLoading: false, // 公告
	sortEntranceList: [],
	sortable: <any>'',
});
const entranceRef = ref<RefType>();
// 自定义入口
const customEntry = () => {
	entranceRef.value.openDialog();
};
//获取入口设置
const getEntrance = () => {
	state.entranceLoading = true;
	geFastMenu()
		.then((res: any) => {
			state.entranceList = res?.result ?? [];
			state.entranceLoading = false;
		})
		.catch(() => {
			state.entranceLoading = false;
		});
};
// 跳转
const goLink = (val: string) => {
	router.push(val);
};
//切换列表
const changeList = (val: string) => {
	if (state.active === val) return;
	state.active = val;
};
// 更多
const more = (val: string) => {
	switch (val) {
		case 'workOrder':
			break;
		case 'notice':
			break;
		default:
			break;
	}
};
onMounted(() => {
	getEntrance();
});
</script>
<style lang="scss" scoped>
.box {
	background-color: var(--el-color-white);
	border-radius: 8px;
}
.vd {
	vertical-align: middle;
}
.home-container {
	.left-content {
		.statistics {
			display: flex;
			justify-content: space-between;
			&-item {
				padding: 20px;
				height: 200px;
				margin-bottom: 20px;
			}
			&-title {
				background: var(--hotline-bg-main-color);
				border-radius: 16px;
				height: 60px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: var(--el-font-size-medium);
				img {
					width: 83px;
					height: 83px;
					position: absolute;
					left: -22px;
					top: -2px;
				}
			}
			&-number {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40px 20px 0 20px;
				text-align: center;
				&-item-number {
					font-size: 30px;
				}
				&-item-tips {
					margin-top: 12px;
					color: var(--hotline-color-text-main-light);
				}
				&-item-total {
					flex: 1;
					font-size: 30px;
				}
			}
		}

		.list-content {
			padding: 20px;
			&-tabs {
				width: 300px;
				height: 50px;
				line-height: 50px;
				background: var(--hotline-bg-main-color);
				border-radius: 25px;
				display: flex;
				align-items: center;
				margin-bottom: 30px;
				&-item {
					color: var(--el-color-primary);
					font-size: var(--el-font-size-medium);
					text-align: center;
					height: 100%;
					width: 100%;
					border-radius: 25px;
					cursor: pointer;
					&.active {
						background-color: var(--el-color-primary);
						color: var(--el-color-white);
					}
				}
			}

			&-timeline {
				background: var(--hotline-bg-main-color);
				border-radius: 4px;
				padding: 20px;
				&-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 20px;
					font-size: var(--el-font-size-medium);
					font-weight: 600;
					span {
						color: var(--el-color-primary);
						position: relative;
						.icons {
							position: absolute;
							top: 0;
							left: -8px;
						}
						b {
							padding-left: 30px;
							font-weight: normal;
						}
					}
				}
			}
		}
	}
	.right-content {
		.right-entrance {
			padding: 30px 20px;
			&-title {
				font-size: var(--el-font-size-medium);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20px;
				font-weight: 600;
				span {
					font-size: 14px;
					display: flex;
					align-items: center;
					color: var(--el-text-color-regular);
					cursor: pointer;
					font-weight: normal;
				}
			}
			&-list {
				display: grid;
				justify-content: space-between;
				grid-template-columns: repeat(auto-fill, 110px);
				grid-gap: 15px;

				&-item {
					background: var(--hotline-bg-main-color);
					border-radius: 8px;
					text-align: center;
					width: 110px;
					height: 110px;
					cursor: pointer;
					color: var(--el-text-color-regular);
					user-select: none;
					.my-handle {
						width: 40px;
						height: 50px;
						margin-top: 15px;
						margin-bottom: 13px;
					}
					&:hover {
						color: var(--el-color-primary);
						background-color: var(--el-color-primary-light-8);
					}
				}
			}
		}
		.right-notice {
			padding: 30px 20px;
			&-title {
				font-size: var(--el-font-size-medium);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20px;
				font-weight: 600;
			}
			&-scroll {
				height: 300px;
				overflow: hidden;
				&-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1px solid var(--el-border-color);
					cursor: pointer;
					height: 50px;
					&-name {
						flex: 1;
						max-width: 70%;
					}
					&-date {
						display: flex;
						align-items: center;
						color: var(--el-color-info);
						text-align: right;
					}
					&:hover {
						color: var(--el-color-primary);
					}
				}
			}
		}
	}
}
</style>