suta/pagesFengXiang/pages/fengxiang-yujin/index.vue

<template>
	<!-- 蜂箱预警 -->
	<view class=" page">
		<view class="max-box">
			<!-- <view class="suosou-fx">
				<view class="section_3 ">
					<view class="text_3">
						<view class="input-fu">
							<image class="image_6 inpt-text-icon"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994973961877418353.png" />
							<input v-model="qrcode" class="inpt-text" type="text" value="" placeholder="蜂箱（自定义）编号搜索" maxlength="22"
								@input="mfInput" />
						</view>
					</view>
				</view>
			</view> -->

		<view class="tabs">
			   <u-tabs :list="list1" @click="click"></u-tabs>
		</view>


			<view class="flex-col self-start group_4">
				<view class="flex-col">
					<view class="flex-col space-y-6 padding-mi padding-min-box" v-for="(item, index) in fromList" :key="index" @scrolltolower="onReachBottom">
						<!-- 报错代码 -->

						<view class="items-end">
							<view class="flex-col group_5">
								<!-- 日期 -->
								<view v-if='!isSameDay(item,index)' class="taxt-center">
									<view style="padding: 15rpx 20rpx 30rpx 20rpx;" class="flex-col justify-start self-end text-wrapper">
										<view class="font_2 text_5">{{getTimeByFormat(item.create_time,"MM-dd")}}</view>
									</view>
								</view>
								<!-- 时间 -->
								<view class="time-text">
									<view class=" group_6 space-x-10">
										<view class="font_3 text_6">{{getTimeByFormat(item.create_time,"HH:mm")}}</view>
										<image class="image_7 image_8"
											:src="imgFn(item.type_text)" />
										<view class="font_4">{{item.type_text}}</view>
									</view>
									<view @click="clickweichuli(item)" class="flex-col justify-start text-wrapper_2 icon-text-r" :id="item.status_text == '已处理' ? 'text-wrapper_2-bgc2' : 'text-wrapper_2-bgc1' ">
										<view class="font_5">{{item.status_text}}</view>
									</view>
								</view>
							</view>

							<view class=" justify-evenly group_7 flex-box-love">
								<view v-if="fromList.length>0&&index!=(fromList.length-1)" class="xiantiao">
									<view class="ver-line"></view>
								</view>
								<view style="margin-top: 24rpx;" class="flex-col self-start group_8 space-y-6 ">
									<view class="items-end space-x-6 didian-text-box">
										<image class="shrink-0 image_9"
											src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994973961906195248.png" />
										<view class="font_6">{{item.apiary_name}}</view>
										<view class="group_9">
											<view class="font_6">{{item.beehive_name}}</view>
											<view class="font_7">{{item.beehive_qrcode}}</view>
										</view>
									</view>
									<view class="font_8 text_7">{{item.remark}}</view>
								</view>
							</view>
						</view>
					</view>
				<!-- 	<view class="" v-if="fromList.length == 0" style="width: 100%;text-align: center;margin-top: 200rpx;color: #ccc;font-size: 36rpx;">
						<text v-if="!flagmask">暂时没有预警记录...</text>
					</view> -->
				</view>
			</view>
        
		<view class="maskjia" style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #ccc;opacity: .6;" v-if="flagmask"></view>

		</view>
	</view>
