siyu_app/pages_watch/healthMonitoring/bloodPressureAbnormal.vue

<template>
	<view>
		<myTabbar :tabList="tabList" :current="activeTab" @change="changeTab" />
		<!-- <swiper :style="'height:' + clientHeight + 'px;'" :current="activeTab" :duration="300"
			@change="onSwiperChange" @transition="onswiperscroll">
			<swiper-item v-for="(page,index) in tabList" :key="index"> -->
				<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'" @scrolltolower="scrolltolower">
					<template v-if="list &&list.length > 0">
						<abnormalList :abnormalList="abnormalList" :unit="'mmHg'" :type="'bp'"
							@monthChange="monthChange">
							<template v-slot:default="slotProps">
								<view :class="'slotview status'+slotProps.data.status">
									{{_typeText(slotProps.data.status)}}</view>
							</template>
						</abnormalList>
					</template>
					<view v-else>
						<myEmpty />
					</view>
				</scroll-view>
			<!-- </swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	import abnormalList from "@/pages_watch/components/abnormalList/abnormalList.vue"
	import myEmpty from "@/pages_watch/components/myEmpty/myEmpty.vue"
	import myTabbar from "@/pages_watch/components/myTabbar/myTabbar.vue"
	import {
		bpInfoPage
	} from "@/api/pages_watch/healthMonitoring.js";
	export default {
		components: {
			abnormalList,
			myEmpty,
			myTabbar
		},
		data() {
			return {
				loading: false,
				isMore: true,
				activeTab: 0,
				tabList: [{
					id: 0,
					name: '全部'
				}, {
					id: 1,
					name: '重度'
				}, {
					id: 2,
					name: '中度'
				}, {
					id: 3,
					name: '轻度'
				}, {
					id: 4,
					name: '正常高值'
				}, {
					id: 5,
					name: '偏低'
				}, {
					id: 6,
					name: '正常'
				}],
				clientHeight: 0,
				scrollViewId: 'scrollView0',
				queryParam: {
					startTime: undefined,
					endTime: undefined,
					deviceId: undefined,
					status: '',
					pageSize: 10,
					pageNum: 1,
				},
				total: 0,
				abnormalList: {},
				list: [],
			}
		},
		computed: {
			_typeText() {
				const txt = {
					1: '重度',
					2: '中度',
					3: '轻度',
					4: '正常 高值',
					5: '偏低',
					6: '正常',
				}
				return (type) => {
					return txt[type] || ''
				}
			}
		},
		onLoad(option) {
			this.queryParam.startTime = option.startTime
			this.queryParam.endTime = option.endTime
			this.queryParam.deviceId = uni.getStorageSync("deviceId")
			this.refresh()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - uni.upx2px(100);
				}
			})
		},
		methods: {
			changeTab(e) {
				this.activeTab = e.index;
				this.refresh()
			},
			// swiper划动
			onSwiperChange(e) {
				this.changeIdx(e.detail.current);
			},
			// 更新当前页
			changeIdx(index) {
				if (this.activeTab === index) return;
				this.activeTab = index;
				this.scrollViewId = 'scrollView' + this.activeTab;
				this.refresh()
			},
			onswiperscroll() {
				// this.refresh()
			},
			// 获取数据
			getList() {
				this.loading = true
				this.queryParam.status = this.activeTab > 0 ? this.activeTab : ''
				bpInfoPage(this.queryParam).then(res => {
					this.loading = false
					if (res.code == 0) {
						let list = res.rows && res.rows.length > 0 ? res.rows : []
						this.list = this.list.concat(list)
						this.total = res.total
						this.queryParam.pageNum++
						if (this.list.length >= this.total) {
							this.isMore = false
						}
						this.resetData(this.list)
					}
				}).catch(() => {
					this.loading = false
				})
			},
			resetData(array) {
				this.abnormalList = array.reduce((acc, obj) => {
					const [year, month] = obj.createTime.split(' ')[0].split('-');
					const date = obj.createTime.split(' ')[0];

					if (!acc[`${year}-${month}`]) {
						acc[`${year}-${month}`] = {};
					}

					if (!acc[`${year}-${month}`][date]) {
						acc[`${year}-${month}`][date] = [];
					}
					obj.num = obj.sbp + '/' + obj.dbp
					acc[`${year}-${month}`][date].push(obj);

					return acc;
				}, {});
			},
			refresh() {
				this.loading = false
				this.isMore = true
				this.queryParam.pageNum = 1
				this.list = []
				this.getList()
			},
			// 滚动到底部
			scrolltolower() {
				if (this.isMore) {
					this.getList()
				}
			},
			// 改变月份(时间范围：查询选中的月份-现在的月份) 2024-07
			monthChange(month) {
				const date = month + "-01 00:00:00"
				this.queryParam.startTime = this.$timeFormat(date, "yyyy/mm/dd hh:MM:ss")
				this.queryParam.endTime = this.$timeFormat(new Date(), "yyyy/mm/dd hh:MM:ss")
				this.refresh()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.status1 {
		background: #FF5558;
	}

	.status2 {
		background: #FFB992;
	}

	.status3 {
		background: #91AEFF;
	}

	.status4 {
		background: #96CBFA;
	}

	.status5 {
		background: #C7B6FF;
	}

	.status6 {
		background: #52D087;
	}

	.slotview {
		display: inline-block;
		flex-shrink: 0;
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		overflow: hidden;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 10rpx;
		@include u-flex(column, center, center);
		box-sizing: border-box;
		margin-right: 18rpx;
	}
</style>