466 lines
11 KiB
Vue
466 lines
11 KiB
Vue
<template>
|
||
<view class="map-box">
|
||
<map
|
||
id="maps"
|
||
:longitude="mapLocation.longitude"
|
||
:latitude="mapLocation.latitude"
|
||
show-location="true"
|
||
:markers="mapMarkers"
|
||
:polyline="mapPolyline"
|
||
:polygons="mapPolygons"
|
||
:scale="scale"
|
||
:enable-scroll="true"
|
||
@markertap="pointClick"
|
||
@tap="mapClick"
|
||
@regionchange="getRegion"
|
||
>
|
||
</map>
|
||
<view class="search-box">
|
||
<view class="search-content">
|
||
<input type="text" placeholder="搜索设备名称/ID" v-model="searchVal" @input="getDeviceList(true)">
|
||
<button @click="getDeviceList(true)">搜索</button>
|
||
</view>
|
||
<view class="search-list" v-if="isShowSearchList">
|
||
<view class="search-item" :class="activeId==item.id?'active':''" v-for="(item,index) in deviceList" :key="item.id" @click="selectDevice(item,index)">
|
||
<view class="item-img">
|
||
<image :src="item.devImage ? imgPath + item.devImage : deviceDefaultPath"></image>
|
||
</view>
|
||
<view class="item-content">
|
||
<view class="item-title">
|
||
{{item.devName}}
|
||
</view>
|
||
<view class="item-info">
|
||
{{item.devId}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty-box" v-if="deviceList.length == 0 && showEmpy">
|
||
<image :src="deviceDefaultPath"></image>
|
||
<text>暂无设备</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-box" v-if="isModel">
|
||
<view class="info-box-header">
|
||
<view class="iconfont icon-plus" @click="isModel=false"></view>
|
||
</view>
|
||
<view class="info-box-content">
|
||
<view class="info-img">
|
||
<image :src="deviceInfo.devImage ? imgPath + deviceInfo.devImage : deviceDefaultPath" mode=""></image>
|
||
</view>
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<view class="item-label">
|
||
设备名：
|
||
</view>
|
||
<view class="item-value">
|
||
{{deviceInfo.devName}}
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="item-label">
|
||
在线状态：
|
||
</view>
|
||
<view class="item-value" :style="{color:deviceInfo.devState==1?'#10CC70':deviceInfo.devState==2?'#FF2B38':'#999999'}">
|
||
{{deviceInfo.devState==1?'在线':deviceInfo.devState==2?'离线':'未激活'}}
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="item-label">
|
||
设备ID：
|
||
</view>
|
||
<view class="item-value">
|
||
{{deviceInfo.devId}}
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="item-label">
|
||
上线时间：
|
||
</view>
|
||
<view class="item-value">
|
||
{{deviceInfo.lastOnlineTime}}
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="item-label">
|
||
PK：
|
||
</view>
|
||
<view class="item-value">
|
||
{{deviceInfo.pk}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button @click="goDeviceDetail">查看设备详情</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
mapCtx:null,
|
||
mapLocation:{
|
||
longitude:119.216327,
|
||
latitude:26.028788
|
||
},
|
||
scale:12,
|
||
// includePoints:[],
|
||
mapMarkers:[],
|
||
mapPolyline:[],
|
||
mapPolygons:[],
|
||
isModel:false,
|
||
deviceInfoList:[
|
||
{
|
||
label:'设备id',
|
||
value:'00000000000001'
|
||
},
|
||
{
|
||
label:'设备名称',
|
||
value:'换电柜001'
|
||
},
|
||
{
|
||
label:'设备状态',
|
||
value:'在线'
|
||
},
|
||
{
|
||
label:'仓门数量',
|
||
value:'5'
|
||
},
|
||
{
|
||
label:'电池数量',
|
||
value:'4'
|
||
}
|
||
],
|
||
pointData:[],
|
||
isShowSearchList:false,
|
||
showEmpy:false,
|
||
searchVal:'',
|
||
imgPath:'',
|
||
activeIndex:-1,
|
||
activeId:0,
|
||
deviceList:[],
|
||
deviceInfo:{
|
||
devImage:null,
|
||
devName:null,
|
||
devState:0,
|
||
devId:null,
|
||
lastOnlineTime:null,
|
||
pk:null,
|
||
},
|
||
mapRange:{
|
||
latMax:0,
|
||
latMin:0,
|
||
lngMax:0,
|
||
lngMin:0,
|
||
},
|
||
deviceDefaultPath:'https://file.iot-fast.com/wxapp/static/image/device/device-default.png'
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
// this.deviceDefaultPath = 'https://file.iot-fast.com/wxapp/static/image/device/device-default.png';
|
||
this.getConfigPath();
|
||
if (!this.mapCtx) {
|
||
this.mapCtx = uni.createMapContext("maps"); // map 组件绑定，操作对应的 map 组件
|
||
}
|
||
// this.getDeviceList(false);
|
||
this.getRegion();
|
||
// this.getDeviceList(true);
|
||
},
|
||
methods:{
|
||
selectDevice(data,index){
|
||
this.activeIndex = index;
|
||
this.activeId = data.id;
|
||
this.deviceInfo = data;
|
||
this.mapLocation.longitude = data.lng;
|
||
this.mapLocation.latitude = data.lat;
|
||
this.isShowSearchList = false;
|
||
this.isModel = true;
|
||
},
|
||
getConfigPath(){
|
||
let configList = uni.getStorageSync('configList');
|
||
let configIndex = uni.getStorageSync('configIndex');
|
||
this.imgPath = configList[configIndex].protocol + configList[configIndex].address;
|
||
},
|
||
getDeviceList(flag){
|
||
let params = {
|
||
"page": 1,
|
||
"pageSize": 99999,
|
||
"Wheres": {
|
||
"wheres": [
|
||
{"field": "locateState","operator": "=","value": 1},
|
||
{"field": "lng","operator": ">=","value": this.mapRange.lngMin},
|
||
{"field": "lng","operator": "<=","value": this.mapRange.lngMax},
|
||
{"field": "lat","operator": ">=","value": this.mapRange.latMin},
|
||
{"field": "lat","operator": "<=","value": this.mapRange.latMax},
|
||
// {"field": "prodType","operator": "=","value": this.deviceType},
|
||
// {"field":"devState","operator":"=","value":this.tabsList[this.tabIndex].value},
|
||
{"fields": ["devId","devName"],"operator": "keyword","value": this.searchVal}
|
||
]
|
||
},
|
||
}
|
||
this.$api.iotsApi.getDeviceList(params).then(res => {
|
||
if(res.code === 0){
|
||
this.deviceList = res.data.list ? res.data.list : [];
|
||
if(res.data.list){
|
||
this.getPointData()
|
||
}
|
||
if(flag){
|
||
this.isShowSearchList = true;
|
||
this.showEmpy = res.data.list ? false : true;
|
||
}
|
||
}else{
|
||
this.deviceList = [];
|
||
if(flag){
|
||
this.isShowSearchList = true;
|
||
this.showEmpy = true;
|
||
}
|
||
}
|
||
}, error => {
|
||
})
|
||
},
|
||
getRegion() {
|
||
this.mapCtx.getRegion({
|
||
success: res => {
|
||
let obj = {
|
||
"latMax": res.northeast.latitude.toString(),
|
||
"latMin": res.southwest.latitude.toString(),
|
||
"lngMax": res.northeast.longitude.toString(),
|
||
"lngMin": res.southwest.longitude.toString(),
|
||
}
|
||
this.mapRange = obj;
|
||
this.getDeviceList(false);
|
||
},
|
||
fail: (data, code) => {
|
||
console.log('fail' + JSON.stringify(data));
|
||
}
|
||
})
|
||
},
|
||
getPointData(){
|
||
let includePoints = [];
|
||
let points = this.deviceList.map((item,index)=>{
|
||
includePoints.push({
|
||
longitude:item.lng,
|
||
latitude:item.lat,
|
||
})
|
||
// this.pointData.push({
|
||
// index:index,
|
||
// id:item.id,
|
||
// infoData:item.infoData,
|
||
// longitude:item.lng,
|
||
// latitude:item.lat,
|
||
// })
|
||
let x = - item.devName.length*6;
|
||
return {
|
||
// id:item.id,
|
||
id:index,
|
||
longitude:item.lng,
|
||
latitude:item.lat,
|
||
title:item.devName,
|
||
label:{
|
||
content:item.devName,
|
||
textAlign:'center',
|
||
color:'#2e66e7',
|
||
anchorX:x,
|
||
textAlign:'left'
|
||
},
|
||
// iconPath: '/static/image/device/location-blue.png',
|
||
iconPath: item.devImage ? this.imgPath + item.devImage : this.deviceDefaultPath,
|
||
width:24,
|
||
height:24,
|
||
}
|
||
});
|
||
this.$nextTick(()=>{
|
||
this.$set(this,'mapMarkers',points);
|
||
this.$forceUpdate()//手动刷新页面数据
|
||
})
|
||
// this.mapCtx.includePoints({
|
||
// padding: [20,20,20,20],
|
||
// points: includePoints
|
||
// })
|
||
},
|
||
pointClick(e){
|
||
console.log("当前点击点",e)
|
||
this.$nextTick(()=>{
|
||
this.activeIndex = e.markerId;
|
||
this.deviceInfo = this.deviceList[e.markerId];
|
||
this.activeId = this.deviceList[e.markerId].id;
|
||
this.mapLocation.longitude = this.deviceList[e.markerId].lng;
|
||
this.mapLocation.latitude = this.deviceList[e.markerId].lat;
|
||
this.isModel = true;
|
||
})
|
||
},
|
||
mapClick(e){
|
||
console.log("当前点击地图",e)
|
||
this.isModel = false;
|
||
},
|
||
goDeviceDetail(){
|
||
uni.navigateTo({
|
||
url:'/pages/iots/device/device-detail?id=' + this.deviceInfo.id + '&devName=' + this.deviceInfo.devName
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.map-box,#maps{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.search-box{
|
||
position: fixed;
|
||
top: 20rpx;
|
||
left: 20rpx;
|
||
right: 20rpx;
|
||
z-index: 999;
|
||
// background: #fff;
|
||
// border-radius: 10rpx;
|
||
// padding: 20rpx;
|
||
/* box-shadow: 0px 0px 10px 0px rgba(192,192,192,0.5); */
|
||
// max-height: 750rpx;
|
||
// overflow-y: auto;
|
||
.search-content{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
input{
|
||
flex: 1;
|
||
// text-indent: 20rpx;
|
||
padding-left: 20rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
>button{
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
margin: 0;
|
||
background: #0960ff;
|
||
color: #fff;
|
||
border: 1px solid #0960ff;
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
}
|
||
.search-list{
|
||
margin-top: 10rpx;
|
||
max-height: 450rpx;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
overflow-y: auto;
|
||
.search-item{
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10rpx 20rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
&:last-child{
|
||
border-bottom: none;
|
||
}
|
||
&.active{
|
||
background: #e2edff;
|
||
}
|
||
.item-img{
|
||
width: 80rpx;
|
||
height:80rpx;
|
||
margin-right: 20rpx;
|
||
image{
|
||
width: 100%;
|
||
height:100%;
|
||
}
|
||
}
|
||
.item-content{
|
||
.item-title{
|
||
font-weight: bold;
|
||
}
|
||
.item-info{
|
||
margin-top: 5rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
.empty-box{
|
||
padding: 50rpx 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
image{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
text{
|
||
margin-top: 10rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-box{
|
||
position: fixed;
|
||
bottom: 20rpx;
|
||
left: 20rpx;
|
||
right: 20rpx;
|
||
z-index: 999;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0px 0px 10px 0px rgba(192,192,192,0.5);
|
||
max-height: 750rpx;
|
||
overflow-y: auto;
|
||
.info-box-header{
|
||
position: relative;
|
||
height: 30rpx;
|
||
.iconfont{
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -10rpx;
|
||
font-size: 40rpx;
|
||
transform: rotate(45deg);
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.info-box-content{
|
||
display: flex;
|
||
align-items: center;
|
||
.info-img{
|
||
width: 170rpx;
|
||
height: 170rpx;
|
||
margin-right: 20rpx;
|
||
image{
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
}
|
||
.info-list{
|
||
flex: 1;
|
||
.info-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
.item-value{
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
button{
|
||
margin-top: 10rpx;
|
||
background: #0960ff;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
border-radius: 8rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|