tall4-pc/src/App.vue

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import Navbar from 'components/navbar.vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { ElMessage } from 'element-plus';
import { routes } from '@/routers/index.js';

const local = zhCn;
const store = useStore();
let timer = null;
const routeList = ref(routes);
const menu = computed(() => store.state.menu);
const activeMenuIndex = ref(0);

// 验证 获取query中u参数 获取token
const route = useRoute();
const router = useRouter();

useRouter()
  .isReady()
  .then(async () => {
    activeMenuIndex.value = routes.findIndex(item => item.name === route.name);
    const u = computed(() => route.query.u);
    if (!u.value) {
      // 获取url中的u参数, 没有提示缺少参数
      ElMessage.error('缺少用户信息参数');
    } else {
      // 根据userId 获取token
      await store.dispatch('user/getTokenByUserId', u.value);
    }
  });

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

getDeviceData();

/**
 * 打开页面
 * @param {string} path 页面路径
 */
function openPage(path) {
  const { query } = route;
  router.push({
    path,
    query,
  });
}
</script>

<template>
  <el-config-provider :locale="local">
    <el-container>
      <el-header style="padding: 0">
        <Navbar />
      </el-header>
      <el-container class="overflow-hidden">
        <!-- <el-aside width="180px" v-if="menu.show"> -->
        <el-aside v-if="menu.show" :width="!menu.collapse ? '200px' : '64px'">
          <el-menu :collapse="menu.collapse" :default-active="activeMenuIndex" class="el-menu-vertical-demo">
            <el-menu-item
              v-for="(item, index) in routeList"
              :key="item.name"
              :index="index"
              class="flex items-center"
              @click="openPage(item.path)"
            >
              <i :class="item.meta.icon"></i>
              <template #title>{{ item.meta.title }}</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="padding: 0">
          <div class="p-4">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-config-provider>
</template>

<style>
html,
body,
#app,
#app > section {
  height: 100%;
}

.el-menu {
  min-height: 100%;
}

.el-form--label-top .el-form-item__label {
  padding-bottom: 0 !important;
}

.el-form-item {
  margin-bottom: 10px !important;
}
</style>