3fc7adb1e2
1.父级菜单也必须存在 name 属性，父级菜单 name 属性，在很早之前曾考虑过移除，后来发现会引起 Bug，于是没有改动。但前段时间调整动态路由时没有想起该情况，一时疏忽移除了，所幸发现问题不晚，现在及时恢复回来 2.优化实时监控示例的相关变量命名
88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<template>
|
|
<div class="container">
|
|
<Breadcrumb :items="['menu.dashboard', 'menu.dashboard.realTimeMonitor']" />
|
|
<div class="layout">
|
|
<div class="layout-left-side">
|
|
<ChatPanel />
|
|
</div>
|
|
<div class="layout-content">
|
|
<a-space :size="16" direction="vertical" fill>
|
|
<Studio />
|
|
<DataStatistic />
|
|
</a-space>
|
|
</div>
|
|
<div class="layout-right-side">
|
|
<a-space :size="16" direction="vertical" fill>
|
|
<StudioStatus />
|
|
<QuickOperation />
|
|
<StudioInformation />
|
|
</a-space>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import ChatPanel from './components/chat-panel.vue';
|
|
import Studio from './components/studio.vue';
|
|
import DataStatistic from './components/data-statistic.vue';
|
|
import StudioStatus from './components/studio-status.vue';
|
|
import QuickOperation from './components/quick-operation.vue';
|
|
import StudioInformation from './components/studio-information.vue';
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'RealTimeMonitor',
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.container {
|
|
padding: 0 20px 20px 20px;
|
|
}
|
|
|
|
.layout {
|
|
display: flex;
|
|
|
|
&-left-side {
|
|
flex-basis: 300px;
|
|
}
|
|
|
|
&-content {
|
|
flex: 1;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
&-right-side {
|
|
flex-basis: 280px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="less" scoped>
|
|
// responsive
|
|
@media (max-width: @screen-lg) {
|
|
.layout {
|
|
flex-wrap: wrap;
|
|
&-left-side {
|
|
flex: 1;
|
|
flex-basis: 100%;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
&-content {
|
|
flex: none;
|
|
flex-basis: 100%;
|
|
padding: 0;
|
|
order: -1;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
&-right-side {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|