siyu_app/pages_watch/healthMonitoring/uricAcidAbnormal.vue

<template>
	<view>
		<myTabbar :tabList="tabList" :current="activeTab" @change="changeTab" />
		<!-- <swiper :current="activeTab" @change="onSwiperChange" :style="'height:' + clientHeight + 'px;'">
			<swiper-item v-for="(tab,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="'umol/L'" :type="'ua'" @monthChange="monthChange">
							<template v-slot:default="slotProps">
								<view :class="'slotview status'+slotProps.data.status" v-if="slotProps.data.status == 1">
									<text>高</text><text>风险</text>
								</view>
								<view :class="'slotview status'+slotProps.data.status" v-else>
									{{_typeText(slotProps.data.status)}}
								</view>
							</template>
						</abnormalList>
					</template>
					<view v-else>
						<myEmpty />
					</view>
					<!-- <view class="loading">
						<view class="tips" v-if="loadings === '0'">这是我的底线了~</view>
						<view class="tips" v-else-if="loadings === '1'">上拉加载更多...</view>
						<view class="imgs" v-else-if="loadings === '2'">
							<image src="load.png" mode=""></image>
							<text>加载中...</text>
						</view>
					</view> -->
				</scroll-view>
		<!-- 	</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	import abnormalList from "@/pages_watch/components/abnormalList/abnormalList.vue"
	import { uaPageList } from "@/api/pages_watch/healthMonitoring.js"
	import myTabbar from "@/pages_watch/components/myTabbar/myTabbar.vue"
	import myEmpty from "@/pages_watch/components/myEmpty/myEmpty.vue"

	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: '正常'
				}],
				clientHeight: 0,
				scrollViewId: 'scrollView0',
				queryParam: {
					startTime: undefined,
					endTime: undefined,
					deviceId: undefined,
					status: '',
					pageSize: 10,
					pageNum: 1,
				},
				total: 0,
				abnormalList: {},
				list: [],
			}
		},
		computed: {
			_typeText() {
				const txt = {
					2: '高风险',
					1: '不良',
					0: '正常',
				}
				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()
			},
			// 获取数据
			getList() {
				this.loading = true
				this.queryParam.status = this.activeTab > 0 ? this.activeTab - 1 : ''
				uaPageList(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.val
				  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;
	}

	.status2 {
		background: #FF5558;
	}

	.status1 {
		background: #FFB992;
	}

	.status0 {
		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>