diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
new file mode 100644
index 0000000..368f5a5
--- /dev/null
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="header-container">
+    <div class="text">智慧厨房AIOT物联平台驾驶舱看板</div>
+    <switchVue :changeCompon="changeCompon"></switchVue>
+  </div>
+</template>
+
+<script>
+import switchVue from './switch.vue';
+export default {
+    name:'headerDashboard',
+    components:{
+      switchVue
+    },
+    props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   .text{
+    font-size: 25px;
+    display: flex;
+    align-items: center;
+   }
+}
+</style>
\ No newline at end of file

diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
new file mode 100644
index 0000000..368f5a5
--- /dev/null
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="header-container">
+    <div class="text">智慧厨房AIOT物联平台驾驶舱看板</div>
+    <switchVue :changeCompon="changeCompon"></switchVue>
+  </div>
+</template>
+
+<script>
+import switchVue from './switch.vue';
+export default {
+    name:'headerDashboard',
+    components:{
+      switchVue
+    },
+    props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   .text{
+    font-size: 25px;
+    display: flex;
+    align-items: center;
+   }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue
new file mode 100644
index 0000000..58a493d
--- /dev/null
+++ b/src/views/dashboard/components/switch.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+      <ul>
+        <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
+        <svg-icon :icon-class="btn.icon" :style="{'color':active === index ? '#409EFF' : ''}"></svg-icon>
+        <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{btn.name}}</span>
+        </li>
+      </ul>
+  </div>
+</template>
+
+<script>
+import SvgIcon from '@/components/SvgIcon'
+export default {
+   name:'switchBtns',
+   components:{
+    SvgIcon
+   },
+   props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    },
+   data() {
+    return{
+        btns:[
+            {
+                name:'设备面板',
+                compon:'devicePanel',
+                icon:'device-panel'
+            },
+            {
+                name:'经营面板',
+                compon:'managementPanel',
+                icon:'management-panel'
+            },
+            {
+                name:'供应商面板',
+                compon:'supplierPanel',
+                icon:'supplier-panel'
+            }
+        ],
+        active:0
+    }
+   },
+   methods:{
+    changeBtn(btn, index) {
+        this.active = index
+        this.changeCompon(btn.compon)
+    }
+   },
+}
+</script>
+<style lang="scss" scoped>
+ .container{
+    ul{
+        list-style: none;
+        display: flex;
+        font-size: 25px;
+        li{
+            margin-left: 20px;
+            &:hover{
+                cursor: pointer;
+            }
+            ::v-deep .svg-icon{
+                width: 32px;
+                height: 32px;
+                vertical-align: middle;
+            }
+            .title{
+                padding-left: 10px;
+            }
+        }
+    }
+ }
+</style>
\ No newline at end of file

diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
new file mode 100644
index 0000000..368f5a5
--- /dev/null
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="header-container">
+    <div class="text">智慧厨房AIOT物联平台驾驶舱看板</div>
+    <switchVue :changeCompon="changeCompon"></switchVue>
+  </div>
+</template>
+
+<script>
+import switchVue from './switch.vue';
+export default {
+    name:'headerDashboard',
+    components:{
+      switchVue
+    },
+    props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   .text{
+    font-size: 25px;
+    display: flex;
+    align-items: center;
+   }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue
new file mode 100644
index 0000000..58a493d
--- /dev/null
+++ b/src/views/dashboard/components/switch.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+      <ul>
+        <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
+        <svg-icon :icon-class="btn.icon" :style="{'color':active === index ? '#409EFF' : ''}"></svg-icon>
+        <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{btn.name}}</span>
+        </li>
+      </ul>
+  </div>
+</template>
+
+<script>
+import SvgIcon from '@/components/SvgIcon'
+export default {
+   name:'switchBtns',
+   components:{
+    SvgIcon
+   },
+   props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    },
+   data() {
+    return{
+        btns:[
+            {
+                name:'设备面板',
+                compon:'devicePanel',
+                icon:'device-panel'
+            },
+            {
+                name:'经营面板',
+                compon:'managementPanel',
+                icon:'management-panel'
+            },
+            {
+                name:'供应商面板',
+                compon:'supplierPanel',
+                icon:'supplier-panel'
+            }
+        ],
+        active:0
+    }
+   },
+   methods:{
+    changeBtn(btn, index) {
+        this.active = index
+        this.changeCompon(btn.compon)
+    }
+   },
+}
+</script>
+<style lang="scss" scoped>
+ .container{
+    ul{
+        list-style: none;
+        display: flex;
+        font-size: 25px;
+        li{
+            margin-left: 20px;
+            &:hover{
+                cursor: pointer;
+            }
+            ::v-deep .svg-icon{
+                width: 32px;
+                height: 32px;
+                vertical-align: middle;
+            }
+            .title{
+                padding-left: 10px;
+            }
+        }
+    }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue
new file mode 100644
index 0000000..c543e97
--- /dev/null
+++ b/src/views/dashboard/devicePanel.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>devicePanel</div>
+</template>
+
+<script>
+export default {
+    name:'devicePanel'
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
new file mode 100644
index 0000000..368f5a5
--- /dev/null
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="header-container">
+    <div class="text">智慧厨房AIOT物联平台驾驶舱看板</div>
+    <switchVue :changeCompon="changeCompon"></switchVue>
+  </div>
+</template>
+
+<script>
+import switchVue from './switch.vue';
+export default {
+    name:'headerDashboard',
+    components:{
+      switchVue
+    },
+    props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   .text{
+    font-size: 25px;
+    display: flex;
+    align-items: center;
+   }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue
new file mode 100644
index 0000000..58a493d
--- /dev/null
+++ b/src/views/dashboard/components/switch.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+      <ul>
+        <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
+        <svg-icon :icon-class="btn.icon" :style="{'color':active === index ? '#409EFF' : ''}"></svg-icon>
+        <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{btn.name}}</span>
+        </li>
+      </ul>
+  </div>
+</template>
+
+<script>
+import SvgIcon from '@/components/SvgIcon'
+export default {
+   name:'switchBtns',
+   components:{
+    SvgIcon
+   },
+   props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    },
+   data() {
+    return{
+        btns:[
+            {
+                name:'设备面板',
+                compon:'devicePanel',
+                icon:'device-panel'
+            },
+            {
+                name:'经营面板',
+                compon:'managementPanel',
+                icon:'management-panel'
+            },
+            {
+                name:'供应商面板',
+                compon:'supplierPanel',
+                icon:'supplier-panel'
+            }
+        ],
+        active:0
+    }
+   },
+   methods:{
+    changeBtn(btn, index) {
+        this.active = index
+        this.changeCompon(btn.compon)
+    }
+   },
+}
+</script>
+<style lang="scss" scoped>
+ .container{
+    ul{
+        list-style: none;
+        display: flex;
+        font-size: 25px;
+        li{
+            margin-left: 20px;
+            &:hover{
+                cursor: pointer;
+            }
+            ::v-deep .svg-icon{
+                width: 32px;
+                height: 32px;
+                vertical-align: middle;
+            }
+            .title{
+                padding-left: 10px;
+            }
+        }
+    }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue
new file mode 100644
index 0000000..c543e97
--- /dev/null
+++ b/src/views/dashboard/devicePanel.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>devicePanel</div>
+</template>
+
+<script>
+export default {
+    name:'devicePanel'
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index b87210d..41cb204 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,17 +1,24 @@
-<!--欢迎页-->
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">
-      驾驶舱
-    </div>
+    <dashboardHeaderVue :changeCompon="changeCompon"></dashboardHeaderVue>
+    <component :is="current"></component>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-
+import dashboardHeaderVue from './components/dashboardHeader.vue';
+import devicePanel from './devicePanel.vue';
+import managementPanel from './managementPanel.vue';
+import supplierPanel from './supplierPanel.vue';
 export default {
   name: 'Dashboard',
+  components:{
+    dashboardHeaderVue,
+    devicePanel,
+    managementPanel,
+    supplierPanel
+  },
   computed: {
     ...mapGetters([
       'name',
@@ -22,6 +29,16 @@
       'communications',
       'area'
     ])
+  },
+  data(){
+    return {
+      current:'devicePanel'
+    }
+  },
+  methods:{
+    changeCompon(compon){
+      this.current = compon
+  }
   }
 }
 </script>
@@ -29,11 +46,15 @@
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard {
   &-container {
-    margin: 30px;
+    margin: 10px 20px;
   }
   &-text {
     font-size: 30px;
     line-height: 46px;
   }
 }
+*{
+  margin: 0;
+  padding: 0;
+}
 </style>

diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
new file mode 100644
index 0000000..368f5a5
--- /dev/null
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="header-container">
+    <div class="text">智慧厨房AIOT物联平台驾驶舱看板</div>
+    <switchVue :changeCompon="changeCompon"></switchVue>
+  </div>
+</template>
+
+<script>
+import switchVue from './switch.vue';
+export default {
+    name:'headerDashboard',
+    components:{
+      switchVue
+    },
+    props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   .text{
+    font-size: 25px;
+    display: flex;
+    align-items: center;
+   }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue
new file mode 100644
index 0000000..58a493d
--- /dev/null
+++ b/src/views/dashboard/components/switch.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+      <ul>
+        <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
+        <svg-icon :icon-class="btn.icon" :style="{'color':active === index ? '#409EFF' : ''}"></svg-icon>
+        <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{btn.name}}</span>
+        </li>
+      </ul>
+  </div>
+</template>
+
+<script>
+import SvgIcon from '@/components/SvgIcon'
+export default {
+   name:'switchBtns',
+   components:{
+    SvgIcon
+   },
+   props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    },
+   data() {
+    return{
+        btns:[
+            {
+                name:'设备面板',
+                compon:'devicePanel',
+                icon:'device-panel'
+            },
+            {
+                name:'经营面板',
+                compon:'managementPanel',
+                icon:'management-panel'
+            },
+            {
+                name:'供应商面板',
+                compon:'supplierPanel',
+                icon:'supplier-panel'
+            }
+        ],
+        active:0
+    }
+   },
+   methods:{
+    changeBtn(btn, index) {
+        this.active = index
+        this.changeCompon(btn.compon)
+    }
+   },
+}
+</script>
+<style lang="scss" scoped>
+ .container{
+    ul{
+        list-style: none;
+        display: flex;
+        font-size: 25px;
+        li{
+            margin-left: 20px;
+            &:hover{
+                cursor: pointer;
+            }
+            ::v-deep .svg-icon{
+                width: 32px;
+                height: 32px;
+                vertical-align: middle;
+            }
+            .title{
+                padding-left: 10px;
+            }
+        }
+    }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue
new file mode 100644
index 0000000..c543e97
--- /dev/null
+++ b/src/views/dashboard/devicePanel.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>devicePanel</div>
+</template>
+
+<script>
+export default {
+    name:'devicePanel'
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index b87210d..41cb204 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,17 +1,24 @@
-<!--欢迎页-->
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">
-      驾驶舱
-    </div>
+    <dashboardHeaderVue :changeCompon="changeCompon"></dashboardHeaderVue>
+    <component :is="current"></component>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-
+import dashboardHeaderVue from './components/dashboardHeader.vue';
+import devicePanel from './devicePanel.vue';
+import managementPanel from './managementPanel.vue';
+import supplierPanel from './supplierPanel.vue';
 export default {
   name: 'Dashboard',
+  components:{
+    dashboardHeaderVue,
+    devicePanel,
+    managementPanel,
+    supplierPanel
+  },
   computed: {
     ...mapGetters([
       'name',
@@ -22,6 +29,16 @@
       'communications',
       'area'
     ])
+  },
+  data(){
+    return {
+      current:'devicePanel'
+    }
+  },
+  methods:{
+    changeCompon(compon){
+      this.current = compon
+  }
   }
 }
 </script>
@@ -29,11 +46,15 @@
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard {
   &-container {
-    margin: 30px;
+    margin: 10px 20px;
   }
   &-text {
     font-size: 30px;
     line-height: 46px;
   }
 }
+*{
+  margin: 0;
+  padding: 0;
+}
 </style>
diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue
new file mode 100644
index 0000000..13d930c
--- /dev/null
+++ b/src/views/dashboard/managementPanel.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>managementPanel</div>
+</template>
+
+<script>
+export default {
+    name:'managementPanel'
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
new file mode 100644
index 0000000..368f5a5
--- /dev/null
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="header-container">
+    <div class="text">智慧厨房AIOT物联平台驾驶舱看板</div>
+    <switchVue :changeCompon="changeCompon"></switchVue>
+  </div>
+</template>
+
+<script>
+import switchVue from './switch.vue';
+export default {
+    name:'headerDashboard',
+    components:{
+      switchVue
+    },
+    props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   .text{
+    font-size: 25px;
+    display: flex;
+    align-items: center;
+   }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue
new file mode 100644
index 0000000..58a493d
--- /dev/null
+++ b/src/views/dashboard/components/switch.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+      <ul>
+        <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
+        <svg-icon :icon-class="btn.icon" :style="{'color':active === index ? '#409EFF' : ''}"></svg-icon>
+        <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{btn.name}}</span>
+        </li>
+      </ul>
+  </div>
+</template>
+
+<script>
+import SvgIcon from '@/components/SvgIcon'
+export default {
+   name:'switchBtns',
+   components:{
+    SvgIcon
+   },
+   props:{
+      changeCompon:{
+        type:Function,
+        required:true
+      }
+    },
+   data() {
+    return{
+        btns:[
+            {
+                name:'设备面板',
+                compon:'devicePanel',
+                icon:'device-panel'
+            },
+            {
+                name:'经营面板',
+                compon:'managementPanel',
+                icon:'management-panel'
+            },
+            {
+                name:'供应商面板',
+                compon:'supplierPanel',
+                icon:'supplier-panel'
+            }
+        ],
+        active:0
+    }
+   },
+   methods:{
+    changeBtn(btn, index) {
+        this.active = index
+        this.changeCompon(btn.compon)
+    }
+   },
+}
+</script>
+<style lang="scss" scoped>
+ .container{
+    ul{
+        list-style: none;
+        display: flex;
+        font-size: 25px;
+        li{
+            margin-left: 20px;
+            &:hover{
+                cursor: pointer;
+            }
+            ::v-deep .svg-icon{
+                width: 32px;
+                height: 32px;
+                vertical-align: middle;
+            }
+            .title{
+                padding-left: 10px;
+            }
+        }
+    }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue
new file mode 100644
index 0000000..c543e97
--- /dev/null
+++ b/src/views/dashboard/devicePanel.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>devicePanel</div>
+</template>
+
+<script>
+export default {
+    name:'devicePanel'
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index b87210d..41cb204 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,17 +1,24 @@
-<!--欢迎页-->
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">
-      驾驶舱
-    </div>
+    <dashboardHeaderVue :changeCompon="changeCompon"></dashboardHeaderVue>
+    <component :is="current"></component>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-
+import dashboardHeaderVue from './components/dashboardHeader.vue';
+import devicePanel from './devicePanel.vue';
+import managementPanel from './managementPanel.vue';
+import supplierPanel from './supplierPanel.vue';
 export default {
   name: 'Dashboard',
+  components:{
+    dashboardHeaderVue,
+    devicePanel,
+    managementPanel,
+    supplierPanel
+  },
   computed: {
     ...mapGetters([
       'name',
@@ -22,6 +29,16 @@
       'communications',
       'area'
     ])
+  },
+  data(){
+    return {
+      current:'devicePanel'
+    }
+  },
+  methods:{
+    changeCompon(compon){
+      this.current = compon
+  }
   }
 }
 </script>
@@ -29,11 +46,15 @@
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard {
   &-container {
-    margin: 30px;
+    margin: 10px 20px;
   }
   &-text {
     font-size: 30px;
     line-height: 46px;
   }
 }
+*{
+  margin: 0;
+  padding: 0;
+}
 </style>
diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue
new file mode 100644
index 0000000..13d930c
--- /dev/null
+++ b/src/views/dashboard/managementPanel.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>managementPanel</div>
+</template>
+
+<script>
+export default {
+    name:'managementPanel'
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/supplierPanel.vue b/src/views/dashboard/supplierPanel.vue
new file mode 100644
index 0000000..9dcf0df
--- /dev/null
+++ b/src/views/dashboard/supplierPanel.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    supplierPanel
+  </div>
+</template>
+
+<script>
+export default {
+    name:'supplierPanel'
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file