IOT/SourceCode/ui/fbs-ui_app2/pages_company/components/alarm.vue

<template>
	<view class="container">
		<u--form labelPosition="left">
			<u-form-item
				label="查询日期"
				labelWidth="80"
				borderBottom
				@click="
					showCalendar = true;
					hideKeyboard();
				"
			>
				<u--input v-model="alarmDate" disabled disabledColor="#ffffff" placeholder="请选择查询日期" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item
				label="告警类型"
				borderBottom
				labelWidth="80"
				@click="
					showAlarmType = true;
					hideKeyboard();
				"
			>
				<u--input v-model="alarmTypeName" disabled disabledColor="#ffffff" placeholder="请选择告警类型" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-calendar :show="showCalendar" :defaultDate="alarmDateArr" :minDate="calendarMinDate" :allowSameDay="true" :closeOnClickOverlay="true" :maxDate="calendarMaxDate" mode="range" @confirm="calendarConfirm" @close="calendarClose" startText="开始时间" endText="结束时间" confirmDisabledText="请选择查询日期范围"></u-calendar>
			<u-action-sheet :show="showAlarmType" :actions="alarmTypeActions" title="请选择告警类型" @close="showAlarmType = false" @select="alarmTypeSelect"></u-action-sheet>
		</u--form>

		<qiun-title-bar :title="`报警信息概览 (${alarmTotal})`" />
		<scroll-view :scroll-y="alarmTotal > 0" @scroll="scroll" :scroll-top="scrollTop" style="height: 620px;">
			<view class="alarm-list_none" v-if="alarmTotal == 0">
				<text>没有报警信息</text>
				<image src="/static/image/no-data.png"></image>
			</view>
			<view class="alarm-list" v-if="alarmTotal > 0">
				<view class="alarm-list_item" v-for="(item, index) in alarmList" :key="index">
					<view class="left">
						<text class="name">{{ item.device_name }}</text>
						<text class="address">{{ item.warn_type_name }}</text>
					</view>
					<view class="right">
						<text v-if="item.warn_value">
							超标值:
							<text class="num">{{ item.warn_value }}</text>
						</text>
						<text class="">{{ item.abnormal_state_name }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import moment from "moment";
import api from "@/common/api.js";
import { log } from "@/utils/base.js";
export default {
	data() {
		return {
			showCalendar: false,
			showAlarmType: false,
			alarmTypeActions: [],
			alarmDateArr: [moment().add(-1, "d"), moment()],
			alarmList: [],
			alarmTotal: 0,
			needQuery: true,
			isQuerying: false,
			scrollTop: 0,
			oldScrollTop: 0,
			calendarMinDate: moment()
				.add(-10, "d")
				.format("YYYY-MM-DD"),
			calendarMaxDate: moment()
				.add(1, "d")
				.format("YYYY-MM-DD"),
			search: {
				pageIndex: 1,
				pageSize: 10,
				params: {
					id: "",
					begin: "",
					end: "",
					warn_type: "",
				},
			},
		};
	},
	computed: {
		alarmDate: {
			get() {
				return `${this.alarmDateArr[0].format("YYYY-MM-DD")}/${this.alarmDateArr[1].format("YYYY-MM-DD")}`;
			},
			set() {},
		},
		alarmTypeName: {
			get() {
				if (this.alarmTypeActions && this.alarmTypeActions.length) {
					var active = this.alarmTypeActions.find(v => v.code == this.search.params.warn_type);
					if (active) {
						return active.name;
					}
				}
				return "";
			},
			set() {},
		},
	},
	props: {
		companyId: {
			type: String,
			required: true,
		},
	},
	onLoad() {},
	mounted() {
		this.getAlarmTypes();
		this.query();
	},
	methods: {
		hideKeyboard() {
			uni.hideKeyboard();
		},
		calendarConfirm(e) {
			this.showCalendar = false;
			this.alarmDateArr = [moment(e[0]), moment(e[e.length - 1])];
			this.search.pageIndex = 1;
			this.query();
		},
		calendarClose() {
			this.showCalendar = false;
		},
		getAlarmTypes() {
			api.getWarnTypetList().then(({ data }) => {
				this.alarmTypeActions = data.list;
			});
		},
		alarmTypeSelect(e) {
			this.showAlarmType = false;
			this.search.params.warn_type = e.code;
			this.search.pageIndex = 1;
			this.query();
		},
		query(nextPage) {
			if (this.needQuery || !nextPage) {
				if (!nextPage) {
					this.alarmList = [];
					this.goTop();
				}
				this.search.params.id = `10_${this.companyId}`;
				this.search.params.begin = this.alarmDateArr[0].format("YYYYMMDD");
				this.search.params.end = this.alarmDateArr[1].format("YYYYMMDD");
				var search = JSON.parse(JSON.stringify(this.search));
				if (!search.params.warn_type) {
					delete search.params.warn_type;
				}
				api.getWarnTable(search).then(({ rows, total }) => {
					this.alarmTotal = total;
					if ((this.search.pageIndex - 1) * this.search.pageSize < total) {
						this.alarmList.push(...rows);
						this.isQuerying = false;
					} else {
						this.needQuery = false;
					}
				});
			}
		},
		scroll(e) {
			this.oldScrollTop = e.detail.scrollTop;
			console.log(e.detail.scrollHeight - e.detail.scrollTop, e.detail.scrollHeight, e.detail.scrollTop);
			if (e.detail.scrollHeight - e.detail.scrollTop <= 900 && !this.isQuerying) {
				log("到达底部");
				this.isQuerying = true;
				this.search.pageIndex++;
				this.query(true);
			}
		},
		goTop() {
			this.scrollTop = this.oldScrollTop;
			this.$nextTick(() => {
				this.scrollTop = 0;
			});
		},
	},
};
</script>

<style lang="scss">
.container {
	padding: 0 10px;
	font-size: 14px;
	line-height: 24px;
}
.alarm-list {
	border: 1px solid $uni-color-error;
	border-radius: 5px;
	margin: 5px 10px;
	&_none {
		margin-top: 10%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		color: $uni-color-error;
	}
	&_item {
		&:not(:last-child) {
			border-bottom: 1px dashed $uni-color-error;
		}
		display: flex;
		padding: 10px 15px;
		justify-content: space-between;
		align-items: center;
		color: lighten($uni-color-error, 15%);
		.left {
			display: flex;
			flex-direction: column;
			.name {
				font-weight: 600;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			text-align: right;
			.num {
				font-weight: 600;
				margin-left: 10px;
			}
		}
	}
}
</style>