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> |