diff --git a/src/components/layout/LeftMenu.vue b/src/components/layout/LeftMenu.vue
index 6a9da20c..a7e52cef 100644
--- a/src/components/layout/LeftMenu.vue
+++ b/src/components/layout/LeftMenu.vue
@@ -33,7 +33,9 @@
               <el-submenu
                   :key="secondIndex"
                   :index="`${index}-${secondIndex}`">
-                <span slot="title" class="data-column__span">{{secondMenu.name}}</span>
+                <template #title>
+                  <span class="data-column__span">{{secondMenu.name}}</span>
+                </template>
                 <el-menu-item
                     v-for="(thirdMenu, thirdIndex) in secondMenu.children"
                     :key="`${index}-${secondIndex}-${thirdIndex}`"
@@ -56,7 +58,9 @@
             :key="index + 'a'"
             :index="menu.route">
           <i :class="menu.icon"></i>
-          <span slot="title" class="data-column__span">{{menu.name}}</span>
+          <template #title>
+            <span class="data-column__span">{{menu.name}}</span>
+          </template>
         </el-menu-item>
       </template>
     </el-menu>
@@ -72,7 +76,7 @@ export default {
       logo: ''
     }
   },
-  setup () {
+  mounted () {
     const self = this
     window.addEventListener('setItemEvent', function (e) {
       if (e.key === 'cn-sys-logo' && e.value) {
diff --git a/src/mixins/common.js b/src/mixins/common.js
index 00572e6e..01392f23 100644
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -1,6 +1,5 @@
 import theme from '@/assets/css/theme.scss'
 import { hasButton } from '@/permission'
-import { nextTick } from 'vue'
 export default {
   data () {
     return {
@@ -15,7 +14,6 @@ export default {
     }
   },
   methods: {
-    $nextTick: nextTick,
     hasButton (code) {
       return hasButton(this.$store.getters.buttonList, code)
     },
diff --git a/src/router/index.js b/src/router/index.js
index 5d3ec4d7..a423a401 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,16 +11,8 @@ const routes = [
     component: () => import('@/components/layout/Home'),
     children: [
       {
-        path: '/trafficSummary',
-        component: () => import('@/views/dashboards/TrafficSummary')
-      },
-      {
-        path: '/networkAppPerformance',
-        component: () => import('@/views/dashboards/TrafficSummary')
-      },
-      {
-        path: '/dnsServiceInsights',
-        component: () => import('@/views/dashboards/TrafficSummary')
+        path: '/panel/:typeName',
+        component: () => import('@/views/charts/Panel')
       },
       {
         path: '/user',
diff --git a/src/utils/api.js b/src/utils/api.js
new file mode 100644
index 00000000..2ab91c16
--- /dev/null
+++ b/src/utils/api.js
@@ -0,0 +1,27 @@
+/**
+ * @author 陈劲松
+ * @date 2021/6/11
+ * @description 1.定义api；2.定义通用查询函数，函数名应为 获取详情getItem、获取列表getItemList。例如getUser、getUserList
+*/
+import { get } from '@/utils/http'
+
+export const panel = '/visual/panel'
+export const chart = '/visual/chart'
+
+export async function getPanelList (params) {
+  return await getData(panel, params, true)
+}
+export async function getPanel (url, params) {
+  return await getData(panel, params)
+}
+
+export async function getData (url, params, isQueryList) {
+  const request = new Promise((resolve, reject) => {
+    get(url, params).then(response => {
+      if (response.code === 200) {
+        resolve(isQueryList ? response.data.list : response.data)
+      }
+    })
+  })
+  return await request
+}
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 5ab41b56..64c446c3 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -3,9 +3,18 @@ export const defaultPageSize = 20
 // 统一定义跳转来源
 export const fromRoute = {
   trafficSummary: 'trafficSummary',
+  networkAppPerformance: 'networkAppPerformance',
+  dnsServiceInsights: 'dnsServiceInsights',
   user: 'user'
 }
 
+/* panel类别和路由之间的映射 */
+export const panelTypeAndRouteMapping = {
+  trafficSummary: 1,
+  networkAppPerformance: 2,
+  dnsServiceInsights: 3
+}
+
 export const position = {
   tableHeight: {
     normal: 'calc(100% - 48px)' // 常规高度，特例在下方定义
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
new file mode 100644
index 00000000..9fa6ef6d
--- /dev/null
+++ b/src/views/charts/Panel.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>{{panel.name}}</div>
+</template>
+
+<script>
+import { useRoute } from 'vue-router'
+import { panelTypeAndRouteMapping } from '@/utils/constants'
+import { panel as api, getPanelList } from '@/utils/api'
+
+export default {
+  name: 'Panel',
+  data () {
+    return {
+      panel: {}
+    }
+  },
+  async mounted () {
+    this.panel = (await getPanelList({ type: this.panelType }))[0]
+  },
+  setup () {
+    // 取得panel的type
+    let panelType = 1
+    const { params } = useRoute()
+    panelTypeAndRouteMapping[params.typeName] && (panelType = panelTypeAndRouteMapping[params.typeName])
+    return {
+      panelType,
+      api
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/dashboards/TrafficSummary.vue b/src/views/dashboards/TrafficSummary.vue
deleted file mode 100644
index 3fe263d0..00000000
--- a/src/views/dashboards/TrafficSummary.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>hehe</div>
-</template>
-
-<script>
-export default {
-  name: 'TrafficSummary'
-}
-</script>
-
-<style scoped>
-
-</style>