diff --git a/frontend/package.json b/frontend/package.json
index 1166c327d3..635ea4f43a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,9 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.18.1",
+    "echarts": "^5.0.2",
     "element-ui": "2.13.0",
     "fit2cloud-ui": "^0.1.12",
     "js-cookie": "2.2.0",
@@ -30,9 +32,8 @@
     "vue": "2.6.10",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0",
-    "@riophae/vue-treeselect": "0.4.0",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^2.24.3",
+    "vuex": "3.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
diff --git a/frontend/src/api/chart/chart.js b/frontend/src/api/chart/chart.js
new file mode 100644
index 0000000000..fefee5bd38
--- /dev/null
+++ b/frontend/src/api/chart/chart.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function post(url, data) {
+  return request({
+    url: url,
+    method: 'post',
+    data
+  })
+}
diff --git a/frontend/src/api/dataset/dataset.js b/frontend/src/api/dataset/dataset.js
index 8f4df02745..a9a68dbe9d 100644
--- a/frontend/src/api/dataset/dataset.js
+++ b/frontend/src/api/dataset/dataset.js
@@ -52,4 +52,50 @@ export function groupTree(data) {
     data
   })
 }
+
+export function listDatasource() {
+  return request({
+    url: '/datasource/list',
+    method: 'get'
+  })
+}
+
+export function getTable(id) {
+  return request({
+    url: '/dataset/table/get/' + id,
+    method: 'post'
+  })
+}
+
+export function getPreviewData(data) {
+  return request({
+    url: '/dataset/table/getPreviewData',
+    method: 'post',
+    data
+  })
+}
+
+export function fieldList(id) {
+  return request({
+    url: '/dataset/field/list/' + id,
+    method: 'post'
+  })
+}
+
+export function batchEdit(data) {
+  return request({
+    url: '/dataset/field/batchEdit',
+    method: 'post',
+    data
+  })
+}
+
+export function post(url, data) {
+  return request({
+    url: url,
+    method: 'post',
+    data
+  })
+}
+
 export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree }
diff --git a/frontend/src/layout/components/AppMain.vue b/frontend/src/layout/components/AppMain.vue
index 767353fa8d..72c3aff242 100644
--- a/frontend/src/layout/components/AppMain.vue
+++ b/frontend/src/layout/components/AppMain.vue
@@ -1,13 +1,13 @@
 <template>
-  <section class="app-main">
+<section class="app-main">
     <transition name="fade-transform" mode="out-in">
-      <el-main class="ms-main-container">
-        <keep-alive>
-          <router-view :key="key" />
-        </keep-alive>
-      </el-main>
+        <el-main class="ms-main-container">
+            <keep-alive>
+                <router-view :key="key"/>
+            </keep-alive>
+        </el-main>
     </transition>
-  </section>
+</section>
 </template>
 
 <script>
@@ -22,25 +22,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/styles/variables.scss";
+    @import "~@/styles/variables.scss";
 
-.app-main {
-  /*107 = navbar 50 + topbar 57  */
-  min-height: calc(100vh - 107px);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
-.fixed-header+.app-main {
-  padding-top: 50px;
-}
+    .app-main {
+        /*107 = navbar 50 + topbar 57  */
+        min-height: calc(100vh - 107px);
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .fixed-header + .app-main {
+        padding-top: 50px;
+    }
+
+    .ms-main-container {
+        padding: 0;
+    }
 </style>
 
 <style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
-  }
-}
+    // fix css style bug in open el-dialog
+    .el-popup-parent--hidden {
+        .fixed-header {
+            padding-right: 15px;
+        }
+    }
 </style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index b62e785cb4..12ffe62f75 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -21,6 +21,10 @@ import message from '@/metersphere/common/js/message'
 import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive'
 Vue.prototype.$api = api
 
+import echarts from 'echarts'
+
+Vue.prototype.$echarts = echarts
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 805a771e03..ae20c164df 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -6,6 +6,7 @@ import settings from './modules/settings'
 import user from './modules/user'
 import permission from './modules/permission'
 import dataset from './modules/dataset'
+import chart from './modules/chart'
 
 Vue.use(Vuex)
 
@@ -15,7 +16,8 @@ const store = new Vuex.Store({
     settings,
     user,
     permission,
-    dataset
+    dataset,
+    chart
   },
   getters
 })
