123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <template>
- <div class="main-container">
- <el-container>
- <el-aside class="main-aside">
- <SideMenu @selectQueue="onSelectQueue" @selectMenu="onSelectMenu"></SideMenu>
- </el-aside>
- <el-main class="content-area">
- <!-- 主要内容区域 -->
- <router-view v-slot="{ Component }">
- <component :is="Component" />
- </router-view>
- </el-main>
- </el-container>
- </div>
- </template>
- <script setup lang="ts">
- import { onMounted, ref, watch, watchEffect } from "vue";
- import { useRouter, useRoute } from "vue-router";
- import { RouterView } from "vue-router";
- import SideMenu from "@/components/SideMenu.vue";
- import { useMenuStore } from "@/stores/menu.js";
- const router = useRouter();
- //校验注册信息
- const onSelectQueue = (idData: any) => {
- // console.log(router.getRoutes());
- // 跳转到队列详情页并且传递队列ID作为查询参数
- // 假设队列详情页的路由路径是 '/workspace/queue'
- // 可以使用 router.push 方法来实现路由跳转
- router.push({ name: 'queue', params: { id: idData.id } });
- };
- const onSelectMenu = (menuData: any) => {
- router.push({ name: menuData.name });
- // if (menuData.name == "graph") {
- // router.push({ name: 'graph' });
- // }
- };
- </script>
- <style scoped lang="less">
- .main-container {
- width: 100%;
- // height: calc(100vh - 150px);
- &>.el-container {
- // width: 100%;
- // height: 100%;
- padding: 0px;
- margin: 0px;
- min-width: 0px;
- }
- }
- .content-area {
- // height: 100px;
- padding: 20px;
- width: calc(100% - 300px);
- overflow: auto;
- }
- .main-aside {
- width: 300px;
- border-right: 0px solid #e4e7ed;
- padding: 1px;
- }
- .site_header {
- width: 100%;
- box-sizing: border-box;
- /* background-color: #c5c5c5; */
- background-color: #eef6ff;
- padding: 0 20px;
- height: 50px;
- /* border-bottom: 1px solid #e4e7ed; */
- }
- .knowledge-base-icon {
- cursor: pointer;
- vertical-align: middle;
- margin-left: 10px;
- }
- </style>
|