<template>
|
<div>
|
<div style="padding-top:10px;"></div>
|
|
<div class="loading-tips" v-if="loading">
|
<div class="tips-text">请稍后...</div>
|
<!-- 可选：加个加载动画圆点 -->
|
<div class="loading-dots">
|
<span></span>
|
<span></span>
|
<span></span>
|
</div>
|
</div>
|
|
<table border="1" class="dataframe" v-else>
|
<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>
|
import 'element-ui/lib/theme-chalk/index.css';
|
export default {
|
data() {
|
return {
|
loading: true,
|
tableData: [],
|
urlPath: this.$systemconfig.basePath + '/ffzf/park/',
|
}
|
},
|
|
created() {
|
this.getTableData()
|
},
|
|
methods: {
|
getTableData() {
|
this.loading = true
|
this.$byutil.postData4(this, this.urlPath + 'findPage', { size: 50 }, res => {
|
this.tableData = res.data.records
|
this.loading = false
|
});
|
},
|
|
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 lang="scss">
|
//骨架屏样式
|
.loading-tips {
|
width: 100%;
|
height: 80vh; // 占满屏幕主要区域
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.tips-text {
|
font-size: 4.27vw; // 适配移动端字号
|
color: #666;
|
margin-bottom: 3vw;
|
}
|
|
// 加载圆点动画（可选，增加动效）
|
.loading-dots {
|
display: flex;
|
gap: 1.33vw;
|
|
span {
|
width: 1.87vw;
|
height: 1.87vw;
|
border-radius: 50%;
|
background: #666;
|
animation: dot-flash 1.5s infinite ease-in-out;
|
|
&:nth-child(2) {
|
animation-delay: 0.3s;
|
}
|
|
&:nth-child(3) {
|
animation-delay: 0.6s;
|
}
|
}
|
}
|
}
|
|
// 加载圆点动画
|
@keyframes dot-flash {
|
|
0%,
|
100% {
|
opacity: 0.3;
|
}
|
|
50% {
|
opacity: 1;
|
}
|
}
|
|
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>
|
