电子围栏列表页

src/projects/business/apis/Master/electronic_fence.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+import Qs from 'qs';
+
+//电子围栏预警信息
+export function alarmList(params) {
+	return request({
+		url: '/mobile/alarmApi/alarmList',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}

src/projects/business/views/Master/ElectronicFence/Alarm.vue

@@ -1,41 +1,151 @@
 <template>
 	<div>
-		<header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">围栏报警</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
 		<div class="mui-content fyy-cartg vongi-zctj">
 			<div class="fyy-temper-date margin10">
-					<a href="" class="mui-col-xs-12">2020-03-19 至 2020-03-19 <span class="mui-icon mui-icon-arrowdown"></span></a>
-				</div>
+				<a class="mui-col-xs-12"><span @click="selectDate('queryStartTime')">{{listForm.queryStartTime}}</span> 至 <span
+					 @click="selectDate('queryEndTime')">{{listForm.queryEndTime}}</span> <span class="mui-icon mui-icon-arrowdown"></span></a>
+			</div>
 			<ul class="mui-table-view">
-				<li class="mui-table-view-cell mui-media">
+				<li v-for="(item,index) in recordList" class="mui-table-view-cell mui-media">
 					<div class='flew-sp mui-h3'>
-						展厅围栏01段
-						<h6>02-19 23:01:03</h6>
+						{{channelName}}
+						<h6 v-text="item.createTime"></h6>
 					</div>
-					<p class="mui-ellipsis2">
-						报警信息：预警信息预警信息预警信息预警信息预警信息预警信息预警信息预警信息预警信息预警信息
-					</p>
-				</li>
-				<li class="mui-table-view-cell mui-media">
-					<div class='flew-sp mui-h3'>
-						展厅围栏01段
-						<h6>02-19 23:01:03</h6>
-					</div>
-					<p class="mui-ellipsis2">
-						报警信息：预警信息预警信息预警信息预警信息预警信息预警信息预警信息预警信息预警信息预警信息
-					</p>
+					<p class="mui-ellipsis2" v-text="item.message"></p>
 				</li>
 			</ul>
 		</div>
+
+		<NullList :remark="'暂无记录'" v-if="!recordList.length"></NullList>
+
+		<loading :visible="isLoading"></loading>
 	</div>
 </template>
 
 <script>
+	require('$project/assets/js/mui.picker.min.js');
+	import * as API_Electronic_Fence from '@/apis/Master/electronic_fence'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import isReachBottom from '$project/utils/isReachBottom'
+	import NullList from '$project/components/NullList.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import {
+		currentTimeStamp,
+		parseUnixTime
+	} from '$project/utils'
+	export default {
+		name: 'MasterElectronicFenceAlarm',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NullList
+		},
+		data() {
+			return {
+				pageTitle: '围栏报警',
+
+				isLoading: false,
+
+				listForm: {
+					queryStartTime: '',
+					queryEndTime: '',
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+				},
+				recordList: [],
+			}
+		},
+		created() {
+			this.listForm.queryStartTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d} 00:00');
+			this.listForm.queryEndTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d} 23:59');
+		},
+		methods: {
+			//选择时间
+			selectDate(field) {
+				var _this = this;
+				var picker = new mui.DtPicker({
+					"type": "datetime",
+					"beginYear": 2020,
+					"endYear": 2040,
+					"value": _this.listForm[field]
+				});
+				picker.show(function(rs) {
+					_this.listForm[field] = rs.text;
+					_this.listForm.pageIndex = 1;
+					_this.getList();
+					picker.dispose();
+				});
+			},
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_Electronic_Fence.alarmList(this.listForm).then(response => {
+					if (response) {
+						if (this.listForm.pageIndex == 1) {
+							this.recordList = response.data;
+							this.listForm.pageIndex = response.pageNumber;
+							this.listForm.totalPage = response.totalPage;
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.data
+							];
+						}
+					}
+					this.listForm.pageIndex++;
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getList();
+					} else {
+						return;
+					}
+				}
+			},
+			asynCallBack() {
+				this.getList();
+				//监控下拉加载事件
+				var _this = this;
+				window.addEventListener('scroll', _this.handleScrool);
+			},
+		},
+		mounted() {
+
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
+<style src="$project/assets/css/mui.picker.min.css"></style>
 <style>
 </style>