diff --git a/web_src/package-lock.json b/web_src/package-lock.json
index dffa57e8..e4fd82e9 100644
--- a/web_src/package-lock.json
+++ b/web_src/package-lock.json
@@ -3356,12 +3356,27 @@
     },
     "echarts": {
       "version": "4.9.0",
-      "resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1619495447964&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz",
-      "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
       "requires": {
         "zrender": "4.3.2"
       }
     },
+    "echarts-amap": {
+      "version": "1.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/echarts-amap/-/echarts-amap-1.0.0-rc.6.tgz",
+      "integrity": "sha1-V4KnTa7lLtRM4/j2JXdWF4PwnhY="
+    },
+    "echarts-liquidfill": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/echarts-liquidfill/-/echarts-liquidfill-2.0.6.tgz",
+      "integrity": "sha512-p+AH0O9/BtwXMQQyhjJbMZo+GwRAgWG/DCyK5r27PQzpS0UWrgXu57MyEFc0A8Ub3sRuqEu08BuxwHICBkSWSQ=="
+    },
+    "echarts-wordcloud": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-1.1.3.tgz",
+      "integrity": "sha512-Et8D5xEAoYkidmHun+hEH+2lF9dhCt6D0JJ390vlr2r/1zwhhZAbcL01CEvG93QcMcJpSvSPK8vRiGkTbMHRxg=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -5990,7 +6005,7 @@
     },
     "normalize-wheel": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
       "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
     },
     "npm-run-path": {
@@ -6023,6 +6038,11 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
       "dev": true
     },
+    "numerify": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/numerify/-/numerify-1.2.9.tgz",
+      "integrity": "sha512-X4QzQiytV5ZN3TVLhzbtFzjTarUNnaa1pgNDFqt7u7Nqhxe7FvY2eYrGt4WYHlYXDqgtfC/n/a5nJ2y0LijV8w=="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
@@ -10786,6 +10806,11 @@
       "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
       "dev": true
     },
+    "utils-lite": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/utils-lite/-/utils-lite-0.1.10.tgz",
+      "integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ=="
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
@@ -10798,6 +10823,18 @@
       "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
       "dev": true
     },
+    "v-charts": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/v-charts/-/v-charts-1.19.0.tgz",
+      "integrity": "sha512-vm2HBUmxAsXK0ivwce9LytcpqrItDA5JSPLYVxZXtiuoyhcn80XX1/3dPJd/1GqG1OYv3jfBo1s9ra4q8GowqA==",
+      "requires": {
+        "echarts-amap": "1.0.0-rc.6",
+        "echarts-liquidfill": "^2.0.2",
+        "echarts-wordcloud": "^1.1.3",
+        "numerify": "1.2.9",
+        "utils-lite": "0.1.10"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz",
@@ -11964,8 +12001,8 @@
     },
     "zrender": {
       "version": "4.3.2",
-      "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.3.2.tgz",
-      "integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY="
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
     }
   }
 }
diff --git a/web_src/package.json b/web_src/package.json
index 20fc3a2b..84d38e9a 100644
--- a/web_src/package.json
+++ b/web_src/package.json
@@ -17,6 +17,7 @@
     "fingerprintjs2": "^2.1.2",
     "moment": "^2.29.1",
     "postcss-pxtorem": "^5.1.1",
+    "v-charts": "^1.19.0",
     "vue": "^2.6.11",
     "vue-baidu-map": "^0.21.22",
     "vue-clipboard2": "^0.3.1",
diff --git a/web_src/src/components/Console.vue b/web_src/src/components/Console.vue
new file mode 100644
index 00000000..3b83e062
--- /dev/null
+++ b/web_src/src/components/Console.vue
@@ -0,0 +1,132 @@
+<template>
+<div id="app">
+    <el-container>
+        <el-header>
+            <uiHeader></uiHeader>
+        </el-header>
+        <el-main>
+            <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
+                <span style="font-size: 1rem; font-weight: bold;">控制台</span>
+                <div style="position: absolute; right: 17rem; top: 0.3rem;">
+
+                </div>
+            </div>
+
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <div class="control-table" id="cpuInfo">cpuTable</div>
+                </el-col>
+                <el-col :span="12">
+                    <div class="control-table" id="memInfo">memTable</div>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <div class="control-table" id="loadInfo">table3</div>
+              </el-col>
+              <el-col :span="12">
+                <div class="control-table" id="netInfo">table4</div>
+              </el-col>
+            </el-row>
+        </el-main>
+    </el-container>
+
+</div>
+</template>
+
+<script>
+import uiHeader from './UiHeader.vue'
+
+import echarts from 'echarts';
+export default {
+    name: 'app',
+    components: {
+        echarts,
+        uiHeader
+    },
+    data() {
+        return {
+            cpuTable: {
+              chart: null,
+              option: {
+                title: {
+                  text: 'CPU信息'
+                },
+                legend: {
+                  type: 'scroll'
+                },
+                dataZoom: {
+                  show: false,
+                  start: 0,
+                  end: 100
+                },
+                xAxis: {
+                  type: 'category',
+                  boundaryGap: true,
+                  nameLocation: 'end',
+                  data: [], // x轴数据
+                  name: '时间', // x轴名称
+                },
+                yAxis: {},
+                label: {},
+                tooltip: {},
+                series: []
+              },
+            },
+            memTableOption: {
+                // legend: {},
+                xAxis: {},
+                yAxis: {},
+                label: {},
+                tooltip: {},
+                series: []
+            },
+        };
+    },
+    mounted() {
+
+
+    },
+    destroyed() {
+
+    },
+    methods: {
+        initTable: function () {
+            let that = this;
+            this.initCpuTable()
+        },
+        initCpuTable: function (){
+          this.cpuTable.chart = echarts.init(document.getElementById('cpuInfo'));
+          this.cpuTable.chart.setOption(this.cpuTable.option)
+        }
+
+
+    }
+};
+</script>
+
+<style>
+#app {
+    height: 100%;
+}
+
+.control-table {
+    background-color: #ffffff;
+    height: 25rem;
+}
+
+.table-c {
+    border-right: 1px solid #dcdcdc;
+    border-bottom: 1px solid #dcdcdc;
+}
+
+.table-c td {
+    border-left: 1px solid #dcdcdc;
+    border-top: 1px solid #dcdcdc;
+    padding: 0.2rem;
+}
+
+.el-table {
+    width: 99.9% !important;
+}
+</style>
diff --git a/web_src/src/main.js b/web_src/src/main.js
index d534d5f4..6c2686f5 100644
--- a/web_src/src/main.js
+++ b/web_src/src/main.js
@@ -7,6 +7,7 @@ import router from './router/index.js';
 import axios from 'axios';
 import VueCookies from 'vue-cookies';
 import echarts from 'echarts';
+import VCharts from 'v-charts'
 
 import VueClipboard from 'vue-clipboard2';
 import { Notification } from 'element-ui';
@@ -39,6 +40,7 @@ Vue.use(VueClipboards);
 Vue.prototype.$axios = axios;
 Vue.prototype.$notify = Notification;
 Vue.use(Contextmenu);
+Vue.use(VCharts)
 
 axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : "";