diff --git a/package.json b/package.json
index 7dc8cf7..f4f9440 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "jdyw_datav",
+  "name": "dataview",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
-    "vue": "^2.5.17"
+    "highlight.js": "^9.13.1",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.1.1",
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..f6dc701
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 7eaf923..cc3f2f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>JDYW_DATAV</title>
+    <title>DATAV-DEMO</title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 279ba12..f65041d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,81 +1,31 @@
 <template>
-  <div id="app">
-    <div class="datav-container" ref="data-root">
-      <current-data-v />
-    </div>
+  <div id="app" ref="data-root">
+    <router-view />
   </div>
 </template>
 
 <script>
-// import currentDataV from './views/electronicFile/index'
-import currentDataV from './views/manageDesk/index'
 
 export default {
-  name: 'app',
-  components: {
-    currentDataV
-  },
-  data () {
-    return {
-      scale: 0,
-      app: ''
-    }
-  },
-  methods: {
-    init () {
-      const { initConfig, setAppScale, bindReSizeEventHandler } = this
-
-      initConfig()
-
-      setAppScale()
-
-      bindReSizeEventHandler()
-    },
-    initConfig () {
-      const { width, height } = screen
-
-      this.allWidth = width
-
-      const app = this.app = this.$refs['data-root']
-
-      app.style.width = `${width}px`
-      app.style.height = `${height}px`
-    },
-    setAppScale () {
-      const { allWidth, app } = this
-
-      const currentWidth = document.body.clientWidth
-
-      app.style.transform = `scale(${currentWidth / allWidth})`
-    },
-    bindReSizeEventHandler () {
-      const { debounce, setAppScale } = this
-
-      if (!debounce) return
-
-      window.addEventListener('resize', debounce(100, setAppScale))
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
-  }
+  name: 'app'
 }
 </script>
 
 <style lang="less">
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family:
+  'code',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  'Helvetica Neue',
+  'PingFang SC',
+  'Microsoft YaHei',
+  'Source Han Sans SC',
+  'Noto Sans CJK SC',
+  'WenQuanYi Micro Hei',
+  'sans-serif';
+  width: 100%;
+  height: 100%;
   overflow: hidden;
-  user-select: none;
-  background-size: 100%;
-  background-image: url('./assets/img/bg.png');
-
-  .datav-container {
-    width: 100%;
-    height: 100%;
-    transform-origin: left top;
-  }
 }
 </style>
diff --git a/src/components/index.js b/src/components/index.js
index ec25338..b157c74 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,6 +4,7 @@ import borderBox3 from './borderBox3/index'
 import borderBox4 from './borderBox4/index'
 import borderBox5 from './borderBox5/index'
 import borderBox6 from './borderBox6/index'
+import borderBox7 from './borderBox7/index'
 
 import decoration1 from './decoration1/index'
 import decoration2 from './decoration2/index'
@@ -22,6 +23,8 @@ import scrollBoard from './scrollBoard/index.vue'
 
 import loading from './loading/index.vue'
 