diff --git a/frontend/src/store/modules/chart.js b/frontend/src/store/modules/chart.js
new file mode 100644
index 0000000000..671deba0f4
--- /dev/null
+++ b/frontend/src/store/modules/chart.js
@@ -0,0 +1,62 @@
+const getDefaultState = () => {
+  return {
+    sceneData: {},
+    table: {},
+    sceneId: {},
+    viewId: {},
+    tableId: {},
+    chartSceneData: {}
+  }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+  setSceneData: (state, sceneData) => {
+    state.sceneData = sceneData
+  },
+  setTable: (state, table) => {
+    state.table = table
+  },
+  setSceneId: (state, sceneId) => {
+    state.sceneId = sceneId
+  },
+  setViewId: (state, viewId) => {
+    state.viewId = viewId
+  },
+  setTableId: (state, tableId) => {
+    state.tableId = tableId
+  },
+  setChartSceneData: (state, chartSceneData) => {
+    state.chartSceneData = chartSceneData
+  }
+}
+
+const actions = {
+  setSceneData({ commit }, sceneData) {
+    commit('setSceneData', sceneData)
+  },
+  setTable({ commit }, table) {
+    commit('setTable', table)
+  },
+  setSceneId: ({ commit }, sceneId) => {
+    commit('setSceneId', sceneId)
+  },
+  setViewId: ({ commit }, viewId) => {
+    commit('setViewId', viewId)
+  },
+  setTableId: ({ commit }, tableId) => {
+    commit('setTableId', tableId)
+  },
+  setChartSceneData: ({ commit }, chartSceneData) => {
+    commit('setChartSceneData', chartSceneData)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+
diff --git a/frontend/src/views/chart/data/AddDB.vue b/frontend/src/views/chart/data/AddDB.vue
deleted file mode 100644
index 6792f55343..0000000000
--- a/frontend/src/views/chart/data/AddDB.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <el-col>
-    <el-row>
-      <el-row style="height: 26px;">
-        <span style="line-height: 26px;">
-          {{ $t('dataset.add_db_table') }}
-        </span>
-        <el-row style="float: right">
-          <el-button size="mini" @click="cancel">
-            {{ $t('dataset.cancel') }}
-          </el-button>
-          <el-button size="mini" type="primary" :disabled="checkTableList.length < 1" @click="save">
-            {{ $t('dataset.confirm') }}
-          </el-button>
-        </el-row>
-      </el-row>
-      <el-divider />
-      <el-row>
-        <el-form :inline="true">
-          <el-form-item class="form-item">
-            <el-select v-model="dataSource" filterable :placeholder="$t('dataset.pls_slc_data_source')" size="mini">
-              <el-option
-                v-for="item in options"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item class="form-item" style="float: right;">
-            <el-input
-              v-model="searchTable"
-              size="mini"
-              :placeholder="$t('dataset.search')"
-              prefix-icon="el-icon-search"
-              clearable
-            />
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <el-row style="overflow: auto;height: 600px;">
-        <el-checkbox-group v-model="checkTableList" size="small">
-          <el-checkbox
-            v-for="t in tables"
-            :key="t"
-            border
-            :label="t"
-          />
-        </el-checkbox-group>
-      </el-row>
-    </el-row>
-  </el-col>
-</template>
-
-<script>
-export default {
-  name: 'AddDB',
-  data() {
-    return {
-      searchTable: '',
-      options: [],
-      dataSource: '',
-      tables: [],
-      checkTableList: [],
-      scene: null
-    }
-  },
-  watch: {
-    dataSource(val) {
-      if (val) {
-        this.$post('/datasource/getTables', { id: val }, response => {
-          this.tables = response.data
-        }
-        )
-      }
-    }
-  },
-  mounted() {
-    this.initDataSource()
-    this.scene = this.$route.params.scene
-  },
-  activated() {
-    this.initDataSource()
-    this.scene = this.$route.params.scene
-  },
-  methods: {
-    initDataSource() {
-      this.$get('/datasource/list', response => {
-        this.options = response.data
-      })
-    },
-
-    save() {
-      // console.log(this.checkTableList);
-      // console.log(this.scene);
-      const sceneId = this.scene.id
-      const dataSourceId = this.dataSource
-      const tables = []
-      this.checkTableList.forEach(function(name) {
-        tables.push({
-          name: name,
-          sceneId: sceneId,
-          dataSourceId: dataSourceId,
-          type: 'db'
-        })
-      })
-      this.$post('/dataset/table/batchAdd', tables, response => {
-        this.$store.commit('setSceneData', new Date().getTime())
-        this.cancel()
-      })
-    },
-
-    cancel() {
-      this.dataReset()
-      this.$router.push('/dataset/home')
-    },
-
-    dataReset() {
-      this.searchTable = ''
-      this.options = []
-      this.dataSource = ''
-      this.tables = []
-      this.checkTableList = []
-    }
-  }
-
-}
-</script>
-
-<style scoped>
-  .el-divider--horizontal {
-    margin: 12px 0;
-  }
-
-  .form-item {
-    margin-bottom: 6px;
-  }
-
-  .el-checkbox {
-    margin-bottom: 14px;
-    margin-left: 0;
-    margin-right: 14px;
-  }
-
-  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
-    margin-left: 0;
-  }
-</style>
diff --git a/frontend/src/views/chart/data/TabDataPreview.vue b/frontend/src/views/chart/data/TabDataPreview.vue
deleted file mode 100644
index c54dd647e5..0000000000
--- a/frontend/src/views/chart/data/TabDataPreview.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <el-col>
-    <el-table
-      size="mini"
-      :data="data"
-      border
-      style="width: 100%;"
-    >
-      <el-table-column
-        v-for="field in fields"
-        :key="field.fieldName"
-        width="180px"
-        :prop="field.fieldName"
-        :label="field.fieldName"
-      />
-    </el-table>
-  </el-col>
-</template>
-
-<script>
-export default {
-  name: 'TabDataPreview',
-  props: {
-    table: Object,
-    fields: Array,
-    data: Array
-  },
-  data() {
-    return {
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
-      }]
-    }
-  },
-  computed: {},
-  watch: {},
-  created() {
-  },
-  mounted() {
-  },
-  activated() {
-  },
-  methods: {}
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/views/chart/data/ViewTable.vue b/frontend/src/views/chart/data/ViewTable.vue
deleted file mode 100644
index 31389e968b..0000000000
--- a/frontend/src/views/chart/data/ViewTable.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <el-col>
-    <el-row>
-      <el-row style="height: 26px;">
-        <span v-show="false">{{ tableId }}</span>
-        <span style="line-height: 26px;">
-          {{ table.name }}
-        </span>
-        <el-row style="float: right">
-          <el-button size="mini">
-            {{ $t('dataset.edit') }}
-          </el-button>
-          <el-button size="mini">
-            {{ $t('dataset.create_view') }}
-          </el-button>
-        </el-row>
-      </el-row>
-      <el-divider />
-
-      <el-tabs v-model="tabActive">
-        <el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
-          <tab-data-preview :table="table" :fields="fields" :data="data" />
-        </el-tab-pane>
-        <el-tab-pane label="tab2" name="tab2">
-          tab2
-        </el-tab-pane>
-        <el-tab-pane label="tab3" name="tab3">
-          tab3
-        </el-tab-pane>
-        <el-tab-pane label="tab4" name="tab4">
-          tab4
-        </el-tab-pane>
-      </el-tabs>
-    </el-row>
-  </el-col>
-</template>
-
-<script>
-import TabDataPreview from './TabDataPreview'
-
-export default {
-  name: 'ViewTable',
-  components: { TabDataPreview },
-  data() {
-    return {
-      table: {
-        name: ''
-      },
-      fields: [],
-      data: [],
-      tabActive: 'dataPreview'
-    }
-  },
-  computed: {
-    tableId() {
-      console.log(this.$store.state.dataset.table)
-      this.initTable(this.$store.state.dataset.table)
-      return this.$store.state.dataset.table
-    }
-  },
-  watch: {},
-  created() {
-    this.resetTable()
-  },
-  mounted() {
-    this.resetTable()
-  },
-  activated() {
-    this.resetTable()
-  },
-  methods: {
-    initTable(id) {
-      if (id !== null) {
-        this.fields = []
-        this.data = []
-        this.$post('/dataset/table/get/' + id, null, response => {
-          this.table = response.data
-          this.initPreviewData()
-        })
-      }
-    },
-
-    initPreviewData() {
-      if (this.table.id) {
-        this.$post('/dataset/table/getPreviewData', this.table, response => {
-          this.fields = response.data.fields
-          this.data = response.data.data
-        })
-      }
-    },
-
-    initTableFields() {
-      if (this.table.id) {
-        this.$post('/dataset/table/getFields', this.table, response => {
-        })
-      }
-    },
-    initTableData() {
-      if (this.table.id) {
-        this.$post('/dataset/table/getData', this.table, response => {
-        })
-      }
-    },
-
-    resetTable() {
-      this.table = {
-        name: ''
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .el-divider--horizontal {
-    margin: 12px 0;
-  }
-
-  .form-item {
-    margin-bottom: 6px;
-  }
-</style>
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 098af88c11..282caa8ff7 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -7,7 +7,7 @@
           {{ $t('chart.datalist') }}
         </span>
       </el-row>
-      <el-divider />
+      <el-divider/>
 
       <el-row>
         <el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
@@ -101,7 +101,7 @@
       <el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
         <el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
           <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="groupForm.name" />
+            <el-input v-model="groupForm.name"/>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -121,7 +121,7 @@
           {{ $t('chart.back') }}
         </el-button>
       </el-row>
-      <el-divider />
+      <el-divider/>
       <el-row>
         <el-button type="primary" size="mini" plain @click="selectTable">
           {{ $t('chart.add_chart') }}
@@ -180,7 +180,7 @@
       <el-dialog :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
         <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
           <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="tableForm.name" />
+            <el-input v-model="tableForm.name"/>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -197,7 +197,7 @@
         width="70%"
         class="dialog-css"
       >
-        <table-selector @getTable="getTable" />
+        <table-selector @getTable="getTable"/>
         <div slot="footer" class="dialog-footer">
           <el-button size="mini" @click="selectTableFlag = false">{{ $t('chart.cancel') }}</el-button>
           <el-button type="primary" size="mini" @click="createChart">{{ $t('chart.confirm') }}</el-button>
@@ -209,6 +209,7 @@
 </template>
 
 <script>
+import { post } from '@/api/chart/chart'
 import TableSelector from '../view/TableSelector'
 
 export default {
@@ -324,7 +325,7 @@ export default {
     saveGroup(group) {
       this.$refs['groupForm'].validate((valid) => {
         if (valid) {
-          this.$post('/chart/group/save', group, response => {
+          post('/chart/group/save', group).then(response => {
             this.close()
             this.$message({
               message: this.$t('commons.save_success'),
@@ -347,7 +348,7 @@ export default {
     saveTable(view) {
       this.$refs['tableForm'].validate((valid) => {
         if (valid) {
-          this.$post('/chart/view/save', view, response => {
+          post('/chart/view/save', view).then(response => {
             this.closeTable()
             this.$message({
               message: this.$t('commons.save_success'),
@@ -355,8 +356,9 @@ export default {
               showClose: true
             })
             this.chartTree()
-            this.$router.push('/chart/home')
-            this.$store.commit('setTable', null)
+            // this.$router.push('/chart/home')
+            this.$emit('switchComponent', { name: '' })
+            this.$store.dispatch('chart/setTable', null)
           })
         } else {
           this.$message({
@@ -375,7 +377,7 @@ export default {
         cancelButtonText: this.$t('chart.cancel'),
         type: 'warning'
       }).then(() => {
-        this.$post('/chart/group/delete/' + data.id, null, response => {
+        post('/chart/group/delete/' + data.id, null).then(response => {
           this.$message({
             type: 'success',
             message: this.$t('chart.delete_success'),
@@ -393,15 +395,16 @@ export default {
         cancelButtonText: this.$t('chart.cancel'),
         type: 'warning'
       }).then(() => {
-        this.$post('/chart/view/delete/' + data.id, null, response => {
+        post('/chart/view/delete/' + data.id, null).then(response => {
           this.$message({
             type: 'success',
             message: this.$t('chart.delete_success'),
             showClose: true
           })
           this.chartTree()
-          this.$router.push('/chart/home')
-          this.$store.commit('setTable', null)
+          // this.$router.push('/chart/home')
+          this.$emit('switchComponent', { name: '' })
+          this.$store.dispatch('chart/setTable', null)
         })
       }).catch(() => {
       })
@@ -427,7 +430,7 @@ export default {
     },
 
     groupTree(group) {
-      this.$post('/chart/group/tree', group, response => {
+      post('/chart/group/tree', group).then(response => {
         this.data = response.data
       })
     },
@@ -435,10 +438,10 @@ export default {
     chartTree() {
       this.chartData = []
       if (this.currGroup.id) {
-        this.$post('/chart/view/list', {
+        post('/chart/view/list', {
           sort: 'create_time desc,name asc',
           sceneId: this.currGroup.id
-        }, response => {
+        }).then(response => {
           this.chartData = response.data
         })
       }
@@ -448,7 +451,7 @@ export default {
       if (data.type === 'scene') {
         this.sceneMode = true
         this.currGroup = data
-        this.$store.commit('setSceneId', this.currGroup.id)
+        this.$store.dispatch('chart/setSceneId', this.currGroup.id)
       }
       if (node.expanded) {
         this.expandedArray.push(data.id)
@@ -462,7 +465,8 @@ export default {
 
     back() {
       this.sceneMode = false
-      this.$router.push('/chart/home')
+      // this.$router.push('/chart/home')
+      this.$emit('switchComponent', { name: '' })
     },
 
     beforeClickAddData(type) {
@@ -481,10 +485,11 @@ export default {
     },
 
     sceneClick(data, node) {
-      this.$store.commit('setViewId', null)
-      this.$store.commit('setViewId', data.id)
-      this.$store.commit('setTableId', data.tableId)
-      this.$router.push('/chart/chart-edit')
+      this.$store.dispatch('chart/setViewId', null)
+      this.$store.dispatch('chart/setViewId', data.id)
+      this.$store.dispatch('chart/setTableId', data.tableId)
+      // this.$router.push('/chart/chart-edit')
+      this.$emit('switchComponent', { name: 'ChartEdit' })
     },
 
     selectTable() {
@@ -497,12 +502,13 @@ export default {
       view.name = this.table.name
       view.sceneId = this.currGroup.id
       view.tableId = this.table.id
-      this.$post('/chart/view/save', view, response => {
+      post('/chart/view/save', view).then(response => {
         this.selectTableFlag = false
-        this.$store.commit('setTableId', null)
-        this.$store.commit('setTableId', this.table.id)
-        this.$router.push('/chart/chart-edit')
-        this.$store.commit('setViewId', response.data.id)
+        this.$store.dispatch('chart/setTableId', null)
+        this.$store.dispatch('chart/setTableId', this.table.id)
+        // this.$router.push('/chart/chart-edit')
+        this.$emit('switchComponent', { name: 'ChartEdit' })
+        this.$store.dispatch('chart/setViewId', response.data.id)
         this.chartTree()
       })
     },
@@ -516,11 +522,9 @@ export default {
       if (path === '/chart/chart-edit') {
         this.sceneMode = true
         const sceneId = this.$store.state.chart.sceneId
-        this.$post('/chart/group/getScene/' + sceneId, null, response => {
+        post('/chart/group/getScene/' + sceneId, null).then(response => {
           this.currGroup = response.data
         })
-      } else {
-        this.$router.push('/chart')
       }
     }
   }
diff --git a/frontend/src/views/chart/index.vue b/frontend/src/views/chart/index.vue
index 48e1771102..c399fc561d 100644
--- a/frontend/src/views/chart/index.vue
+++ b/frontend/src/views/chart/index.vue
@@ -2,13 +2,12 @@
   <ms-container>
 
     <ms-aside-container>
-      <group />
+      <group @switchComponent="switchComponent"/>
     </ms-aside-container>
 
     <ms-main-container>
-      <keep-alive>
-        <router-view />
-      </keep-alive>
+      <!--        <router-view />-->
+      <component :is="component" :param="param" @switchComponent="switchComponent"></component>
     </ms-main-container>
   </ms-container>
 </template>
@@ -19,11 +18,31 @@ import MsContainer from '@/metersphere/common/components/MsContainer'
 import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer'
 import Group from './group/Group'
 
+import ChartHome from './data/ChartHome'
+import ChartEdit from './view/ChartEdit'
+
 export default {
   name: 'Chart',
-  components: { MsMainContainer, MsContainer, MsAsideContainer, Group },
+  components: { MsMainContainer, MsContainer, MsAsideContainer, Group, ChartHome, ChartEdit },
   data() {
-    return {}
+    return {
+      component: ChartHome,
+      param: {}
+    }
+  },
+  methods: {
+    switchComponent(c) {
+      console.log(c)
+      this.param = c.param
+      switch (c.name) {
+        case 'ChartEdit':
+          this.component = ChartEdit
+          break
+        default:
+          this.component = ChartHome
+          break
+      }
+    }
   }
 }
 </script>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 1cc815f2f0..8a89a7143d 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -57,7 +57,7 @@
         <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;" class="padding-lr">
           <el-row>
             <span>{{ $t('chart.title') }}</span>
-          <!--          <el-checkbox v-model="view.show" style="float: right;">{{$t('chart.show')}}</el-checkbox>-->
+            <!--          <el-checkbox v-model="view.show" style="float: right;">{{$t('chart.show')}}</el-checkbox>-->
           </el-row>
           <el-form>
             <el-form-item class="form-item">
@@ -147,7 +147,7 @@
           </el-row>
 
           <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
-            <div id="echart" style="width: 100%;height: 80vh;" />
+            <div id="echart" style="width: 100%;height: 80vh;"/>
           </div>
         </el-row>
       </el-col>
@@ -156,6 +156,7 @@
 </template>
 
 <script>
+import { post } from '@/api/dataset/dataset'
 import draggable from 'vuedraggable'
 import { BASE_BAR } from '../chart/chart'
 
@@ -219,14 +220,14 @@ export default {
   methods: {
     initTableData(id) {
       if (id != null) {
-        this.$post('/dataset/table/get/' + id, null, response => {
+        post('/dataset/table/get/' + id, null).then(response => {
           this.table = response.data
           this.initTableField(id)
         })
       }
     },
     initTableField(id) {
-      this.$post('/dataset/table/getFieldsFromDE', this.table, response => {
+      post('/dataset/table/getFieldsFromDE', this.table).then(response => {
         this.dimension = response.data.dimension
         this.quota = response.data.quota
       })
@@ -259,7 +260,7 @@ export default {
     },
     get(id) {
       if (id) {
-        this.$post('/chart/view/get/' + id, null, response => {
+        post('/chart/view/get/' + id, null).then(response => {
           this.view = response.data
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
@@ -276,7 +277,7 @@ export default {
       view.tableId = this.$store.state.chart.tableId
       view.xaxis = JSON.stringify(view.xaxis)
       view.yaxis = JSON.stringify(view.yaxis)
-      this.$post('/chart/view/save', view, response => {
+      post('/chart/view/save', view).then(response => {
         // this.get(response.data.id);
         this.getData(response.data.id)
         this.$store.commit('setChartSceneData', null)
@@ -285,7 +286,7 @@ export default {
     },
     getData(id) {
       if (id) {
-        this.$post('/chart/view/getData/' + id, null, response => {
+        post('/chart/view/getData/' + id, null).then(response => {
           this.view = response.data
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
@@ -406,4 +407,8 @@ export default {
   .el-form-item {
     margin-bottom: 0;
   }
+
+  span {
+    font-size: 14px;
+  }
 </style>
diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index e9afdbda23..528554e920 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -14,7 +14,7 @@
           </el-button>
         </el-row>
       </el-row>
-      <el-divider />
+      <el-divider/>
       <el-row>
         <el-form :inline="true">
           <el-form-item class="form-item">
@@ -57,7 +57,12 @@
 </template>
 
 <script>
+import { listDatasource, post } from '@/api/dataset/dataset'
+
 export default {
+  props: {
+    param: Object
+  },
   name: 'AddDB',
   data() {
     return {
@@ -66,31 +71,27 @@ export default {
       dataSource: '',
       tables: [],
       checkTableList: [],
-      scene: null,
       mode: '0'
     }
   },
   watch: {
     dataSource(val) {
       if (val) {
-        this.$post('/datasource/getTables', { id: val }, response => {
+        post('/datasource/getTables', { id: val }).then(response => {
           this.tables = response.data
-        }
-        )
+        })
       }
     }
   },
   mounted() {
     this.initDataSource()
-    this.scene = this.$route.params.scene
   },
   activated() {
     this.initDataSource()
-    this.scene = this.$route.params.scene
   },
   methods: {
     initDataSource() {
-      this.$get('/datasource/list', response => {
+      listDatasource().then(response => {
         this.options = response.data
       })
     },
@@ -98,7 +99,7 @@ export default {
     save() {
       // console.log(this.checkTableList);
       // console.log(this.scene);
-      const sceneId = this.scene.id
+      const sceneId = this.param.id
       const dataSourceId = this.dataSource
       const tables = []
       const mode = this.mode
@@ -111,15 +112,16 @@ export default {
           mode: parseInt(mode)
         })
       })
-      this.$post('/dataset/table/batchAdd', tables, response => {
-        this.$store.commit('setSceneData', new Date().getTime())
+      post('/dataset/table/batchAdd', tables).then(response => {
+        this.$store.dispatch('dataset/setSceneData', new Date().getTime())
         this.cancel()
       })
     },
 
     cancel() {
       this.dataReset()
-      this.$router.push('/dataset/home')
+      // this.$router.push('/dataset/home')
+      this.$emit('switchComponent', { name: '' })
     },
 
     dataReset() {
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelector.vue b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
index 99ccc282bb..4cce94109b 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@@ -7,7 +7,7 @@
           {{ $t('dataset.datalist') }}
         </span>
       </el-row>
-      <el-divider />
+      <el-divider/>
 
       <el-row>
         <el-form>
@@ -59,7 +59,7 @@
           {{ $t('dataset.back') }}
         </el-button>
       </el-row>
-      <el-divider />
+      <el-divider/>
       <el-row>
         <el-form>
           <el-form-item class="form-item">
@@ -85,8 +85,8 @@
               ({{ data.type }})
             </span>
             <span>
-              <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
-              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time" /></span>
+              <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation"/></span>
+              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time"/></span>
             </span>
             <span style="margin-left: 6px">{{ data.name }}</span>
           </span>
@@ -97,6 +97,8 @@
 </template>
 
 <script>
+import { post } from '@/api/dataset/dataset'
+
 export default {
   name: 'DatasetGroupSelector',
   data() {
@@ -157,7 +159,7 @@ export default {
     },
 
     tree(group) {
-      this.$post('/dataset/group/tree', group, response => {
+      post('/dataset/group/tree', group).then(response => {
         this.data = response.data
       })
     },
@@ -165,10 +167,10 @@ export default {
     tableTree() {
       this.tableData = []
       if (this.currGroup) {
-        this.$post('/dataset/table/list', {
+        post('/dataset/table/list', {
           sort: 'type asc,create_time desc,name asc',
           sceneId: this.currGroup.id
-        }, response => {
+        }).then(response => {
           this.tableData = response.data
         })
       }
diff --git a/frontend/src/views/dataset/common/DatasetTableData.vue b/frontend/src/views/dataset/common/DatasetTableData.vue
index 1c7f282525..25068f3e8e 100644
--- a/frontend/src/views/dataset/common/DatasetTableData.vue
+++ b/frontend/src/views/dataset/common/DatasetTableData.vue
@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import { post } from '@/api/dataset/dataset'
+
 export default {
   name: 'DatasetTableData',
   props: {
@@ -46,7 +48,7 @@ export default {
     initData() {
       this.resetData()
       if (this.table.id) {
-        this.$post('/dataset/table/getPreviewData', this.table, response => {
+        post('/dataset/table/getPreviewData', this.table).then(response => {
           this.fields = response.data.fields
           this.data = response.data.data
         })
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 1a135b4baa..81e3444450 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -10,22 +10,22 @@
           <el-button size="mini" @click="edit">
             {{ $t('dataset.edit') }}
           </el-button>
-        <!--        <el-button size="mini" type="primary" @click="createChart">-->
-        <!--          {{$t('dataset.create_view')}}-->
-        <!--        </el-button>-->
+          <!--        <el-button size="mini" type="primary" @click="createChart">-->
+          <!--          {{$t('dataset.create_view')}}-->
+          <!--        </el-button>-->
         </el-row>
       </el-row>
-      <el-divider />
+      <el-divider/>
 
       <el-tabs v-model="tabActive">
         <el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
-          <tab-data-preview :table="table" :fields="fields" :data="data" />
+          <tab-data-preview :table="table" :fields="fields" :data="data"/>
         </el-tab-pane>
         <el-tab-pane :label="$t('dataset.join_view')" name="joinView">
           关联视图 TODO
         </el-tab-pane>
         <el-tab-pane :label="$t('dataset.update_info')" name="updateInfo">
-          <update-info :table="table" />
+          <update-info :table="table"/>
         </el-tab-pane>
       </el-tabs>
 
@@ -40,17 +40,17 @@
           </el-table-column>
           <el-table-column property="name" :label="$t('dataset.field_name')" width="180">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.name" size="mini" />
+              <el-input v-model="scope.row.name" size="mini"/>
             </template>
           </el-table-column>
-          <el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180" />
+          <el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180"/>
           <el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
             <template slot-scope="scope">
-              <el-checkbox v-model="scope.row.checked" />
+              <el-checkbox v-model="scope.row.checked"/>
             </template>
           </el-table-column>
           <!--下面这一列占位-->
-          <el-table-column property="" />
+          <el-table-column property=""/>
         </el-table>
         <div slot="footer" class="dialog-footer">
           <el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
@@ -58,14 +58,15 @@
         </div>
       </el-dialog>
 
-    <!--    <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
-    <!--      <chart-edit/>-->
-    <!--    </el-dialog>-->
+      <!--    <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
+      <!--      <chart-edit/>-->
+      <!--    </el-dialog>-->
     </el-row>
   </el-col>
 </template>
 
 <script>
+import { getTable, getPreviewData, fieldList, batchEdit } from '@/api/dataset/dataset'
 import TabDataPreview from './TabDataPreview'
 import UpdateInfo from './UpdateInfo'
 
@@ -107,7 +108,7 @@ export default {
       if (id !== null) {
         this.fields = []
         this.data = []
-        this.$post('/dataset/table/get/' + id, null, response => {
+        getTable(id).then(response => {
           this.table = response.data
           this.initPreviewData()
         })
@@ -116,7 +117,7 @@ export default {
 
     initPreviewData() {
       if (this.table.id) {
-        this.$post('/dataset/table/getPreviewData', this.table, response => {
+        getPreviewData(this.table).then(response => {
           this.fields = response.data.fields
           this.data = response.data.data
         })
@@ -124,7 +125,7 @@ export default {
     },
 
     initTableFields() {
-      this.$post('/dataset/field/list/' + this.table.id, null, response => {
+      fieldList(this.table.id).then(response => {
         this.tableFields = response.data
       })
     },
@@ -142,7 +143,7 @@ export default {
 
     saveEdit() {
       console.log(this.tableFields)
-      this.$post('/dataset/field/batchEdit', this.tableFields, response => {
+      batchEdit(this.tableFields).then(response => {
         this.closeEdit()
         this.initTable(this.table.id)
       })
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 96d424f6d8..4485c7b2cf 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -7,7 +7,7 @@
           {{ $t('dataset.datalist') }}
         </span>
       </el-row>
-      <el-divider />
+      <el-divider/>
 
       <el-row>
         <el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
@@ -103,12 +103,13 @@
       <el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
         <el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
           <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="groupForm.name" />
+            <el-input v-model="groupForm.name"/>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button size="mini" @click="close()">{{ $t('dataset.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('dataset.confirm') }}</el-button>
+          <el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('dataset.confirm') }}
+          </el-button>
         </div>
       </el-dialog>
     </el-col>
@@ -123,7 +124,7 @@
           {{ $t('dataset.back') }}
         </el-button>
       </el-row>
-      <el-divider />
+      <el-divider/>
       <el-row>
         <el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">
           <el-button type="primary" size="mini" plain>
@@ -177,8 +178,8 @@
               ({{ data.type }})
             </span>
             <span>
-              <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
-              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time" /></span>
+              <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation"/></span>
+              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time"/></span>
             </span>
             <span style="margin-left: 6px">{{ data.name }}</span>
           </span>
@@ -212,7 +213,7 @@
       <el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
         <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
           <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="tableForm.name" />
+            <el-input v-model="tableForm.name"/>
           </el-form-item>
           <el-form-item :label="$t('dataset.mode')" prop="mode">
             <el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>
@@ -221,7 +222,8 @@
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}</el-button>
+          <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}
+          </el-button>
         </div>
       </el-dialog>
 
@@ -231,6 +233,7 @@
 
 <script>
 import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
+
 export default {
   name: 'Group',
   data() {
@@ -377,7 +380,7 @@ export default {
     },
 
     saveTable(table) {
-    //   console.log(table)
+      //   console.log(table)
       table.mode = parseInt(table.mode)
       this.$refs['tableForm'].validate((valid) => {
         if (valid) {
@@ -389,7 +392,8 @@ export default {
               showClose: true
             })
             this.tableTree()
-            this.$router.push('/dataset/home')
+            // this.$router.push('/dataset/home')
+            this.$emit('switchComponent', { name: '' })
             this.$store.dispatch('dataset/setTable', null)
           })
         } else {
@@ -434,7 +438,8 @@ export default {
             showClose: true
           })
           this.tableTree()
-          this.$router.push('/dataset/home')
+          // this.$router.push('/dataset/home')
+          this.$emit('switchComponent', { name: '' })
           this.$store.dispatch('dataset/setTable', null)
         })
       }).catch(() => {
@@ -501,7 +506,9 @@ export default {
       this.sceneMode = false
       //   const route = this.$store.state.permission.currentRoutes
       //   console.log(route)
-      this.$router.push('/dataset/index')
+      // this.$router.push('/dataset/index')
+      this.$store.dispatch('dataset/setSceneData', null)
+      this.$emit('switchComponent', { name: '' })
     },
 
     clickAddData(param) {
@@ -529,24 +536,26 @@ export default {
     },
 
     addDB() {
-      this.$router.push({
-        name: 'add_db',
-        params: {
-          scene: this.currGroup
-        }
-      })
+      // this.$router.push({
+      //   name: 'add_db',
+      //   params: {
+      //     scene: this.currGroup
+      //   }
+      // })
+      this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
     },
 
     sceneClick(data, node) {
       // console.log(data);
       this.$store.dispatch('dataset/setTable', null)
       this.$store.dispatch('dataset/setTable', data.id)
-      this.$router.push({
-        name: 'table',
-        params: {
-          table: data
-        }
-      })
+      // this.$router.push({
+      //   name: 'table',
+      //   params: {
+      //     table: data
+      //   }
+      // })
+      this.$emit('switchComponent', { name: 'ViewTable' })
     },
 
     refresh() {
@@ -557,8 +566,6 @@ export default {
         getScene(sceneId).then(res => {
           this.currGroup = res.data
         })
-      } else {
-        this.$router.push('/dataset')
       }
     }
   }
diff --git a/frontend/src/views/dataset/index.vue b/frontend/src/views/dataset/index.vue
index 51c3a8a087..9eaa83b2b9 100644
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@@ -2,13 +2,12 @@
   <ms-container>
 
     <ms-aside-container>
-      <group />
+      <group @switchComponent="switchComponent"/>
     </ms-aside-container>
 
     <ms-main-container>
-      <keep-alive>
-        <router-view />
-      </keep-alive>
+      <!--<router-view/>-->
+      <component :is="component" :param="param" @switchComponent="switchComponent"></component>
     </ms-main-container>
   </ms-container>
 </template>
@@ -19,25 +18,49 @@ import MsContainer from '@/metersphere/common/components/MsContainer'
 import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer'
 import Group from './group/Group'
 
+import DataHome from './data/DataHome'
+import ViewTable from './data/ViewTable'
+import AddDB from './add/AddDB'
+
 export default {
   name: 'DataSet',
-  components: { MsMainContainer, MsContainer, MsAsideContainer, Group },
+  components: { MsMainContainer, MsContainer, MsAsideContainer, Group, DataHome, ViewTable, AddDB },
   data() {
-    return {}
+    return {
+      component: DataHome,
+      param: {}
+    }
+  },
+  methods: {
+    switchComponent(c) {
+      console.log(c)
+      this.param = c.param
+      switch (c.name) {
+        case 'ViewTable':
+          this.component = ViewTable
+          break
+        case 'AddDB':
+          this.component = AddDB
+          break
+        default:
+          this.component = DataHome
+          break
+      }
+    }
   }
 }
 </script>
 
 <style scoped>
   .ms-aside-container {
-    height: calc(100vh - 40px);
+    height: calc(100vh - 56px);
     padding: 15px;
-    min-width: 300px;
-    max-width: 500px;
+    min-width: 260px;
+    max-width: 460px;
   }
 
   .ms-main-container {
-    height: calc(100vh - 40px);
+    height: calc(100vh - 56px);
   }
 
 </style>
diff --git a/frontend/src/views/system/user/index_back.vue b/frontend/src/views/system/user/index_back.vue
index b9c92b8c63..54d60e48e0 100644
--- a/frontend/src/views/system/user/index_back.vue
+++ b/frontend/src/views/system/user/index_back.vue
@@ -105,7 +105,7 @@ export default {
       console.log(condition) // demo只查看搜索条件，没有搜索的实现
       const { currentPage, pageSize } = this.paginationConfig
       userLists(currentPage, pageSize, {}).then(response => {
-        this.data = response.data.data.listObject
+        this.data = response.data.listObject
         this.paginationConfig.total = response.data.itemCount
       })
     }