patrol-gamble-mobile/pages/location/index.vue

<template>
	<view class="boxContent">

		<view class="box-header">
			<view class="search-wrap">
				<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
				<u-search v-model="serachEntity.equipment_number" placeholder="请输入设备编号" @custom="tosearch()"
					@search="tosearch()" height="56" :action-style="{color: '#fff'}">
				</u-search>
			</view>

		</view>


		<view :class="mask?'list listfixed':'list'" style="padding-top: 100rpx;">
			<block v-for="(item, index) in dataList">
				<u-card :title="item.equipment_number" padding="20" margin="20rpx" :border="true" :thumb="thumb"
					thumb-width="36" sub-title="点击查看位置">
					<view class="" slot="body" @click="todetail(item)">
						<u-row gutter="16">
							<u-col span="4">
								<view class="demo-layout bg-purple">纬度：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{item.latitude}}</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">经度：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{item.longitude}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">设备速度：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{item.speed/10}}km/h
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">设备告警：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{toGetWarn(item.alarm_message)}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">设备状态：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{toGetStatus(item.status)}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">上报时间：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{item.created_at}}</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">更新时间：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{item.updated_at}}</view>
							</u-col>
						</u-row>

					</view>
				</u-card>

			</block>
			<u-loadmore class="loadmore" :status="loadStatus" :load-text="loadText" />
			<u-empty text="暂无数据" margin-top="200" v-if="dataList.length==0" mode="list"></u-empty>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#0385e5'
				},
				serachEntity: {
					equipment_number: ""
				},
				mask: false,
				loadStatus: "loadmore",
				loadText: {
					loadmore: "加载更多",
					nomore: "已经到底了"
				},
				dataList: [],
				thumb: "/static/img/location.png",
				currentPage: 0,
				lastPage: 0,

				customStyle: {
					marginLeft: '20px',
					fontSize: '30rpx'
				},
				value1Arr: [],
				keyword: "",
				title: "",
				stat: [],
				statusId: "",
				proStatus: "",
				typeId: "",

			}
		},
		onReachBottom: function(e) {
			if (this.currentPage >= this.lastPage) {
				this.loadStatus = "nomore"
				return;
			}
			this.loadPage(this.currentPage + 1);
		},
		onPullDownRefresh: function(e) {
			this.loadPage(1);
		},
		onShow: function() {
			var that = this;
		},
		onLoad(options) {
			//this.loadPage(1);
		},
		methods: {
			todetail(item) {
				console.log(item)
				const latitude = parseFloat(item.latitude);
				const longitude = parseFloat(item.longitude);
				let s_latlog = this.gcoord.transformFromWGSToGCJ(latitude, longitude);
				uni.openLocation({
					latitude: s_latlog.latitude,
					longitude: s_latlog.longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			toGetDirection(num) {
				let name = "未知";
				if (num >= 0 && num < 90) {
					name = num == 0 ? "正北" : "东北"
				} else if (num >= 90 && num < 180) {
					name = num == 90 ? "正东" : "东南"
				} else if (num >= 180 && num < 270) {
					name = num == 180 ? "正南" : "西南"
				} else if (num >= 270 && num < 360) {
					name = num == 270 ? "正北" : "西北"
				}
				return name;
			},
			toGetWarn(str) {
				if (str.indexOf(1) > -1) {
					return "有";
				} else {
					return "无";
				}
			},
			toGetStatus(str) {
				console.log("Number(str)", Number(str))
				if (Number(str) != 11) {
					return "异常信号";
				} else {
					return "正常信号";
				}
			},
			tosearch() {
				this.$u.throttle(this.loadPage, 5000)
			},
			loadPage: function() {
				uni.hideKeyboard()
				var that = this;
				this.util.request({
					bindThis: that,
					noauth: true,
					api: '/api/mobile/gps/actual-time',
					customLoading: false,
					data: {
						token: "57|nwepFVRKxEh87YpnjVCHTZgv3dTTHA0JjiCpSqir",
						...that.serachEntity
					},
					utilSuccess: function(res) {
						that.dataList = res;
					},
					utilFail: function(res) {
						uni.stopPullDownRefresh();



						this.util.alert(res);
					}
				});
			}
		}

	}
</script>
<style>
	.boxContent {
		background: #f3f4f6;
		min-height: 100vh;
	}

	.footer {
		display: flex;
		justify-content: flex-end;
	}

	.box-header {

		position: fixed;
		/* top: 0; */
		width: 100%;
		z-index: 99;
	}


	.u-row {
		margin: 10rpx 0;
		font-size: 28rpx;
	}

	.u-card {
		z-index: 1;
	}
</style>


<style scoped lang="scss">
	.search-wrap {
		background: #0385e5;
		padding: 20rpx;
	}

	.overflowmask {
		overflow: hidden;
	}

	.loadmore {
		padding: 24rpx !important
	}

	.listfixed {
		position: fixed;
		width: 100%;
	}

	.u-config-wrap {
		padding: 30rpx;
	}

	.bg-purple {
		font-weight: bold;
	}

	.slot-content {
		background-color: #FFFFFF;
		padding: 24rpx;

		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #FFFFFF;
				background-color: $u-type-primary;
			}
		}
	}
</style>