bj-maritime-dcds-web/src/views/notificationAnalysis/situationOverdueStatistics/components/industryOverdueStatistics.vue

<template>
	<div class="scroll-wrapper" v-show="isShow">
		<div class="title-name">
			<!-- <el-icon><TrendCharts /></el-icon> -->
			<span>{{ titleName }}</span>
		</div>
		<div class="statistics-container">
			<!-- 固定首列 -->
			<div class="fixed-first start-card card-border-total">
				<div class="card-title card-title-total">
					<div>{{ dataList?.[0]?.title }}</div>
				</div>
				<div class="card-body">
					<div class="card-body-left">
						<div class="card-count">{{ dataList?.[0]?.count }}</div>
						<div class="card-text">{{ dataList?.[0]?.countName }}</div>
					</div>
					<div class="card-body-right">
						<div class="card-count">{{ dataList?.[0]?.percent }}%</div>
						<div class="card-text">{{ dataList?.[0]?.percentName }}</div>
					</div>
				</div>
			</div>
			<!-- 可滚动内容 -->
			<div class="scroll-content-wrapper">
				<div class="scroll-content">
					<div
						v-for="(item, index) in dataList?.slice(1)"
						:key="index"
						class="start-card"
						:class="item.isMain ? 'card-border-total' : 'card-border-point'"
					>
						<div class="card-title" :class="item.isMain ? 'card-title-total' : 'card-title-point'">
							<div>{{ item.title }}</div>
						</div>
						<div class="card-body">
							<div class="card-body-left">
								<div class="card-count">{{ item.count }}</div>
								<div class="card-text">{{ item.countName }}</div>
							</div>
							<div class="card-body-right">
								<div class="card-count">{{ item.percent }}%</div>
								<div class="card-text">{{ item.percentName }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import useSystemStore from '@/store/main';
import { getTimeLimitTotalCardApi } from '@/api/notificationAnalysis/situationOverdue';
interface DataList {
	title: string;
	count: number;
	countName: string;
	percent: number;
	percentName: string;
	isMain?: boolean;
}

// 使用pinia数据
const systemStore = useSystemStore();
const { pageList, resDate, searchObj } = storeToRefs(systemStore);
watch(
	[() => pageList, () => searchObj.value],
	([newPageList, newSearchObj], [oldPageList, oldSearchObj]) => {
		getTimeLimitTotalCardData();
	},
	{ deep: true }
);
// onMounted(() => {
// 	getTimeLimitTotalCardData();
// });
const isShow = ref<any>(false);
const dataList = ref<DataList[]>();
const titleName = '行业外超期情况总览';
async function getTimeLimitTotalCardData() {
	const res: any = await getTimeLimitTotalCardApi();
	if (res.code === 200) {
		isShow.value = true;
		dataList.value = res.data[1];
	} else {
		return [];
	}
}
</script>

<style scoped lang="scss">
/* 外层容器 */
.scroll-wrapper {
	margin-top: 20px;
	background-color: #fff;
}

.title-name {
	padding: 20px 15px;
	font-weight: 700;
	span {
		padding-left: 10px;
	}
}
:deep(.el-icon) {
	vertical-align: -14%;
	color: #2350aa;
}
/* 主容器 */
.statistics-container {
	display: flex;
	width: 100%;
	position: relative;
}
/* 固定首列 */
.fixed-first {
	position: sticky;
	left: 0;
	z-index: 2;
	margin-left: 0;
	.stat-card {
		margin-left: 0;
	}
}
/* 可滚动内容的外层容器 */
.scroll-content-wrapper {
	flex: 1;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* 可滚动内容 */
.scroll-content {
	display: flex;
	width: max-content;
}
/* 卡片通用样式 */
.start-card {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 250px;
	height: 150px;
	margin-left: 12px;
	background: white;
	border-radius: 14px;
	border: 2px solid #2350aa;
	overflow: hidden;
}

.card-border-total {
	border-color: #2350aa;
	color: #fff;
}

.card-border-point {
	border-color: #b7cbe5;
	color: #2350aa;
}

.card-title {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	font-size: 14px;
	text-align: center;
	padding: 6px;
	& > div {
		text-align: left;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.card-title-total {
	background-color: #2350aa;
}
.card-title-point {
	background-color: #eff4fa;
}

.card-body {
	flex: 1.5;
	display: flex;
	flex-direction: row;

	align-items: center;
	justify-content: space-around;
	font-size: 14px;
	& > div:last-child {
		margin-left: 10px;
	}
}
.card-body-left,
.card-body-right {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.card-count {
	font-size: 24px;
	color: #2350aa;
	font-weight: bold;
	margin-right: 10px;
}

.card-text {
	color: #666666;
}
</style>