+import highlightCode from './highlightCode'
+
 export default function (Vue) {
   Vue.component('borderBox1', borderBox1)
   Vue.component('borderBox2', borderBox2)
@@ -29,6 +32,7 @@ export default function (Vue) {
   Vue.component('borderBox4', borderBox4)
   Vue.component('borderBox5', borderBox5)
   Vue.component('borderBox6', borderBox6)
+  Vue.component('borderBox7', borderBox7)
   Vue.component('decoration1', decoration1)
   Vue.component('decoration2', decoration2)
   Vue.component('decoration3', decoration3)
@@ -41,4 +45,5 @@ export default function (Vue) {
   Vue.component('numberShow', numberShow)
   Vue.component('scrollBoard', scrollBoard)
   Vue.component('loading', loading)
+  Vue.component('highlightCode', highlightCode)
 }
diff --git a/src/main.js b/src/main.js
index 2a39efc..08895ca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,20 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router/index'
 
 import './assets/style/index.less'
 
 import plugins from './plugins/index'
 
-import globalComponents from './components/index'
+import components from './components/index'
 
 Vue.use(plugins)
 
-Vue.use(globalComponents)
+Vue.use(components)
 
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/temp.vue b/src/temp.vue
deleted file mode 100644
index ded6f8f..0000000
--- a/src/temp.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div id="app" ref="data-root">
-    <div class="datav-container">
-      <demo />
-    </div>
-  </div>
-</template>
-
-<script>
-import demo from './views/demo/index'
-
-export default {
-  name: 'app',
-  components: {
-    demo
-  }
-}
-</script>
-
-<style lang="less">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  width: 100%;
-  height: 100%;
-  overflow: scroll;
-  background-size: 100%;
-  background-image: url('./assets/img/bg.png');
-  background-repeat: repeat;
-
-  .datav-container {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
diff --git a/src/views/dataView/index.vue b/src/views/dataView/index.vue
new file mode 100644
index 0000000..e234d0d
--- /dev/null
+++ b/src/views/dataView/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="datav-page">
+    <border-box-1>
+      <div class="welcome">Welcome Data View Page</div>
+    </border-box-1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DatavPage'
+}
+</script>
+
+<style lang="less">
+.datav-page {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+
+  .border-box-1 {
+    width: 100%;
+    height: 100%;
+    font-size: 100px;
+    font-weight: bold;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .welcome {
+      margin-top: -100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/datavEntrance/index.vue b/src/views/datavEntrance/index.vue
new file mode 100644
index 0000000..22b6606
--- /dev/null
+++ b/src/views/datavEntrance/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <div id="datav-entrance">
+    <div class="datav-container" ref="data-root">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DatavEntrance',
+  data () {
+    return {
+      scale: 0,
+      datavRoot: ''
+    }
+  },
+  methods: {
+    init () {
+      const { initConfig, setAppScale, bindReSizeEventHandler } = this
+
+      initConfig()
+
+      setAppScale()
+
+      bindReSizeEventHandler()
+    },
+    initConfig () {
+      const { width, height } = screen
+
+      this.allWidth = width
+
+      const datavRoot = this.datavRoot = this.$refs['data-root']
+
+      datavRoot.style.width = `${width}px`
+      datavRoot.style.height = `${height}px`
+    },
+    setAppScale () {
+      const { allWidth, datavRoot } = this
+
+      const currentWidth = document.body.clientWidth
+
+      datavRoot.style.transform = `scale(${currentWidth / allWidth})`
+    },
+    bindReSizeEventHandler () {
+      const { debounce, setAppScale } = this
+
+      if (!debounce) return
+
+      window.addEventListener('resize', debounce(100, setAppScale))
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>
+
+<style lang="less">
+#datav-entrance {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-size: 100%;
+  background-image: url('../../assets/img/bg.png');
+
+  .datav-container {
+    transform-origin: left top;
+  }
+}
+</style>
diff --git a/src/views/demo/borderBoxDemo.vue b/src/views/demo/borderBox.vue
similarity index 95%
rename from src/views/demo/borderBoxDemo.vue
rename to src/views/demo/borderBox.vue
index 13d33f3..5a01880 100644
--- a/src/views/demo/borderBoxDemo.vue
+++ b/src/views/demo/borderBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="border-box-demo">
+  <div id="border-box">
     <border-box-1 class="border-box-item">
       border-box-1
     </border-box-1>
@@ -39,12 +39,12 @@
 
 <script>
 export default {
-  name: 'BorderBoxDemo'
+  name: 'BorderBox'
 }
 </script>
 
 <style lang="less">
-#border-box-demo {
+#border-box {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
diff --git a/src/views/demo/chartDemo.vue b/src/views/demo/chart.vue
similarity index 99%
rename from src/views/demo/chartDemo.vue
rename to src/views/demo/chart.vue
index 618777b..005193b 100644
--- a/src/views/demo/chartDemo.vue
+++ b/src/views/demo/chart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="chart-demo">
+  <div id="chart">
     <border-box-4 class="chart-item">
       <capsule-chart :data="capsuleChartData" class="chart" />
 
@@ -278,7 +278,7 @@ color: ['#00baff', '#3de7c9', '#ffc53d', '#342432']
 
 <script>
 export default {
-  name: 'ChartDemo',
+  name: 'Chart',
   data () {
     return {
       capsuleChartData: {
@@ -599,7 +599,7 @@ export default {
 </script>
 
 <style lang="less">
-#chart-demo {
+#chart {
   display: flex;
   flex-direction: column;
 
diff --git a/src/views/demo/decorationDemo.vue b/src/views/demo/decoration.vue
similarity index 97%
rename from src/views/demo/decorationDemo.vue
rename to src/views/demo/decoration.vue
index f84bd69..c03351d 100644
--- a/src/views/demo/decorationDemo.vue
+++ b/src/views/demo/decoration.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="decoration-demo">
+  <div id="decoration">
     <border-box-6 class="decoration-container">
       <decoration-1 class="decoration d1 center" />
       decoration-1
@@ -44,7 +44,7 @@ export default {
 </script>
 
 <style lang="less">
-#decoration-demo {
+#decoration {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
diff --git a/src/views/demo/document.vue b/src/views/demo/document.vue
new file mode 100644
index 0000000..a09268f
--- /dev/null
+++ b/src/views/demo/document.vue
@@ -0,0 +1,35 @@
+<template>
+  <div id="datav-document">
+    <div class="document">
+      将src下的components及plugins复制至你的项目内
+      并在main.js中引入他们即可使用
+
+      <highlight-code>
+import datavComponents from './components/index.js'
+import datavPlugins from './plugin/index.js'
+
+Vue.use(datavComponents)
+Vue.use(datavPlugins)
+      </highlight-code>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DatavDocument'
+}
+</script>
+
+<style lang="less">
+#datav-document {
+  font-size: 15px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  .document {
+    width: 800px;
+  }
+}
+</style>
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
index cae3423..46e6ac2 100644
--- a/src/views/demo/index.vue
+++ b/src/views/demo/index.vue
@@ -1,33 +1,49 @@
 <template>
   <div class="demo">
     <div class="menu-bar">
-      <div @click="status = 'borderBox'">Border-Box</div>
-      <div @click="status = 'decoration'">Decoration</div>
-      <div @click="status = 'chart'">Charts</div>
-      <div @click="status = 'other'">Other</div>
+      <div :class="`menu-item ${activeIndex === index && 'active'}`"
+        v-for="(item, index) in menuData"
+        :key="item.title"
+        @click="$router.push({ name: item.routerName }) & (activeIndex = index)">
+        {{ item.title }}
+      </div>
     </div>
 
-    <border-box-demo v-if="status === 'borderBox'" />
-    <decoration-demo v-if="status === 'decoration'" />
-    <chart-demo v-if="status === 'chart'" />
+    <div class="router-container">
+      <router-view />
+    </div>
   </div>
 </template>
 
 <script>
-import borderBoxDemo from './borderBoxDemo'
-import decorationDemo from './decorationDemo'
-import chartDemo from './chartDemo'
-
 export default {
   name: 'Demo',
-  components: {
-    borderBoxDemo,
-    decorationDemo,
-    chartDemo
-  },
   data () {
     return {
-      status: 'borderBox'
+      activeIndex: 0,
+
+      menuData: [
+        {
+          title: 'Document',
+          routerName: 'document'
+        },
+        {
+          title: 'Border-Box',
+          routerName: 'borderBox'
+        },
+        {
+          title: 'Decoration',
+          routerName: 'decoration'
+        },
+        {
+          title: 'Chart',
+          routerName: 'chart'
+        },
+        {
+          title: 'Table',
+          routerName: 'table'
+        }
+      ]
     }
   }
 }
@@ -37,30 +53,49 @@ export default {
 .demo {
   width: 100%;
   height: 100%;
+  background-image: url('../../assets/img/bg.png');
+  background-size: 100%;
+  color: #fff;
 
   .menu-bar {
-    height: 50px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-weight: bold;
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin: 10px 0px;
+  }
 
-    div {
-      width: 150px;
-      height: 100%;
-      text-align: center;
-      margin: 0px 20px;
-      line-height: 50px;
-      font-weight: bold;
-      box-sizing: border-box;
-      border: 2px solid #00baff;
-      cursor: pointer;
+  .active {
+    border-bottom: 3px solid #0084ff;
+  }
 
-      &:active {
-        color: #00baff;
-        border-color: #fff;
-      }
+  .menu-item {
+    width: 120px;
+    text-align: center;
+    margin: 0px 20px;
+    cursor: pointer;
+    z-index: 9;
+
+    &:hover {
+      border-bottom: 3px solid #0084ff;
     }
+
+    &:active {
+      color: #0084ff;
+    }
+  }
+
+  .router-container {
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+    padding-top: 70px;
   }
 }
 </style>
diff --git a/src/views/demo/table.vue b/src/views/demo/table.vue
new file mode 100644
index 0000000..59a5c37
--- /dev/null
+++ b/src/views/demo/table.vue
@@ -0,0 +1,18 @@
+<template>
+  <div id="table">
+    this is table
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Table'
+}
+</script>
+
+<style lang="less">
+#table {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/electronicFile/index.vue b/src/views/electronicFile/index.vue
deleted file mode 100644
index fb1f930..0000000
--- a/src/views/electronicFile/index.vue
+++ /dev/null
@@ -1,806 +0,0 @@
-<template>
-  <div id="electronic-file">
-    <div class="header">
-      <div class="left">{{ technicalSupport }}</div>
-      <div class="middle">{{ chart10Name }}</div>
-      <border-box-2 class="right">
-        综合管理台
-      </border-box-2>
-    </div>
-
-    <border-box-1 class="content">
-      <border-box-3 class="left">
-        <div class="left-title">{{ chart1Name }}</div>
-
-        <div class="left-device-num"><div>设备运行总数</div><div>{{ chart1Data ? multipleSum(...chart1Data.data.map(({ value }) => value)) : 0 }}</div></div>
-        <capsule-chart class="left-chart" :data="chart1Data" />
-
-        <decoration-2 class="left-d2" />
-
-        <div class="station-name">{{ chart2Name }}</div>
-        <div class="left-device-num"><div>设备运行总数</div><div>{{ chart2Data ? multipleSum(...chart2Data.data.map(({ value }) => value)) : 0 }}</div></div>
-        <ring-chart class="left-chart" :data="chart2Data" />
-
-        <div class="station-name">{{ chart3Name }}</div>
-        <div class="left-device-num"><div>设备运行总数</div><div>{{ chart3Data ? multipleSum(...chart3Data.data.map(({ value }) => value)) : 0}}</div></div>
-        <capsule-chart class="left-chart" :data="chart3Data" />
-      </border-box-3>
-
-      <div class="right">
-        <div class="right-top">
-          <border-box-3 class="right-top-left">
-            <div class="rtl-header">
-              <decoration-1 class="dl" />
-              <div class="rtl-title">机电设备总数</div>
-              <decoration-1 class="dr" />
-            </div>
-
-            <div class="rtl-device-num">
-              <div class="device-num-container">
-                设备总数<number-show :number="chart10Data ? multipleSum(...chart10Data.data.map(({ value }) => value)) : 0" />
-              </div>
-            </div>
-
-            <div class="rtl-chart-container">
-              <div class="device-num-container">
-                <div class="num-item">
-                  <div>{{ chart10Data.data[0].value }}</div>
-                  <div>{{ chart10Data.data[0].title }}</div>
-                </div>
-                <div class="num-item">
-                  <div>{{ chart10Data.data[1].value }}</div>
-                  <div>{{ chart10Data.data[1].title }}</div>
-                </div>
-              </div>
-
-              <ring-chart :data="chart10Data" />
-
-              <div class="device-num-container">
-                <div class="num-item">
-                  <div>{{ chart10Data.data[2].value }}</div>
-                  <div>{{ chart10Data.data[2].title }}</div>
-                </div>
-                <div class="num-item">
-                  <div>{{ chart10Data.data[3].value }}</div>
-                  <div>{{ chart10Data.data[3].title }}</div>
-                </div>
-              </div>
-            </div>
-
-          </border-box-3>
-
-          <div class="right-top-right">
-            <border-box-3 class="right-top-right-one">
-              <div class="rtr-title">{{ chart9Name }}</div>
-
-              <div class="rtr-chart-container">
-                <div class="device-num">
-                  <div>{{ chart9Data ? multipleSum(...chart9Data.data.map(({ value }) => value)) : 0 }}</div>
-                  <div>设备运行总数</div>
-                </div>
-
-                <capsule-chart class="rtr-chart" :data="chart9Data" />
-              </div>
-            </border-box-3>
-
-            <border-box-4 class="right-top-right-two" :reverse="true">
-              <div class="rtr-title">{{ chart8Name }}</div>
-
-              <div class="rtr-chart-container">
-                <div class="device-num">
-                  <div>{{ chart8Data ? multipleSum(...chart8Data.data.map(({ value }) => value)) : 0}}</div>
-                  <div>设备运行总数</div>
-                </div>
-
-                <ring-chart class="rtr-chart" :data="chart8Data" />
-              </div>
-            </border-box-4>
-          </div>
-        </div>
-
-        <border-box-4 class="right-bottom">
-          <div class="rb-item">
-            <div class="station-name">{{ chart4Name }}</div>
-            <ring-chart :data="chart4Data" />
-          </div>
-
-          <decoration-2 class="rb-d2" :reverse="true"/>
-
-          <div class="rb-item">
-            <div class="station-name">{{ chart5Name }}</div>
-            <ring-chart :data="chart5Data" />
-          </div>
-
-          <decoration-2 class="rb-d2" :reverse="true"/>
-
-          <div class="rb-item">
-            <div class="station-name">{{ chart6Name }}</div>
-            <ring-chart :data="chart6Data" />
-          </div>
-
-          <decoration-2 class="rb-d2" :reverse="true"/>
-
-          <div class="rb-item">
-            <div class="station-name">{{ chart7Name }}</div>
-            <ring-chart :data="chart7Data" />
-          </div>
-        </border-box-4>
-
-      </div>
-
-    </border-box-1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ElectronicFile',
-  data () {
-    return {
-      technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
-      chart10Name: '机电设备电子档案',
-
-      // 左边第一个图表数据
-      chart1Name: '收费站',
-      chart1Data: {
-        data: [
-          {
-            value: 85,
-            title: '收费系统'
-          },
-          {
-            value: 44,
-            title: '通信系统'
-          },
-          {
-            value: 125,
-            title: '监控系统'
-          },
-          {
-            value: 110,
-            title: '供配电系统'
-          },
-          {
-            value: 66,
-            title: '其他'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ]
-      },
-
-      // 左边第二个图表数据
-      chart2Name: '收费站',
-      chart2Data: {
-        data: [
-          {
-            value: 37,
-            title: '收费系统'
-          },
-          {
-            value: 12,
-            title: '通信系统'
-          },
-          {
-            value: 105,
-            title: '监控系统'
-          },
-          {
-            value: 62,
-            title: '供配电系统'
-          },
-          {
-            value: 29,
-            title: '其他'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: false
-      },
-
-      // 左边第三个图表数据
-      chart3Name: '收费站',
-      chart3Data: {
-        data: [
-          {
-            value: 119,
-            title: '收费系统'
-          },
-          {
-            value: 88,
-            title: '通信系统'
-          },
-          {
-            value: 55,
-            title: '监控系统'
-          },
-          {
-            value: 101,
-            title: '供配电系统'
-          },
-          {
-            value: 15,
-            title: '其他'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ]
-      },
-
-      // 底部第一个图表数据
-      chart4Name: '收费站',
-      chart4Data: {
-        data: [
-          {
-            value: 45,
-            title: '收费系统'
-          },
-          {
-            value: 75,
-            title: '通信系统'
-          },
-          {
-            value: 96,
-            title: '监控系统'
-          },
-          {
-            value: 16,
-            title: '供配电系统'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: true
-      },
-
-      // 底部第一个图表数据
-      chart5Name: '收费站',
-      chart5Data: {
-        data: [
-          {
-            value: 129,
-            title: '收费系统'
-          },
-          {
-            value: 15,
-            title: '通信系统'
-          },
-          {
-            value: 22,
-            title: '监控系统'
-          },
-          {
-            value: 64,
-            title: '供配电系统'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: true
-      },
-
-      // 底部第一个图表数据
-      chart6Name: '收费站',
-      chart6Data: {
-        data: [
-          {
-            value: 88,
-            title: '收费系统'
-          },
-          {
-            value: 57,
-            title: '通信系统'
-          },
-          {
-            value: 23,
-            title: '监控系统'
-          },
-          {
-            value: 110,
-            title: '供配电系统'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: true
-      },
-
-      // 底部第一个图表数据
-      chart7Name: '收费站',
-      chart7Data: {
-        data: [
-          {
-            value: 15,
-            title: '收费系统'
-          },
-          {
-            value: 110,
-            title: '通信系统'
-          },
-          {
-            value: 23,
-            title: '监控系统'
-          },
-          {
-            value: 66,
-            title: '供配电系统'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: true
-      },
-
-      // 右边第二个图表数据
-      chart8Name: '收费站',
-      chart8Data: {
-        data: [
-          {
-            value: 100,
-            title: '收费系统'
-          },
-          {
-            value: 57,
-            title: '通信系统'
-          },
-          {
-            value: 66,
-            title: '监控系统'
-          },
-          {
-            value: 32,
-            title: '供配电'
-          },
-          {
-            value: 12,
-            title: '其他'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: false
-      },
-
-      // 右边第一个图表数据
-      chart9Name: '收费站',
-      chart9Data: {
-        data: [
-          {
-            value: 80,
-            title: '收费系统'
-          },
-          {
-            value: 12,
-            title: '通信系统'
-          },
-          {
-            value: 126,
-            title: '监控系统'
-          },
-          {
-            value: 36,
-            title: '供配电系统'
-          },
-          {
-            value: 8,
-            title: '其他'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ]
-      },
-
-      // 右边顶部图表数据
-      chart10Data: {
-        data: [
-          {
-            value: 1315,
-            title: '收费站'
-          },
-          {
-            value: 415,
-            title: '监控中心'
-          },
-          {
-            value: 90,
-            title: '道路外场'
-          },
-          {
-            value: 317,
-            title: '其他'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: true
-      },
-
-      color: [
-        '#00baff',
-        '#3de7c9',
-        '#ffffff',
-        '#ffc53d',
-        '#469f4b'
-      ],
-
-      path: '/rest/datav/device/interface/list',
-      paths: []
-    }
-  },
-  methods: {
-    async init () {
-      const { getAllPaths, getChartsData } = this
-
-      await getAllPaths()
-
-      await getChartsData()
-    },
-    getAllPaths () {
-      const { path, $http: { get } } = this
-
-      return get(path).then(({ code, data }) => {
-        if (code === 'success') {
-          this.paths = data.interfaces
-        } else {
-          console.error('数据返回异常!')
-        }
-      }).catch(e => {
-        console.error('DataV接口数据异常!')
-      })
-    },
-    getChartsData () {
-      const { paths, getChartData, getChartsData } = this
-
-      return Promise.all(paths.map(path => getChartData(path))).then(e => setTimeout(getChartsData, 30000))
-    },
-    async getChartData ({ number, url }) {
-      const { $http: { get }, color } = this
-
-      return get(url).then(({ code, data }) => {
-        if (code === 'success') {
-          this[`chart${number}Name`] = data.name
-          this[`chart${number}Data`] = {
-            data: data.data,
-            color,
-            active: !(number === 2 || number === 8)
-          }
-        } else {
-          console.error(`${number}接口异常`)
-        }
-      }).catch(e => console.error(`${number}接口异常`))
-    }
-  },
-  created () {
-    const { init } = this
-
-    init()
-  }
-}
-</script>
-
-<style lang="less" scoped>
-#electronic-file {
-  width: 100%;
-  height: 100%;
-
-  .header {
-    position: relative;
-    height: 80px;
-
-    .left, .middle, .right {
-      position: absolute;
-    }
-
-    .left {
-      left: 35px;
-      bottom: 0px;
-      font-size: 20px;
-      color: rgba(1, 134, 187, 0.91);
-    }
-
-    .middle {
-      font-size: 33px;
-      left: 50%;
-      bottom: 0px;
-      transform: translateX(-50%);
-    }
-
-    .right {
-      width: 140px;
-      font-size: 18px;
-      right: 130px;
-      bottom: -20px;
-      text-align: center;
-    }
-  }
-
-  .content {
-    height: calc(~"100% - 80px");
-    display: flex;
-    flex-direction: row;
-  }
-
-  .left {
-    width: 22%;
-
-    .left-title {
-      height: 35px;
-      font-size: 32px;
-      text-align: center;
-      line-height: 35px;
-      margin-bottom: 30px;
-    }
-
-    .left-device-num {
-      height: 35px;
-
-      div {
-        height: 35px;
-        float: left;
-        line-height: 35px;
-      }
-
-      :nth-child(1) {
-        font-size: 16px;
-        text-indent: 20px;
-      }
-
-      :nth-child(2) {
-        font-size: 34px;
-        color: rgb(9, 109, 217);
-        font-weight: bold;
-        margin-left: 30px;
-      }
-    }
-
-    .station-name {
-      height: 30px;
-      line-height: 30px;
-      text-indent: 20px;
-      font-size: 16px;
-    }
-
-    .left-chart {
-      width: 100%;
-      height: calc(~"(100% - 252px) / 3");
-    }
-
-    .left-d2 {
-      width: 90%;
-      height: 2px;
-      margin-top: 10px;
-      margin-bottom: 10px;
-    }
-  }
-
-  .right {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    margin-left: 10px;
-  }
-
-  .right-top {
-    display: flex;
-    flex-direction: row;
-    height: 65%;
-  }
-
-  .right-top-left {
-    width: 65%;
-
-    .rtl-header {
-      position: relative;
-      height: 50px;
-      font-size: 32px;
-      line-height: 50px;
-      text-align: center;
-      overflow: hidden;
-
-      .decoration-1 {
-        position: absolute;
-        top: -20px;
-        width: 250px;
-
-        &.dl {
-          left: 0px;
-        }
-
-        &.dr {
-          right: 0px;
-        }
-      }
-    }
-
-    .rtl-device-num {
-      display: flex;
-      height: 70px;
-      justify-content: space-around;
-      line-height: 70px;
-      margin-top: 50px;
-
-      .device-num-container {
-        font-size: 32px;
-
-        .number-show {
-          margin-left: 20px;
-        }
-      }
-    }
-
-    .rtl-chart-container {
-      height: calc(~"100% - 170px");
-      display: flex;
-      flex-direction: row;
-
-      .device-num-container {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        box-sizing: border-box;
-        padding: 120px 0px;
-
-        .num-item {
-          height: 50px;
-          line-height: 50px;
-          display: flex;
-          flex-direction: row;
-          font-family: "Microsoft Yahei", Arial, sans-serif;
-
-          :nth-child(1) {
-            font-size: 34px;
-            text-indent: 35px;
-            font-weight: bold;
-          }
-
-          :nth-child(2) {
-            font-size: 24px;
-            margin-left: 20px;
-          }
-        }
-      }
-
-      .ring-chart {
-        width: 330px;
-      }
-    }
-  }
-
-  .right-top-right {
-    flex: 1;
-    margin-left: 10px;
-
-    .rtr-title {
-      height: 25px;
-      line-height: 25px;
-      font-size: 24px;
-      font-weight: bold;
-    }
-
-    .rtr-chart-container {
-      flex: 1;
-      height: calc(~"100% - 25px");
-      display: flex;
-      flex-direction: row;
-
-      .device-num {
-        width: 30%;
-
-        div {
-          text-align: center;
-        }
-
-        :nth-child(1) {
-          color: rgb(9, 109, 217);
-          font-weight: bold;
-          font-size: 34px;
-          height: 100px;
-          line-height: 100px;
-          margin-top: 30px;
-        }
-
-        :nth-child(2) {
-          font-size: 16px;
-        }
-      }
-
-      .rtr-chart {
-        flex: 1;
-        height: 100%;
-      }
-    }
-  }
-
-  .right-top-right-one, .right-top-right-two {
-    height: calc(~"50% - 5px");
-  }
-
-  .right-top-right-one {
-    margin-bottom: 5px;
-  }
-
-  .right-top-right-two {
-    margin-top: 5px;
-  }
-
-  .right-bottom {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-
-    .rb-item {
-      flex: 1;
-
-      .station-name {
-        font-size: 20px;
-        text-align: center;
-        margin-top: 20px;
-        height: 30px;
-        line-height: 30px;
-      }
-
-      .ring-chart {
-        height: calc(~"100% - 50px");
-      }
-    }
-
-    .rb-d2 {
-      width: 2px;
-      height: 100%;
-      margin-top: 10px;
-    }
-  }
-}
-</style>
diff --git a/src/views/manageDesk/index.vue b/src/views/manageDesk/index.vue
index 434a867..778e9ce 100644
--- a/src/views/manageDesk/index.vue
+++ b/src/views/manageDesk/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="manage-desk">
     <div class="header">
-      <div class="left">{{ technicalSupport }}</div>
+      <div class="left">技术支持:<a :href="technicalSupport" target="_BLANK">{{ technicalSupport }}</a></div>
       <div class="middle">{{ topMiddleTitle }}</div>
       <border-box-2 class="right">
         设备档案馆
@@ -115,8 +115,8 @@ export default {
   name: 'ManageDesk',
   data () {
     return {
-      technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
-      topMiddleTitle: '机电运维管理台',
+      technicalSupport: 'https://github.com/jiaming743/DataV',
+      topMiddleTitle: 'Demo-机电运维管理台',
 
       // 上部左边卡片数据
       chart1Data: {
@@ -141,7 +141,7 @@ export default {
             ],
             fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
             pointColor: '#00db95',
-            type: 'polyline'
+            type: 'smoothline'
           }
         ],
         color: ['#00baff'],
@@ -167,63 +167,39 @@ export default {
       chart3Data: {
         data: [
           {
-            data: [
-              5, '', '', '',
-              2, '', '', '',
-              4, '', '', '',
-              2, '', '', '',
-              2, '', '', '',
-              2
-            ],
-            dashed: true
+            data: [2, 3, 6, 5, 4, 5, 2],
+            type: 'column',
+            columnColor:['rgba(0, 186, 255, 0.5)', 'rgba(0, 186, 255, 0.1)']
           },
           {
-            data: [
-              '', 4, '', '',
-              '', 3, '', '',
-              '', 4, '', '',
-              '', 2, '', '',
-              '', 2, '', '',
-              '', 2
-            ]
+            data: [1, 2, 4, 4, 5, 4, 1],
+            type: 'smoothline',
+            dashed: true,
+            fillColor:['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
           },
           {
-            data: [
-              '', '', 3, '',
-              '', '', 2, '',
-              '', '', 2, '',
-              '', '', 2, '',
-              '', '', 2, '',
-              '', '', 2
-            ]
+            data: [0.5, 1, 3, 3, 4, 3, 0.5],
+            fillColor:['rgba(254, 217, 78, 0.5)', 'rgba(254, 217, 78, 0.1)']
           },
           {
-            data: [
-              '', '', '', 3,
-              '', '', '', 2,
-              '', '', '', 2,
-              '', '', '', 2,
-              '', '', '', 3,
-              '', '', '', 2
-            ]
+            data: [2, 3, 6, 5, 6, 5, 2]
           }
         ],
         x: {
           data: [
-            '', '', '', '', '', '', '10/07',
-            '', '', '', '', '', '', '10/14',
-            '', '', '', '', '', '', '10/21',
-            '', '', ''
+            '', '10/07',
+            '', '10/14',
+            '', '10/21', ''
           ]
         },
         y: {
-          max: 6,
+          max: 8,
           min: 0,
-          num: 6,
           unit: '单位'
         },
         labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
-        color: ['#00baff', '#3de7c9', '#44f23a', '#342432']
+        color: ['#00baff', '#3de7c9', '#f5d94e', '#ff5ca9'],
+        boundaryGap: true
       },
 
       // 底部左边第一个图表数据
@@ -415,58 +391,8 @@ export default {
           }
         ],
         showItemNum: 4
-      },
-
-      path: '/rest/datav/manage/interface/list',
-      paths: []
+      }
     }
-  },
-  methods: {
-    async init () {
-      const { getAllPaths, getChartsData } = this
-
-      await getAllPaths()
-
-      await getChartsData()
-    },
-    getAllPaths () {
-      const { path, $http: { get } } = this
-
-      return get(path).then(({ code, data }) => {
-        if (code === 'success') {
-          this.paths = data.interfaces
-
-          this.topMiddleTitle = data.title
-        } else {
-          console.error('数据返回异常!')
-        }
-      }).catch(e => {
-        console.error('DataV接口数据异常!')
-      })
-    },
-    getChartsData () {
-      const { paths, getChartData, getChartsData } = this
-
-      return Promise.all(paths.map(path => getChartData(path))).then(e => setTimeout(getChartsData, 30000))
-    },
-    async getChartData ({ number, url }) {
-      const { $http: { get } } = this
-
-      if (!url) return
-
-      return get(url).then(({ code, data }) => {
-        if (code === 'success') {
-          this[`chart${number}Data`] = data
-        } else {
-          console.error(`${number}接口异常`)
-        }
-      }).catch(e => console.error(`${number}接口异常`))
-    }
-  },
-  created () {
-    const { init } = this
-
-    init()
   }
 }
 </script>
@@ -475,6 +401,7 @@ export default {
 #manage-desk {
   width: 100%;
   height: 100%;
+  color: #fff;
 
   .header {
     position: relative;
@@ -489,6 +416,15 @@ export default {
       bottom: 0px;
       font-size: 20px;
       color: rgba(1, 134, 187, 0.91);
+
+      a {
+
+        &:hover,
+        &:active,
+        &:visited {
+          color: rgba(1, 134, 187, 0.91);
+        }
+      }
     }
 
     .middle {
diff --git a/vue.config.js b/vue.config.js
index 90892f8..72122e0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,15 +1,16 @@
 module.exports = {
   devServer: {
     port: 6661,
-    proxy: {
-      '/rest': {
-        // target: 'http://yd.jdyw.prod.hndfsj.net',
-        target: 'http://192.168.10.122:38088',    //mashuai
-        // target: 'http://192.168.10.125:38080',    //qianshuo
-        pathRewrite: {
-          '^/rest': '/rest'
-        }
-      }
-    }
-  }
+    // proxy: {
+    //   '/rest': {
+    //     // target: 'http://yd.jdyw.prod.hndfsj.net',
+    //     target: 'http://192.168.10.122:38088',    //mashuai
+    //     // target: 'http://192.168.10.125:38080',    //qianshuo
+    //     pathRewrite: {
+    //       '^/rest': '/rest'
+    //     }
+    //   }
+    // }
+  },
+  baseUrl: './'
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 172796d..7595d10 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3300,6 +3300,10 @@ hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "http://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
 
+highlight.js@^9.13.1:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "http://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -6621,6 +6625,10 @@ vue-loader@^15.4.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "http://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
