|
|
|
|
@ -0,0 +1,287 @@
|
|
|
|
|
<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>
|
