328 lines
7.3 KiB
Vue
328 lines
7.3 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<u-sticky>
|
|||
|
|
<view class="map">
|
|||
|
|
<map class="map" id="map" :longitude="locationInfo.locationLongitude"
|
|||
|
|
:latitude="locationInfo.locaitonLatitude" scale="14" :show-location="true" :markers="markers"></map>
|
|||
|
|
</view>
|
|||
|
|
</u-sticky>
|
|||
|
|
<!-- <cover-view class="controls">控件</cover-view> -->
|
|||
|
|
<view style="display: flex;justify-content: space-between;">
|
|||
|
|
<view class="title-left">
|
|||
|
|
<view class="icon"></view>
|
|||
|
|
<view class="name">设备列表</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="right-navigation">
|
|||
|
|
<u-button type="primary" text="查看路线" size="small" @click="daoGym" :plain="true"
|
|||
|
|
shape="circle"></u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="one-device" @click="deviceClick(item.id)" v-for="item,index in equipmentList" :key="index">
|
|||
|
|
<view class="left">
|
|||
|
|
<image class="left-img" :src="item.equipmentPic"></image>
|
|||
|
|
<!-- <view class="distance">{{item.distance/1000}}km</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="right-title">{{item.equipmentName}}</view>
|
|||
|
|
<!-- <view class="right-num">设备数量：</view> -->
|
|||
|
|
<view class="right-address">
|
|||
|
|
{{item.equipmentLocationName + item.equipmentPostion}}
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="right-navigation">
|
|||
|
|
<u-button type="primary" text="查看路线" size="small" @click="daoGym" :plain="true"
|
|||
|
|
shape="circle"></u-button>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
markers: [],
|
|||
|
|
locationInfo: {},
|
|||
|
|
equipmentList: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.getEquipmentLocationById(option.equipmentLocationId)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
deviceClick(id){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/devicePackage/pages/deviceDetail?id=' + id
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
async getEquipmentLocationById(id) {
|
|||
|
|
// 获取位置详情
|
|||
|
|
const locationInfo = await this.$myRequest({
|
|||
|
|
url: '/system/location/' + id,
|
|||
|
|
})
|
|||
|
|
if (locationInfo.data.code == 200) {
|
|||
|
|
this.locationInfo = locationInfo.data.data
|
|||
|
|
}
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: locationInfo.data.data.locationName
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 显示mark
|
|||
|
|
this.markers = [{
|
|||
|
|
id: 1000,
|
|||
|
|
label: {
|
|||
|
|
content: locationInfo.data.data.locationName,
|
|||
|
|
color: '#FFF',
|
|||
|
|
fontSize: '18',
|
|||
|
|
x: -35,
|
|||
|
|
bgColor: '#3c9cff',
|
|||
|
|
padding: 5,
|
|||
|
|
borderRadius: 5
|
|||
|
|
},
|
|||
|
|
latitude: locationInfo.data.data.locaitonLatitude,
|
|||
|
|
longitude: locationInfo.data.data.locationLongitude,
|
|||
|
|
iconPath: '/static/images/point.png',
|
|||
|
|
width: '30',
|
|||
|
|
height: '35'
|
|||
|
|
}]
|
|||
|
|
console.log('79',this.markers)
|
|||
|
|
// 获取设备列表 by LocationId
|
|||
|
|
const res = await this.$myRequest({
|
|||
|
|
url: '/system/equipment/list?equipmentLocationId=' + id,
|
|||
|
|
})
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
// 添加接口url 多图片取第一个作为缩略图
|
|||
|
|
try {
|
|||
|
|
for (let i = 0; i < res.data.rows.length; i++) {
|
|||
|
|
let pic = res.data.rows[i].equipmentPic.split(",");
|
|||
|
|
pic[0] = this.baseUrl + pic[0]
|
|||
|
|
res.data.rows[i].equipmentPic = pic[0]
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
//TODO handle the exception
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.equipmentList = res.data.rows
|
|||
|
|
console.log(res.data.rows);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 打开微信小程序内置导航界面
|
|||
|
|
daoGym() {
|
|||
|
|
let plugin = requirePlugin('routePlan');
|
|||
|
|
let key = 'WGVBZ-DXXEX-JHX4E-7XKVU-LDSOJ-54BKJ'; //使用在腾讯位置服务申请的key
|
|||
|
|
let referer = 'sdf'; //调用插件的app的名称
|
|||
|
|
let endPoint = JSON.stringify({ //终点
|
|||
|
|
'name': this.locationInfo.locationName,
|
|||
|
|
'latitude': this.locationInfo.locaitonLatitude,
|
|||
|
|
'longitude': this.locationInfo.locationLongitude
|
|||
|
|
});
|
|||
|
|
wx.navigateTo({
|
|||
|
|
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.content {
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.title-left {
|
|||
|
|
display: flex;
|
|||
|
|
margin: 20rpx;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 6px;
|
|||
|
|
height: 38rpx;
|
|||
|
|
line-height: 22px;
|
|||
|
|
border-radius: 50px;
|
|||
|
|
background-color: rgba(40, 124, 206, 1);
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 8rpx 10rpx 0rpx 0rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
color: rgba(16, 16, 16, 1);
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map {
|
|||
|
|
height: 600rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10rpx;
|
|||
|
|
top: 300rpx;
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map_bottom {
|
|||
|
|
height: 300rpx;
|
|||
|
|
|
|||
|
|
.map_text {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0px;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
width: 600rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
.row1 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
margin: 5px 0;
|
|||
|
|
display: block;
|
|||
|
|
font-size: 16px;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 1;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h1 {
|
|||
|
|
margin: 15px 0;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h2 {
|
|||
|
|
margin-left: 15rpx;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: grey;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
margin: 20rpx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
.one-device {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background-color: rgba(255, 255, 255, 1);
|
|||
|
|
text-align: center;
|
|||
|
|
box-shadow: 0px 2px 8px 1px rgba(228, 228, 228, 100);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
position: relative;
|
|||
|
|
width: 268rpx;
|
|||
|
|
height: 182rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
|
|||
|
|
.left-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distance {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0rpx;
|
|||
|
|
width: 258rpx;
|
|||
|
|
height: 24px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
border-radius: 0rpx 0rpx 10rpx 10rpx;
|
|||
|
|
background-color: rgba(16, 16, 16, 0.51);
|
|||
|
|
color: rgba(16, 16, 16, 1);
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
width: 61%;
|
|||
|
|
|
|||
|
|
.right-title {
|
|||
|
|
color: rgba(16, 16, 16, 1);
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-align: left;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-num {
|
|||
|
|
color: rgba(16, 16, 16, 1);
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
text-align: left;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-address {
|
|||
|
|
color: rgba(113, 113, 113, 1);
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
text-align: left;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tuijian {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 96rpx;
|
|||
|
|
height: 96rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.right-navigation {
|
|||
|
|
color: rgba(113, 113, 113, 1);
|
|||
|
|
width: 120rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
float: right;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
text-align: left;
|
|||
|
|
// margin-top: 20rpx;
|
|||
|
|
margin:auto 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|