</template>
<script>
	import request from '@/utils/request'
	export default {
		components: {},
		props: {},
		data() {
			return {
				tabIndex: 0,
				items: [],
				page: 1,
				fromList: [],
				// tab 
				list1: [{name:'全部'}],
				qrcode:'',
				pagenum: 1,
				pagesize: 15, // 一页多少数据
				isLoading: false, // 是否正在加载数据  
				noMoreData: false, // 是否没有更多数据  
				total: 0,
				flagmask:false
			};
		},
		onShow() {
			// this.listData()
			this.flagmask = true
			uni.showLoading({  
			    title: '加载中...',
			    mask: true, 
			    success: function () {  
			        // 显示成功的回调  
			    },  
			});
			this.getfengchangList()
		},

		methods: {
			 // 判断是否同一天
			    isSameDay(item, index) {
					let time1 = item.create_time
					let time2 = this.fromList[index - 1]?.create_time
			      const date1 = new Date(time1);
			      const date2 = new Date(time2);
			      return (
			        date1.getFullYear() === date2.getFullYear() &&
			        date1.getMonth() === date2.getMonth() &&
			        date1.getDate() === date2.getDate()
			      );
			    },
		getTimeByFormat(timestamp,format) {
			// console.log(date,format);
			const now = new Date(timestamp);
			const month = now.getMonth() + 1; // 注意：getMonth() 返回的是 0 到 11，所以需要加 1
			const day = now.getDate();
		
			// 补零函数，确保单个数字前面加零
			const padZero = (num) => (num < 10 ? `0${num}` : num);
		
			// 根据传入的格式进行处理
			switch (format) {
				case "HH:mm:ss":
					return `${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
				case "HH:mm":
					return `${padZero(now.getHours())}:${padZero(now.getMinutes())}`;
				case "mm:ss":
					return `${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
				case "MM-dd":
				// console.log(`${padZero(month)}月${padZero(day)}日`)
					return `${padZero(month)}月${padZero(day)}日`;
					// 可以添加其他格式的处理
				default:
					return "Invalid Format";
			}
			},
			click(item) {
				// console.log('item', item);
				this.flagmask = true
				uni.showLoading({
				    title: '加载中...',
				    mask: true, 
				    success: function () {  
				        // 显示成功的回调  
				    },  
				});
				this.pagenum = 1
				this.fromList = []
				this.activeFengchang = item
				this.listData()
			},
			 listData() {
			 request.post('/api/beehive/warning', {apiary_id: this.activeFengchang.id,qrcode:this.qrcode,page:this.pagenum}).then(res=>{
					// let dataarr = [...res.data.data]
					this.total = res.data.total
					if (res.data.data.length > 0) {
						
						// 有数据，追加到列表  
						this.fromList = this.fromList.concat(...res.data.data)
						this.pagenum++
						uni.hideLoading()
						this.flagmask = false
					} else {
						// 没有更多数据  
						 uni.hideLoading()
						 this.flagmask = false
						this.fromList = []
						this.noMoreData = true;
					}
					this.isLoading = false;
					console.log(this.fromList,'555555555')
				})
				// console.log(res.data.data)
			},
			onReachBottom() {
				let sum = this.total 
				console.log(sum,this.fromList.length);
				if (this.fromList.length < sum) {
					this.listData();
				} else {
					uni.showToast({
						title: '没有更多预警记录了',
						icon: 'none',
						duration: 1000
					});
				}
			},
			
			  getfengchangList(){
			  request.get('/api/apiary/index', {}).then(res=>{
				  this.list1.push(...res.data.data)
				  this.click(this.list1[0])
				  uni.hideLoading()
				  this.flagmask = false
			  })
			},
			changeStatus(item){
				request.put('/api/beehive/warningUpdate/'+item.id, {}).then(res=>{
					
					this.fromList = []
					this.pagenum = 0
					this.listData()
				})
			},
			
			clickweichuli(item){
				if(item.status==1){
					return
				}
				let that =this
				uni.showModal({
					title:"提示",
					content: '是否已经处理完此预警信息!',
					success: function (res) {
							if (res.confirm) {
								// console.log('用户点击确定');
							
								that.changeStatus(item)
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
				})
			},
			mfInput(key) {
				this.listData()
			},
      imgFn(val){
        if(val == '出勤异常'){
          return '/static/蜂箱预警-出勤异常.png'
        }else if(val == '震动异常'){
          return '/static/蜂箱预警-震动异常.png'
        }else if(val == '温度异常'){
          return '/static/蜂箱预警-温度异常.png'
        }else if(val == '湿度异常'){
          return '/static/蜂箱预警-湿度异常.png'
        }else if(val == '重量异常'){
          return '/static/蜂箱预警-重量异常.png'
        }else if(val == '电量不足'){
          return '/static/蜂箱预警-电量异常.png'
        }
      },

		},
	};
</script>

<style scoped lang="scss">
	.didian-text-box {
		display: flex;
	}

	.flex-box-love {
		display: flex;
	}

	.xiantiao {
		display: flex;
	}

	.icon-text-r {
		text-align: center;
		padding-bottom: 10rpx;
	}

	.padding-min-box {
		margin-top: 20rpx;
	}

	.max-box {
		margin: 0 24rpx;
    padding-bottom: 100rpx;
	}

	.time-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.taxt-center {
		display: flex;
		justify-content: center;
	}

	.input-fu {
		width: 100%;
		position: relative;
	}

	.inpt-text {
		text-align: center;
	}

	.inpt-text-icon {
		position: absolute;
		top: 5rpx;
		left: 10rpx;
	}

	.suosou-fx {
		display: flex;
		justify-content: center;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 28rpx 18rpx 42rpx;
		background-color: #ffffff;
	}

	.space-y-16>view:not(:first-child),
	.space-y-16>text:not(:first-child),
	.space-y-16>image:not(:first-child) {
		margin-top: 32rpx;
	}

	.group {
		padding-left: 28rpx;
	}

	.text {
		color: #7d7d7d;
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		font-weight: 700;
		line-height: 22rpx;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 12rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 23rpx;
	}

	.group_2 {
		padding: 12rpx 0;
	}

	.image_5 {
		width: 32rpx;
		height: 32rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text_2 {
		color: #000000;
		font-size: 36rpx;
		font-family: AlibabaPuHuiTi;
		line-height: 33rpx;
	}

	.image_4 {
		filter: drop-shadow(0px 4rpx 4rpx #00000040);
		border-radius: 120rpx;
		width: 158rpx;
		height: 60rpx;
	}

	.pos {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.section_2 {
		margin-top: -8rpx;
		padding-top: 20rpx;
		background-color: #ffffff;
		height: 1456rpx;
		border: solid 4rpx #e8e8e8;
		border-radius: 10rpx;
	}

	.section_3 {
		padding: 8rpx 24rpx;
		background-color: #e2e2e2;
		width: 558rpx;
		border: solid 2rpx #ffffff;
		border-radius: 120rpx;
	}

	.image_6 {
		width: 40rpx;
		height: 40rpx;
	}

	.text_3 {
		/* margin-right: 26rpx; */
		color: #888888;
		font-size: 28rpx;
		font-family: Nunito;
		font-weight: 600;
		line-height: 27rpx;
	}

	.group_3 {
		margin-top: 28rpx;
		padding: 0 40rpx;
		width: 750rpx;
	}

	.font_1 {
		font-size: 32rpx;
		font-family: 微软雅黑;
		line-height: 30rpx;
		color: #888888;
	}

	.text_4 {
		color: #000000;
		font-weight: 700;
	}

	/* .group_4 {
		margin: 24rpx 0 -24rpx;
		padding: 0 52rpx;
		width: 750rpx;
	} */

	.group_5 {
		width: 100%;
	}

	.text-wrapper {
		text-align: center;
		padding: 0rpx 0 24rpx;
		border-radius: 4rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994973961902704708.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 148rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: 微软雅黑;
		line-height: 22rpx;
		color: #ffffff;
	}

	.text_5 {
		line-height: 21rpx;
	}

	.group_6 {
		/* padding-top: 10rpx; */
		display: flex;
		align-items: center;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: 微软雅黑;
		line-height: 22rpx;
		color: #000000;
	}

	.text_6 {
		font-size: 30rpx;
		width: 100rpx;
	}

	.image_7 {
		margin-left: 28rpx;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}

	.image_8 {
		margin-left: 0;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: 微软雅黑;
		line-height: 26rpx;
		font-weight: 700;
		color: #ff5733;
	}
  #text-wrapper_2-bgc1{
    background-color: #ff5733;
  }
  #text-wrapper_2-gbc2{
    background-color: #8888;
  }
	.text-wrapper_2 {
		margin-right: 12rpx;
		padding:10rpx 15rpx;
    background-color: #8888;
		border-radius: 10rpx;
		width: 90rpx;
	}

	.font_5 {
		font-size: 20rpx;
		font-family: 微软雅黑;
		line-height: 18rpx;
		color: #ffffff;
	}

	.group_7 {
		padding-left: 116rpx;
		padding-right: 20rpx;
	}

	.section_4 {
		background-image: repeating-linear-gradient(90deg, #888888, #888888 3.51%, transparent 3.51%, transparent 7.019%);
		background-position: -2rpx 0px;
		width: 2rpx;
		height: 114rpx;
		margin-left: 20rpx;
	}

	.group_8 {
		padding: 0 32rpx;
	}

	.space-y-6>view:not(:first-child),
	.space-y-6>text:not(:first-child),
	.space-y-6>image:not(:first-child) {
		margin-top: 12rpx;
	}

	.image_9 {
		width: 24rpx;
		height: 28rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: 微软雅黑;
		line-height: 22rpx;
		color: #888888;
	}

	.group_9 {
		line-height: 22rpx;
		height: 22rpx;
		display: flex;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: 微软雅黑;
		line-height: 18rpx;
		color: #89c28c;
		margin-left: 10rpx;
	}

	.font_8 {
		font-size: 24rpx;
		font-family: 微软雅黑;
		line-height: 22rpx;
		font-weight: 700;
		color: #000000;
	}

	.text_7 {
		line-height: 28rpx;
	}

	.ver-line {
		margin-left: 22rpx;
		height: 200rpx;
		width: 3rpx;
		border-radius: 10rpx;
		background-color: #e7dfe1;
	}
</style>