<template>
|
<view class="container">
|
<navbar title = '设备列表'></navbar>
|
<view class="content">
|
<view class="list">
|
<block v-for="(item,index) in deviceList" :key="index">
|
<view class="item">
|
<view class="item-img">
|
<image v-if="item.url" :src="baseUrl + '/upload' + item.url" alt='' mode="aspectFit"></image>
|
<image v-else src="../../static/images/station/facilityImg.svg" alt='' mode="aspectFit"></image>
|
</view>
|
<view class="item-info">
|
<view class="info-name">{{item.facilityName}}</view>
|
<view class="info-addr" @click="openMap(item.lat,item.lon)">
|
<text class="addr-text">地址：{{item.address}}</text>
|
<view>
|
<image src="../../static/images/index/icon22.svg" alt=''></image>
|
<text>{{item.distance}}km</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from 'vue'
|
import { searchFacilityApi } from '../../api/index.js'
|
import { BASE_URL } from '../../config/baseUrl.js'
|
|
const baseUrl = ref(BASE_URL)
|
const deviceList = ref([])
|
const userLocation = ref()
|
//获取设备信息
|
async function getFacilityList(){
|
await searchFacilityApi({limit:20,page:1}).then((res1) =>{
|
if(res1.code == 200){
|
deviceList.value = []
|
res1.data.list.forEach((item) =>{
|
//计算用户与饮水设备距离
|
let preDistance = getDistances(userLocation.value.lat,userLocation.value.lon,item.latitude,item.longitude)
|
deviceList.value.push({
|
facilityName:item.facilityName,
|
address:item.address,
|
distance:preDistance.km,
|
lat:item.latitude,
|
lon:item.longitude,
|
url:item.facilityUrl
|
})
|
})
|
console.log('deviceList.value',deviceList.value)
|
}
|
})
|
}
|
// 根据经纬度计算距离,根据经纬度计算距离，参数分别为第一点的纬度，经度（用户）；第二点的纬度，经度(设备)
|
function getDistances(lat1, lon1, lat2, lon2) {
|
let EARTH_RADIUS = 6378.137;// 地球半径
|
let radLat1 = lat1 * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
|
let radLat2 = lat2 * Math.PI / 180.0;
|
let a = radLat1 - radLat2;
|
let b = lon1 * Math.PI / 180.0 - lon2 * Math.PI / 180.0;
|
let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
|
s = s * EARTH_RADIUS;
|
s = Math.round(s * 10000) / 10000;// 输出为公里
|
return { m: s * 1000, km: Number(s.toFixed(2)) }
|
}
|
//打开地图导航
|
function openMap(lat,lon){
|
console.log('lat:',parseFloat(lat),'lon:',parseFloat(lon))
|
uni.openLocation({
|
latitude: parseFloat(lat),
|
longitude: parseFloat(lon),
|
scale:18
|
})
|
}
|
onMounted(async() =>{
|
userLocation.value = JSON.parse(uni.getStorageSync('userLocation'))
|
console.log('storage',userLocation.value)
|
await getFacilityList()
|
})
|
</script>
|
|
<style lang="scss">
|
.container{
|
width: 100%;
|
height: 100vh;
|
.content{
|
width: 100%;
|
height:calc(100vh - 176rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
padding:32rpx 32rpx 100rpx;
|
box-sizing: border-box;
|
.list{
|
width:100%;
|
height:100%;
|
overflow: scroll;
|
// background-color: #f1ffef;
|
.item{
|
height:200rpx;
|
width:100%;
|
background-color: #FFFFFF;
|
border-radius: 24rpx;
|
padding:0 20rpx;
|
margin-bottom:20rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items:center;
|
.item-img{
|
image{
|
width:130rpx;
|
height: 130rpx;
|
}
|
}
|
.item-info{
|
display: flex;
|
flex-direction: column;
|
margin-left:20rpx;
|
justify-content: space-between;
|
.info-name{
|
color:#222c35;
|
}
|
.info-addr{
|
display: flex;
|
justify-content: space-between;
|
align-items:center;
|
.addr-text{
|
width:340rpx;
|
height:80rpx;
|
color: #6a6e75;
|
font-size:26rpx;
|
}
|
view{
|
display: flex;
|
justify-content: space-between;
|
align-items:center;
|
image{
|
width:50rpx;
|
height:50rpx;
|
}
|
text{
|
color: #6a6e75;
|
font-size:26rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
