From e4aa14195c028ae09eaeb6f9408957cb70a64876 Mon Sep 17 00:00:00 2001
From: 1012414140@qq.com <1012414140@qq.com>
Date: 星期五, 26 十二月 2025 17:21:24 +0800
Subject: [PATCH] feat: 智慧停车场添加loading
---
src/components/page/smartPark.vue | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 180 insertions(+), 0 deletions(-)
diff --git a/src/components/page/smartPark.vue b/src/components/page/smartPark.vue
new file mode 100644
index 0000000..2efa0a6
--- /dev/null
+++ b/src/components/page/smartPark.vue
@@ -0,0 +1,180 @@
+<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>
\ No newline at end of file
--
Gitblit v1.9.1