工作记录 vue3-seamless-scroll

版本
  "vue3-seamless-scroll": "^2.0.1"

使用

import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

代码

<!--
 * @Description: 一周内历史报警统计
-->
<template>
	<div>
		<EchartsBox :title="type == 1 ? '一周内历史温度报警记录' : '一周内历史漏水报警记录'">
			<template #content>
				<div class="content-box">
					<div class="list-content">
						<div class="listHead">
							<div class="header1">序号</div>
							<div class="header2">时间</div>
							<div class="header3">楼栋</div>
							<div class="header4">科室</div>
							<div class="header5">机房号</div>
							<div class="header6">设备型号</div>
						</div>
						<div class="scrollList" v-if="state.infoList.length">
							<Vue3SeamlessScroll
								style="width: 100%; height: 100%"
								:list="state.infoList"
								:hover="true"
								:wheel="true"
								:step="0.5"
								:limitScrollNum="8"
							>
								<div v-for="(item, index) in state.infoList" :key="item" class="listItem">
									<div class="header1">{{ index + 1 }}</div>
									<div class="header2">
										{{ item.createTime }}
									</div>
									<div class="header3">{{ item.buildingName }}</div>
									<div class="header4">{{ item.departmentName }}</div>
									<div class="header5">{{ item.roomName }}</div>
									<div class="header6">{{ item.model }}</div>
								</div>
							</Vue3SeamlessScroll>
						</div>
						<NoData class="scrollList" v-else></NoData>
					</div>
				</div>
			</template>
		</EchartsBox>
	</div>
</template>
<script setup lang="ts" name="alarm-history">
import { onMounted, reactive } from 'vue';
import EchartsBox from './echarts-box.vue';
import { useHomeApi } from '/@/api/home/index';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const state: any = reactive({
	infoList: [],
});

const props = defineProps({
	type: {
		type: Number,
		default: 1, // 1高温 2漏水
	},
});

onMounted(() => {
	getHistoryAlarm(props.type);
});

// 获取历史报警统计
const getHistoryAlarm = async (type: number) => {
	const { data } = await useHomeApi().queryAlarmRecordOneWeek({ type });
	state.infoList = data;

	if (!data.length) {
		state.infoList = [
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
			{
				buildingName: '1号楼',
				departmentName: '制剂室',
				roomName: '房间1',
				model: '测试设备',
				createTime: '2024-01-17 10:35:42',
			},
		];
	}
};
</script>
<style lang="scss" scoped>
.content-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.list-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10px 0px;
		overflow: hidden;
		.listHead {
			padding: 5px;
			display: flex;
			align-items: center;
			text-align: center;
			width: 100%;
			height: 50px;
			font-size: 16px;
			color: #f5f5f5;
			font-weight: 500;
			background: rgba(49, 98, 183, 0.3);
			box-shadow: inset 0px 0px 38px 0px rgba(65, 141, 255, 0.29);
		}

		.scrollList {
			width: 100%;
			height: 100%;
			margin-top: 10px;
			overflow: hidden;
			padding: 0px 8px;
			.listItem {
				display: flex;
				align-items: center;
				width: 100%;
				padding: 5px;
				text-align: center;
				font-size: 14px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				color: #b1d4ff;
				border-bottom: 1px solid rgba(30, 72, 151, 0.6);

				&:hover {
					background: linear-gradient(85deg, rgba(99, 162, 254, 0.14) 0%, #216cdb 50%, rgba(99, 162, 254, 0.13) 100%);
				}
			}

			:deep(.no-data) {
				width: 200px;
				height: 200px;
			}
		}

		// .listItemOdd {
		// 	background: rgba(49, 98, 183, 0.1);
		// 	box-shadow: inset 0px 0px 38px 0px rgba(65, 141, 255, 0.29);
		// }

		.header1 {
			width: 10%;
		}

		.header2 {
			width: 25%;
		}

		.header3 {
			width: 10%;
		}

		.header4 {
			width: 20%;
		}

		.header5 {
			width: 15%;
		}
		.header6 {
			width: 20%;
		}
	}
}
</style>