feat: 添加智慧停车场页面

1012414140@qq.com

2 天以前 e260e787a00665de298eaa2d4256dbb81ad50886

feat: 添加智慧停车场页面

 src/components/page/smartPark.vue

New file
@@ -0,0 +1,114 @@
<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>

 src/router/index.js

@@ -210,6 +210,11 @@
            component: resolve => require(['../components/page/MonthFeePay.vue'], resolve),
            meta: { title: '月租车缴费' }
        },
        {
            path: '/smartParking',
            component: resolve => require(['../components/page/smartPark.vue'], resolve),
            meta: { title: '峰峰智慧停车' }
        },
    ]
})