diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index f1b9474..c4ac006 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <receiver-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -38,12 +53,14 @@
 import AssessRuleReceiver from './components/assessRuleReceiver'
 import { getDayTime } from '@/utils/dateutils'
 import { assessReceiver, exportAssessReceiver } from '@/api/assess/assessPost'
+import ReceiverAccessChart from './receiverAccessChart'
 
 export default {
   name: 'ReceiverAssess',
-  components: { AssessRuleReceiver },
+  components: { AssessRuleReceiver, ReceiverAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -291,6 +308,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -298,5 +324,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index f1b9474..c4ac006 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <receiver-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -38,12 +53,14 @@
 import AssessRuleReceiver from './components/assessRuleReceiver'
 import { getDayTime } from '@/utils/dateutils'
 import { assessReceiver, exportAssessReceiver } from '@/api/assess/assessPost'
+import ReceiverAccessChart from './receiverAccessChart'
 
 export default {
   name: 'ReceiverAssess',
-  components: { AssessRuleReceiver },
+  components: { AssessRuleReceiver, ReceiverAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -291,6 +308,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -298,5 +324,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/supervisorAccessChart.vue b/src/views/assessPost/supervisorAccessChart.vue
new file mode 100644
index 0000000..2d35130
--- /dev/null
+++ b/src/views/assessPost/supervisorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'SupervisorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'verify',
+      radioList: [
+        {
+          text: '上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '核实数',
+          value: 'verify'
+        },
+        {
+          text: '核查数',
+          value: 'check'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'verify': {
+            this.y.push(item.verify)
+            break
+          }
+          case 'check': {
+            this.y.push(item.check)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '监督员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index f1b9474..c4ac006 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <receiver-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -38,12 +53,14 @@
 import AssessRuleReceiver from './components/assessRuleReceiver'
 import { getDayTime } from '@/utils/dateutils'
 import { assessReceiver, exportAssessReceiver } from '@/api/assess/assessPost'
+import ReceiverAccessChart from './receiverAccessChart'
 
 export default {
   name: 'ReceiverAssess',
-  components: { AssessRuleReceiver },
+  components: { AssessRuleReceiver, ReceiverAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -291,6 +308,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -298,5 +324,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/supervisorAccessChart.vue b/src/views/assessPost/supervisorAccessChart.vue
new file mode 100644
index 0000000..2d35130
--- /dev/null
+++ b/src/views/assessPost/supervisorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'SupervisorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'verify',
+      radioList: [
+        {
+          text: '上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '核实数',
+          value: 'verify'
+        },
+        {
+          text: '核查数',
+          value: 'check'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'verify': {
+            this.y.push(item.verify)
+            break
+          }
+          case 'check': {
+            this.y.push(item.check)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '监督员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 83910a7..a87fa24 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -14,13 +14,29 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+          <!--<dept-access-list :list="list" :query="listQuery"/>-->
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <supervisor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +53,14 @@
 import AssessRuleSupervisor from './components/assessRuleSupervisor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessSupervisor, exportAssessSupervisor } from '@/api/assess/assessPost'
+import SupervisorAccessChart from './supervisorAccessChart'
 
 export default {
   name: 'SupervisorAssess',
-  components: { AssessRuleSupervisor },
+  components: { AssessRuleSupervisor, SupervisorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -292,6 +310,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -300,4 +327,15 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+
 </style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index f1b9474..c4ac006 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <receiver-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -38,12 +53,14 @@
 import AssessRuleReceiver from './components/assessRuleReceiver'
 import { getDayTime } from '@/utils/dateutils'
 import { assessReceiver, exportAssessReceiver } from '@/api/assess/assessPost'
+import ReceiverAccessChart from './receiverAccessChart'
 
 export default {
   name: 'ReceiverAssess',
-  components: { AssessRuleReceiver },
+  components: { AssessRuleReceiver, ReceiverAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -291,6 +308,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -298,5 +324,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/supervisorAccessChart.vue b/src/views/assessPost/supervisorAccessChart.vue
new file mode 100644
index 0000000..2d35130
--- /dev/null
+++ b/src/views/assessPost/supervisorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'SupervisorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'verify',
+      radioList: [
+        {
+          text: '上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '核实数',
+          value: 'verify'
+        },
+        {
+          text: '核查数',
+          value: 'check'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'verify': {
+            this.y.push(item.verify)
+            break
+          }
+          case 'check': {
+            this.y.push(item.check)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '监督员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 83910a7..a87fa24 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -14,13 +14,29 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+          <!--<dept-access-list :list="list" :query="listQuery"/>-->
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <supervisor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +53,14 @@
 import AssessRuleSupervisor from './components/assessRuleSupervisor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessSupervisor, exportAssessSupervisor } from '@/api/assess/assessPost'
+import SupervisorAccessChart from './supervisorAccessChart'
 
 export default {
   name: 'SupervisorAssess',
-  components: { AssessRuleSupervisor },
+  components: { AssessRuleSupervisor, SupervisorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -292,6 +310,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -300,4 +327,15 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+
 </style>
diff --git a/src/views/assessRegion/accessAreaChart.vue b/src/views/assessRegion/accessAreaChart.vue
new file mode 100644
index 0000000..3424aec
--- /dev/null
+++ b/src/views/assessRegion/accessAreaChart.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessAreaChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index f1b9474..c4ac006 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <receiver-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -38,12 +53,14 @@
 import AssessRuleReceiver from './components/assessRuleReceiver'
 import { getDayTime } from '@/utils/dateutils'
 import { assessReceiver, exportAssessReceiver } from '@/api/assess/assessPost'
+import ReceiverAccessChart from './receiverAccessChart'
 
 export default {
   name: 'ReceiverAssess',
-  components: { AssessRuleReceiver },
+  components: { AssessRuleReceiver, ReceiverAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -291,6 +308,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -298,5 +324,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/supervisorAccessChart.vue b/src/views/assessPost/supervisorAccessChart.vue
new file mode 100644
index 0000000..2d35130
--- /dev/null
+++ b/src/views/assessPost/supervisorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'SupervisorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'verify',
+      radioList: [
+        {
+          text: '上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '核实数',
+          value: 'verify'
+        },
+        {
+          text: '核查数',
+          value: 'check'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'verify': {
+            this.y.push(item.verify)
+            break
+          }
+          case 'check': {
+            this.y.push(item.check)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '监督员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 83910a7..a87fa24 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -14,13 +14,29 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+          <!--<dept-access-list :list="list" :query="listQuery"/>-->
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <supervisor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +53,14 @@
 import AssessRuleSupervisor from './components/assessRuleSupervisor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessSupervisor, exportAssessSupervisor } from '@/api/assess/assessPost'
+import SupervisorAccessChart from './supervisorAccessChart'
 
 export default {
   name: 'SupervisorAssess',
-  components: { AssessRuleSupervisor },
+  components: { AssessRuleSupervisor, SupervisorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -292,6 +310,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -300,4 +327,15 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+
 </style>
diff --git a/src/views/assessRegion/accessAreaChart.vue b/src/views/assessRegion/accessAreaChart.vue
new file mode 100644
index 0000000..3424aec
--- /dev/null
+++ b/src/views/assessRegion/accessAreaChart.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessAreaChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessRegion/accessOverChart.vue b/src/views/assessRegion/accessOverChart.vue
new file mode 100644
index 0000000..08e29f2
--- /dev/null
+++ b/src/views/assessRegion/accessOverChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessOverChart4',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'report',
+      radioList: [
+        {
+          text: '总上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '处理数',
+          value: 'process'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'process': {
+            this.y.push(item.process)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index f1b9474..c4ac006 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <receiver-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -38,12 +53,14 @@
 import AssessRuleReceiver from './components/assessRuleReceiver'
 import { getDayTime } from '@/utils/dateutils'
 import { assessReceiver, exportAssessReceiver } from '@/api/assess/assessPost'
+import ReceiverAccessChart from './receiverAccessChart'
 
 export default {
   name: 'ReceiverAssess',
-  components: { AssessRuleReceiver },
+  components: { AssessRuleReceiver, ReceiverAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -291,6 +308,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -298,5 +324,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/supervisorAccessChart.vue b/src/views/assessPost/supervisorAccessChart.vue
new file mode 100644
index 0000000..2d35130
--- /dev/null
+++ b/src/views/assessPost/supervisorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'SupervisorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'verify',
+      radioList: [
+        {
+          text: '上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '核实数',
+          value: 'verify'
+        },
+        {
+          text: '核查数',
+          value: 'check'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'verify': {
+            this.y.push(item.verify)
+            break
+          }
+          case 'check': {
+            this.y.push(item.check)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '监督员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 83910a7..a87fa24 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -14,13 +14,29 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+          <!--<dept-access-list :list="list" :query="listQuery"/>-->
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <supervisor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +53,14 @@
 import AssessRuleSupervisor from './components/assessRuleSupervisor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessSupervisor, exportAssessSupervisor } from '@/api/assess/assessPost'
+import SupervisorAccessChart from './supervisorAccessChart'
 
 export default {
   name: 'SupervisorAssess',
-  components: { AssessRuleSupervisor },
+  components: { AssessRuleSupervisor, SupervisorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -292,6 +310,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -300,4 +327,15 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+
 </style>
diff --git a/src/views/assessRegion/accessAreaChart.vue b/src/views/assessRegion/accessAreaChart.vue
new file mode 100644
index 0000000..3424aec
--- /dev/null
+++ b/src/views/assessRegion/accessAreaChart.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessAreaChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessRegion/accessOverChart.vue b/src/views/assessRegion/accessOverChart.vue
new file mode 100644
index 0000000..08e29f2
--- /dev/null
+++ b/src/views/assessRegion/accessOverChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessOverChart4',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'report',
+      radioList: [
+        {
+          text: '总上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '处理数',
+          value: 'process'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'process': {
+            this.y.push(item.process)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessRegion/accessOverChart1.vue b/src/views/assessRegion/accessOverChart1.vue
new file mode 100644
index 0000000..e0bbe06
--- /dev/null
+++ b/src/views/assessRegion/accessOverChart1.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'AccessOverChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach(item => {
+        const obj = {}
+        obj.name = '总上报数'
+        obj.value = item.report
+        tmp.push(obj)
+        const obj1 = {}
+        obj1.name = '立案数'
+        obj1.value = item.register
+        tmp.push(obj1)
+        const obj2 = {}
+        obj2.name = '处理数'
+        obj2.value = item.process
+        tmp.push(obj2)
+        const obj3 = {}
+        obj3.name = '结案数'
+        obj3.value = item.close
+        tmp.push(obj3)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true
+        },
+        // toolbox: {
+        //   show: true,
+        //   right: '20',
+        //   feature: {
+        //     saveAsImage: {
+        //       show: true
+        //     }
+        //   }
+        // },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
+        legend: {
+          orient: 'vertical',
+          right: 0,
+          data: this.pieData.map(item => item.name)
+        },
+        series: [{
+          name: '整体概况',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            // formatter: '{b} : {d}%'
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>数量: {c}({d}%)'
+          }
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .chart-container{
+    /*text-align: center;*/
+  }
+  .chart-body{
+    height: 80vh;
+    width: 90%;
+    margin-right: auto;
+    margin-left: auto;
+  }
+</style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index f1b9474..c4ac006 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <receiver-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -38,12 +53,14 @@
 import AssessRuleReceiver from './components/assessRuleReceiver'
 import { getDayTime } from '@/utils/dateutils'
 import { assessReceiver, exportAssessReceiver } from '@/api/assess/assessPost'
+import ReceiverAccessChart from './receiverAccessChart'
 
 export default {
   name: 'ReceiverAssess',
-  components: { AssessRuleReceiver },
+  components: { AssessRuleReceiver, ReceiverAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -291,6 +308,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -298,5 +324,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/supervisorAccessChart.vue b/src/views/assessPost/supervisorAccessChart.vue
new file mode 100644
index 0000000..2d35130
--- /dev/null
+++ b/src/views/assessPost/supervisorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'SupervisorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'verify',
+      radioList: [
+        {
+          text: '上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '核实数',
+          value: 'verify'
+        },
+        {
+          text: '核查数',
+          value: 'check'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'verify': {
+            this.y.push(item.verify)
+            break
+          }
+          case 'check': {
+            this.y.push(item.check)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '监督员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 83910a7..a87fa24 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -14,13 +14,29 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+          <!--<dept-access-list :list="list" :query="listQuery"/>-->
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <supervisor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +53,14 @@
 import AssessRuleSupervisor from './components/assessRuleSupervisor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessSupervisor, exportAssessSupervisor } from '@/api/assess/assessPost'
+import SupervisorAccessChart from './supervisorAccessChart'
 
 export default {
   name: 'SupervisorAssess',
-  components: { AssessRuleSupervisor },
+  components: { AssessRuleSupervisor, SupervisorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -292,6 +310,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -300,4 +327,15 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+
 </style>
diff --git a/src/views/assessRegion/accessAreaChart.vue b/src/views/assessRegion/accessAreaChart.vue
new file mode 100644
index 0000000..3424aec
--- /dev/null
+++ b/src/views/assessRegion/accessAreaChart.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessAreaChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessRegion/accessOverChart.vue b/src/views/assessRegion/accessOverChart.vue
new file mode 100644
index 0000000..08e29f2
--- /dev/null
+++ b/src/views/assessRegion/accessOverChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessOverChart4',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'report',
+      radioList: [
+        {
+          text: '总上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '处理数',
+          value: 'process'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'process': {
+            this.y.push(item.process)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessRegion/accessOverChart1.vue b/src/views/assessRegion/accessOverChart1.vue
new file mode 100644
index 0000000..e0bbe06
--- /dev/null
+++ b/src/views/assessRegion/accessOverChart1.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'AccessOverChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach(item => {
+        const obj = {}
+        obj.name = '总上报数'
+        obj.value = item.report
+        tmp.push(obj)
+        const obj1 = {}
+        obj1.name = '立案数'
+        obj1.value = item.register
+        tmp.push(obj1)
+        const obj2 = {}
+        obj2.name = '处理数'
+        obj2.value = item.process
+        tmp.push(obj2)
+        const obj3 = {}
+        obj3.name = '结案数'
+        obj3.value = item.close
+        tmp.push(obj3)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true
+        },
+        // toolbox: {
+        //   show: true,
+        //   right: '20',
+        //   feature: {
+        //     saveAsImage: {
+        //       show: true
+        //     }
+        //   }
+        // },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
+        legend: {
+          orient: 'vertical',
+          right: 0,
+          data: this.pieData.map(item => item.name)
+        },
+        series: [{
+          name: '整体概况',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            // formatter: '{b} : {d}%'
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>数量: {c}({d}%)'
+          }
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .chart-container{
+    /*text-align: center;*/
+  }
+  .chart-body{
+    height: 80vh;
+    width: 90%;
+    margin-right: auto;
+    margin-left: auto;
+  }
+</style>
diff --git a/src/views/assessRegion/assessArea.vue b/src/views/assessRegion/assessArea.vue
index d5a049e..2873d18 100644
--- a/src/views/assessRegion/assessArea.vue
+++ b/src/views/assessRegion/assessArea.vue
@@ -14,23 +14,39 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
-
-    </normal-table>
+    </normal-table>-->
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>-->
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <access-area-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
   </app-container>
 </template>
 
 <script>
 import { getDayTime } from '@/utils/dateutils'
 import { assessArea, exportAssessArea } from '@/api/assess/assessRegion'
-
+import AccessAreaChart from './accessAreaChart'
 export default {
   name: 'AssessArea',
+  components: { AccessAreaChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -62,7 +78,7 @@
       },
       columns: [
         {
-          text: '区域名称',
+          text: '网格名称',
           value: 'areaName'
         },
         {
@@ -206,10 +222,30 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
-
 }
 </script>
+<style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+</style>
 

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index f1b9474..c4ac006 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <receiver-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -38,12 +53,14 @@
 import AssessRuleReceiver from './components/assessRuleReceiver'
 import { getDayTime } from '@/utils/dateutils'
 import { assessReceiver, exportAssessReceiver } from '@/api/assess/assessPost'
+import ReceiverAccessChart from './receiverAccessChart'
 
 export default {
   name: 'ReceiverAssess',
-  components: { AssessRuleReceiver },
+  components: { AssessRuleReceiver, ReceiverAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -291,6 +308,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -298,5 +324,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/supervisorAccessChart.vue b/src/views/assessPost/supervisorAccessChart.vue
new file mode 100644
index 0000000..2d35130
--- /dev/null
+++ b/src/views/assessPost/supervisorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'SupervisorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'verify',
+      radioList: [
+        {
+          text: '上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '核实数',
+          value: 'verify'
+        },
+        {
+          text: '核查数',
+          value: 'check'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'verify': {
+            this.y.push(item.verify)
+            break
+          }
+          case 'check': {
+            this.y.push(item.check)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '监督员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 83910a7..a87fa24 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -14,13 +14,29 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+          <!--<dept-access-list :list="list" :query="listQuery"/>-->
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <supervisor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +53,14 @@
 import AssessRuleSupervisor from './components/assessRuleSupervisor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessSupervisor, exportAssessSupervisor } from '@/api/assess/assessPost'
+import SupervisorAccessChart from './supervisorAccessChart'
 
 export default {
   name: 'SupervisorAssess',
-  components: { AssessRuleSupervisor },
+  components: { AssessRuleSupervisor, SupervisorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -292,6 +310,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -300,4 +327,15 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+
 </style>
diff --git a/src/views/assessRegion/accessAreaChart.vue b/src/views/assessRegion/accessAreaChart.vue
new file mode 100644
index 0000000..3424aec
--- /dev/null
+++ b/src/views/assessRegion/accessAreaChart.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessAreaChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessRegion/accessOverChart.vue b/src/views/assessRegion/accessOverChart.vue
new file mode 100644
index 0000000..08e29f2
--- /dev/null
+++ b/src/views/assessRegion/accessOverChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessOverChart4',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'report',
+      radioList: [
+        {
+          text: '总上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '处理数',
+          value: 'process'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'process': {
+            this.y.push(item.process)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessRegion/accessOverChart1.vue b/src/views/assessRegion/accessOverChart1.vue
new file mode 100644
index 0000000..e0bbe06
--- /dev/null
+++ b/src/views/assessRegion/accessOverChart1.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'AccessOverChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach(item => {
+        const obj = {}
+        obj.name = '总上报数'
+        obj.value = item.report
+        tmp.push(obj)
+        const obj1 = {}
+        obj1.name = '立案数'
+        obj1.value = item.register
+        tmp.push(obj1)
+        const obj2 = {}
+        obj2.name = '处理数'
+        obj2.value = item.process
+        tmp.push(obj2)
+        const obj3 = {}
+        obj3.name = '结案数'
+        obj3.value = item.close
+        tmp.push(obj3)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true
+        },
+        // toolbox: {
+        //   show: true,
+        //   right: '20',
+        //   feature: {
+        //     saveAsImage: {
+        //       show: true
+        //     }
+        //   }
+        // },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
+        legend: {
+          orient: 'vertical',
+          right: 0,
+          data: this.pieData.map(item => item.name)
+        },
+        series: [{
+          name: '整体概况',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            // formatter: '{b} : {d}%'
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>数量: {c}({d}%)'
+          }
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .chart-container{
+    /*text-align: center;*/
+  }
+  .chart-body{
+    height: 80vh;
+    width: 90%;
+    margin-right: auto;
+    margin-left: auto;
+  }
+</style>
diff --git a/src/views/assessRegion/assessArea.vue b/src/views/assessRegion/assessArea.vue
index d5a049e..2873d18 100644
--- a/src/views/assessRegion/assessArea.vue
+++ b/src/views/assessRegion/assessArea.vue
@@ -14,23 +14,39 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
-
-    </normal-table>
+    </normal-table>-->
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>-->
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <access-area-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
   </app-container>
 </template>
 
 <script>
 import { getDayTime } from '@/utils/dateutils'
 import { assessArea, exportAssessArea } from '@/api/assess/assessRegion'
-
+import AccessAreaChart from './accessAreaChart'
 export default {
   name: 'AssessArea',
+  components: { AccessAreaChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -62,7 +78,7 @@
       },
       columns: [
         {
-          text: '区域名称',
+          text: '网格名称',
           value: 'areaName'
         },
         {
@@ -206,10 +222,30 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
-
 }
 </script>
+<style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+</style>
 
diff --git a/src/views/assessRegion/assessOverview.vue b/src/views/assessRegion/assessOverview.vue
index f5ad0ac..a2ee151 100644
--- a/src/views/assessRegion/assessOverview.vue
+++ b/src/views/assessRegion/assessOverview.vue
@@ -14,23 +14,40 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <access-over-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
   </app-container>
 </template>
 
-<script>a
+<script>
 import { getDayTime } from '@/utils/dateutils'
 import { assessOverview, exportAssessOverview } from '@/api/assess/assessRegion'
+import AccessOverChart from './accessOverChart'
 
 export default {
   name: 'AssessOverview',
+  components: { AccessOverChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -74,7 +91,7 @@
           value: 'normalReport'
         },
         {
-          text: '待核实',
+          text: '待核实数',
           value: 'toVerify',
           width: 70
         },
@@ -258,6 +275,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -265,5 +291,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 2b11678..a5995ae 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -10,6 +10,6 @@
   // BASE_API: '"http://119.254.103.80:14537"'
   // BASE_API: '"http://192.168.0.225:14537"'
   // BASE_API: '"http://localhost:8080/api/"'
-  BASE_API: '"http://192.168.0.102:11414"'
-  // BASE_API: '"http://127.0.0.1:11414"'
+  // BASE_API: '"http://192.168.0.102:11414"'
+  BASE_API: '"http://127.0.0.1:11414"'
 })
diff --git a/config/index.js b/config/index.js
index 15838f5..4396685 100644
--- a/config/index.js
+++ b/config/index.js
@@ -20,7 +20,7 @@
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/views/assessPost/monitorAccessChart.vue b/src/views/assessPost/monitorAccessChart.vue
new file mode 100644
index 0000000..1971cf4
--- /dev/null
+++ b/src/views/assessPost/monitorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'MonitorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '受理员平均分',
+          value: 'receiverAverage'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'receiverAverage': {
+            this.y.push(item.receiverAverage)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 0fda288..7b8e7b3 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <monitor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +52,13 @@
 import AssessRuleMonitor from './components/assessRuleMonitor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessMonitor, exportAssessMonitor } from '@/api/assess/assessPost'
-
+import MonitorAccessChart from './monitorAccessChart'
 export default {
   name: 'MonitorAssess',
-  components: { AssessRuleMonitor },
+  components: { AssessRuleMonitor, MonitorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -249,6 +265,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -256,5 +281,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/receiverAccessChart.vue b/src/views/assessPost/receiverAccessChart.vue
new file mode 100644
index 0000000..6cc18f8
--- /dev/null
+++ b/src/views/assessPost/receiverAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'ReceiverAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '总受理数',
+          value: 'receive'
+        },
+        {
+          text: '总发送核查数',
+          value: 'disCheck'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'receive': {
+            this.y.push(item.receive)
+            break
+          }
+          case 'disCheck': {
+            this.y.push(item.disCheck)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index f1b9474..c4ac006 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -14,13 +14,28 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <receiver-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -38,12 +53,14 @@
 import AssessRuleReceiver from './components/assessRuleReceiver'
 import { getDayTime } from '@/utils/dateutils'
 import { assessReceiver, exportAssessReceiver } from '@/api/assess/assessPost'
+import ReceiverAccessChart from './receiverAccessChart'
 
 export default {
   name: 'ReceiverAssess',
-  components: { AssessRuleReceiver },
+  components: { AssessRuleReceiver, ReceiverAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -291,6 +308,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -298,5 +324,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/src/views/assessPost/supervisorAccessChart.vue b/src/views/assessPost/supervisorAccessChart.vue
new file mode 100644
index 0000000..2d35130
--- /dev/null
+++ b/src/views/assessPost/supervisorAccessChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'SupervisorAccessChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'verify',
+      radioList: [
+        {
+          text: '上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '核实数',
+          value: 'verify'
+        },
+        {
+          text: '核查数',
+          value: 'check'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.name)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'verify': {
+            this.y.push(item.verify)
+            break
+          }
+          case 'check': {
+            this.y.push(item.check)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '监督员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 83910a7..a87fa24 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -14,13 +14,29 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+          <!--<dept-access-list :list="list" :query="listQuery"/>-->
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <supervisor-access-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -37,12 +53,14 @@
 import AssessRuleSupervisor from './components/assessRuleSupervisor'
 import { getDayTime } from '@/utils/dateutils'
 import { assessSupervisor, exportAssessSupervisor } from '@/api/assess/assessPost'
+import SupervisorAccessChart from './supervisorAccessChart'
 
 export default {
   name: 'SupervisorAssess',
-  components: { AssessRuleSupervisor },
+  components: { AssessRuleSupervisor, SupervisorAccessChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -292,6 +310,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -300,4 +327,15 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+
 </style>
diff --git a/src/views/assessRegion/accessAreaChart.vue b/src/views/assessRegion/accessAreaChart.vue
new file mode 100644
index 0000000..3424aec
--- /dev/null
+++ b/src/views/assessRegion/accessAreaChart.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessAreaChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'score',
+      radioList: [
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        },
+        {
+          text: '综合指标',
+          value: 'score'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          case 'score': {
+            this.y.push(item.score)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessRegion/accessOverChart.vue b/src/views/assessRegion/accessOverChart.vue
new file mode 100644
index 0000000..08e29f2
--- /dev/null
+++ b/src/views/assessRegion/accessOverChart.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-container">
+    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
+      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
+    </el-radio-group>
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import echarts from 'echarts'
+export default {
+  name: 'AccessOverChart4',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      radio: 'report',
+      radioList: [
+        {
+          text: '总上报数',
+          value: 'report'
+        },
+        {
+          text: '立案数',
+          value: 'register'
+        },
+        {
+          text: '处理数',
+          value: 'process'
+        },
+        {
+          text: '结案数',
+          value: 'close'
+        }
+      ],
+      chart: null,
+      x: [],
+      y: []
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      console.log('init chart', this.list)
+      // 取x,y
+      this.x = []
+      this.y = []
+      this.list.forEach(item => {
+        this.x.push(item.areaName)
+        switch (this.radio) {
+          case 'report': {
+            this.y.push(item.report)
+            break
+          }
+          case 'register': {
+            this.y.push(item.register)
+            break
+          }
+          case 'process': {
+            this.y.push(item.process)
+            break
+          }
+          case 'close': {
+            this.y.push(item.close)
+            break
+          }
+          default: break
+        }
+      })
+      // tooltip
+      const tooltip = _.find(this.radioList, ['value', this.radio]).text
+
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                                  params.color + '"></span>' + params.name + ':' + params.data
+        },
+        color: '#278df9',
+        xAxis: {
+          data: this.x,
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: 14
+          },
+          minInterval: 1
+        },
+        series: [{
+          name: '受理员考核',
+          type: 'bar',
+          data: this.y,
+          barWidth: '40%',
+          barMaxWidth: '100',
+          tooltip: {
+            position: 'right'
+          }
+        }]
+      })
+      this.chart.resize()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  text-align: center;
+}
+.radio-group{
+  margin-top: 20px;
+}
+.chart-body{
+  height: 50vh;
+  width: 80%;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/assessRegion/accessOverChart1.vue b/src/views/assessRegion/accessOverChart1.vue
new file mode 100644
index 0000000..e0bbe06
--- /dev/null
+++ b/src/views/assessRegion/accessOverChart1.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" class="chart-body" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: 'AccessOverChart',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  computed: {
+    pieData() {
+      const tmp = []
+      this.list.forEach(item => {
+        const obj = {}
+        obj.name = '总上报数'
+        obj.value = item.report
+        tmp.push(obj)
+        const obj1 = {}
+        obj1.name = '立案数'
+        obj1.value = item.register
+        tmp.push(obj1)
+        const obj2 = {}
+        obj2.name = '处理数'
+        obj2.value = item.process
+        tmp.push(obj2)
+        const obj3 = {}
+        obj3.name = '结案数'
+        obj3.value = item.close
+        tmp.push(obj3)
+      })
+      return tmp
+    }
+  },
+  watch: {
+    list() {
+      this.initChart()
+    }
+  },
+  activated() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        tooltip: {
+          show: true
+        },
+        // toolbox: {
+        //   show: true,
+        //   right: '20',
+        //   feature: {
+        //     saveAsImage: {
+        //       show: true
+        //     }
+        //   }
+        // },
+        color: [
+          '#19d4ae', '#5ab1ef', '#fa6e86',
+          '#ffb980', '#0067a6', '#c4b4e4',
+          '#d87a80', '#9cbbff', '#d9d0c7',
+          '#87a997', '#d49ea2', '#5b4947',
+          '#7ba3a8'
+        ],
+        legend: {
+          orient: 'vertical',
+          right: 0,
+          data: this.pieData.map(item => item.name)
+        },
+        series: [{
+          name: '整体概况',
+          type: 'pie',
+          data: this.pieData,
+          label: {
+            // formatter: '{b} : {d}%'
+            show: false
+          },
+          tooltip: {
+            formatter: '{b}<br/>数量: {c}({d}%)'
+          }
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .chart-container{
+    /*text-align: center;*/
+  }
+  .chart-body{
+    height: 80vh;
+    width: 90%;
+    margin-right: auto;
+    margin-left: auto;
+  }
+</style>
diff --git a/src/views/assessRegion/assessArea.vue b/src/views/assessRegion/assessArea.vue
index d5a049e..2873d18 100644
--- a/src/views/assessRegion/assessArea.vue
+++ b/src/views/assessRegion/assessArea.vue
@@ -14,23 +14,39 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
-
-    </normal-table>
+    </normal-table>-->
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>-->
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <access-area-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
   </app-container>
 </template>
 
 <script>
 import { getDayTime } from '@/utils/dateutils'
 import { assessArea, exportAssessArea } from '@/api/assess/assessRegion'
-
+import AccessAreaChart from './accessAreaChart'
 export default {
   name: 'AssessArea',
+  components: { AccessAreaChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -62,7 +78,7 @@
       },
       columns: [
         {
-          text: '区域名称',
+          text: '网格名称',
           value: 'areaName'
         },
         {
@@ -206,10 +222,30 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
-
 }
 </script>
+<style rel="stylesheet/scss" lang="scss" scoped>
 
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+</style>
 
diff --git a/src/views/assessRegion/assessOverview.vue b/src/views/assessRegion/assessOverview.vue
index f5ad0ac..a2ee151 100644
--- a/src/views/assessRegion/assessOverview.vue
+++ b/src/views/assessRegion/assessOverview.vue
@@ -14,23 +14,40 @@
           end-placeholder="结束日期"/>
       </search-item>
     </search-area>
-    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" @change="changePage">
+    <!--<normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
       </template>
 
-    </normal-table>
+    </normal-table>-->
+    <div class="tab-block">
+      <el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="list">
+          <span slot="label"><i class="el-icon-s-fold"/> 列表模式</span>
+          <normal-table :data="list.slice((listQuery.offset-1)*listQuery.limit,listQuery.offset*listQuery.limit)" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage"/>
+        </el-tab-pane>
+        <el-tab-pane ref="chartTab" name="chart">
+          <span slot="label"><i class="el-icon-s-data"/> 图表模式</span>
+          <access-over-chart :list="list"/>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button type="text" class="super-button" @click="dialogVisible = true">考核规则</el-button>
+      <el-button type="text" class="super-button" style="right: 85px" @click="exportTable">导出报表</el-button>
+    </div>
   </app-container>
 </template>
 
-<script>a
+<script>
 import { getDayTime } from '@/utils/dateutils'
 import { assessOverview, exportAssessOverview } from '@/api/assess/assessRegion'
+import AccessOverChart from './accessOverChart'
 
 export default {
   name: 'AssessOverview',
+  components: { AccessOverChart },
   data() {
     return {
+      activeName: 'list', // 默认tab
       props: [], // 存储列表页传递的row
       list: [], // 数据列表
       pickerOptions: {
@@ -74,7 +91,7 @@
           value: 'normalReport'
         },
         {
-          text: '待核实',
+          text: '待核实数',
           value: 'toVerify',
           width: 70
         },
@@ -258,6 +275,15 @@
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+      if (tab.name === 'chart') {
+        console.log(tab.$children[0])
+        setTimeout(() => {
+          tab.$children[0].initChart()
+        }, 100)
+      }
     }
   }
 
@@ -265,5 +291,14 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
+  .super-button{
+    position: absolute;
+    top: 76px;
+    right: 10px;
+    /* color: red; */
+  }
+  .tab-block{
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
 </style>
diff --git a/static/project.config.json b/static/project.config.json
index b81dd3b..4d1d6a1 100644
--- a/static/project.config.json
+++ b/static/project.config.json
@@ -1,6 +1,6 @@
 {
   "title": "智慧城管平台",
-  "baseUrl": "http://111.198.10.15:11409/",
+  "baseUrl": "http://localhost:11414/",
   "sameWindow": false,
   "city":"崇仁县",
   "mapUrl":"https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8",