You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.4 KiB
100 lines
2.4 KiB
<script setup>
|
|
import { computed, ref } 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';
|
|
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);
|
|
|
|
// 验证 获取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">
|
|
<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 :width="!menu.collapse ? '180px' : '64px'" v-if="menu.show">
|
|
<el-menu :default-active="0" class="el-menu-vertical-demo" :collapse="menu.collapse">
|
|
<el-menu-item
|
|
:index="index"
|
|
v-for="(item, index) in routeList"
|
|
:key="item.name"
|
|
class="flex items-center"
|
|
@click="$router.push(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>
|
|
|