diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file

diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file

diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file

diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ 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/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ 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/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ 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/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ 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 b0e4466..41cb204 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,16 +1,24 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">
-      欢迎您，{{ name }}
-    </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',
@@ -21,6 +29,16 @@
       'communications',
       'area'
     ])
+  },
+  data(){
+    return {
+      current:'devicePanel'
+    }
+  },
+  methods:{
+    changeCompon(compon){
+      this.current = compon
+  }
   }
 }
 </script>
@@ -28,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/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ 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 b0e4466..41cb204 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,16 +1,24 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">
-      欢迎您，{{ name }}
-    </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',
@@ -21,6 +29,16 @@
       'communications',
       'area'
     ])
+  },
+  data(){
+    return {
+      current:'devicePanel'
+    }
+  },
+  methods:{
+    changeCompon(compon){
+      this.current = compon
+  }
   }
 }
 </script>
@@ -28,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/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ 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 b0e4466..41cb204 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,16 +1,24 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">
-      欢迎您，{{ name }}
-    </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',
@@ -21,6 +29,16 @@
       'communications',
       'area'
     ])
+  },
+  data(){
+    return {
+      current:'devicePanel'
+    }
+  },
+  methods:{
+    changeCompon(compon){
+      this.current = compon
+  }
   }
 }
 </script>
@@ -28,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