diff --git a/src/views/dashboard/components/chart.vue b/src/views/dashboard/components/chart.vue
new file mode 100644
index 0000000..4bc7e2f
--- /dev/null
+++ b/src/views/dashboard/components/chart.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Description: 总览大屏布局
+ * @Author: 王晓颖
+ * @Date: 2020-09-01 10:34:35
+ -->
+<template>
+  <div ref="container" class="container">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="人员管理">
+            <staff-statistic />
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="环卫设施管理">
+            <device-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="今日作业情况">
+            <job-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 10px;">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="垃圾转运作业管理">
+            <waste-transfer type="waste"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="路面清扫作业管理">
+            <waste-transfer type="clean"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="公厕保洁作业管理">
+            <waste-transfer type="toilet"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import ChartLayout from './layout.vue'
+import StaffStatistic from '@/views/overview/components/staffStatistic'
+import WasteTransfer from '@/views/overview/components/wasteTransfer'
+import DeviceStatistic from '@/views/overview/components/deviceStatistic'
+import JobStatistic from '@/views/overview/components/jobStatistic'
+export default {
+  name: 'Overview',
+  components: { JobStatistic, DeviceStatistic, WasteTransfer, StaffStatistic, ChartLayout },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    // const that = this
+    // window.onload = () => {
+    //   that.calSize()
+    // }
+    // window.onresize = () => {
+    //   that.calSize()
+    // }
+  },
+  methods: {
+    calSize() {
+      const height = document.body.clientHeight
+      const headerHeight = this.$refs.head.$el.clientHeight
+      const bodyHeight = height - headerHeight
+      this.$refs.body.height = bodyHeight
+      console.log('calSize:' + bodyHeight)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.box-card {
+  height: 300px;
+  padding: 0px;
+}
+  .container{
+    height: 600px;
+    width:100%;
+    /*background: url("../../assets/overview/background2.jpg") no-repeat;*/
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    // background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+  .body{
+    position:relative;
+    margin-top:3rem;
+    flex:1;
+    width:100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .body-left, .body-right{
+    width:280px;
+    height:95%;
+    flex:1;
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .left-chart-container{
+      flex:1;
+      padding:0px 10px;
+    }
+  }
+  .map-body{
+    /*width: 70%;*/
+    height:95%;
+    display: flex;
+    justify-content: center;
+    flex:3;
+    .middle{
+      width:100%;
+      height:100%;
+      display: flex;
+      justify-content: center;
+      div{
+        flex: 1;
+      }
+    }
+  }
+</style>

diff --git a/src/views/dashboard/components/chart.vue b/src/views/dashboard/components/chart.vue
new file mode 100644
index 0000000..4bc7e2f
--- /dev/null
+++ b/src/views/dashboard/components/chart.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Description: 总览大屏布局
+ * @Author: 王晓颖
+ * @Date: 2020-09-01 10:34:35
+ -->
+<template>
+  <div ref="container" class="container">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="人员管理">
+            <staff-statistic />
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="环卫设施管理">
+            <device-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="今日作业情况">
+            <job-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 10px;">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="垃圾转运作业管理">
+            <waste-transfer type="waste"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="路面清扫作业管理">
+            <waste-transfer type="clean"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="公厕保洁作业管理">
+            <waste-transfer type="toilet"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import ChartLayout from './layout.vue'
+import StaffStatistic from '@/views/overview/components/staffStatistic'
+import WasteTransfer from '@/views/overview/components/wasteTransfer'
+import DeviceStatistic from '@/views/overview/components/deviceStatistic'
+import JobStatistic from '@/views/overview/components/jobStatistic'
+export default {
+  name: 'Overview',
+  components: { JobStatistic, DeviceStatistic, WasteTransfer, StaffStatistic, ChartLayout },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    // const that = this
+    // window.onload = () => {
+    //   that.calSize()
+    // }
+    // window.onresize = () => {
+    //   that.calSize()
+    // }
+  },
+  methods: {
+    calSize() {
+      const height = document.body.clientHeight
+      const headerHeight = this.$refs.head.$el.clientHeight
+      const bodyHeight = height - headerHeight
+      this.$refs.body.height = bodyHeight
+      console.log('calSize:' + bodyHeight)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.box-card {
+  height: 300px;
+  padding: 0px;
+}
+  .container{
+    height: 600px;
+    width:100%;
+    /*background: url("../../assets/overview/background2.jpg") no-repeat;*/
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    // background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+  .body{
+    position:relative;
+    margin-top:3rem;
+    flex:1;
+    width:100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .body-left, .body-right{
+    width:280px;
+    height:95%;
+    flex:1;
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .left-chart-container{
+      flex:1;
+      padding:0px 10px;
+    }
+  }
+  .map-body{
+    /*width: 70%;*/
+    height:95%;
+    display: flex;
+    justify-content: center;
+    flex:3;
+    .middle{
+      width:100%;
+      height:100%;
+      display: flex;
+      justify-content: center;
+      div{
+        flex: 1;
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/layout.vue b/src/views/dashboard/components/layout.vue
new file mode 100644
index 0000000..2e4393d
--- /dev/null
+++ b/src/views/dashboard/components/layout.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="chart-layout" @click="refreshData">
+    <Title2 class="title">{{ title }}</Title2>
+    <!--title 占高0.18rem-->
+    <div class="module-corner" style="height: 220px; position:relative">
+      <div style="width: 100%; height: 100%;padding:0rem;position:absolute;z-index:1">
+        <slot/>
+      </div>
+      <slot name="corner"/>
+
+    </div>
+    <!--<corner1/>-->
+  </div>
+</template>
+
+<script>
+import Title2 from '../../../components/BigData/Title/Title2.vue'
+import Corner1 from '../../../components/BigData/Corner/Corner1'
+export default {
+  name: 'ChartLayout',
+  components: { Corner1, Title2 },
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    }
+  },
+  methods: {
+    refreshData() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.chart-layout{
+  height: 100%;
+  width: 100%;
+  background-image: url('../../../assets/overview/frame.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding:5px;
+  .title{
+    color: white;
+  }
+  .highlight{
+    height: 1px;
+    width:100%;
+  }
+}
+.chart-layout:hover .title
+{
+  opacity: 1;
+}
+</style>

diff --git a/src/views/dashboard/components/chart.vue b/src/views/dashboard/components/chart.vue
new file mode 100644
index 0000000..4bc7e2f
--- /dev/null
+++ b/src/views/dashboard/components/chart.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Description: 总览大屏布局
+ * @Author: 王晓颖
+ * @Date: 2020-09-01 10:34:35
+ -->
+<template>
+  <div ref="container" class="container">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="人员管理">
+            <staff-statistic />
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="环卫设施管理">
+            <device-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="今日作业情况">
+            <job-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 10px;">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="垃圾转运作业管理">
+            <waste-transfer type="waste"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="路面清扫作业管理">
+            <waste-transfer type="clean"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="公厕保洁作业管理">
+            <waste-transfer type="toilet"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import ChartLayout from './layout.vue'
+import StaffStatistic from '@/views/overview/components/staffStatistic'
+import WasteTransfer from '@/views/overview/components/wasteTransfer'
+import DeviceStatistic from '@/views/overview/components/deviceStatistic'
+import JobStatistic from '@/views/overview/components/jobStatistic'
+export default {
+  name: 'Overview',
+  components: { JobStatistic, DeviceStatistic, WasteTransfer, StaffStatistic, ChartLayout },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    // const that = this
+    // window.onload = () => {
+    //   that.calSize()
+    // }
+    // window.onresize = () => {
+    //   that.calSize()
+    // }
+  },
+  methods: {
+    calSize() {
+      const height = document.body.clientHeight
+      const headerHeight = this.$refs.head.$el.clientHeight
+      const bodyHeight = height - headerHeight
+      this.$refs.body.height = bodyHeight
+      console.log('calSize:' + bodyHeight)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.box-card {
+  height: 300px;
+  padding: 0px;
+}
+  .container{
+    height: 600px;
+    width:100%;
+    /*background: url("../../assets/overview/background2.jpg") no-repeat;*/
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    // background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+  .body{
+    position:relative;
+    margin-top:3rem;
+    flex:1;
+    width:100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .body-left, .body-right{
+    width:280px;
+    height:95%;
+    flex:1;
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .left-chart-container{
+      flex:1;
+      padding:0px 10px;
+    }
+  }
+  .map-body{
+    /*width: 70%;*/
+    height:95%;
+    display: flex;
+    justify-content: center;
+    flex:3;
+    .middle{
+      width:100%;
+      height:100%;
+      display: flex;
+      justify-content: center;
+      div{
+        flex: 1;
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/layout.vue b/src/views/dashboard/components/layout.vue
new file mode 100644
index 0000000..2e4393d
--- /dev/null
+++ b/src/views/dashboard/components/layout.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="chart-layout" @click="refreshData">
+    <Title2 class="title">{{ title }}</Title2>
+    <!--title 占高0.18rem-->
+    <div class="module-corner" style="height: 220px; position:relative">
+      <div style="width: 100%; height: 100%;padding:0rem;position:absolute;z-index:1">
+        <slot/>
+      </div>
+      <slot name="corner"/>
+
+    </div>
+    <!--<corner1/>-->
+  </div>
+</template>
+
+<script>
+import Title2 from '../../../components/BigData/Title/Title2.vue'
+import Corner1 from '../../../components/BigData/Corner/Corner1'
+export default {
+  name: 'ChartLayout',
+  components: { Corner1, Title2 },
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    }
+  },
+  methods: {
+    refreshData() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.chart-layout{
+  height: 100%;
+  width: 100%;
+  background-image: url('../../../assets/overview/frame.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding:5px;
+  .title{
+    color: white;
+  }
+  .highlight{
+    height: 1px;
+    width:100%;
+  }
+}
+.chart-layout:hover .title
+{
+  opacity: 1;
+}
+</style>
diff --git a/src/views/dashboard/components/quickFunction.vue b/src/views/dashboard/components/quickFunction.vue
index 469d136..7517e44 100644
--- a/src/views/dashboard/components/quickFunction.vue
+++ b/src/views/dashboard/components/quickFunction.vue
@@ -12,7 +12,7 @@
             <span>常用功能</span>
           </div>
           <div class="box-body">
-            <div v-for="item of funcs">
+            <div v-for="item of funcs" :key="item" @click="handleClickBox(item)">
               <div v-if="hasPerm(item.permission)" class="box-item">
                 <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
                 {{ item.name }}
@@ -39,6 +39,13 @@
         { name: '公厕保洁作业统计', icon: 'icon-clean2', path: '/assesment/toilet', permission: '/sanitation/assesment/toilet' }
       ]
     }
+  },
+  methods: {
+    // 点击盒子跳转页面
+    handleClickBox(item) {
+      console.log('点击获取的参数', item)
+      this.$router.push(item.path)
+    }
   }
 }
 </script>

diff --git a/src/views/dashboard/components/chart.vue b/src/views/dashboard/components/chart.vue
new file mode 100644
index 0000000..4bc7e2f
--- /dev/null
+++ b/src/views/dashboard/components/chart.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Description: 总览大屏布局
+ * @Author: 王晓颖
+ * @Date: 2020-09-01 10:34:35
+ -->
+<template>
+  <div ref="container" class="container">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="人员管理">
+            <staff-statistic />
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="环卫设施管理">
+            <device-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="今日作业情况">
+            <job-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 10px;">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="垃圾转运作业管理">
+            <waste-transfer type="waste"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="路面清扫作业管理">
+            <waste-transfer type="clean"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="公厕保洁作业管理">
+            <waste-transfer type="toilet"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import ChartLayout from './layout.vue'
+import StaffStatistic from '@/views/overview/components/staffStatistic'
+import WasteTransfer from '@/views/overview/components/wasteTransfer'
+import DeviceStatistic from '@/views/overview/components/deviceStatistic'
+import JobStatistic from '@/views/overview/components/jobStatistic'
+export default {
+  name: 'Overview',
+  components: { JobStatistic, DeviceStatistic, WasteTransfer, StaffStatistic, ChartLayout },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    // const that = this
+    // window.onload = () => {
+    //   that.calSize()
+    // }
+    // window.onresize = () => {
+    //   that.calSize()
+    // }
+  },
+  methods: {
+    calSize() {
+      const height = document.body.clientHeight
+      const headerHeight = this.$refs.head.$el.clientHeight
+      const bodyHeight = height - headerHeight
+      this.$refs.body.height = bodyHeight
+      console.log('calSize:' + bodyHeight)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.box-card {
+  height: 300px;
+  padding: 0px;
+}
+  .container{
+    height: 600px;
+    width:100%;
+    /*background: url("../../assets/overview/background2.jpg") no-repeat;*/
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    // background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+  .body{
+    position:relative;
+    margin-top:3rem;
+    flex:1;
+    width:100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .body-left, .body-right{
+    width:280px;
+    height:95%;
+    flex:1;
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .left-chart-container{
+      flex:1;
+      padding:0px 10px;
+    }
+  }
+  .map-body{
+    /*width: 70%;*/
+    height:95%;
+    display: flex;
+    justify-content: center;
+    flex:3;
+    .middle{
+      width:100%;
+      height:100%;
+      display: flex;
+      justify-content: center;
+      div{
+        flex: 1;
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/layout.vue b/src/views/dashboard/components/layout.vue
new file mode 100644
index 0000000..2e4393d
--- /dev/null
+++ b/src/views/dashboard/components/layout.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="chart-layout" @click="refreshData">
+    <Title2 class="title">{{ title }}</Title2>
+    <!--title 占高0.18rem-->
+    <div class="module-corner" style="height: 220px; position:relative">
+      <div style="width: 100%; height: 100%;padding:0rem;position:absolute;z-index:1">
+        <slot/>
+      </div>
+      <slot name="corner"/>
+
+    </div>
+    <!--<corner1/>-->
+  </div>
+</template>
+
+<script>
+import Title2 from '../../../components/BigData/Title/Title2.vue'
+import Corner1 from '../../../components/BigData/Corner/Corner1'
+export default {
+  name: 'ChartLayout',
+  components: { Corner1, Title2 },
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    }
+  },
+  methods: {
+    refreshData() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.chart-layout{
+  height: 100%;
+  width: 100%;
+  background-image: url('../../../assets/overview/frame.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding:5px;
+  .title{
+    color: white;
+  }
+  .highlight{
+    height: 1px;
+    width:100%;
+  }
+}
+.chart-layout:hover .title
+{
+  opacity: 1;
+}
+</style>
diff --git a/src/views/dashboard/components/quickFunction.vue b/src/views/dashboard/components/quickFunction.vue
index 469d136..7517e44 100644
--- a/src/views/dashboard/components/quickFunction.vue
+++ b/src/views/dashboard/components/quickFunction.vue
@@ -12,7 +12,7 @@
             <span>常用功能</span>
           </div>
           <div class="box-body">
-            <div v-for="item of funcs">
+            <div v-for="item of funcs" :key="item" @click="handleClickBox(item)">
               <div v-if="hasPerm(item.permission)" class="box-item">
                 <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
                 {{ item.name }}
@@ -39,6 +39,13 @@
         { name: '公厕保洁作业统计', icon: 'icon-clean2', path: '/assesment/toilet', permission: '/sanitation/assesment/toilet' }
       ]
     }
+  },
+  methods: {
+    // 点击盒子跳转页面
+    handleClickBox(item) {
+      console.log('点击获取的参数', item)
+      this.$router.push(item.path)
+    }
   }
 }
 </script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 3d21092..bcf0b8a 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="dashboard-container">
-    <panel-group/>
-    <quick-function/>
+    <!-- <panel-group/> -->
+    <ChartCom />
+    <quick-function style="margin-top: 20px;"/>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import PanelGroup from './components/PanelGroup'
+import ChartCom from './components/chart.vue'
 import QuickFunction from './components/quickFunction'
 
 export default {
   name: 'Dashboard',
-  components: { QuickFunction, PanelGroup },
+  components: { QuickFunction, PanelGroup, ChartCom },
   computed: {
     ...mapGetters([
       'name',

diff --git a/src/views/dashboard/components/chart.vue b/src/views/dashboard/components/chart.vue
new file mode 100644
index 0000000..4bc7e2f
--- /dev/null
+++ b/src/views/dashboard/components/chart.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Description: 总览大屏布局
+ * @Author: 王晓颖
+ * @Date: 2020-09-01 10:34:35
+ -->
+<template>
+  <div ref="container" class="container">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="人员管理">
+            <staff-statistic />
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="环卫设施管理">
+            <device-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="今日作业情况">
+            <job-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 10px;">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="垃圾转运作业管理">
+            <waste-transfer type="waste"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="路面清扫作业管理">
+            <waste-transfer type="clean"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="公厕保洁作业管理">
+            <waste-transfer type="toilet"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import ChartLayout from './layout.vue'
+import StaffStatistic from '@/views/overview/components/staffStatistic'
+import WasteTransfer from '@/views/overview/components/wasteTransfer'
+import DeviceStatistic from '@/views/overview/components/deviceStatistic'
+import JobStatistic from '@/views/overview/components/jobStatistic'
+export default {
+  name: 'Overview',
+  components: { JobStatistic, DeviceStatistic, WasteTransfer, StaffStatistic, ChartLayout },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    // const that = this
+    // window.onload = () => {
+    //   that.calSize()
+    // }
+    // window.onresize = () => {
+    //   that.calSize()
+    // }
+  },
+  methods: {
+    calSize() {
+      const height = document.body.clientHeight
+      const headerHeight = this.$refs.head.$el.clientHeight
+      const bodyHeight = height - headerHeight
+      this.$refs.body.height = bodyHeight
+      console.log('calSize:' + bodyHeight)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.box-card {
+  height: 300px;
+  padding: 0px;
+}
+  .container{
+    height: 600px;
+    width:100%;
+    /*background: url("../../assets/overview/background2.jpg") no-repeat;*/
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    // background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+  .body{
+    position:relative;
+    margin-top:3rem;
+    flex:1;
+    width:100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .body-left, .body-right{
+    width:280px;
+    height:95%;
+    flex:1;
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .left-chart-container{
+      flex:1;
+      padding:0px 10px;
+    }
+  }
+  .map-body{
+    /*width: 70%;*/
+    height:95%;
+    display: flex;
+    justify-content: center;
+    flex:3;
+    .middle{
+      width:100%;
+      height:100%;
+      display: flex;
+      justify-content: center;
+      div{
+        flex: 1;
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/layout.vue b/src/views/dashboard/components/layout.vue
new file mode 100644
index 0000000..2e4393d
--- /dev/null
+++ b/src/views/dashboard/components/layout.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="chart-layout" @click="refreshData">
+    <Title2 class="title">{{ title }}</Title2>
+    <!--title 占高0.18rem-->
+    <div class="module-corner" style="height: 220px; position:relative">
+      <div style="width: 100%; height: 100%;padding:0rem;position:absolute;z-index:1">
+        <slot/>
+      </div>
+      <slot name="corner"/>
+
+    </div>
+    <!--<corner1/>-->
+  </div>
+</template>
+
+<script>
+import Title2 from '../../../components/BigData/Title/Title2.vue'
+import Corner1 from '../../../components/BigData/Corner/Corner1'
+export default {
+  name: 'ChartLayout',
+  components: { Corner1, Title2 },
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    }
+  },
+  methods: {
+    refreshData() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.chart-layout{
+  height: 100%;
+  width: 100%;
+  background-image: url('../../../assets/overview/frame.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding:5px;
+  .title{
+    color: white;
+  }
+  .highlight{
+    height: 1px;
+    width:100%;
+  }
+}
+.chart-layout:hover .title
+{
+  opacity: 1;
+}
+</style>
diff --git a/src/views/dashboard/components/quickFunction.vue b/src/views/dashboard/components/quickFunction.vue
index 469d136..7517e44 100644
--- a/src/views/dashboard/components/quickFunction.vue
+++ b/src/views/dashboard/components/quickFunction.vue
@@ -12,7 +12,7 @@
             <span>常用功能</span>
           </div>
           <div class="box-body">
-            <div v-for="item of funcs">
+            <div v-for="item of funcs" :key="item" @click="handleClickBox(item)">
               <div v-if="hasPerm(item.permission)" class="box-item">
                 <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
                 {{ item.name }}
@@ -39,6 +39,13 @@
         { name: '公厕保洁作业统计', icon: 'icon-clean2', path: '/assesment/toilet', permission: '/sanitation/assesment/toilet' }
       ]
     }
+  },
+  methods: {
+    // 点击盒子跳转页面
+    handleClickBox(item) {
+      console.log('点击获取的参数', item)
+      this.$router.push(item.path)
+    }
   }
 }
 </script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 3d21092..bcf0b8a 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="dashboard-container">
-    <panel-group/>
-    <quick-function/>
+    <!-- <panel-group/> -->
+    <ChartCom />
+    <quick-function style="margin-top: 20px;"/>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import PanelGroup from './components/PanelGroup'
+import ChartCom from './components/chart.vue'
 import QuickFunction from './components/quickFunction'
 
 export default {
   name: 'Dashboard',
-  components: { QuickFunction, PanelGroup },
+  components: { QuickFunction, PanelGroup, ChartCom },
   computed: {
     ...mapGetters([
       'name',
diff --git a/src/views/overview/components/jobStatistic.vue b/src/views/overview/components/jobStatistic.vue
index 7f7b6b6..ac7e4d4 100644
--- a/src/views/overview/components/jobStatistic.vue
+++ b/src/views/overview/components/jobStatistic.vue
@@ -32,7 +32,7 @@
 
 <script>
 import ImageBlock from '@/components/BigData/Block/imageBlock'
-import { getToday } from '@/utils/dateutils'
+import { getToday, getYesterDay } from '@/utils/dateutils'
 import { getTransferJobCount, getAttendancePercent, getToiletJobCount, getCleanJobCount } from '@/api/sanitation/statistics'
 export default {
   name: 'JobStatistic',
@@ -42,8 +42,8 @@
       color: '',
       commonParams: {
         type: 'day',
-        startTime: getToday('yyyy-MM-dd'),
-        endTime: getToday('yyyy-MM-dd')
+        startTime: getYesterDay('yyyy-MM-dd'), // 请求的昨天的数据
+        endTime: getYesterDay('yyyy-MM-dd') // 请求的昨天的数据
       },
       wasteCount: {
         name: '垃圾转运作业次数', // 标题

diff --git a/src/views/dashboard/components/chart.vue b/src/views/dashboard/components/chart.vue
new file mode 100644
index 0000000..4bc7e2f
--- /dev/null
+++ b/src/views/dashboard/components/chart.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Description: 总览大屏布局
+ * @Author: 王晓颖
+ * @Date: 2020-09-01 10:34:35
+ -->
+<template>
+  <div ref="container" class="container">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="人员管理">
+            <staff-statistic />
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="环卫设施管理">
+            <device-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="今日作业情况">
+            <job-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 10px;">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="垃圾转运作业管理">
+            <waste-transfer type="waste"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="路面清扫作业管理">
+            <waste-transfer type="clean"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="公厕保洁作业管理">
+            <waste-transfer type="toilet"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import ChartLayout from './layout.vue'
+import StaffStatistic from '@/views/overview/components/staffStatistic'
+import WasteTransfer from '@/views/overview/components/wasteTransfer'
+import DeviceStatistic from '@/views/overview/components/deviceStatistic'
+import JobStatistic from '@/views/overview/components/jobStatistic'
+export default {
+  name: 'Overview',
+  components: { JobStatistic, DeviceStatistic, WasteTransfer, StaffStatistic, ChartLayout },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    // const that = this
+    // window.onload = () => {
+    //   that.calSize()
+    // }
+    // window.onresize = () => {
+    //   that.calSize()
+    // }
+  },
+  methods: {
+    calSize() {
+      const height = document.body.clientHeight
+      const headerHeight = this.$refs.head.$el.clientHeight
+      const bodyHeight = height - headerHeight
+      this.$refs.body.height = bodyHeight
+      console.log('calSize:' + bodyHeight)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.box-card {
+  height: 300px;
+  padding: 0px;
+}
+  .container{
+    height: 600px;
+    width:100%;
+    /*background: url("../../assets/overview/background2.jpg") no-repeat;*/
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    // background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+  .body{
+    position:relative;
+    margin-top:3rem;
+    flex:1;
+    width:100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .body-left, .body-right{
+    width:280px;
+    height:95%;
+    flex:1;
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .left-chart-container{
+      flex:1;
+      padding:0px 10px;
+    }
+  }
+  .map-body{
+    /*width: 70%;*/
+    height:95%;
+    display: flex;
+    justify-content: center;
+    flex:3;
+    .middle{
+      width:100%;
+      height:100%;
+      display: flex;
+      justify-content: center;
+      div{
+        flex: 1;
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/layout.vue b/src/views/dashboard/components/layout.vue
new file mode 100644
index 0000000..2e4393d
--- /dev/null
+++ b/src/views/dashboard/components/layout.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="chart-layout" @click="refreshData">
+    <Title2 class="title">{{ title }}</Title2>
+    <!--title 占高0.18rem-->
+    <div class="module-corner" style="height: 220px; position:relative">
+      <div style="width: 100%; height: 100%;padding:0rem;position:absolute;z-index:1">
+        <slot/>
+      </div>
+      <slot name="corner"/>
+
+    </div>
+    <!--<corner1/>-->
+  </div>
+</template>
+
+<script>
+import Title2 from '../../../components/BigData/Title/Title2.vue'
+import Corner1 from '../../../components/BigData/Corner/Corner1'
+export default {
+  name: 'ChartLayout',
+  components: { Corner1, Title2 },
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    }
+  },
+  methods: {
+    refreshData() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.chart-layout{
+  height: 100%;
+  width: 100%;
+  background-image: url('../../../assets/overview/frame.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding:5px;
+  .title{
+    color: white;
+  }
+  .highlight{
+    height: 1px;
+    width:100%;
+  }
+}
+.chart-layout:hover .title
+{
+  opacity: 1;
+}
+</style>
diff --git a/src/views/dashboard/components/quickFunction.vue b/src/views/dashboard/components/quickFunction.vue
index 469d136..7517e44 100644
--- a/src/views/dashboard/components/quickFunction.vue
+++ b/src/views/dashboard/components/quickFunction.vue
@@ -12,7 +12,7 @@
             <span>常用功能</span>
           </div>
           <div class="box-body">
-            <div v-for="item of funcs">
+            <div v-for="item of funcs" :key="item" @click="handleClickBox(item)">
               <div v-if="hasPerm(item.permission)" class="box-item">
                 <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
                 {{ item.name }}
@@ -39,6 +39,13 @@
         { name: '公厕保洁作业统计', icon: 'icon-clean2', path: '/assesment/toilet', permission: '/sanitation/assesment/toilet' }
       ]
     }
+  },
+  methods: {
+    // 点击盒子跳转页面
+    handleClickBox(item) {
+      console.log('点击获取的参数', item)
+      this.$router.push(item.path)
+    }
   }
 }
 </script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 3d21092..bcf0b8a 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="dashboard-container">
-    <panel-group/>
-    <quick-function/>
+    <!-- <panel-group/> -->
+    <ChartCom />
+    <quick-function style="margin-top: 20px;"/>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import PanelGroup from './components/PanelGroup'
+import ChartCom from './components/chart.vue'
 import QuickFunction from './components/quickFunction'
 
 export default {
   name: 'Dashboard',
-  components: { QuickFunction, PanelGroup },
+  components: { QuickFunction, PanelGroup, ChartCom },
   computed: {
     ...mapGetters([
       'name',
diff --git a/src/views/overview/components/jobStatistic.vue b/src/views/overview/components/jobStatistic.vue
index 7f7b6b6..ac7e4d4 100644
--- a/src/views/overview/components/jobStatistic.vue
+++ b/src/views/overview/components/jobStatistic.vue
@@ -32,7 +32,7 @@
 
 <script>
 import ImageBlock from '@/components/BigData/Block/imageBlock'
-import { getToday } from '@/utils/dateutils'
+import { getToday, getYesterDay } from '@/utils/dateutils'
 import { getTransferJobCount, getAttendancePercent, getToiletJobCount, getCleanJobCount } from '@/api/sanitation/statistics'
 export default {
   name: 'JobStatistic',
@@ -42,8 +42,8 @@
       color: '',
       commonParams: {
         type: 'day',
-        startTime: getToday('yyyy-MM-dd'),
-        endTime: getToday('yyyy-MM-dd')
+        startTime: getYesterDay('yyyy-MM-dd'), // 请求的昨天的数据
+        endTime: getYesterDay('yyyy-MM-dd') // 请求的昨天的数据
       },
       wasteCount: {
         name: '垃圾转运作业次数', // 标题
diff --git a/src/views/overview/components/staffStatistic.vue b/src/views/overview/components/staffStatistic.vue
index e587c50..656142b 100644
--- a/src/views/overview/components/staffStatistic.vue
+++ b/src/views/overview/components/staffStatistic.vue
@@ -33,7 +33,7 @@
 import SimpleBlock from '@/components/BigData/Block/simpleBlock'
 import { getAttendancePercent } from '@/api/sanitation/statistics'
 import { getSingleCount } from '@/api/sanitation/statistics'
-import { getToday } from '@/utils/dateutils'
+import { getYesterDay, getToday} from '@/utils/dateutils'
 
 export default {
   name: 'StaffStatistic',
@@ -93,9 +93,21 @@
       getSingleCount('staff').then(response => {
         if (response.code === 200) {
           this.staffCount.value = response.data
+          if (this.attendanceCount.value + '' !== '--') {
+            this.attendancePercent.value = this.divideWithTwoDecimals(Number(this.attendanceCount.value), this.staffCount.value)
+          }
         }
       })
     },
+    divideWithTwoDecimals(numerator, denominator) {
+      console.log('求商并保留两位小数', numerator, denominator)
+      if (denominator === 0) { // 防止除以0的错误
+        return
+      }
+      const result = (numerator / denominator).toFixed(2)
+      console.log('计算结果', result)
+      return result + '%'
+    },
     fetchAttendance() {
       const params = {
         type: 'day',
@@ -106,12 +118,14 @@
       getAttendancePercent(params).then(response => {
         if (response.code === 200) {
           // this.staffCount.value = response.data.total
-          this.attendanceCount.value = response.data[0].count
+          this.attendanceCount.value = response.data[0].count // 出勤总人数
           // this.attendanceCount.attendancePercent = response.data.percent
+          if (this.staffCount.value + '' !== '--') {
+            this.attendancePercent.value = this.divideWithTwoDecimals(Number(this.attendanceCount.value), this.staffCount.value)
+          }
         }
       })
     }
-
   }
 }
 </script>

diff --git a/src/views/dashboard/components/chart.vue b/src/views/dashboard/components/chart.vue
new file mode 100644
index 0000000..4bc7e2f
--- /dev/null
+++ b/src/views/dashboard/components/chart.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Description: 总览大屏布局
+ * @Author: 王晓颖
+ * @Date: 2020-09-01 10:34:35
+ -->
+<template>
+  <div ref="container" class="container">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="人员管理">
+            <staff-statistic />
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="环卫设施管理">
+            <device-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="今日作业情况">
+            <job-statistic/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 10px;">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="垃圾转运作业管理">
+            <waste-transfer type="waste"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="路面清扫作业管理">
+            <waste-transfer type="clean"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <chart-layout title="公厕保洁作业管理">
+            <waste-transfer type="toilet"/>
+          </chart-layout>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import ChartLayout from './layout.vue'
+import StaffStatistic from '@/views/overview/components/staffStatistic'
+import WasteTransfer from '@/views/overview/components/wasteTransfer'
+import DeviceStatistic from '@/views/overview/components/deviceStatistic'
+import JobStatistic from '@/views/overview/components/jobStatistic'
+export default {
+  name: 'Overview',
+  components: { JobStatistic, DeviceStatistic, WasteTransfer, StaffStatistic, ChartLayout },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    // const that = this
+    // window.onload = () => {
+    //   that.calSize()
+    // }
+    // window.onresize = () => {
+    //   that.calSize()
+    // }
+  },
+  methods: {
+    calSize() {
+      const height = document.body.clientHeight
+      const headerHeight = this.$refs.head.$el.clientHeight
+      const bodyHeight = height - headerHeight
+      this.$refs.body.height = bodyHeight
+      console.log('calSize:' + bodyHeight)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.box-card {
+  height: 300px;
+  padding: 0px;
+}
+  .container{
+    height: 600px;
+    width:100%;
+    /*background: url("../../assets/overview/background2.jpg") no-repeat;*/
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    // background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+  .body{
+    position:relative;
+    margin-top:3rem;
+    flex:1;
+    width:100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .body-left, .body-right{
+    width:280px;
+    height:95%;
+    flex:1;
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .left-chart-container{
+      flex:1;
+      padding:0px 10px;
+    }
+  }
+  .map-body{
+    /*width: 70%;*/
+    height:95%;
+    display: flex;
+    justify-content: center;
+    flex:3;
+    .middle{
+      width:100%;
+      height:100%;
+      display: flex;
+      justify-content: center;
+      div{
+        flex: 1;
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/layout.vue b/src/views/dashboard/components/layout.vue
new file mode 100644
index 0000000..2e4393d
--- /dev/null
+++ b/src/views/dashboard/components/layout.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="chart-layout" @click="refreshData">
+    <Title2 class="title">{{ title }}</Title2>
+    <!--title 占高0.18rem-->
+    <div class="module-corner" style="height: 220px; position:relative">
+      <div style="width: 100%; height: 100%;padding:0rem;position:absolute;z-index:1">
+        <slot/>
+      </div>
+      <slot name="corner"/>
+
+    </div>
+    <!--<corner1/>-->
+  </div>
+</template>
+
+<script>
+import Title2 from '../../../components/BigData/Title/Title2.vue'
+import Corner1 from '../../../components/BigData/Corner/Corner1'
+export default {
+  name: 'ChartLayout',
+  components: { Corner1, Title2 },
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    }
+  },
+  methods: {
+    refreshData() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.chart-layout{
+  height: 100%;
+  width: 100%;
+  background-image: url('../../../assets/overview/frame.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding:5px;
+  .title{
+    color: white;
+  }
+  .highlight{
+    height: 1px;
+    width:100%;
+  }
+}
+.chart-layout:hover .title
+{
+  opacity: 1;
+}
+</style>
diff --git a/src/views/dashboard/components/quickFunction.vue b/src/views/dashboard/components/quickFunction.vue
index 469d136..7517e44 100644
--- a/src/views/dashboard/components/quickFunction.vue
+++ b/src/views/dashboard/components/quickFunction.vue
@@ -12,7 +12,7 @@
             <span>常用功能</span>
           </div>
           <div class="box-body">
-            <div v-for="item of funcs">
+            <div v-for="item of funcs" :key="item" @click="handleClickBox(item)">
               <div v-if="hasPerm(item.permission)" class="box-item">
                 <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
                 {{ item.name }}
@@ -39,6 +39,13 @@
         { name: '公厕保洁作业统计', icon: 'icon-clean2', path: '/assesment/toilet', permission: '/sanitation/assesment/toilet' }
       ]
     }
+  },
+  methods: {
+    // 点击盒子跳转页面
+    handleClickBox(item) {
+      console.log('点击获取的参数', item)
+      this.$router.push(item.path)
+    }
   }
 }
 </script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 3d21092..bcf0b8a 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="dashboard-container">
-    <panel-group/>
-    <quick-function/>
+    <!-- <panel-group/> -->
+    <ChartCom />
+    <quick-function style="margin-top: 20px;"/>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import PanelGroup from './components/PanelGroup'
+import ChartCom from './components/chart.vue'
 import QuickFunction from './components/quickFunction'
 
 export default {
   name: 'Dashboard',
-  components: { QuickFunction, PanelGroup },
+  components: { QuickFunction, PanelGroup, ChartCom },
   computed: {
     ...mapGetters([
       'name',
diff --git a/src/views/overview/components/jobStatistic.vue b/src/views/overview/components/jobStatistic.vue
index 7f7b6b6..ac7e4d4 100644
--- a/src/views/overview/components/jobStatistic.vue
+++ b/src/views/overview/components/jobStatistic.vue
@@ -32,7 +32,7 @@
 
 <script>
 import ImageBlock from '@/components/BigData/Block/imageBlock'
-import { getToday } from '@/utils/dateutils'
+import { getToday, getYesterDay } from '@/utils/dateutils'
 import { getTransferJobCount, getAttendancePercent, getToiletJobCount, getCleanJobCount } from '@/api/sanitation/statistics'
 export default {
   name: 'JobStatistic',
@@ -42,8 +42,8 @@
       color: '',
       commonParams: {
         type: 'day',
-        startTime: getToday('yyyy-MM-dd'),
-        endTime: getToday('yyyy-MM-dd')
+        startTime: getYesterDay('yyyy-MM-dd'), // 请求的昨天的数据
+        endTime: getYesterDay('yyyy-MM-dd') // 请求的昨天的数据
       },
       wasteCount: {
         name: '垃圾转运作业次数', // 标题
diff --git a/src/views/overview/components/staffStatistic.vue b/src/views/overview/components/staffStatistic.vue
index e587c50..656142b 100644
--- a/src/views/overview/components/staffStatistic.vue
+++ b/src/views/overview/components/staffStatistic.vue
@@ -33,7 +33,7 @@
 import SimpleBlock from '@/components/BigData/Block/simpleBlock'
 import { getAttendancePercent } from '@/api/sanitation/statistics'
 import { getSingleCount } from '@/api/sanitation/statistics'
-import { getToday } from '@/utils/dateutils'
+import { getYesterDay, getToday} from '@/utils/dateutils'
 
 export default {
   name: 'StaffStatistic',
@@ -93,9 +93,21 @@
       getSingleCount('staff').then(response => {
         if (response.code === 200) {
           this.staffCount.value = response.data
+          if (this.attendanceCount.value + '' !== '--') {
+            this.attendancePercent.value = this.divideWithTwoDecimals(Number(this.attendanceCount.value), this.staffCount.value)
+          }
         }
       })
     },
+    divideWithTwoDecimals(numerator, denominator) {
+      console.log('求商并保留两位小数', numerator, denominator)
+      if (denominator === 0) { // 防止除以0的错误
+        return
+      }
+      const result = (numerator / denominator).toFixed(2)
+      console.log('计算结果', result)
+      return result + '%'
+    },
     fetchAttendance() {
       const params = {
         type: 'day',
@@ -106,12 +118,14 @@
       getAttendancePercent(params).then(response => {
         if (response.code === 200) {
           // this.staffCount.value = response.data.total
-          this.attendanceCount.value = response.data[0].count
+          this.attendanceCount.value = response.data[0].count // 出勤总人数
           // this.attendanceCount.attendancePercent = response.data.percent
+          if (this.staffCount.value + '' !== '--') {
+            this.attendancePercent.value = this.divideWithTwoDecimals(Number(this.attendanceCount.value), this.staffCount.value)
+          }
         }
       })
     }
-
   }
 }
 </script>
diff --git a/src/views/overview/components/wasteTransfer.vue b/src/views/overview/components/wasteTransfer.vue
index 8f93514..fdf3bbc 100644
--- a/src/views/overview/components/wasteTransfer.vue
+++ b/src/views/overview/components/wasteTransfer.vue
@@ -13,7 +13,7 @@
 import { getCleanJobCount } from '@/api/sanitation/statistics'
 import { getTransferJobCount } from '@/api/sanitation/statistics'
 import { getToiletJobCount } from '@/api/sanitation/statistics'
-import { getToday, getLastWeek } from '@/utils/dateutils'
+import { getToday, getLastWeek, getYesterDay } from '@/utils/dateutils'
 export default {
   name: 'WasteTransfer',
   data() {
@@ -22,7 +22,7 @@
       listQuery: {
         type: 'day', // 统计方式，day按天，month按月
         startTime: getLastWeek('yyyy-MM-dd'), // 开始时间
-        endTime: getToday('yyyy-MM-dd') // 结束时间
+        endTime: getYesterDay('yyyy-MM-dd') // 结束时间
       }, // 筛选条件
       grid: {
         right: 20,
@@ -77,6 +77,7 @@
       }
     },
     fetchCleanData() {
+      debugger
       getCleanJobCount(this.listQuery).then(response => {
         const data = response.data
         this.chartData.rows = data.map(item => {