This commit is contained in:
parent
c97dde5a73
commit
a1b2f5e091
|
@ -32,6 +32,15 @@ const routes = [{
|
|||
icon: "el-icon-user",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
|
||||
},
|
||||
{
|
||||
name: "report",
|
||||
path: "/template/report",
|
||||
meta: {
|
||||
title: "分析报表",
|
||||
icon: "el-icon-data-analysis",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "report" */ '@/views/template/report'),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-aside width="210px">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree ref="group" class="menu" node-key="id" :data="group"></el-tree>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
|
||||
<el-header>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-card shadow="never">
|
||||
<el-button @click="load('1')">异步加载1</el-button>
|
||||
<el-button @click="load('2')">异步加载2</el-button>
|
||||
<el-button @click="load(null)">卸载组件</el-button>
|
||||
<sc-async-component :src="src"></sc-async-component>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scAsyncComponent from './scAsyncComponent'
|
||||
|
||||
export default {
|
||||
name: 'report',
|
||||
components: {
|
||||
scAsyncComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: null,
|
||||
groupFilterText: '',
|
||||
group: [
|
||||
{
|
||||
label: '系统运维概况',
|
||||
},
|
||||
{
|
||||
label: '访客分析',
|
||||
children: [
|
||||
{
|
||||
label: '地域分布',
|
||||
},
|
||||
{
|
||||
label: '访客人像',
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load(src){
|
||||
this.src = src
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div>1</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div>2</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<component :is="componentFile"></component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent, markRaw } from "vue"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
src: { type: String, default: "" }
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
componentFile: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
src(){
|
||||
this.render()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.render()
|
||||
},
|
||||
methods: {
|
||||
render(){
|
||||
if(!this.src){
|
||||
this.componentFile = null
|
||||
return false
|
||||
}
|
||||
this.componentFile = markRaw(
|
||||
defineAsyncComponent({
|
||||
loader: () => import(`@/views/template/report/pages/${this.src}`),
|
||||
delay: 0,
|
||||
timeout: 10000,
|
||||
loadingComponent: { template: '<div>加载中</div>' },
|
||||
errorComponent: { template: '<div>加载失败</div>' }
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Reference in New Issue