read_opc/reado-app/pages/message/index.vue

<template>
	<view class="content">
		<view class="msg-box">
			<view style="margin-bottom:10rpx;position:relative" v-for="item in msgList" :key="item.id">
				<view class="msg-item">
					<view class="msg-row">
						<image src="@/static/image/bj1.png" style="margin-right:20rpx;width: 40rpx;height:40rpx;"
							alt="">
							<view class="msg-content">
								名称 ：{{item.itemReadName}}
							</view>
					</view>
					<view class="msg-row">
						<image src="@/static/image/bj3.png" style="margin-right:20rpx;width: 40rpx;height:40rpx;"
							alt="">
							<view class="msg-content">
								类型 ：{{item.alarmType}}
							</view>
					</view>
					<view class="msg-row">
						<image src="@/static/image/bj4.png" style="margin-right:20rpx;width: 40rpx;height:40rpx;"
							alt="">
							<view class="msg-content">
								时间 ：{{item.alarmTime}}
							</view>
					</view>
					<view class="msg-row">
						<image src="@/static/image/bj2.png" style="margin-right:20rpx;width: 40rpx;height:40rpx;"
							alt="">
							<view class="msg-content">
								报警描述 ：<text style="font-weight: normal;">{{item.alarmText}}</text>
							</view>
					</view>
					<view class="msg-row">
						<u-button type="primary" size="small" class="cl" @click="handleMsg(item)">查看详情</u-button>
					</view>
				</view>
			<!-- 	<view class="msg-btn">
					<u-button type="primary" size="small" class="cl" @click="handleMsg(item.id)">查看详情</u-button>
				</view> -->
				<!-- <view class="emergent" v-if="item.readState!==0">
					<image src="@/static/image/jjbq.png" alt="" style="width:95rpx;height:80rpx">
				</view> -->
			</view>
			<view v-if="queryForm" class="query-screen">
				<view>
					关键字
				</view>
				<div style="margin: 20px 0;">
					<input v-model="queryParams.queryKey" placeholder="请输入点位名称查询"/>
				</div>
				<view>
					报警类型
				</view>
				<div style="margin: 20px 0;">
					<uni-data-select v-model="queryParams.alarmType"  :localdata="alarmTypeList"></uni-data-select>
				</div>
				<view>
					报警时间
				</view>
				<uni-datetime-picker v-model="range" type="datetimerange" start-placeholder="起始时间"
					end-placeholder="终止时间" @change="handelDate" return-type="timestamp" />
				<view class="month-btn">
					<u-button class="reset" style="width:200rpx" @click="reset">重置</u-button>
					<u-button type="primary" style="width:200rpx" @click="handelQuery">确认</u-button>
				</view>
			</view>
		</view>

		<u-empty v-if="!msgList.length" class="empty" icon="../../static/data.png" text="暂无数据">
		</u-empty>
	</view>
</template>

<script>
	import {
		getDayTime,
		timeToDate
	} from '@/utils/date.js'
	export default {
		data() {
			return {
				queryForm:false,
				// 日期选择
				range: [],
				//报警类型
				alarmTypeList:[
					{
						text:'数据源报警',
						value:'数据源',
					},
					{
						text:'点位报警',
						value:'点位'
					}
					],
				// 查询参数
				queryParams: {
					queryKey:null,
					startDate:null,
					endDate:null,
					alarmType:null,
					page: 1,
					limit: 20
				},
				// 列表数据
				msgList: []
			};
		},
		onShow() {
			this.queryParams.limit = 20
			this.getMsgList()
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			})
		},
		onPullDownRefresh() {
			this.queryParams.limit = 20
			this.getMsgList()
		},
		onReachBottom() {
			this.queryParams.limit += 10
			this.getMsgList()
		},
		methods: {
			// 获取消息数据
			getMsgList() {
				if((this.queryParams.startDate==null) || (this.queryParams.endDate==null)){
					let dDate = getDayTime();
					
					this.queryParams.startDate = timeToDate(dDate[0])
					this.queryParams.endDate = timeToDate(dDate[1])
				}
				console.log(this.queryForm)
				uni.$http.get('/mobileAlarm/queryAllAlarmData', this.queryParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.msgList = data.data
						uni.stopPullDownRefresh()
					}
				})
			},
			//立即处理
			handleMsg(item) {
				uni.navigateTo({
					url: "/pages/message/msg-detail/index?data=" + JSON.stringify(item),
				})
			},
			onNavigationBarButtonTap(e){
				this.queryForm = !this.queryForm;
				if(this.queryForm){
					this.range = getDayTime()
					this.handelDate(this.range)
				}
			},
			resolvingDate(date) {
				if (!date) {
					return;
				}
				//date是传入的时间
				let d = new Date(date);
			
				let month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
				let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
				let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
				let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
				let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();
			
				let times;
				times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
				return times
			},
			//选择日期
			handelDate(date) {
				this.queryParams.startDate = this.resolvingDate(date[0])
				this.queryParams.endDate = this.resolvingDate(date[1])
			},
			//重置按钮
			reset() {
				this.queryParams = {
					queryKey:null,
					startDate:null,
					endDate:null,
					alarmType:null,
					page: 1,
					limit: 20
				}
			},
			//确认按钮查询
			handelQuery() {
				//如果没有选择时间，默认当天的起止时间
				
				this.queryForm = false;
				this.getMsgList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		//padding: 20rpx 45rpx 20rpx 45rpx;
		background: #EEEDF2;
	}

	.empty {
		width: 400rpx;
		height: 400rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -280rpx !important;
		margin-left: -200rpx;
	}

	.msg-box {

		.msg-item {
			background: #ffffff;
			padding: 25rpx;
			margin-bottom: 4rpx;

			.msg-row {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.msg-content {
					width: 500rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}

		.msg-btn {
			background: #ffffff;
			padding: 25rpx;

			.cl {
				width: 180rpx;
				margin-right: 0
			}
		}

		.emergent {
			position: absolute;
			right: 30rpx;
			top: 0;
		}
		.query-screen {
			width: 96vw;
			padding: 0 20rpx;
			background: #ffffff;
			position: absolute;
			top: 0;
			z-index: 999;
		
			.month {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				margin: 40rpx 0;
		
				.month-item {
					padding: 10rpx 20rpx;
					background: #ECECEC;
					color: #000000;
					border-radius: 12rpx;
				}
		
				.month-select {
					padding: 10rpx 20rpx;
					border-radius: 12rpx;
					background: #289BFF;
					color: #ffffff;
				}
			}
		
			.month-btn {
				display: flex;
				justify-content: space-around;
				margin-top: 40rpx;
				margin-bottom: 40rpx;
		
				.reset {
					background: #EAF4FF;
					color: #469DED;
					border: 1px solid #A3B8CB;
				}
			}
		}
	}
</style>