<template>
|
<div>
|
<div style="padding-top:10px;"></div>
|
<table border="1" class="dataframe">
|
<thead>
|
<tr style="text-align: right;">
|
<th>停车场</th>
|
<th>车位总数</th>
|
<th>剩余</th>
|
<th>导航</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in tableData" :key="item.id">
|
<td style="text-align: left;">{{ item.name }}</td>
|
<td>{{ item.num }}</td>
|
<td>{{ Math.floor(Number(item.num) - Number(item.carNum)) }}</td>
|
<td style="text-align: left;"><a @click="goPark(item.name)">打开导航</a></td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
tableData: [],
|
urlPath: this.$systemconfig.basePath + '/ffzf/park/',
|
}
|
},
|
|
created() {
|
this.getTableData()
|
},
|
|
methods: {
|
getTableData() {
|
this.$byutil.postData4(this, this.urlPath + 'findPage', { size: 50 }, res => {
|
this.tableData = res.data.records
|
});
|
},
|
|
goPark(name) {
|
// console.log('name=', name);
|
this.openMap('114.23123', '36.43123', name, "baidu");
|
},
|
|
// ---------------------------------
|
openMap(longitude, latitude, name, mapApp) {
|
let url;
|
switch (mapApp) {
|
case 'baidu':
|
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${encodeURIComponent(name)}&content=${encodeURIComponent(name)}&src=webapp`;
|
break;
|
case 'gaode':
|
url = `iosamap://navi?sourceApplication=webapp&backScheme=myapp://&lat=${latitude}&lon=${longitude}&name=${encodeURIComponent(name)}&dev=0`;
|
break;
|
case 'tencent':
|
url = `qqmap://map/rgeo?location=${latitude},${longitude}&name=${encodeURIComponent(name)}&coord_type=1&policy=0`;
|
break;
|
default:
|
console.error('不支持的地图类型');
|
return;
|
}
|
|
// 使用iframe打开URL Scheme，避免直接跳转导致页面卡死
|
const iframe = document.createElement('iframe');
|
iframe.style.display = 'none';
|
iframe.src = url;
|
document.body.appendChild(iframe);
|
setTimeout(() => {
|
document.body.removeChild(iframe);
|
}, 1000);
|
|
|
// 定时器检测是否唤起成功，如果失败则跳转到网页版地图
|
let timer = setTimeout(() => {
|
window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${encodeURIComponent(name)}&src=mypage&coordinate=gaode&callnative=0`; // 默认跳转高德网页版
|
}, 2000);
|
|
window.addEventListener('blur', () => {
|
clearTimeout(timer)
|
});
|
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
|
th,
|
td {
|
border: 1px solid #ddd;
|
padding: 8px;
|
text-align: center;
|
}
|
|
th {
|
background-color: #f2f2f2;
|
}
|
|
@media (max-width: 600px) {
|
table {
|
font-size: 14px;
|
}
|
}
|
</style>
|
