diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>
diff --git a/src/icons/svg/icon-order.svg b/src/icons/svg/icon-order.svg
new file mode 100644
index 0000000..62d7666
--- /dev/null
+++ b/src/icons/svg/icon-order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569202882828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M745.728252 496.746598c-1.548262-21.932522-18.755156-38.468127-40.031738-38.468127L313.372174 458.278471c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914L745.728252 496.746598z" p-id="2569"></path><path d="M419.259806 191.314257l182.786023 0c27.755134 0 51.205219-26.782993 51.205219-58.485019 0-32.247448-23.472598-58.481949-52.322669-58.481949L419.259806 74.347289c-28.850072 0-52.318576 26.233478-52.318576 58.481949S390.410758 191.314257 419.259806 191.314257z" p-id="2570"></path><path d="M706.809871 311.908846 313.372174 311.908846c-21.104667 0-38.940894 18.015306-38.940894 39.3451 0 21.325701 17.836227 39.341007 38.940894 39.341007l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.341007C745.757928 329.924151 727.921701 311.908846 706.809871 311.908846z" p-id="2571"></path><path d="M705.696514 617.027032 313.372174 617.027032c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914l-0.030699-0.876973C744.17999 633.56366 726.972073 617.027032 705.696514 617.027032z" p-id="2572"></path><path d="M884.997156 134.834918c-20.917402-22.630417-50.930973-34.592866-86.793762-34.592866l-52.384068 0c-20.875446 0-43.402509 13.752212-43.402509 35.96205 0 20.99415 21.497617 41.59842 43.402509 41.59842l52.384068 0c24.410969 0 40.187281 15.932878 40.187281 40.59558l0 609.108688c0 24.662703-15.777335 40.59558-40.187281 40.59558L234.242975 868.102371c-25.28078 0-53.5578-17.359366-53.5578-40.59558L180.685175 218.399125c0-24.662703 15.773242-40.59558 40.187281-40.59558l65.757656 0c19.293415 0 32.255635-16.718777 32.255635-41.59842 0-22.518876-12.05864-35.96205-32.255635-35.96205l-65.757656 0c-73.240071 0-116.962875 44.592614-116.962875 119.281687l0 602.351797c0 75.196633 48.097438 123.786281 122.534777 123.786281l566.18304 0c79.021751 0 122.538871-43.963281 122.538871-123.786281L915.166269 219.523739C915.166269 185.472202 904.735709 156.187225 884.997156 134.834918z" p-id="2573"></path></svg>
\ No newline at end of file

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>
diff --git a/src/icons/svg/icon-order.svg b/src/icons/svg/icon-order.svg
new file mode 100644
index 0000000..62d7666
--- /dev/null
+++ b/src/icons/svg/icon-order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569202882828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M745.728252 496.746598c-1.548262-21.932522-18.755156-38.468127-40.031738-38.468127L313.372174 458.278471c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914L745.728252 496.746598z" p-id="2569"></path><path d="M419.259806 191.314257l182.786023 0c27.755134 0 51.205219-26.782993 51.205219-58.485019 0-32.247448-23.472598-58.481949-52.322669-58.481949L419.259806 74.347289c-28.850072 0-52.318576 26.233478-52.318576 58.481949S390.410758 191.314257 419.259806 191.314257z" p-id="2570"></path><path d="M706.809871 311.908846 313.372174 311.908846c-21.104667 0-38.940894 18.015306-38.940894 39.3451 0 21.325701 17.836227 39.341007 38.940894 39.341007l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.341007C745.757928 329.924151 727.921701 311.908846 706.809871 311.908846z" p-id="2571"></path><path d="M705.696514 617.027032 313.372174 617.027032c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914l-0.030699-0.876973C744.17999 633.56366 726.972073 617.027032 705.696514 617.027032z" p-id="2572"></path><path d="M884.997156 134.834918c-20.917402-22.630417-50.930973-34.592866-86.793762-34.592866l-52.384068 0c-20.875446 0-43.402509 13.752212-43.402509 35.96205 0 20.99415 21.497617 41.59842 43.402509 41.59842l52.384068 0c24.410969 0 40.187281 15.932878 40.187281 40.59558l0 609.108688c0 24.662703-15.777335 40.59558-40.187281 40.59558L234.242975 868.102371c-25.28078 0-53.5578-17.359366-53.5578-40.59558L180.685175 218.399125c0-24.662703 15.773242-40.59558 40.187281-40.59558l65.757656 0c19.293415 0 32.255635-16.718777 32.255635-41.59842 0-22.518876-12.05864-35.96205-32.255635-35.96205l-65.757656 0c-73.240071 0-116.962875 44.592614-116.962875 119.281687l0 602.351797c0 75.196633 48.097438 123.786281 122.534777 123.786281l566.18304 0c79.021751 0 122.538871-43.963281 122.538871-123.786281L915.166269 219.523739C915.166269 185.472202 904.735709 156.187225 884.997156 134.834918z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
new file mode 100644
index 0000000..a5eee6c
--- /dev/null
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-line :data="chartData" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'AlarmByDays',
+  data() {
+    this.title = {
+      text: '七日报警趋势'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'alarmWells': '报警井数',
+        'alarmTimes': '报警次数'
+      },
+      metrics: ['alarmTimes', 'alarmWells'],
+      dimension: ['date']
+    }
+    return {
+      chartData: {
+        columns: ['date', 'alarmTimes', 'alarmWells', '下单率'],
+        rows: [
+          { 'date': '9月20日', 'alarmTimes': 1393, 'alarmWells': 1093, '下单率': 0.32 },
+          { 'date': '9月21日', 'alarmTimes': 3530, 'alarmWells': 3230, '下单率': 0.26 },
+          { 'date': '9月22日', 'alarmTimes': 2923, 'alarmWells': 2623, '下单率': 0.76 },
+          { 'date': '9月23日', 'alarmTimes': 1723, 'alarmWells': 1423, '下单率': 0.49 },
+          { 'date': '9月24日', 'alarmTimes': 3792, 'alarmWells': 3492, '下单率': 0.323 },
+          { 'date': '9月25日', 'alarmTimes': 4593, 'alarmWells': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>
diff --git a/src/icons/svg/icon-order.svg b/src/icons/svg/icon-order.svg
new file mode 100644
index 0000000..62d7666
--- /dev/null
+++ b/src/icons/svg/icon-order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569202882828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M745.728252 496.746598c-1.548262-21.932522-18.755156-38.468127-40.031738-38.468127L313.372174 458.278471c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914L745.728252 496.746598z" p-id="2569"></path><path d="M419.259806 191.314257l182.786023 0c27.755134 0 51.205219-26.782993 51.205219-58.485019 0-32.247448-23.472598-58.481949-52.322669-58.481949L419.259806 74.347289c-28.850072 0-52.318576 26.233478-52.318576 58.481949S390.410758 191.314257 419.259806 191.314257z" p-id="2570"></path><path d="M706.809871 311.908846 313.372174 311.908846c-21.104667 0-38.940894 18.015306-38.940894 39.3451 0 21.325701 17.836227 39.341007 38.940894 39.341007l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.341007C745.757928 329.924151 727.921701 311.908846 706.809871 311.908846z" p-id="2571"></path><path d="M705.696514 617.027032 313.372174 617.027032c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914l-0.030699-0.876973C744.17999 633.56366 726.972073 617.027032 705.696514 617.027032z" p-id="2572"></path><path d="M884.997156 134.834918c-20.917402-22.630417-50.930973-34.592866-86.793762-34.592866l-52.384068 0c-20.875446 0-43.402509 13.752212-43.402509 35.96205 0 20.99415 21.497617 41.59842 43.402509 41.59842l52.384068 0c24.410969 0 40.187281 15.932878 40.187281 40.59558l0 609.108688c0 24.662703-15.777335 40.59558-40.187281 40.59558L234.242975 868.102371c-25.28078 0-53.5578-17.359366-53.5578-40.59558L180.685175 218.399125c0-24.662703 15.773242-40.59558 40.187281-40.59558l65.757656 0c19.293415 0 32.255635-16.718777 32.255635-41.59842 0-22.518876-12.05864-35.96205-32.255635-35.96205l-65.757656 0c-73.240071 0-116.962875 44.592614-116.962875 119.281687l0 602.351797c0 75.196633 48.097438 123.786281 122.534777 123.786281l566.18304 0c79.021751 0 122.538871-43.963281 122.538871-123.786281L915.166269 219.523739C915.166269 185.472202 904.735709 156.187225 884.997156 134.834918z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
new file mode 100644
index 0000000..a5eee6c
--- /dev/null
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-line :data="chartData" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'AlarmByDays',
+  data() {
+    this.title = {
+      text: '七日报警趋势'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'alarmWells': '报警井数',
+        'alarmTimes': '报警次数'
+      },
+      metrics: ['alarmTimes', 'alarmWells'],
+      dimension: ['date']
+    }
+    return {
+      chartData: {
+        columns: ['date', 'alarmTimes', 'alarmWells', '下单率'],
+        rows: [
+          { 'date': '9月20日', 'alarmTimes': 1393, 'alarmWells': 1093, '下单率': 0.32 },
+          { 'date': '9月21日', 'alarmTimes': 3530, 'alarmWells': 3230, '下单率': 0.26 },
+          { 'date': '9月22日', 'alarmTimes': 2923, 'alarmWells': 2623, '下单率': 0.76 },
+          { 'date': '9月23日', 'alarmTimes': 1723, 'alarmWells': 1423, '下单率': 0.49 },
+          { 'date': '9月24日', 'alarmTimes': 3792, 'alarmWells': 3492, '下单率': 0.323 },
+          { 'date': '9月25日', 'alarmTimes': 4593, 'alarmWells': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..8920e87
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -0,0 +1,49 @@
+<template>
+  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deviceType': '设备类型',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deviceType'],
+      metrics: ['deviceCount']
+    }
+    return {
+      chartData: {
+        columns: ['deviceType', 'deviceCount', '下单用户', '下单率'],
+        rows: [
+          { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
+          { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>
diff --git a/src/icons/svg/icon-order.svg b/src/icons/svg/icon-order.svg
new file mode 100644
index 0000000..62d7666
--- /dev/null
+++ b/src/icons/svg/icon-order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569202882828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M745.728252 496.746598c-1.548262-21.932522-18.755156-38.468127-40.031738-38.468127L313.372174 458.278471c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914L745.728252 496.746598z" p-id="2569"></path><path d="M419.259806 191.314257l182.786023 0c27.755134 0 51.205219-26.782993 51.205219-58.485019 0-32.247448-23.472598-58.481949-52.322669-58.481949L419.259806 74.347289c-28.850072 0-52.318576 26.233478-52.318576 58.481949S390.410758 191.314257 419.259806 191.314257z" p-id="2570"></path><path d="M706.809871 311.908846 313.372174 311.908846c-21.104667 0-38.940894 18.015306-38.940894 39.3451 0 21.325701 17.836227 39.341007 38.940894 39.341007l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.341007C745.757928 329.924151 727.921701 311.908846 706.809871 311.908846z" p-id="2571"></path><path d="M705.696514 617.027032 313.372174 617.027032c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914l-0.030699-0.876973C744.17999 633.56366 726.972073 617.027032 705.696514 617.027032z" p-id="2572"></path><path d="M884.997156 134.834918c-20.917402-22.630417-50.930973-34.592866-86.793762-34.592866l-52.384068 0c-20.875446 0-43.402509 13.752212-43.402509 35.96205 0 20.99415 21.497617 41.59842 43.402509 41.59842l52.384068 0c24.410969 0 40.187281 15.932878 40.187281 40.59558l0 609.108688c0 24.662703-15.777335 40.59558-40.187281 40.59558L234.242975 868.102371c-25.28078 0-53.5578-17.359366-53.5578-40.59558L180.685175 218.399125c0-24.662703 15.773242-40.59558 40.187281-40.59558l65.757656 0c19.293415 0 32.255635-16.718777 32.255635-41.59842 0-22.518876-12.05864-35.96205-32.255635-35.96205l-65.757656 0c-73.240071 0-116.962875 44.592614-116.962875 119.281687l0 602.351797c0 75.196633 48.097438 123.786281 122.534777 123.786281l566.18304 0c79.021751 0 122.538871-43.963281 122.538871-123.786281L915.166269 219.523739C915.166269 185.472202 904.735709 156.187225 884.997156 134.834918z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
new file mode 100644
index 0000000..a5eee6c
--- /dev/null
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-line :data="chartData" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'AlarmByDays',
+  data() {
+    this.title = {
+      text: '七日报警趋势'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'alarmWells': '报警井数',
+        'alarmTimes': '报警次数'
+      },
+      metrics: ['alarmTimes', 'alarmWells'],
+      dimension: ['date']
+    }
+    return {
+      chartData: {
+        columns: ['date', 'alarmTimes', 'alarmWells', '下单率'],
+        rows: [
+          { 'date': '9月20日', 'alarmTimes': 1393, 'alarmWells': 1093, '下单率': 0.32 },
+          { 'date': '9月21日', 'alarmTimes': 3530, 'alarmWells': 3230, '下单率': 0.26 },
+          { 'date': '9月22日', 'alarmTimes': 2923, 'alarmWells': 2623, '下单率': 0.76 },
+          { 'date': '9月23日', 'alarmTimes': 1723, 'alarmWells': 1423, '下单率': 0.49 },
+          { 'date': '9月24日', 'alarmTimes': 3792, 'alarmWells': 3492, '下单率': 0.323 },
+          { 'date': '9月25日', 'alarmTimes': 4593, 'alarmWells': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..8920e87
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -0,0 +1,49 @@
+<template>
+  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deviceType': '设备类型',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deviceType'],
+      metrics: ['deviceCount']
+    }
+    return {
+      chartData: {
+        columns: ['deviceType', 'deviceCount', '下单用户', '下单率'],
+        rows: [
+          { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
+          { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCountByOnline.vue b/src/views/dashboard/components/DeviceCountByOnline.vue
new file mode 100644
index 0000000..6abcd03
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCountByOnline.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-pie :data="chartData" :extend="extend" :title="title"/>
+</template>
+
+<script>
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
+      }
+    }
+    this.chartSettings = {
+      labelMap: {
+        'onlineStatus': '在线状态',
+        'deviceCount': '设备数量'
+      },
+      dimension: 'onlineStatus',
+      metrics: 'deviceCount'
+    }
+    this.title = {
+      text: '设备在线情况统计'
+    }
+    return {
+      chartData: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: [
+          { 'onlineStatus': '在线', 'deviceCount': 2532 },
+          { 'onlineStatus': '离线', 'deviceCount': 0 }
+        ]
+      }
+    }
+  }
+}
+</script>

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>
diff --git a/src/icons/svg/icon-order.svg b/src/icons/svg/icon-order.svg
new file mode 100644
index 0000000..62d7666
--- /dev/null
+++ b/src/icons/svg/icon-order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569202882828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M745.728252 496.746598c-1.548262-21.932522-18.755156-38.468127-40.031738-38.468127L313.372174 458.278471c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914L745.728252 496.746598z" p-id="2569"></path><path d="M419.259806 191.314257l182.786023 0c27.755134 0 51.205219-26.782993 51.205219-58.485019 0-32.247448-23.472598-58.481949-52.322669-58.481949L419.259806 74.347289c-28.850072 0-52.318576 26.233478-52.318576 58.481949S390.410758 191.314257 419.259806 191.314257z" p-id="2570"></path><path d="M706.809871 311.908846 313.372174 311.908846c-21.104667 0-38.940894 18.015306-38.940894 39.3451 0 21.325701 17.836227 39.341007 38.940894 39.341007l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.341007C745.757928 329.924151 727.921701 311.908846 706.809871 311.908846z" p-id="2571"></path><path d="M705.696514 617.027032 313.372174 617.027032c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914l-0.030699-0.876973C744.17999 633.56366 726.972073 617.027032 705.696514 617.027032z" p-id="2572"></path><path d="M884.997156 134.834918c-20.917402-22.630417-50.930973-34.592866-86.793762-34.592866l-52.384068 0c-20.875446 0-43.402509 13.752212-43.402509 35.96205 0 20.99415 21.497617 41.59842 43.402509 41.59842l52.384068 0c24.410969 0 40.187281 15.932878 40.187281 40.59558l0 609.108688c0 24.662703-15.777335 40.59558-40.187281 40.59558L234.242975 868.102371c-25.28078 0-53.5578-17.359366-53.5578-40.59558L180.685175 218.399125c0-24.662703 15.773242-40.59558 40.187281-40.59558l65.757656 0c19.293415 0 32.255635-16.718777 32.255635-41.59842 0-22.518876-12.05864-35.96205-32.255635-35.96205l-65.757656 0c-73.240071 0-116.962875 44.592614-116.962875 119.281687l0 602.351797c0 75.196633 48.097438 123.786281 122.534777 123.786281l566.18304 0c79.021751 0 122.538871-43.963281 122.538871-123.786281L915.166269 219.523739C915.166269 185.472202 904.735709 156.187225 884.997156 134.834918z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
new file mode 100644
index 0000000..a5eee6c
--- /dev/null
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-line :data="chartData" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'AlarmByDays',
+  data() {
+    this.title = {
+      text: '七日报警趋势'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'alarmWells': '报警井数',
+        'alarmTimes': '报警次数'
+      },
+      metrics: ['alarmTimes', 'alarmWells'],
+      dimension: ['date']
+    }
+    return {
+      chartData: {
+        columns: ['date', 'alarmTimes', 'alarmWells', '下单率'],
+        rows: [
+          { 'date': '9月20日', 'alarmTimes': 1393, 'alarmWells': 1093, '下单率': 0.32 },
+          { 'date': '9月21日', 'alarmTimes': 3530, 'alarmWells': 3230, '下单率': 0.26 },
+          { 'date': '9月22日', 'alarmTimes': 2923, 'alarmWells': 2623, '下单率': 0.76 },
+          { 'date': '9月23日', 'alarmTimes': 1723, 'alarmWells': 1423, '下单率': 0.49 },
+          { 'date': '9月24日', 'alarmTimes': 3792, 'alarmWells': 3492, '下单率': 0.323 },
+          { 'date': '9月25日', 'alarmTimes': 4593, 'alarmWells': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..8920e87
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -0,0 +1,49 @@
+<template>
+  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deviceType': '设备类型',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deviceType'],
+      metrics: ['deviceCount']
+    }
+    return {
+      chartData: {
+        columns: ['deviceType', 'deviceCount', '下单用户', '下单率'],
+        rows: [
+          { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
+          { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCountByOnline.vue b/src/views/dashboard/components/DeviceCountByOnline.vue
new file mode 100644
index 0000000..6abcd03
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCountByOnline.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-pie :data="chartData" :extend="extend" :title="title"/>
+</template>
+
+<script>
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
+      }
+    }
+    this.chartSettings = {
+      labelMap: {
+        'onlineStatus': '在线状态',
+        'deviceCount': '设备数量'
+      },
+      dimension: 'onlineStatus',
+      metrics: 'deviceCount'
+    }
+    this.title = {
+      text: '设备在线情况统计'
+    }
+    return {
+      chartData: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: [
+          { 'onlineStatus': '在线', 'deviceCount': 2532 },
+          { 'onlineStatus': '离线', 'deviceCount': 0 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
new file mode 100644
index 0000000..a3c971e
--- /dev/null
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -0,0 +1,40 @@
+<template>
+  <ve-bar :data="chartData" :title="title" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'JobByStatus',
+  data() {
+    this.title = {
+      text: '工单数量分析统计'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'deptName': '权属单位',
+        'beforGet': '待处理',
+        'beforeConfirm': '待确认',
+        'inHandle': '处理中',
+        'over': '已完成'
+      },
+      stack: {
+        'xxx': ['beforGet', 'beforeConfirm', 'inHandle', 'over']
+      }
+    }
+    return {
+      chartData: {
+        columns: ['deptName', 'beforGet', 'beforeConfirm', 'inHandle', 'over'],
+        rows: [
+          { 'deptName': '电力公司', 'beforGet': 139, 'beforeConfirm': 109, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '开拓热力', 'beforGet': 353, 'beforeConfirm': 323, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '市政集团', 'beforGet': 292, 'beforeConfirm': 262, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '博大网信', 'beforGet': 172, 'beforeConfirm': 142, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '信息办', 'beforGet': 379, 'beforeConfirm': 349, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '燃气四分', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '其他', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 }
+        ]
+      }
+    }
+  }
+}
+</script>

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>
diff --git a/src/icons/svg/icon-order.svg b/src/icons/svg/icon-order.svg
new file mode 100644
index 0000000..62d7666
--- /dev/null
+++ b/src/icons/svg/icon-order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569202882828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M745.728252 496.746598c-1.548262-21.932522-18.755156-38.468127-40.031738-38.468127L313.372174 458.278471c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914L745.728252 496.746598z" p-id="2569"></path><path d="M419.259806 191.314257l182.786023 0c27.755134 0 51.205219-26.782993 51.205219-58.485019 0-32.247448-23.472598-58.481949-52.322669-58.481949L419.259806 74.347289c-28.850072 0-52.318576 26.233478-52.318576 58.481949S390.410758 191.314257 419.259806 191.314257z" p-id="2570"></path><path d="M706.809871 311.908846 313.372174 311.908846c-21.104667 0-38.940894 18.015306-38.940894 39.3451 0 21.325701 17.836227 39.341007 38.940894 39.341007l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.341007C745.757928 329.924151 727.921701 311.908846 706.809871 311.908846z" p-id="2571"></path><path d="M705.696514 617.027032 313.372174 617.027032c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914l-0.030699-0.876973C744.17999 633.56366 726.972073 617.027032 705.696514 617.027032z" p-id="2572"></path><path d="M884.997156 134.834918c-20.917402-22.630417-50.930973-34.592866-86.793762-34.592866l-52.384068 0c-20.875446 0-43.402509 13.752212-43.402509 35.96205 0 20.99415 21.497617 41.59842 43.402509 41.59842l52.384068 0c24.410969 0 40.187281 15.932878 40.187281 40.59558l0 609.108688c0 24.662703-15.777335 40.59558-40.187281 40.59558L234.242975 868.102371c-25.28078 0-53.5578-17.359366-53.5578-40.59558L180.685175 218.399125c0-24.662703 15.773242-40.59558 40.187281-40.59558l65.757656 0c19.293415 0 32.255635-16.718777 32.255635-41.59842 0-22.518876-12.05864-35.96205-32.255635-35.96205l-65.757656 0c-73.240071 0-116.962875 44.592614-116.962875 119.281687l0 602.351797c0 75.196633 48.097438 123.786281 122.534777 123.786281l566.18304 0c79.021751 0 122.538871-43.963281 122.538871-123.786281L915.166269 219.523739C915.166269 185.472202 904.735709 156.187225 884.997156 134.834918z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
new file mode 100644
index 0000000..a5eee6c
--- /dev/null
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-line :data="chartData" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'AlarmByDays',
+  data() {
+    this.title = {
+      text: '七日报警趋势'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'alarmWells': '报警井数',
+        'alarmTimes': '报警次数'
+      },
+      metrics: ['alarmTimes', 'alarmWells'],
+      dimension: ['date']
+    }
+    return {
+      chartData: {
+        columns: ['date', 'alarmTimes', 'alarmWells', '下单率'],
+        rows: [
+          { 'date': '9月20日', 'alarmTimes': 1393, 'alarmWells': 1093, '下单率': 0.32 },
+          { 'date': '9月21日', 'alarmTimes': 3530, 'alarmWells': 3230, '下单率': 0.26 },
+          { 'date': '9月22日', 'alarmTimes': 2923, 'alarmWells': 2623, '下单率': 0.76 },
+          { 'date': '9月23日', 'alarmTimes': 1723, 'alarmWells': 1423, '下单率': 0.49 },
+          { 'date': '9月24日', 'alarmTimes': 3792, 'alarmWells': 3492, '下单率': 0.323 },
+          { 'date': '9月25日', 'alarmTimes': 4593, 'alarmWells': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..8920e87
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -0,0 +1,49 @@
+<template>
+  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deviceType': '设备类型',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deviceType'],
+      metrics: ['deviceCount']
+    }
+    return {
+      chartData: {
+        columns: ['deviceType', 'deviceCount', '下单用户', '下单率'],
+        rows: [
+          { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
+          { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCountByOnline.vue b/src/views/dashboard/components/DeviceCountByOnline.vue
new file mode 100644
index 0000000..6abcd03
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCountByOnline.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-pie :data="chartData" :extend="extend" :title="title"/>
+</template>
+
+<script>
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
+      }
+    }
+    this.chartSettings = {
+      labelMap: {
+        'onlineStatus': '在线状态',
+        'deviceCount': '设备数量'
+      },
+      dimension: 'onlineStatus',
+      metrics: 'deviceCount'
+    }
+    this.title = {
+      text: '设备在线情况统计'
+    }
+    return {
+      chartData: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: [
+          { 'onlineStatus': '在线', 'deviceCount': 2532 },
+          { 'onlineStatus': '离线', 'deviceCount': 0 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
new file mode 100644
index 0000000..a3c971e
--- /dev/null
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -0,0 +1,40 @@
+<template>
+  <ve-bar :data="chartData" :title="title" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'JobByStatus',
+  data() {
+    this.title = {
+      text: '工单数量分析统计'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'deptName': '权属单位',
+        'beforGet': '待处理',
+        'beforeConfirm': '待确认',
+        'inHandle': '处理中',
+        'over': '已完成'
+      },
+      stack: {
+        'xxx': ['beforGet', 'beforeConfirm', 'inHandle', 'over']
+      }
+    }
+    return {
+      chartData: {
+        columns: ['deptName', 'beforGet', 'beforeConfirm', 'inHandle', 'over'],
+        rows: [
+          { 'deptName': '电力公司', 'beforGet': 139, 'beforeConfirm': 109, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '开拓热力', 'beforGet': 353, 'beforeConfirm': 323, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '市政集团', 'beforGet': 292, 'beforeConfirm': 262, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '博大网信', 'beforGet': 172, 'beforeConfirm': 142, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '信息办', 'beforGet': 379, 'beforeConfirm': 349, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '燃气四分', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '其他', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..b89924d
--- /dev/null
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col v-for="card in dataGroup" :key="card.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+export default {
+  components: {
+    Card
+  },
+  data() {
+    return {
+      dataGroup: [
+        {
+          title: '井总数量',
+          context: '500',
+          icon: 'icon-well',
+          color: '#40c9c6'
+        },
+        {
+          title: '设备数量',
+          context: '1314',
+          icon: 'icon-device',
+          color: '#36a3f7'
+        },
+        {
+          title: '报警数量',
+          context: '4',
+          icon: 'icon-alarm',
+          color: '#f4516c'
+        },
+        {
+          title: '工单数量',
+          context: '2',
+          icon: 'icon-order',
+          color: '#f4516c'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>
diff --git a/src/icons/svg/icon-order.svg b/src/icons/svg/icon-order.svg
new file mode 100644
index 0000000..62d7666
--- /dev/null
+++ b/src/icons/svg/icon-order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569202882828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M745.728252 496.746598c-1.548262-21.932522-18.755156-38.468127-40.031738-38.468127L313.372174 458.278471c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914L745.728252 496.746598z" p-id="2569"></path><path d="M419.259806 191.314257l182.786023 0c27.755134 0 51.205219-26.782993 51.205219-58.485019 0-32.247448-23.472598-58.481949-52.322669-58.481949L419.259806 74.347289c-28.850072 0-52.318576 26.233478-52.318576 58.481949S390.410758 191.314257 419.259806 191.314257z" p-id="2570"></path><path d="M706.809871 311.908846 313.372174 311.908846c-21.104667 0-38.940894 18.015306-38.940894 39.3451 0 21.325701 17.836227 39.341007 38.940894 39.341007l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.341007C745.757928 329.924151 727.921701 311.908846 706.809871 311.908846z" p-id="2571"></path><path d="M705.696514 617.027032 313.372174 617.027032c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914l-0.030699-0.876973C744.17999 633.56366 726.972073 617.027032 705.696514 617.027032z" p-id="2572"></path><path d="M884.997156 134.834918c-20.917402-22.630417-50.930973-34.592866-86.793762-34.592866l-52.384068 0c-20.875446 0-43.402509 13.752212-43.402509 35.96205 0 20.99415 21.497617 41.59842 43.402509 41.59842l52.384068 0c24.410969 0 40.187281 15.932878 40.187281 40.59558l0 609.108688c0 24.662703-15.777335 40.59558-40.187281 40.59558L234.242975 868.102371c-25.28078 0-53.5578-17.359366-53.5578-40.59558L180.685175 218.399125c0-24.662703 15.773242-40.59558 40.187281-40.59558l65.757656 0c19.293415 0 32.255635-16.718777 32.255635-41.59842 0-22.518876-12.05864-35.96205-32.255635-35.96205l-65.757656 0c-73.240071 0-116.962875 44.592614-116.962875 119.281687l0 602.351797c0 75.196633 48.097438 123.786281 122.534777 123.786281l566.18304 0c79.021751 0 122.538871-43.963281 122.538871-123.786281L915.166269 219.523739C915.166269 185.472202 904.735709 156.187225 884.997156 134.834918z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
new file mode 100644
index 0000000..a5eee6c
--- /dev/null
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-line :data="chartData" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'AlarmByDays',
+  data() {
+    this.title = {
+      text: '七日报警趋势'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'alarmWells': '报警井数',
+        'alarmTimes': '报警次数'
+      },
+      metrics: ['alarmTimes', 'alarmWells'],
+      dimension: ['date']
+    }
+    return {
+      chartData: {
+        columns: ['date', 'alarmTimes', 'alarmWells', '下单率'],
+        rows: [
+          { 'date': '9月20日', 'alarmTimes': 1393, 'alarmWells': 1093, '下单率': 0.32 },
+          { 'date': '9月21日', 'alarmTimes': 3530, 'alarmWells': 3230, '下单率': 0.26 },
+          { 'date': '9月22日', 'alarmTimes': 2923, 'alarmWells': 2623, '下单率': 0.76 },
+          { 'date': '9月23日', 'alarmTimes': 1723, 'alarmWells': 1423, '下单率': 0.49 },
+          { 'date': '9月24日', 'alarmTimes': 3792, 'alarmWells': 3492, '下单率': 0.323 },
+          { 'date': '9月25日', 'alarmTimes': 4593, 'alarmWells': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..8920e87
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -0,0 +1,49 @@
+<template>
+  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deviceType': '设备类型',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deviceType'],
+      metrics: ['deviceCount']
+    }
+    return {
+      chartData: {
+        columns: ['deviceType', 'deviceCount', '下单用户', '下单率'],
+        rows: [
+          { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
+          { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCountByOnline.vue b/src/views/dashboard/components/DeviceCountByOnline.vue
new file mode 100644
index 0000000..6abcd03
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCountByOnline.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-pie :data="chartData" :extend="extend" :title="title"/>
+</template>
+
+<script>
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
+      }
+    }
+    this.chartSettings = {
+      labelMap: {
+        'onlineStatus': '在线状态',
+        'deviceCount': '设备数量'
+      },
+      dimension: 'onlineStatus',
+      metrics: 'deviceCount'
+    }
+    this.title = {
+      text: '设备在线情况统计'
+    }
+    return {
+      chartData: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: [
+          { 'onlineStatus': '在线', 'deviceCount': 2532 },
+          { 'onlineStatus': '离线', 'deviceCount': 0 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
new file mode 100644
index 0000000..a3c971e
--- /dev/null
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -0,0 +1,40 @@
+<template>
+  <ve-bar :data="chartData" :title="title" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'JobByStatus',
+  data() {
+    this.title = {
+      text: '工单数量分析统计'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'deptName': '权属单位',
+        'beforGet': '待处理',
+        'beforeConfirm': '待确认',
+        'inHandle': '处理中',
+        'over': '已完成'
+      },
+      stack: {
+        'xxx': ['beforGet', 'beforeConfirm', 'inHandle', 'over']
+      }
+    }
+    return {
+      chartData: {
+        columns: ['deptName', 'beforGet', 'beforeConfirm', 'inHandle', 'over'],
+        rows: [
+          { 'deptName': '电力公司', 'beforGet': 139, 'beforeConfirm': 109, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '开拓热力', 'beforGet': 353, 'beforeConfirm': 323, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '市政集团', 'beforGet': 292, 'beforeConfirm': 262, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '博大网信', 'beforGet': 172, 'beforeConfirm': 142, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '信息办', 'beforGet': 379, 'beforeConfirm': 349, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '燃气四分', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '其他', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..b89924d
--- /dev/null
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col v-for="card in dataGroup" :key="card.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+export default {
+  components: {
+    Card
+  },
+  data() {
+    return {
+      dataGroup: [
+        {
+          title: '井总数量',
+          context: '500',
+          icon: 'icon-well',
+          color: '#40c9c6'
+        },
+        {
+          title: '设备数量',
+          context: '1314',
+          icon: 'icon-device',
+          color: '#36a3f7'
+        },
+        {
+          title: '报警数量',
+          context: '4',
+          icon: 'icon-alarm',
+          color: '#f4516c'
+        },
+        {
+          title: '工单数量',
+          context: '2',
+          icon: 'icon-order',
+          color: '#f4516c'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/components/WellCount.vue b/src/views/dashboard/components/WellCount.vue
new file mode 100644
index 0000000..b5ce726
--- /dev/null
+++ b/src/views/dashboard/components/WellCount.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-pie :data="chartData" :extend="extend" :title="title"/>
+</template>
+
+<script>
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
+      }
+    }
+    this.chartSettings = {
+      labelMap: {
+        'bfzt': '布防状态',
+        'wellCount': '井数量'
+      },
+      dimension: 'bfzt',
+      metrics: 'wellCount'
+    }
+    this.title = {
+      text: '布防撤防统计'
+    }
+    return {
+      chartData: {
+        columns: ['bfzt', 'wellCount'],
+        rows: [
+          { 'bfzt': '布防', 'wellCount': 1393 },
+          { 'bfzt': '撤防', 'wellCount': 3530 }
+        ]
+      }
+    }
+  }
+}
+</script>

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>
diff --git a/src/icons/svg/icon-order.svg b/src/icons/svg/icon-order.svg
new file mode 100644
index 0000000..62d7666
--- /dev/null
+++ b/src/icons/svg/icon-order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569202882828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M745.728252 496.746598c-1.548262-21.932522-18.755156-38.468127-40.031738-38.468127L313.372174 458.278471c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914L745.728252 496.746598z" p-id="2569"></path><path d="M419.259806 191.314257l182.786023 0c27.755134 0 51.205219-26.782993 51.205219-58.485019 0-32.247448-23.472598-58.481949-52.322669-58.481949L419.259806 74.347289c-28.850072 0-52.318576 26.233478-52.318576 58.481949S390.410758 191.314257 419.259806 191.314257z" p-id="2570"></path><path d="M706.809871 311.908846 313.372174 311.908846c-21.104667 0-38.940894 18.015306-38.940894 39.3451 0 21.325701 17.836227 39.341007 38.940894 39.341007l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.341007C745.757928 329.924151 727.921701 311.908846 706.809871 311.908846z" p-id="2571"></path><path d="M705.696514 617.027032 313.372174 617.027032c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914l-0.030699-0.876973C744.17999 633.56366 726.972073 617.027032 705.696514 617.027032z" p-id="2572"></path><path d="M884.997156 134.834918c-20.917402-22.630417-50.930973-34.592866-86.793762-34.592866l-52.384068 0c-20.875446 0-43.402509 13.752212-43.402509 35.96205 0 20.99415 21.497617 41.59842 43.402509 41.59842l52.384068 0c24.410969 0 40.187281 15.932878 40.187281 40.59558l0 609.108688c0 24.662703-15.777335 40.59558-40.187281 40.59558L234.242975 868.102371c-25.28078 0-53.5578-17.359366-53.5578-40.59558L180.685175 218.399125c0-24.662703 15.773242-40.59558 40.187281-40.59558l65.757656 0c19.293415 0 32.255635-16.718777 32.255635-41.59842 0-22.518876-12.05864-35.96205-32.255635-35.96205l-65.757656 0c-73.240071 0-116.962875 44.592614-116.962875 119.281687l0 602.351797c0 75.196633 48.097438 123.786281 122.534777 123.786281l566.18304 0c79.021751 0 122.538871-43.963281 122.538871-123.786281L915.166269 219.523739C915.166269 185.472202 904.735709 156.187225 884.997156 134.834918z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
new file mode 100644
index 0000000..a5eee6c
--- /dev/null
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-line :data="chartData" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'AlarmByDays',
+  data() {
+    this.title = {
+      text: '七日报警趋势'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'alarmWells': '报警井数',
+        'alarmTimes': '报警次数'
+      },
+      metrics: ['alarmTimes', 'alarmWells'],
+      dimension: ['date']
+    }
+    return {
+      chartData: {
+        columns: ['date', 'alarmTimes', 'alarmWells', '下单率'],
+        rows: [
+          { 'date': '9月20日', 'alarmTimes': 1393, 'alarmWells': 1093, '下单率': 0.32 },
+          { 'date': '9月21日', 'alarmTimes': 3530, 'alarmWells': 3230, '下单率': 0.26 },
+          { 'date': '9月22日', 'alarmTimes': 2923, 'alarmWells': 2623, '下单率': 0.76 },
+          { 'date': '9月23日', 'alarmTimes': 1723, 'alarmWells': 1423, '下单率': 0.49 },
+          { 'date': '9月24日', 'alarmTimes': 3792, 'alarmWells': 3492, '下单率': 0.323 },
+          { 'date': '9月25日', 'alarmTimes': 4593, 'alarmWells': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..8920e87
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -0,0 +1,49 @@
+<template>
+  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deviceType': '设备类型',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deviceType'],
+      metrics: ['deviceCount']
+    }
+    return {
+      chartData: {
+        columns: ['deviceType', 'deviceCount', '下单用户', '下单率'],
+        rows: [
+          { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
+          { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCountByOnline.vue b/src/views/dashboard/components/DeviceCountByOnline.vue
new file mode 100644
index 0000000..6abcd03
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCountByOnline.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-pie :data="chartData" :extend="extend" :title="title"/>
+</template>
+
+<script>
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
+      }
+    }
+    this.chartSettings = {
+      labelMap: {
+        'onlineStatus': '在线状态',
+        'deviceCount': '设备数量'
+      },
+      dimension: 'onlineStatus',
+      metrics: 'deviceCount'
+    }
+    this.title = {
+      text: '设备在线情况统计'
+    }
+    return {
+      chartData: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: [
+          { 'onlineStatus': '在线', 'deviceCount': 2532 },
+          { 'onlineStatus': '离线', 'deviceCount': 0 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
new file mode 100644
index 0000000..a3c971e
--- /dev/null
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -0,0 +1,40 @@
+<template>
+  <ve-bar :data="chartData" :title="title" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'JobByStatus',
+  data() {
+    this.title = {
+      text: '工单数量分析统计'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'deptName': '权属单位',
+        'beforGet': '待处理',
+        'beforeConfirm': '待确认',
+        'inHandle': '处理中',
+        'over': '已完成'
+      },
+      stack: {
+        'xxx': ['beforGet', 'beforeConfirm', 'inHandle', 'over']
+      }
+    }
+    return {
+      chartData: {
+        columns: ['deptName', 'beforGet', 'beforeConfirm', 'inHandle', 'over'],
+        rows: [
+          { 'deptName': '电力公司', 'beforGet': 139, 'beforeConfirm': 109, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '开拓热力', 'beforGet': 353, 'beforeConfirm': 323, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '市政集团', 'beforGet': 292, 'beforeConfirm': 262, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '博大网信', 'beforGet': 172, 'beforeConfirm': 142, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '信息办', 'beforGet': 379, 'beforeConfirm': 349, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '燃气四分', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '其他', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..b89924d
--- /dev/null
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col v-for="card in dataGroup" :key="card.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+export default {
+  components: {
+    Card
+  },
+  data() {
+    return {
+      dataGroup: [
+        {
+          title: '井总数量',
+          context: '500',
+          icon: 'icon-well',
+          color: '#40c9c6'
+        },
+        {
+          title: '设备数量',
+          context: '1314',
+          icon: 'icon-device',
+          color: '#36a3f7'
+        },
+        {
+          title: '报警数量',
+          context: '4',
+          icon: 'icon-alarm',
+          color: '#f4516c'
+        },
+        {
+          title: '工单数量',
+          context: '2',
+          icon: 'icon-order',
+          color: '#f4516c'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/components/WellCount.vue b/src/views/dashboard/components/WellCount.vue
new file mode 100644
index 0000000..b5ce726
--- /dev/null
+++ b/src/views/dashboard/components/WellCount.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-pie :data="chartData" :extend="extend" :title="title"/>
+</template>
+
+<script>
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
+      }
+    }
+    this.chartSettings = {
+      labelMap: {
+        'bfzt': '布防状态',
+        'wellCount': '井数量'
+      },
+      dimension: 'bfzt',
+      metrics: 'wellCount'
+    }
+    this.title = {
+      text: '布防撤防统计'
+    }
+    return {
+      chartData: {
+        columns: ['bfzt', 'wellCount'],
+        rows: [
+          { 'bfzt': '布防', 'wellCount': 1393 },
+          { 'bfzt': '撤防', 'wellCount': 3530 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/WellCountByType.vue b/src/views/dashboard/components/WellCountByType.vue
new file mode 100644
index 0000000..da959b5
--- /dev/null
+++ b/src/views/dashboard/components/WellCountByType.vue
@@ -0,0 +1,52 @@
+<template>
+  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '井类型数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'wellType': '井类型',
+        'wellCount': '井数量'
+      },
+      dimension: ['wellType'],
+      metrics: ['wellCount']
+    }
+    return {
+      chartData: {
+        columns: ['wellType', 'wellCount', '下单用户', '下单率'],
+        rows: [
+          { 'wellType': '电力', 'wellCount': 1282, '下单用户': 1093, '下单率': 0.32 },
+          { 'wellType': '热力', 'wellCount': 1457, '下单用户': 3230, '下单率': 0.26 },
+          { 'wellType': '交通', 'wellCount': 1580, '下单用户': 2623, '下单率': 0.76 },
+          { 'wellType': '路灯', 'wellCount': 4426, '下单用户': 1423, '下单率': 0.49 },
+          { 'wellType': '监控', 'wellCount': 310, '下单用户': 3492, '下单率': 0.323 },
+          { 'wellType': '雨水', 'wellCount': 2317, '下单用户': 4293, '下单率': 0.78 },
+          { 'wellType': '污水', 'wellCount': 2055, '下单用户': 4293, '下单率': 0.78 },
+          { 'wellType': '通信', 'wellCount': 1174, '下单用户': 4293, '下单率': 0.78 },
+          { 'wellType': '燃气', 'wellCount': 43, '下单用户': 4293, '下单率': 0.78 },
+          { 'wellType': '其他', 'wellCount': 8, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>

diff --git a/package.json b/package.json
index 9e107ac..5003e53 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "axios": "0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.1",
-    "element-ui": "2.8.2",
+    "element-ui": "^2.12.0",
     "event-source-polyfill": "^1.0.5",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -28,6 +28,7 @@
     "v-charts": "^1.19.0",
     "vue": "2.5.17",
     "vue-amap": "^0.5.9",
+    "vue-count-to": "^1.0.13",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -47,7 +48,7 @@
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
-    "element-theme-chalk": "^2.8.2",
+    "element-theme-chalk": "^2.12.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
new file mode 100644
index 0000000..f8c359b
--- /dev/null
+++ b/src/components/BigData/Card/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-card :body-style="{ padding: '0px' }" shadow="always">
+    <div class="card-panel" >
+      <div :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+      </div>
+      <div class="card-panel-description">
+        <div class="card-panel-text">
+          {{ title }}
+        </div>
+        <div class="card-panel-num" >
+          {{ context }}
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    context: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: '#40c9c6'
+    }
+  },
+  computed: {
+    backgroundColor() {
+      return {
+        color: this.color
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+  &:hover {
+  .card-panel-icon-wrapper {
+    color: #fff;
+  }
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: left;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 10px;
+
+  .card-panel-text {
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .card-panel-num {
+    font-size: 20px;
+  }
+  }
+  }
+</style>
diff --git a/src/icons/svg/icon-order.svg b/src/icons/svg/icon-order.svg
new file mode 100644
index 0000000..62d7666
--- /dev/null
+++ b/src/icons/svg/icon-order.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569202882828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M745.728252 496.746598c-1.548262-21.932522-18.755156-38.468127-40.031738-38.468127L313.372174 458.278471c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914L745.728252 496.746598z" p-id="2569"></path><path d="M419.259806 191.314257l182.786023 0c27.755134 0 51.205219-26.782993 51.205219-58.485019 0-32.247448-23.472598-58.481949-52.322669-58.481949L419.259806 74.347289c-28.850072 0-52.318576 26.233478-52.318576 58.481949S390.410758 191.314257 419.259806 191.314257z" p-id="2570"></path><path d="M706.809871 311.908846 313.372174 311.908846c-21.104667 0-38.940894 18.015306-38.940894 39.3451 0 21.325701 17.836227 39.341007 38.940894 39.341007l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.341007C745.757928 329.924151 727.921701 311.908846 706.809871 311.908846z" p-id="2571"></path><path d="M705.696514 617.027032 313.372174 617.027032c-21.104667 0-38.940894 18.019399-38.940894 39.3451 0 21.321608 17.836227 39.336914 38.940894 39.336914l393.438721 0c21.11183 0 38.948057-18.015306 38.948057-39.336914l-0.030699-0.876973C744.17999 633.56366 726.972073 617.027032 705.696514 617.027032z" p-id="2572"></path><path d="M884.997156 134.834918c-20.917402-22.630417-50.930973-34.592866-86.793762-34.592866l-52.384068 0c-20.875446 0-43.402509 13.752212-43.402509 35.96205 0 20.99415 21.497617 41.59842 43.402509 41.59842l52.384068 0c24.410969 0 40.187281 15.932878 40.187281 40.59558l0 609.108688c0 24.662703-15.777335 40.59558-40.187281 40.59558L234.242975 868.102371c-25.28078 0-53.5578-17.359366-53.5578-40.59558L180.685175 218.399125c0-24.662703 15.773242-40.59558 40.187281-40.59558l65.757656 0c19.293415 0 32.255635-16.718777 32.255635-41.59842 0-22.518876-12.05864-35.96205-32.255635-35.96205l-65.757656 0c-73.240071 0-116.962875 44.592614-116.962875 119.281687l0 602.351797c0 75.196633 48.097438 123.786281 122.534777 123.786281l566.18304 0c79.021751 0 122.538871-43.963281 122.538871-123.786281L915.166269 219.523739C915.166269 185.472202 904.735709 156.187225 884.997156 134.834918z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
new file mode 100644
index 0000000..a5eee6c
--- /dev/null
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-line :data="chartData" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'AlarmByDays',
+  data() {
+    this.title = {
+      text: '七日报警趋势'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'alarmWells': '报警井数',
+        'alarmTimes': '报警次数'
+      },
+      metrics: ['alarmTimes', 'alarmWells'],
+      dimension: ['date']
+    }
+    return {
+      chartData: {
+        columns: ['date', 'alarmTimes', 'alarmWells', '下单率'],
+        rows: [
+          { 'date': '9月20日', 'alarmTimes': 1393, 'alarmWells': 1093, '下单率': 0.32 },
+          { 'date': '9月21日', 'alarmTimes': 3530, 'alarmWells': 3230, '下单率': 0.26 },
+          { 'date': '9月22日', 'alarmTimes': 2923, 'alarmWells': 2623, '下单率': 0.76 },
+          { 'date': '9月23日', 'alarmTimes': 1723, 'alarmWells': 1423, '下单率': 0.49 },
+          { 'date': '9月24日', 'alarmTimes': 3792, 'alarmWells': 3492, '下单率': 0.323 },
+          { 'date': '9月25日', 'alarmTimes': 4593, 'alarmWells': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..8920e87
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -0,0 +1,49 @@
+<template>
+  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deviceType': '设备类型',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deviceType'],
+      metrics: ['deviceCount']
+    }
+    return {
+      chartData: {
+        columns: ['deviceType', 'deviceCount', '下单用户', '下单率'],
+        rows: [
+          { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
+          { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/DeviceCountByOnline.vue b/src/views/dashboard/components/DeviceCountByOnline.vue
new file mode 100644
index 0000000..6abcd03
--- /dev/null
+++ b/src/views/dashboard/components/DeviceCountByOnline.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-pie :data="chartData" :extend="extend" :title="title"/>
+</template>
+
+<script>
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
+      }
+    }
+    this.chartSettings = {
+      labelMap: {
+        'onlineStatus': '在线状态',
+        'deviceCount': '设备数量'
+      },
+      dimension: 'onlineStatus',
+      metrics: 'deviceCount'
+    }
+    this.title = {
+      text: '设备在线情况统计'
+    }
+    return {
+      chartData: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: [
+          { 'onlineStatus': '在线', 'deviceCount': 2532 },
+          { 'onlineStatus': '离线', 'deviceCount': 0 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
new file mode 100644
index 0000000..a3c971e
--- /dev/null
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -0,0 +1,40 @@
+<template>
+  <ve-bar :data="chartData" :title="title" :settings="chartSettings"/>
+</template>
+
+<script>
+export default {
+  name: 'JobByStatus',
+  data() {
+    this.title = {
+      text: '工单数量分析统计'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'deptName': '权属单位',
+        'beforGet': '待处理',
+        'beforeConfirm': '待确认',
+        'inHandle': '处理中',
+        'over': '已完成'
+      },
+      stack: {
+        'xxx': ['beforGet', 'beforeConfirm', 'inHandle', 'over']
+      }
+    }
+    return {
+      chartData: {
+        columns: ['deptName', 'beforGet', 'beforeConfirm', 'inHandle', 'over'],
+        rows: [
+          { 'deptName': '电力公司', 'beforGet': 139, 'beforeConfirm': 109, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '开拓热力', 'beforGet': 353, 'beforeConfirm': 323, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '市政集团', 'beforGet': 292, 'beforeConfirm': 262, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '博大网信', 'beforGet': 172, 'beforeConfirm': 142, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '信息办', 'beforGet': 379, 'beforeConfirm': 349, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '燃气四分', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 },
+          { 'deptName': '其他', 'beforGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..b89924d
--- /dev/null
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col v-for="card in dataGroup" :key="card.title" :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+export default {
+  components: {
+    Card
+  },
+  data() {
+    return {
+      dataGroup: [
+        {
+          title: '井总数量',
+          context: '500',
+          icon: 'icon-well',
+          color: '#40c9c6'
+        },
+        {
+          title: '设备数量',
+          context: '1314',
+          icon: 'icon-device',
+          color: '#36a3f7'
+        },
+        {
+          title: '报警数量',
+          context: '4',
+          icon: 'icon-alarm',
+          color: '#f4516c'
+        },
+        {
+          title: '工单数量',
+          context: '2',
+          icon: 'icon-order',
+          color: '#f4516c'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/components/WellCount.vue b/src/views/dashboard/components/WellCount.vue
new file mode 100644
index 0000000..b5ce726
--- /dev/null
+++ b/src/views/dashboard/components/WellCount.vue
@@ -0,0 +1,35 @@
+<template>
+  <ve-pie :data="chartData" :extend="extend" :title="title"/>
+</template>
+
+<script>
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
+      }
+    }
+    this.chartSettings = {
+      labelMap: {
+        'bfzt': '布防状态',
+        'wellCount': '井数量'
+      },
+      dimension: 'bfzt',
+      metrics: 'wellCount'
+    }
+    this.title = {
+      text: '布防撤防统计'
+    }
+    return {
+      chartData: {
+        columns: ['bfzt', 'wellCount'],
+        rows: [
+          { 'bfzt': '布防', 'wellCount': 1393 },
+          { 'bfzt': '撤防', 'wellCount': 3530 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/components/WellCountByType.vue b/src/views/dashboard/components/WellCountByType.vue
new file mode 100644
index 0000000..da959b5
--- /dev/null
+++ b/src/views/dashboard/components/WellCountByType.vue
@@ -0,0 +1,52 @@
+<template>
+  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '井类型数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'wellType': '井类型',
+        'wellCount': '井数量'
+      },
+      dimension: ['wellType'],
+      metrics: ['wellCount']
+    }
+    return {
+      chartData: {
+        columns: ['wellType', 'wellCount', '下单用户', '下单率'],
+        rows: [
+          { 'wellType': '电力', 'wellCount': 1282, '下单用户': 1093, '下单率': 0.32 },
+          { 'wellType': '热力', 'wellCount': 1457, '下单用户': 3230, '下单率': 0.26 },
+          { 'wellType': '交通', 'wellCount': 1580, '下单用户': 2623, '下单率': 0.76 },
+          { 'wellType': '路灯', 'wellCount': 4426, '下单用户': 1423, '下单率': 0.49 },
+          { 'wellType': '监控', 'wellCount': 310, '下单用户': 3492, '下单率': 0.323 },
+          { 'wellType': '雨水', 'wellCount': 2317, '下单用户': 4293, '下单率': 0.78 },
+          { 'wellType': '污水', 'wellCount': 2055, '下单用户': 4293, '下单率': 0.78 },
+          { 'wellType': '通信', 'wellCount': 1174, '下单用户': 4293, '下单率': 0.78 },
+          { 'wellType': '燃气', 'wellCount': 43, '下单用户': 4293, '下单率': 0.78 },
+          { 'wellType': '其他', 'wellCount': 8, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 111d35c..c5b6b7c 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,22 +1,66 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">name:{{ name }}</div>
-    <div class="dashboard-text">roles:<span v-for="role in roleNames" :key="role">{{ role }}</span></div>
-    <div class="dashboard-text">tips:<span v-for="tip in roleTips" :key="tip">{{ tip }}</span></div>
-    <div v-if="hasPerm('kaptcha')" class="dashboard-text">有权限显示</div>
-    <div class="dashboard-text">wellTypes:<span v-for="wellType in wellTypes" :key="wellType">{{ wellType }}</span></div>
-    <div class="dashboard-text">deviceTypes:<span v-for="deviceType in deviceTypes" :key="deviceType">{{ deviceType }}</span></div>
-    <div class="dashboard-text">communications:<span v-for="communication in communications" :key="communication">{{ communication }}</span></div>
-    <div class="dashboard-text">area:{{ area }}</div>
-
+    <panel-group/>
+    <el-row>
+      <el-col :span="10">
+        <el-card shadow="never">
+          <well-count/>
+        </el-card>
+      </el-col>
+      <el-col :span="14">
+        <el-card shadow="never">
+          <well-count-by-type/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="14">
+        <el-card shadow="never">
+        <device-count/>
+        </el-card>
+      </el-col>
+      <el-col :span="10">
+        <el-card shadow="never">
+        <device-count-by-online/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="10">
+        <el-card shadow="never">
+        <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <el-col :span="14">
+        <el-card shadow="never">
+        <job-by-status/>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCount from './components/WellCount'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
 
 export default {
   name: 'Dashboard',
+  components: {
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCount,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
   computed: {
     ...mapGetters([
       'name',