tall4-pc/src/App.vue

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import Navbar from 'components/navbar.vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { ElMessage } from 'element-plus';

const local = zhCn;
const store = useStore();
let timer = null;

// 验证 获取query中u参数 获取token
const validateQuery = async () => {
  const route = useRoute();
  const u = computed(() => route.query.u);
  if (!u) {
    // 获取url中的u参数, 没有提示缺少参数
    ElMessage.error('缺少用户信息参数');
  } else {
    // 根据userId 获取token
    await store.dispatch('user/getTokenByUserId', u);
  }
};

validateQuery();

const token = computed(() => store.getters['user/token']);
// 获取设备数据
const getDeviceData = async () => {
  if (token) {
    await store.dispatch('device/getDevices');
    timer && clearTimeout(timer);
    timer = null;
  } else {
    timer = setTimeout(() => {
      getDeviceData();
    }, 16);
  }
};

getDeviceData();
</script>

<template>
  <el-config-provider :locale="local">
    <Navbar />
    <div class="p-4">
      <router-view></router-view>
    </div>
  </el-config-provider>
</template>

<style>
.el-form--label-top .el-form-item__label {
  padding-bottom: 0 !important;
}
.el-form-item {
  margin-bottom: 10px !important;
}
</style>