diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
new file mode 100644
index 0000000..ebb002c
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDay.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: {date:'日期'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
+

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
new file mode 100644
index 0000000..ebb002c
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDay.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: {date:'日期'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
+
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
new file mode 100644
index 0000000..2258847
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDept.vue
@@ -0,0 +1,169 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
new file mode 100644
index 0000000..ebb002c
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDay.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: {date:'日期'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
+
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
new file mode 100644
index 0000000..2258847
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDept.vue
@@ -0,0 +1,169 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterNote.vue b/src/views/gasDashboard/components/waterNote.vue
new file mode 100644
index 0000000..752330a
--- /dev/null
+++ b/src/views/gasDashboard/components/waterNote.vue
@@ -0,0 +1,148 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList().then(response => {
+        this.currentList = JSON.parse(response.data)
+      })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
new file mode 100644
index 0000000..ebb002c
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDay.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: {date:'日期'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
+
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
new file mode 100644
index 0000000..2258847
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDept.vue
@@ -0,0 +1,169 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterNote.vue b/src/views/gasDashboard/components/waterNote.vue
new file mode 100644
index 0000000..752330a
--- /dev/null
+++ b/src/views/gasDashboard/components/waterNote.vue
@@ -0,0 +1,148 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList().then(response => {
+        this.currentList = JSON.parse(response.data)
+      })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/gasDashboard/index.vue b/src/views/gasDashboard/index.vue
new file mode 100644
index 0000000..a9f13eb
--- /dev/null
+++ b/src/views/gasDashboard/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row>
+      <!-- 用气统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用气占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+        </el-card>
+      </el-col>
+      <!-- 用气走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!--气体流量计告警统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
+        </el-card>
+      </el-col>
+      <!--燃气报警统计，柱状图-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <alarm-gas-count-by-dept :query="listQuery3"/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 腐蚀速率走势图 -->
+      <el-col>
+        <el-card shadow="never">
+          <corrode-count-by-day :query="listQuery1" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import DeviceCount from './components/DeviceCount'
+import WaterCountByDept from './components/waterCountByDept'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from './components/waterCountByAreaBar'
+import WatchAlarmBar from './components/watchAlarmBar'
+import WaterNote from './components/waterNote'
+import AlarmCountByDept from './components/AlarmCountByDept'
+import WaterCompare from './components/waterCompare'
+import watchGasAlarmBar from './components/watchGasAlarmBar'
+import alarmGasCountByDept from './components/alarmGasCountByDept'
+import corrodeCountByDay from './components/corrodeCountByDay'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WaterCountByAreaBar,
+    WaterCountByDept,
+    WaterCountByDay,
+    WaterNote,
+    PanelGroup,
+    WaterCompare,
+    DeviceCount,
+    WatchAlarmBar,
+    AlarmCountByDept,
+    watchGasAlarmBar,
+    alarmGasCountByDept,
+    corrodeCountByDay
+  },
+  data() {
+    return {
+      listQuery1: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区用气量查询条件
+      listQuery2: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区报警查询条件
+      listQuery3: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1) {
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2) {
+      this.listQuery2 = listQuery2
+    },
+    // 切换报警查询条件
+    changeAlarmGasQuery(listQuery3) {
+      this.listQuery3 = listQuery3
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
new file mode 100644
index 0000000..ebb002c
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDay.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: {date:'日期'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
+
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
new file mode 100644
index 0000000..2258847
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDept.vue
@@ -0,0 +1,169 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterNote.vue b/src/views/gasDashboard/components/waterNote.vue
new file mode 100644
index 0000000..752330a
--- /dev/null
+++ b/src/views/gasDashboard/components/waterNote.vue
@@ -0,0 +1,148 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList().then(response => {
+        this.currentList = JSON.parse(response.data)
+      })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/gasDashboard/index.vue b/src/views/gasDashboard/index.vue
new file mode 100644
index 0000000..a9f13eb
--- /dev/null
+++ b/src/views/gasDashboard/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row>
+      <!-- 用气统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用气占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+        </el-card>
+      </el-col>
+      <!-- 用气走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!--气体流量计告警统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
+        </el-card>
+      </el-col>
+      <!--燃气报警统计，柱状图-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <alarm-gas-count-by-dept :query="listQuery3"/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 腐蚀速率走势图 -->
+      <el-col>
+        <el-card shadow="never">
+          <corrode-count-by-day :query="listQuery1" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import DeviceCount from './components/DeviceCount'
+import WaterCountByDept from './components/waterCountByDept'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from './components/waterCountByAreaBar'
+import WatchAlarmBar from './components/watchAlarmBar'
+import WaterNote from './components/waterNote'
+import AlarmCountByDept from './components/AlarmCountByDept'
+import WaterCompare from './components/waterCompare'
+import watchGasAlarmBar from './components/watchGasAlarmBar'
+import alarmGasCountByDept from './components/alarmGasCountByDept'
+import corrodeCountByDay from './components/corrodeCountByDay'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WaterCountByAreaBar,
+    WaterCountByDept,
+    WaterCountByDay,
+    WaterNote,
+    PanelGroup,
+    WaterCompare,
+    DeviceCount,
+    WatchAlarmBar,
+    AlarmCountByDept,
+    watchGasAlarmBar,
+    alarmGasCountByDept,
+    corrodeCountByDay
+  },
+  data() {
+    return {
+      listQuery1: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区用气量查询条件
+      listQuery2: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区报警查询条件
+      listQuery3: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1) {
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2) {
+      this.listQuery2 = listQuery2
+    },
+    // 切换报警查询条件
+    changeAlarmGasQuery(listQuery3) {
+      this.listQuery3 = listQuery3
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/gasOverview/cesiumViewer.vue b/src/views/gasOverview/cesiumViewer.vue
new file mode 100644
index 0000000..d787dfd
--- /dev/null
+++ b/src/views/gasOverview/cesiumViewer.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="cesiumContainer"/>
+</template>
+
+<script>
+// 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
+import Viewer from 'cesium/Source/Widgets/Viewer/Viewer'
+// 我们刚才所说的如何让Cesium知道静态资源在哪里的API
+import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
+// 导入必须的样式表
+import 'cesium/Source/Widgets/widgets.css'
+
+export default{
+  name: 'CesiumContainer',
+  data() {
+    return {
+      'viewer': {}
+    }
+  },
+  mounted() {
+    // 设置静态资源目录
+    buildModuleUrl.setBaseUrl('../static/Cesium/')
+    // 创建viewer实例
+    this.viewer = new Viewer('cesiumContainer')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
new file mode 100644
index 0000000..ebb002c
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDay.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: {date:'日期'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
+
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
new file mode 100644
index 0000000..2258847
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDept.vue
@@ -0,0 +1,169 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterNote.vue b/src/views/gasDashboard/components/waterNote.vue
new file mode 100644
index 0000000..752330a
--- /dev/null
+++ b/src/views/gasDashboard/components/waterNote.vue
@@ -0,0 +1,148 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList().then(response => {
+        this.currentList = JSON.parse(response.data)
+      })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/gasDashboard/index.vue b/src/views/gasDashboard/index.vue
new file mode 100644
index 0000000..a9f13eb
--- /dev/null
+++ b/src/views/gasDashboard/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row>
+      <!-- 用气统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用气占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+        </el-card>
+      </el-col>
+      <!-- 用气走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!--气体流量计告警统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
+        </el-card>
+      </el-col>
+      <!--燃气报警统计，柱状图-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <alarm-gas-count-by-dept :query="listQuery3"/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 腐蚀速率走势图 -->
+      <el-col>
+        <el-card shadow="never">
+          <corrode-count-by-day :query="listQuery1" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import DeviceCount from './components/DeviceCount'
+import WaterCountByDept from './components/waterCountByDept'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from './components/waterCountByAreaBar'
+import WatchAlarmBar from './components/watchAlarmBar'
+import WaterNote from './components/waterNote'
+import AlarmCountByDept from './components/AlarmCountByDept'
+import WaterCompare from './components/waterCompare'
+import watchGasAlarmBar from './components/watchGasAlarmBar'
+import alarmGasCountByDept from './components/alarmGasCountByDept'
+import corrodeCountByDay from './components/corrodeCountByDay'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WaterCountByAreaBar,
+    WaterCountByDept,
+    WaterCountByDay,
+    WaterNote,
+    PanelGroup,
+    WaterCompare,
+    DeviceCount,
+    WatchAlarmBar,
+    AlarmCountByDept,
+    watchGasAlarmBar,
+    alarmGasCountByDept,
+    corrodeCountByDay
+  },
+  data() {
+    return {
+      listQuery1: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区用气量查询条件
+      listQuery2: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区报警查询条件
+      listQuery3: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1) {
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2) {
+      this.listQuery2 = listQuery2
+    },
+    // 切换报警查询条件
+    changeAlarmGasQuery(listQuery3) {
+      this.listQuery3 = listQuery3
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/gasOverview/cesiumViewer.vue b/src/views/gasOverview/cesiumViewer.vue
new file mode 100644
index 0000000..d787dfd
--- /dev/null
+++ b/src/views/gasOverview/cesiumViewer.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="cesiumContainer"/>
+</template>
+
+<script>
+// 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
+import Viewer from 'cesium/Source/Widgets/Viewer/Viewer'
+// 我们刚才所说的如何让Cesium知道静态资源在哪里的API
+import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
+// 导入必须的样式表
+import 'cesium/Source/Widgets/widgets.css'
+
+export default{
+  name: 'CesiumContainer',
+  data() {
+    return {
+      'viewer': {}
+    }
+  },
+  mounted() {
+    // 设置静态资源目录
+    buildModuleUrl.setBaseUrl('../static/Cesium/')
+    // 创建viewer实例
+    this.viewer = new Viewer('cesiumContainer')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/gasOverview/gasOverviewSimple.vue b/src/views/gasOverview/gasOverviewSimple.vue
new file mode 100644
index 0000000..bc2f67d
--- /dev/null
+++ b/src/views/gasOverview/gasOverviewSimple.vue
@@ -0,0 +1,1033 @@
+<template>
+  <div style="overflow-y: hidden">
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <!--水表检查井编号/地址-->
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/设备编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="initPoints">搜索</el-button>
+          <el-form-item style="margin-left: 10px">
+            <el-slider v-model="alpha" style="width: 150px"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flyToInit"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button :type="showAlarm?'danger':'info'" size="small" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+          </el-form-item>
+          <el-form-item style="margin-left: 5px">
+            <el-switch
+              v-model="sceneMode"
+              active-color="#637F2C"
+              inactive-color="#071a69"
+              active-text="深蓝"
+              inactive-text="实景"/>
+          </el-form-item>
+          <el-form-item style="margin-left: 5px">
+            <el-switch
+              v-model="isShowFlow"
+              :disabled="sceneMode"
+              active-text="开启流向"
+              inactive-text="关闭流向"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div v-if="showAlarm==true && alarmList.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div v-if="showType==true && typeList.length>0" :style="{left: left + 'px'}" class="map-alarm-div">
+      <div class="map-alarm-div-header" style="width:290px">
+        设备列表
+        <span class="icon-right" @click="typeShow=!typeShow">
+          <i v-if="typeShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="typeShow"
+          :style="{visibility: typeShow?'visible':'hidden'}"
+          :class="{moredatascollor:typeList.length>6}"
+          :native="false">
+          <el-table
+            :data="typeList"
+            class="alarm-list-table"
+            border
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column
+              align="center"
+              type="selection"
+              width="55"
+            />
+            <el-table-column
+              v-for="column in columnsType"
+              :key="column.value"
+              :label="column.text"
+              :width="column.width"
+              :align="column.align"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div id="mars3dContainer" class="mars3d-container"/>
+    <div class="cover"/>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { mapGetters } from 'vuex'
+import { getAlarmsNow, getMapping } from '@/api/overview'
+import { getDeviceType } from '@/api/device'
+
+import 'mars3d/dist/mars3d.css'
+import * as mars3d from 'mars3d'
+import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+
+var underground = null // 地球底层
+var building = null // 楼房建筑图层
+var flow = null // 流向图层
+var street = null // 街道图层
+var well_model_layer = null // 井模型层
+var watch_model_layer = null // 水表模型层
+var watch_icon_layer = null // 水表图标层
+var zs_model_layer = null // 噪声模型层
+var zs_icon_layer = null // 噪声图标层
+export default {
+  name: 'OverviewSimple',
+  components: {},
+  data() {
+    return {
+      left: '',
+      mapMark: '-',
+      typeShow: false,
+      showType: true, // 是否显示设备
+      typeList: [],
+      deviceTypeList: [], // 设备类型列表
+      multipleSelection: [], // 多选选中项
+      columnsType: [
+        {
+          text: '设备类型',
+          value: 'name',
+          align: 'center'
+        }
+      ],
+      type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+      refreshType: 'websocket', // 刷新数据方式：clock或websocket
+      sceneMode: true,
+      isShowFlow: true,
+      showAlarm: true, // 是否显示报警
+      alpha: 40, // 是否显示全部井
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deviceType: ''
+      }, // 筛选条件
+      columns: [
+        {
+          text: '水表检查井编号',
+          value: 'wellCode',
+          width: 120,
+          align: 'center'
+        },
+        {
+          text: '设备编号',
+          value: 'devcode',
+          width: 130,
+          align: 'center'
+        },
+        {
+          text: '告警原因',
+          value: 'alarmContent',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '时间',
+          value: 'alarmTime',
+          width: 170,
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      showWellType: this.showWellType(), // 是 否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      alarmList: [], // 报警列表
+      timer: null,
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      hasAlarm: false, // 是否有报警,
+      loading: true, // 加载图标是否显示
+      removeHandler: null,
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'needRefresh'
+    ])
+  },
+  watch: {
+    sceneMode(val) {
+      if (val) {
+        // 深蓝
+        window.map.basemap = 2011
+        building.show = false
+        flow.show = false
+        street.show = true
+      } else {
+        // 实景
+        window.map.basemap = 2021
+        if (window.map.scene._mode === Cesium.SceneMode.SCENE3D) {
+          building.show = true
+        } else {
+          building.show = false
+        }
+        if (!this.isShowFlow) {
+          flow.show = false
+        } else {
+          flow.show = true
+        }
+        street.show = false
+      }
+    },
+    isShowFlow(val) {
+      if (!val) {
+        flow.show = false
+      } else {
+        flow.show = true
+      }
+    },
+    alpha(val) {
+      window.map.basemap.opacity = val / 100
+      underground.alpha = val / 100
+      if (building !== null) {
+        building.setStyle({
+          opacity: val / 100
+        })
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()// 获取设备列表
+  },
+  mounted() {
+    this.initMars3D()
+  },
+  methods: {
+    // table表格每行多选触发方法
+    handleSelectionChange(val) {
+      console.log(val)
+      if (val.length === this.typeList.length || val.length === 0) {
+        this.initPoints()
+      } else if (val.length === 1) {
+        if (val[0].name === '远传水表') {
+          let params = ''
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+              well_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(well_model_layer)
+              if (response.data.length > 0) {
+                let maxLng = parseFloat(response.data[0].longitude)
+                let minLng = parseFloat(response.data[0].longitude)
+                let maxLat = parseFloat(response.data[0].latitude)
+                let minLat = parseFloat(response.data[0].latitude)
+                for (let i = 0; i < response.data.length; i++) {
+                  if (parseFloat(response.data[i].latitude) > 100) continue
+                  const lng = parseFloat(response.data[i].longitude)
+                  const lat = parseFloat(response.data[i].latitude)
+
+                  if (lng > maxLng) maxLng = lng
+                  if (lng < minLng) minLng = lng
+                  if (lat > maxLat) maxLat = lat
+                  if (lat < minLat) minLat = lat
+
+                  well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                    position: [lng, lat, 0],
+                    style: {
+                      url: '../static/model/ys.gltf',
+                      scale: 2
+                    },
+                    popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                  }))
+                }
+                const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+                const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+                const geodesic = new Cesium.EllipsoidGeodesic()
+                geodesic.setEndPoints(start, end)
+                const distance = geodesic.surfaceDistance
+                const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+                window.map.setCameraView(center)
+              }
+            }
+          })
+          params = '13'
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+              watch_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_model_layer)
+              if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+              watch_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+                  style: {
+                    url: '../static/model/sb.glb',
+                    scale: 2,
+                    heading: 90
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/sb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+          params = '8'
+          getMapping(params, this.mapMark).then(response => {
+            if (response.code === 200) {
+              if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+              zs_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_model_layer)
+
+              if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+              zs_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, 0],
+                  style: {
+                    url: '../static/model/zs.glb',
+                    scale: 1,
+                    heading: 90
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/zs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+        } else if (val[0].name === '供水泄漏检测仪') {
+          let params = ''
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+              well_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(well_model_layer)
+              if (response.data.length > 0) {
+                let maxLng = parseFloat(response.data[0].longitude)
+                let minLng = parseFloat(response.data[0].longitude)
+                let maxLat = parseFloat(response.data[0].latitude)
+                let minLat = parseFloat(response.data[0].latitude)
+                for (let i = 0; i < response.data.length; i++) {
+                  if (parseFloat(response.data[i].latitude) > 100) continue
+                  const lng = parseFloat(response.data[i].longitude)
+                  const lat = parseFloat(response.data[i].latitude)
+
+                  if (lng > maxLng) maxLng = lng
+                  if (lng < minLng) minLng = lng
+                  if (lat > maxLat) maxLat = lat
+                  if (lat < minLat) minLat = lat
+
+                  well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                    position: [lng, lat, 0],
+                    style: {
+                      url: '../static/model/ys.gltf',
+                      scale: 2
+                    },
+                    popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                  }))
+                }
+                const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+                const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+                const geodesic = new Cesium.EllipsoidGeodesic()
+                geodesic.setEndPoints(start, end)
+                const distance = geodesic.surfaceDistance
+                const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+                window.map.setCameraView(center)
+              }
+            }
+          })
+          params = '13'
+          getMapping(params, this.mapMark).then(response => {
+            if (response.code === 200) {
+              if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+              watch_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_model_layer)
+              if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+              watch_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+                  style: {
+                    url: '../static/model/sb.glb',
+                    scale: 2,
+                    heading: 90
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/sb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+          params = '8'
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+              zs_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_model_layer)
+
+              if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+              zs_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, 0],
+                  style: {
+                    url: '../static/model/zs.glb',
+                    scale: 1,
+                    heading: 90
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/zs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+        }
+      }
+      // this.multipleSelection = val
+    },
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType(this.listQuery).then(response => {
+        this.deviceTypeList = []
+        // 过滤掉该单位不支持的设备类型
+        const deviceTypes = this.$store.getters.deviceTypes
+        for (const deviceType of response.data) {
+          if (deviceTypes.indexOf(deviceType.value) !== -1) {
+            this.deviceTypeList.push(deviceType)
+          }
+        }
+        this.typeList = this.deviceTypeList
+      })
+    },
+    // 初始化地球
+    async initMars3D() {
+      var mapOptions = {
+        scene: {
+          sceneMode: Cesium.SceneMode.SCENE2D,
+          // 默认视角参数
+          center: { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 },
+          // 以下是Cesium.Globe对象相关参数
+          globe: {
+            depthTestAgainstTerrain: true, // 是否启用深度监测
+            baseColor: '#071a69', // 地球默认背景色
+            showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+            enableLighting: false // 是否显示昼夜区域
+          },
+          // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+          cameraController: {
+            zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+            minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+            maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
+            enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+            enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+            enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+            enableZoom: true, // 是否允许 用户放大和缩小视图
+            enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+          }
+        },
+        control: {
+          infoBox: false,
+          sceneModePicker: true
+        },
+        basemaps: [
+          {
+            pid: 10,
+            id: 2011,
+            name: '天地图',
+            type: 'group',
+            layers: [
+              { name: '注记', type: 'tdt', layer: 'ter_z', key: ['216ee92889e17ab1b083fae665d522b8'] },
+              { name: '注记', type: 'tdt', layer: 'img_z', key: ['216ee92889e17ab1b083fae665d522b8'] }
+            ]
+          },
+          {
+            id: 2021,
+            pid: 10,
+            name: '天地图影像',
+            icon: 'http://mars3d.cn/example/img/basemaps/tdt_img.png',
+            type: 'tdt',
+            layer: 'img_d',
+            key: ['216ee92889e17ab1b083fae665d522b8'],
+            show: true
+          }
+        ]
+      }
+      // 创建三维地球场景
+      const map = new mars3d.Map('mars3dContainer', mapOptions)
+      map.basemap = 2011
+      map.scene.screenSpaceCameraController.enableCollisionDetection = false
+      // 设置鼠标
+      map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
+      // 缩放设置 重新设置缩放成员
+      map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+      // 鼠标左键平移
+      map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+      const bloomEffect = new mars3d.effect.BloomEffect({
+        enabled: true
+      })
+      map.addEffect(bloomEffect)
+      window.map = map
+
+      // 地球底层
+      underground = new mars3d.thing.Underground({
+        alpha: this.alpha / 100
+      })
+      map.addThing(underground)
+      map.basemap.opacity = this.alpha / 100
+
+      const graphicLayer = new mars3d.layer.GraphicLayer()
+      map.addLayer(graphicLayer)
+
+      // 建筑模型
+      building = new mars3d.graphic.ModelPrimitive({
+        position: [120.242284, 35.983704, 0],
+        style: {
+          url: '../static/model/m1/m1.gltf',
+          scale: 1,
+          heading: 18.8,
+          opacity: this.alpha / 100
+        }
+      })
+      graphicLayer.addGraphic(building)
+      building.show = false
+
+      this.initDrawLines()
+      this.initPoints()
+
+      // 屏幕取点
+      const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas)
+      handler.setInputAction(function(evt) {
+        var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid)
+        var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+        var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值
+        var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值
+        console.log('[' + lng + ',' + lat + '],')
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+      // 切换二三维响应函数
+      map.on(mars3d.EventType.morphComplete, function(event) {
+        if (window.map.scene._mode !== Cesium.SceneMode.SCENE3D) {
+          building.show = false
+        } else {
+          building.show = !this.sceneMode
+        }
+      })
+    },
+    // 初始化街道、流向线
+    async initDrawLines() {
+      axios.get('./static/position.json').then((result) => {
+        const positions = result.data.positions
+        flow = new mars3d.layer.GraphicLayer()
+        window.map.addLayer(flow)
+        street = new mars3d.layer.GraphicLayer()
+        window.map.addLayer(street)
+        for (let j = 0; j < positions.length; j++) {
+          flow.addGraphic(this.addFlow(positions[j].items, positions[j].repeat))
+          street.addGraphic(this.addStreet(positions[j].items))
+        }
+        flow.show = false
+      }).catch((error) => {
+        console.log('get position error...' + error)
+      })
+    },
+    // 初始化井，设备
+    async initPoints() {
+      // 井
+      let params = ''
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+          well_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(well_model_layer)
+          if (response.data.length > 0) {
+            let maxLng = parseFloat(response.data[0].longitude)
+            let minLng = parseFloat(response.data[0].longitude)
+            let maxLat = parseFloat(response.data[0].latitude)
+            let minLat = parseFloat(response.data[0].latitude)
+            for (let i = 0; i < response.data.length; i++) {
+              if (parseFloat(response.data[i].latitude) > 100) continue
+              const lng = parseFloat(response.data[i].longitude)
+              const lat = parseFloat(response.data[i].latitude)
+
+              if (lng > maxLng) maxLng = lng
+              if (lng < minLng) minLng = lng
+              if (lat > maxLat) maxLat = lat
+              if (lat < minLat) minLat = lat
+
+              well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                position: [lng, lat, 0],
+                style: {
+                  url: '../static/model/ys.gltf',
+                  scale: 2
+                },
+                popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+              }))
+            }
+            const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+            const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+            const geodesic = new Cesium.EllipsoidGeodesic()
+            geodesic.setEndPoints(start, end)
+            const distance = geodesic.surfaceDistance
+            const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+            window.map.setCameraView(center)
+          }
+        }
+      })
+      params = '13'
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+          watch_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(watch_model_layer)
+          if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+          watch_icon_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(watch_icon_layer)
+          for (let i = 0; i < response.data.length; i++) {
+            watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+              position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+              style: {
+                url: '../static/model/sb.glb',
+                scale: 2,
+                heading: 90
+              },
+              popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+            watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+              id: response.data[i].devcode,
+              position: [response.data[i].longitude, response.data[i].latitude, 1],
+              style: {
+                image: '../static/images/icon/sb.png',
+                scale: 1,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+              },
+              popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+          }
+          this.refreshAlarm()
+        }
+      })
+      params = '8'
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+          zs_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(zs_model_layer)
+
+          if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+          zs_icon_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(zs_icon_layer)
+          for (let i = 0; i < response.data.length; i++) {
+            zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+              position: [response.data[i].longitude, response.data[i].latitude, 0],
+              style: {
+                url: '../static/model/zs.glb',
+                scale: 1,
+                heading: 90
+              },
+              popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+            zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+              id: response.data[i].devcode,
+              position: [response.data[i].longitude, response.data[i].latitude, 1],
+              style: {
+                image: '../static/images/icon/zs.png',
+                scale: 1,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+              },
+              popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+          }
+          this.refreshAlarm()
+        }
+      })
+    },
+    // 流向线
+    addFlow(positions, repeat) {
+      var style = {
+        width: 10,
+        material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
+          color: '#217bd9',
+          repeat: new Cesium.Cartesian2(repeat, 1),
+          image: '../static/images/line.png',
+          speed: 15
+        })
+      }
+      var graphic = new mars3d.graphic.PolylineEntity({
+        positions: positions,
+        style: style
+      })
+      return graphic
+    },
+    // 道路线
+    addStreet(positions) {
+      var graphic = new mars3d.graphic.PolylineEntity({
+        positions: positions,
+        style: {
+          width: 8,
+          color: Cesium.Color.AQUA,
+          clampToGround: true
+        }
+      })
+      return graphic
+    },
+    // 回到原点
+    flyToInit() {
+      let center
+      if (window.map._viewer.scene._mode === Cesium.SceneMode.SCENE3D) {
+        center = { lat: 35.97, lng: 120.2384, alt: 2000, heading: 360, pitch: -45 }
+      } else {
+        center = { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 }
+      }
+      window.map.setCameraView(center)
+    },
+    // 刷新报警列表
+    async refreshAlarm() {
+      this.count = 60
+      this.loading = true
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          this.loading = false
+          // 获取当前报警列表
+          this.alarmList = response.data
+          if (this.alarmList.length > 0) {
+            this.left = 621
+            this.hasAlarm = true
+          } else {
+            this.left = 0
+          }
+          for (const alarm of response.data) {
+            for (const watch of watch_icon_layer.graphics) {
+              if (alarm.devcode === watch.options.id) {
+                if (!watch.popup.startsWith('报警')) {
+                  watch.setStyle({
+                    image: '../static/images/icon/asb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  })
+                  watch.popup = `报警远程水表<br />设备编号：${alarm.devcode}<br />井编号：${alarm.wellCode}<br />井类型：${alarm.wellTypeName}<br />报警时间：${alarm.alarmTime}<br />报警数值：${alarm.alarmValue}<br />报警内容：${alarm.alarmContent}<br />详细位置：${alarm.position}`
+                }
+                break
+              }
+            }
+            for (const zs of zs_icon_layer.graphics) {
+              if (alarm.devcode === zs.options.id) {
+                if (!zs.popup.startsWith('报警')) {
+                  zs.setStyle({
+                    image: '../static/images/icon/azs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  })
+                  zs.popup = `报警噪声记录仪仪<br />设备编号：${alarm.devcode}<br />井编号：${alarm.wellCode}<br />井类型：${alarm.wellTypeName}<br />报警时间：${alarm.alarmTime}<br />报警数值：${alarm.alarmValue}<br />报警内容：${alarm.alarmContent}<br />详细位置：${alarm.position}`
+                }
+                break
+              }
+            }
+          }
+        }
+      })
+    },
+    // 点击报警列表
+    alarmRowClick(row, column, event) {
+      if (this.alpha < 10) {
+        this.alpha = 15
+      }
+      let center
+      for (const watch of watch_icon_layer.graphics) {
+        if (row.devcode === watch.options.id) {
+          center = { lat: watch._point._lat, lng: watch._point._lng, alt: 50, heading: 360, pitch: -90 }
+          window.map.setCameraView(center)
+          break
+        }
+      }
+      for (const zs of zs_icon_layer.graphics) {
+        if (row.devcode === zs.options.id) {
+          center = { lat: zs._point._lat, lng: zs._point._lng, alt: 50, heading: 360, pitch: -90 }
+          window.map.setCameraView(center)
+          break
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .mars3d-popup-content {
+    margin: 20px;
+    line-height: 1.9;
+    font-size: 18px;
+  }
+  /deep/ .cesium-toolbar-button {
+    margin-top: 5px !important;
+    width: 48px !important;
+    height: 48px !important;
+  }
+  /depp/ span.cesium-sceneModePicker-wrapper {
+    margin: 0 50px !important;
+  }
+  /deep/ .mars3d-popup-close-button {
+    top: 10px;
+    right: 10px;
+  }
+  /deep/ .mars3d-popup{
+    margin-top: -40px;
+  }
+  /deep/ .mars3d-popup-content {
+    margin: 15px;
+    line-height: 1.5;
+    font-size: 16px;
+  }
+  /deep/ .mars3d-popup-content-wrapper {
+    box-shadow: 0 2px 6px #00192faa;
+    max-height: 1000px;
+  }
+  /deep/ .mars3d-popup-background {
+    background: #00192faa;
+    border-radius: 10px;
+  }
+  /deep/ .mars3d-popup-tip {
+    border-radius: 0px !important;
+  }
+  /deep/.mars3d-popup-close-button{
+    top: 10px;
+  }
+
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    left: 0px;
+    right: 10px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    top: 40px;
+    left: 0px;
+    background-color: rgba(255, 234, 241,0.8);
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 621px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding:0px !important;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      padding: 7px 0px;
+    }
+    .el-table td{
+      padding: 5px 0px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
+
+<style rel="stylesheet/scss" lang="scss">
+  .map-alarm-div {
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
+  }
+  .cover{
+    position: absolute;
+    bottom: 3px;
+    left: 0px;
+    background-color: #122252;
+    width: 130px;
+    height: 32px;
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
new file mode 100644
index 0000000..ebb002c
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDay.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: {date:'日期'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
+
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
new file mode 100644
index 0000000..2258847
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDept.vue
@@ -0,0 +1,169 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterNote.vue b/src/views/gasDashboard/components/waterNote.vue
new file mode 100644
index 0000000..752330a
--- /dev/null
+++ b/src/views/gasDashboard/components/waterNote.vue
@@ -0,0 +1,148 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList().then(response => {
+        this.currentList = JSON.parse(response.data)
+      })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/gasDashboard/index.vue b/src/views/gasDashboard/index.vue
new file mode 100644
index 0000000..a9f13eb
--- /dev/null
+++ b/src/views/gasDashboard/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row>
+      <!-- 用气统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用气占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+        </el-card>
+      </el-col>
+      <!-- 用气走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!--气体流量计告警统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
+        </el-card>
+      </el-col>
+      <!--燃气报警统计，柱状图-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <alarm-gas-count-by-dept :query="listQuery3"/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 腐蚀速率走势图 -->
+      <el-col>
+        <el-card shadow="never">
+          <corrode-count-by-day :query="listQuery1" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import DeviceCount from './components/DeviceCount'
+import WaterCountByDept from './components/waterCountByDept'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from './components/waterCountByAreaBar'
+import WatchAlarmBar from './components/watchAlarmBar'
+import WaterNote from './components/waterNote'
+import AlarmCountByDept from './components/AlarmCountByDept'
+import WaterCompare from './components/waterCompare'
+import watchGasAlarmBar from './components/watchGasAlarmBar'
+import alarmGasCountByDept from './components/alarmGasCountByDept'
+import corrodeCountByDay from './components/corrodeCountByDay'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WaterCountByAreaBar,
+    WaterCountByDept,
+    WaterCountByDay,
+    WaterNote,
+    PanelGroup,
+    WaterCompare,
+    DeviceCount,
+    WatchAlarmBar,
+    AlarmCountByDept,
+    watchGasAlarmBar,
+    alarmGasCountByDept,
+    corrodeCountByDay
+  },
+  data() {
+    return {
+      listQuery1: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区用气量查询条件
+      listQuery2: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区报警查询条件
+      listQuery3: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1) {
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2) {
+      this.listQuery2 = listQuery2
+    },
+    // 切换报警查询条件
+    changeAlarmGasQuery(listQuery3) {
+      this.listQuery3 = listQuery3
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/gasOverview/cesiumViewer.vue b/src/views/gasOverview/cesiumViewer.vue
new file mode 100644
index 0000000..d787dfd
--- /dev/null
+++ b/src/views/gasOverview/cesiumViewer.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="cesiumContainer"/>
+</template>
+
+<script>
+// 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
+import Viewer from 'cesium/Source/Widgets/Viewer/Viewer'
+// 我们刚才所说的如何让Cesium知道静态资源在哪里的API
+import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
+// 导入必须的样式表
+import 'cesium/Source/Widgets/widgets.css'
+
+export default{
+  name: 'CesiumContainer',
+  data() {
+    return {
+      'viewer': {}
+    }
+  },
+  mounted() {
+    // 设置静态资源目录
+    buildModuleUrl.setBaseUrl('../static/Cesium/')
+    // 创建viewer实例
+    this.viewer = new Viewer('cesiumContainer')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/gasOverview/gasOverviewSimple.vue b/src/views/gasOverview/gasOverviewSimple.vue
new file mode 100644
index 0000000..bc2f67d
--- /dev/null
+++ b/src/views/gasOverview/gasOverviewSimple.vue
@@ -0,0 +1,1033 @@
+<template>
+  <div style="overflow-y: hidden">
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <!--水表检查井编号/地址-->
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/设备编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="initPoints">搜索</el-button>
+          <el-form-item style="margin-left: 10px">
+            <el-slider v-model="alpha" style="width: 150px"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flyToInit"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button :type="showAlarm?'danger':'info'" size="small" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+          </el-form-item>
+          <el-form-item style="margin-left: 5px">
+            <el-switch
+              v-model="sceneMode"
+              active-color="#637F2C"
+              inactive-color="#071a69"
+              active-text="深蓝"
+              inactive-text="实景"/>
+          </el-form-item>
+          <el-form-item style="margin-left: 5px">
+            <el-switch
+              v-model="isShowFlow"
+              :disabled="sceneMode"
+              active-text="开启流向"
+              inactive-text="关闭流向"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div v-if="showAlarm==true && alarmList.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div v-if="showType==true && typeList.length>0" :style="{left: left + 'px'}" class="map-alarm-div">
+      <div class="map-alarm-div-header" style="width:290px">
+        设备列表
+        <span class="icon-right" @click="typeShow=!typeShow">
+          <i v-if="typeShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="typeShow"
+          :style="{visibility: typeShow?'visible':'hidden'}"
+          :class="{moredatascollor:typeList.length>6}"
+          :native="false">
+          <el-table
+            :data="typeList"
+            class="alarm-list-table"
+            border
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column
+              align="center"
+              type="selection"
+              width="55"
+            />
+            <el-table-column
+              v-for="column in columnsType"
+              :key="column.value"
+              :label="column.text"
+              :width="column.width"
+              :align="column.align"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div id="mars3dContainer" class="mars3d-container"/>
+    <div class="cover"/>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { mapGetters } from 'vuex'
+import { getAlarmsNow, getMapping } from '@/api/overview'
+import { getDeviceType } from '@/api/device'
+
+import 'mars3d/dist/mars3d.css'
+import * as mars3d from 'mars3d'
+import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+
+var underground = null // 地球底层
+var building = null // 楼房建筑图层
+var flow = null // 流向图层
+var street = null // 街道图层
+var well_model_layer = null // 井模型层
+var watch_model_layer = null // 水表模型层
+var watch_icon_layer = null // 水表图标层
+var zs_model_layer = null // 噪声模型层
+var zs_icon_layer = null // 噪声图标层
+export default {
+  name: 'OverviewSimple',
+  components: {},
+  data() {
+    return {
+      left: '',
+      mapMark: '-',
+      typeShow: false,
+      showType: true, // 是否显示设备
+      typeList: [],
+      deviceTypeList: [], // 设备类型列表
+      multipleSelection: [], // 多选选中项
+      columnsType: [
+        {
+          text: '设备类型',
+          value: 'name',
+          align: 'center'
+        }
+      ],
+      type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+      refreshType: 'websocket', // 刷新数据方式：clock或websocket
+      sceneMode: true,
+      isShowFlow: true,
+      showAlarm: true, // 是否显示报警
+      alpha: 40, // 是否显示全部井
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deviceType: ''
+      }, // 筛选条件
+      columns: [
+        {
+          text: '水表检查井编号',
+          value: 'wellCode',
+          width: 120,
+          align: 'center'
+        },
+        {
+          text: '设备编号',
+          value: 'devcode',
+          width: 130,
+          align: 'center'
+        },
+        {
+          text: '告警原因',
+          value: 'alarmContent',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '时间',
+          value: 'alarmTime',
+          width: 170,
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      showWellType: this.showWellType(), // 是 否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      alarmList: [], // 报警列表
+      timer: null,
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      hasAlarm: false, // 是否有报警,
+      loading: true, // 加载图标是否显示
+      removeHandler: null,
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'needRefresh'
+    ])
+  },
+  watch: {
+    sceneMode(val) {
+      if (val) {
+        // 深蓝
+        window.map.basemap = 2011
+        building.show = false
+        flow.show = false
+        street.show = true
+      } else {
+        // 实景
+        window.map.basemap = 2021
+        if (window.map.scene._mode === Cesium.SceneMode.SCENE3D) {
+          building.show = true
+        } else {
+          building.show = false
+        }
+        if (!this.isShowFlow) {
+          flow.show = false
+        } else {
+          flow.show = true
+        }
+        street.show = false
+      }
+    },
+    isShowFlow(val) {
+      if (!val) {
+        flow.show = false
+      } else {
+        flow.show = true
+      }
+    },
+    alpha(val) {
+      window.map.basemap.opacity = val / 100
+      underground.alpha = val / 100
+      if (building !== null) {
+        building.setStyle({
+          opacity: val / 100
+        })
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()// 获取设备列表
+  },
+  mounted() {
+    this.initMars3D()
+  },
+  methods: {
+    // table表格每行多选触发方法
+    handleSelectionChange(val) {
+      console.log(val)
+      if (val.length === this.typeList.length || val.length === 0) {
+        this.initPoints()
+      } else if (val.length === 1) {
+        if (val[0].name === '远传水表') {
+          let params = ''
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+              well_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(well_model_layer)
+              if (response.data.length > 0) {
+                let maxLng = parseFloat(response.data[0].longitude)
+                let minLng = parseFloat(response.data[0].longitude)
+                let maxLat = parseFloat(response.data[0].latitude)
+                let minLat = parseFloat(response.data[0].latitude)
+                for (let i = 0; i < response.data.length; i++) {
+                  if (parseFloat(response.data[i].latitude) > 100) continue
+                  const lng = parseFloat(response.data[i].longitude)
+                  const lat = parseFloat(response.data[i].latitude)
+
+                  if (lng > maxLng) maxLng = lng
+                  if (lng < minLng) minLng = lng
+                  if (lat > maxLat) maxLat = lat
+                  if (lat < minLat) minLat = lat
+
+                  well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                    position: [lng, lat, 0],
+                    style: {
+                      url: '../static/model/ys.gltf',
+                      scale: 2
+                    },
+                    popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                  }))
+                }
+                const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+                const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+                const geodesic = new Cesium.EllipsoidGeodesic()
+                geodesic.setEndPoints(start, end)
+                const distance = geodesic.surfaceDistance
+                const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+                window.map.setCameraView(center)
+              }
+            }
+          })
+          params = '13'
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+              watch_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_model_layer)
+              if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+              watch_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+                  style: {
+                    url: '../static/model/sb.glb',
+                    scale: 2,
+                    heading: 90
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/sb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+          params = '8'
+          getMapping(params, this.mapMark).then(response => {
+            if (response.code === 200) {
+              if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+              zs_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_model_layer)
+
+              if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+              zs_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, 0],
+                  style: {
+                    url: '../static/model/zs.glb',
+                    scale: 1,
+                    heading: 90
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/zs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+        } else if (val[0].name === '供水泄漏检测仪') {
+          let params = ''
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+              well_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(well_model_layer)
+              if (response.data.length > 0) {
+                let maxLng = parseFloat(response.data[0].longitude)
+                let minLng = parseFloat(response.data[0].longitude)
+                let maxLat = parseFloat(response.data[0].latitude)
+                let minLat = parseFloat(response.data[0].latitude)
+                for (let i = 0; i < response.data.length; i++) {
+                  if (parseFloat(response.data[i].latitude) > 100) continue
+                  const lng = parseFloat(response.data[i].longitude)
+                  const lat = parseFloat(response.data[i].latitude)
+
+                  if (lng > maxLng) maxLng = lng
+                  if (lng < minLng) minLng = lng
+                  if (lat > maxLat) maxLat = lat
+                  if (lat < minLat) minLat = lat
+
+                  well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                    position: [lng, lat, 0],
+                    style: {
+                      url: '../static/model/ys.gltf',
+                      scale: 2
+                    },
+                    popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                  }))
+                }
+                const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+                const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+                const geodesic = new Cesium.EllipsoidGeodesic()
+                geodesic.setEndPoints(start, end)
+                const distance = geodesic.surfaceDistance
+                const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+                window.map.setCameraView(center)
+              }
+            }
+          })
+          params = '13'
+          getMapping(params, this.mapMark).then(response => {
+            if (response.code === 200) {
+              if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+              watch_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_model_layer)
+              if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+              watch_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+                  style: {
+                    url: '../static/model/sb.glb',
+                    scale: 2,
+                    heading: 90
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/sb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+          params = '8'
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+              zs_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_model_layer)
+
+              if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+              zs_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, 0],
+                  style: {
+                    url: '../static/model/zs.glb',
+                    scale: 1,
+                    heading: 90
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/zs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+        }
+      }
+      // this.multipleSelection = val
+    },
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType(this.listQuery).then(response => {
+        this.deviceTypeList = []
+        // 过滤掉该单位不支持的设备类型
+        const deviceTypes = this.$store.getters.deviceTypes
+        for (const deviceType of response.data) {
+          if (deviceTypes.indexOf(deviceType.value) !== -1) {
+            this.deviceTypeList.push(deviceType)
+          }
+        }
+        this.typeList = this.deviceTypeList
+      })
+    },
+    // 初始化地球
+    async initMars3D() {
+      var mapOptions = {
+        scene: {
+          sceneMode: Cesium.SceneMode.SCENE2D,
+          // 默认视角参数
+          center: { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 },
+          // 以下是Cesium.Globe对象相关参数
+          globe: {
+            depthTestAgainstTerrain: true, // 是否启用深度监测
+            baseColor: '#071a69', // 地球默认背景色
+            showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+            enableLighting: false // 是否显示昼夜区域
+          },
+          // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+          cameraController: {
+            zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+            minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+            maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
+            enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+            enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+            enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+            enableZoom: true, // 是否允许 用户放大和缩小视图
+            enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+          }
+        },
+        control: {
+          infoBox: false,
+          sceneModePicker: true
+        },
+        basemaps: [
+          {
+            pid: 10,
+            id: 2011,
+            name: '天地图',
+            type: 'group',
+            layers: [
+              { name: '注记', type: 'tdt', layer: 'ter_z', key: ['216ee92889e17ab1b083fae665d522b8'] },
+              { name: '注记', type: 'tdt', layer: 'img_z', key: ['216ee92889e17ab1b083fae665d522b8'] }
+            ]
+          },
+          {
+            id: 2021,
+            pid: 10,
+            name: '天地图影像',
+            icon: 'http://mars3d.cn/example/img/basemaps/tdt_img.png',
+            type: 'tdt',
+            layer: 'img_d',
+            key: ['216ee92889e17ab1b083fae665d522b8'],
+            show: true
+          }
+        ]
+      }
+      // 创建三维地球场景
+      const map = new mars3d.Map('mars3dContainer', mapOptions)
+      map.basemap = 2011
+      map.scene.screenSpaceCameraController.enableCollisionDetection = false
+      // 设置鼠标
+      map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
+      // 缩放设置 重新设置缩放成员
+      map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+      // 鼠标左键平移
+      map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+      const bloomEffect = new mars3d.effect.BloomEffect({
+        enabled: true
+      })
+      map.addEffect(bloomEffect)
+      window.map = map
+
+      // 地球底层
+      underground = new mars3d.thing.Underground({
+        alpha: this.alpha / 100
+      })
+      map.addThing(underground)
+      map.basemap.opacity = this.alpha / 100
+
+      const graphicLayer = new mars3d.layer.GraphicLayer()
+      map.addLayer(graphicLayer)
+
+      // 建筑模型
+      building = new mars3d.graphic.ModelPrimitive({
+        position: [120.242284, 35.983704, 0],
+        style: {
+          url: '../static/model/m1/m1.gltf',
+          scale: 1,
+          heading: 18.8,
+          opacity: this.alpha / 100
+        }
+      })
+      graphicLayer.addGraphic(building)
+      building.show = false
+
+      this.initDrawLines()
+      this.initPoints()
+
+      // 屏幕取点
+      const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas)
+      handler.setInputAction(function(evt) {
+        var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid)
+        var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+        var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值
+        var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值
+        console.log('[' + lng + ',' + lat + '],')
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+      // 切换二三维响应函数
+      map.on(mars3d.EventType.morphComplete, function(event) {
+        if (window.map.scene._mode !== Cesium.SceneMode.SCENE3D) {
+          building.show = false
+        } else {
+          building.show = !this.sceneMode
+        }
+      })
+    },
+    // 初始化街道、流向线
+    async initDrawLines() {
+      axios.get('./static/position.json').then((result) => {
+        const positions = result.data.positions
+        flow = new mars3d.layer.GraphicLayer()
+        window.map.addLayer(flow)
+        street = new mars3d.layer.GraphicLayer()
+        window.map.addLayer(street)
+        for (let j = 0; j < positions.length; j++) {
+          flow.addGraphic(this.addFlow(positions[j].items, positions[j].repeat))
+          street.addGraphic(this.addStreet(positions[j].items))
+        }
+        flow.show = false
+      }).catch((error) => {
+        console.log('get position error...' + error)
+      })
+    },
+    // 初始化井，设备
+    async initPoints() {
+      // 井
+      let params = ''
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+          well_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(well_model_layer)
+          if (response.data.length > 0) {
+            let maxLng = parseFloat(response.data[0].longitude)
+            let minLng = parseFloat(response.data[0].longitude)
+            let maxLat = parseFloat(response.data[0].latitude)
+            let minLat = parseFloat(response.data[0].latitude)
+            for (let i = 0; i < response.data.length; i++) {
+              if (parseFloat(response.data[i].latitude) > 100) continue
+              const lng = parseFloat(response.data[i].longitude)
+              const lat = parseFloat(response.data[i].latitude)
+
+              if (lng > maxLng) maxLng = lng
+              if (lng < minLng) minLng = lng
+              if (lat > maxLat) maxLat = lat
+              if (lat < minLat) minLat = lat
+
+              well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                position: [lng, lat, 0],
+                style: {
+                  url: '../static/model/ys.gltf',
+                  scale: 2
+                },
+                popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+              }))
+            }
+            const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+            const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+            const geodesic = new Cesium.EllipsoidGeodesic()
+            geodesic.setEndPoints(start, end)
+            const distance = geodesic.surfaceDistance
+            const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+            window.map.setCameraView(center)
+          }
+        }
+      })
+      params = '13'
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+          watch_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(watch_model_layer)
+          if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+          watch_icon_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(watch_icon_layer)
+          for (let i = 0; i < response.data.length; i++) {
+            watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+              position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+              style: {
+                url: '../static/model/sb.glb',
+                scale: 2,
+                heading: 90
+              },
+              popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+            watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+              id: response.data[i].devcode,
+              position: [response.data[i].longitude, response.data[i].latitude, 1],
+              style: {
+                image: '../static/images/icon/sb.png',
+                scale: 1,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+              },
+              popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+          }
+          this.refreshAlarm()
+        }
+      })
+      params = '8'
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+          zs_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(zs_model_layer)
+
+          if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+          zs_icon_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(zs_icon_layer)
+          for (let i = 0; i < response.data.length; i++) {
+            zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+              position: [response.data[i].longitude, response.data[i].latitude, 0],
+              style: {
+                url: '../static/model/zs.glb',
+                scale: 1,
+                heading: 90
+              },
+              popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+            zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+              id: response.data[i].devcode,
+              position: [response.data[i].longitude, response.data[i].latitude, 1],
+              style: {
+                image: '../static/images/icon/zs.png',
+                scale: 1,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+              },
+              popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+          }
+          this.refreshAlarm()
+        }
+      })
+    },
+    // 流向线
+    addFlow(positions, repeat) {
+      var style = {
+        width: 10,
+        material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
+          color: '#217bd9',
+          repeat: new Cesium.Cartesian2(repeat, 1),
+          image: '../static/images/line.png',
+          speed: 15
+        })
+      }
+      var graphic = new mars3d.graphic.PolylineEntity({
+        positions: positions,
+        style: style
+      })
+      return graphic
+    },
+    // 道路线
+    addStreet(positions) {
+      var graphic = new mars3d.graphic.PolylineEntity({
+        positions: positions,
+        style: {
+          width: 8,
+          color: Cesium.Color.AQUA,
+          clampToGround: true
+        }
+      })
+      return graphic
+    },
+    // 回到原点
+    flyToInit() {
+      let center
+      if (window.map._viewer.scene._mode === Cesium.SceneMode.SCENE3D) {
+        center = { lat: 35.97, lng: 120.2384, alt: 2000, heading: 360, pitch: -45 }
+      } else {
+        center = { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 }
+      }
+      window.map.setCameraView(center)
+    },
+    // 刷新报警列表
+    async refreshAlarm() {
+      this.count = 60
+      this.loading = true
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          this.loading = false
+          // 获取当前报警列表
+          this.alarmList = response.data
+          if (this.alarmList.length > 0) {
+            this.left = 621
+            this.hasAlarm = true
+          } else {
+            this.left = 0
+          }
+          for (const alarm of response.data) {
+            for (const watch of watch_icon_layer.graphics) {
+              if (alarm.devcode === watch.options.id) {
+                if (!watch.popup.startsWith('报警')) {
+                  watch.setStyle({
+                    image: '../static/images/icon/asb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  })
+                  watch.popup = `报警远程水表<br />设备编号：${alarm.devcode}<br />井编号：${alarm.wellCode}<br />井类型：${alarm.wellTypeName}<br />报警时间：${alarm.alarmTime}<br />报警数值：${alarm.alarmValue}<br />报警内容：${alarm.alarmContent}<br />详细位置：${alarm.position}`
+                }
+                break
+              }
+            }
+            for (const zs of zs_icon_layer.graphics) {
+              if (alarm.devcode === zs.options.id) {
+                if (!zs.popup.startsWith('报警')) {
+                  zs.setStyle({
+                    image: '../static/images/icon/azs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  })
+                  zs.popup = `报警噪声记录仪仪<br />设备编号：${alarm.devcode}<br />井编号：${alarm.wellCode}<br />井类型：${alarm.wellTypeName}<br />报警时间：${alarm.alarmTime}<br />报警数值：${alarm.alarmValue}<br />报警内容：${alarm.alarmContent}<br />详细位置：${alarm.position}`
+                }
+                break
+              }
+            }
+          }
+        }
+      })
+    },
+    // 点击报警列表
+    alarmRowClick(row, column, event) {
+      if (this.alpha < 10) {
+        this.alpha = 15
+      }
+      let center
+      for (const watch of watch_icon_layer.graphics) {
+        if (row.devcode === watch.options.id) {
+          center = { lat: watch._point._lat, lng: watch._point._lng, alt: 50, heading: 360, pitch: -90 }
+          window.map.setCameraView(center)
+          break
+        }
+      }
+      for (const zs of zs_icon_layer.graphics) {
+        if (row.devcode === zs.options.id) {
+          center = { lat: zs._point._lat, lng: zs._point._lng, alt: 50, heading: 360, pitch: -90 }
+          window.map.setCameraView(center)
+          break
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .mars3d-popup-content {
+    margin: 20px;
+    line-height: 1.9;
+    font-size: 18px;
+  }
+  /deep/ .cesium-toolbar-button {
+    margin-top: 5px !important;
+    width: 48px !important;
+    height: 48px !important;
+  }
+  /depp/ span.cesium-sceneModePicker-wrapper {
+    margin: 0 50px !important;
+  }
+  /deep/ .mars3d-popup-close-button {
+    top: 10px;
+    right: 10px;
+  }
+  /deep/ .mars3d-popup{
+    margin-top: -40px;
+  }
+  /deep/ .mars3d-popup-content {
+    margin: 15px;
+    line-height: 1.5;
+    font-size: 16px;
+  }
+  /deep/ .mars3d-popup-content-wrapper {
+    box-shadow: 0 2px 6px #00192faa;
+    max-height: 1000px;
+  }
+  /deep/ .mars3d-popup-background {
+    background: #00192faa;
+    border-radius: 10px;
+  }
+  /deep/ .mars3d-popup-tip {
+    border-radius: 0px !important;
+  }
+  /deep/.mars3d-popup-close-button{
+    top: 10px;
+  }
+
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    left: 0px;
+    right: 10px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    top: 40px;
+    left: 0px;
+    background-color: rgba(255, 234, 241,0.8);
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 621px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding:0px !important;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      padding: 7px 0px;
+    }
+    .el-table td{
+      padding: 5px 0px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
+
+<style rel="stylesheet/scss" lang="scss">
+  .map-alarm-div {
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
+  }
+  .cover{
+    position: absolute;
+    bottom: 3px;
+    left: 0px;
+    background-color: #122252;
+    width: 130px;
+    height: 32px;
+  }
+</style>
diff --git a/src/views/gasOverview/overview.vue b/src/views/gasOverview/overview.vue
new file mode 100644
index 0000000..936577c
--- /dev/null
+++ b/src/views/gasOverview/overview.vue
@@ -0,0 +1,802 @@
+<!--suppress ALL -->
+<template>
+  <div>
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="listQuery.wellType" placeholder="选择井类型" @change="changetype" clearable size="small">
+              <el-option
+                v-for="item in wellTypeList"
+                :key="'welltype_'+item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getWellList" size="small" style="margin-top: 2px">搜索</el-button>
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部井</el-checkbox>
+          </el-form-item>
+          <el-form-item >
+            <el-slider v-model="alpha" style="width: 150px"></el-slider>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flytoinit"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <!--<el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>-->
+    </div>
+    <div v-if="showAlarm==true && alarmList.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div id="mars3dContainer" class="mars3d-container"/>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import SelectTree from '@/components/SelectTree/singleSelect'
+  import { getWellType } from '@/api/well'
+  import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode } from '@/api/overview'
+  import DeptSelect from '../../components/DeptSelect/index'
+
+  import 'mars3d/dist/mars3d.css'
+  import * as mars3d from 'mars3d'
+  import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+  var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+
+  var rectangle = null
+  var alarmIcons= []
+  var typeList = []
+  export default {
+    name: 'Overview',
+    components: { DeptSelect, SelectTree },
+    data() {
+      return {
+        map: null,
+        ysline: null,
+        wsline: null,
+        underground: null,
+        img_layer: null,
+        tile_layer: null,
+        tiles3dLayer: null,
+        rain_point_layer: null,
+        rain_point_layer1: null,
+        sewage_point_layer: null,
+        alarm_layer: null,
+        fly_layer: null,
+        type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+        refreshType: 'websocket', // 刷新数据方式：clock或websocket
+        showAlarm: true, // 是否显示报警
+        showAll: false, // 是否显示全部井
+        alpha: 100, // 是否显示全部井
+        listQuery: {
+          keywords: '', // 关键字
+          wellType: '', // 井类型
+          // deptid: '', // 组织机构
+          // isAlarm: '1' // 是否报警
+        }, // 筛选条件
+        columns: [
+          {
+            text: '井编号',
+            value: 'wellCode',
+            width: 220,
+            align: 'center'
+          },
+          {
+            text: '设备编号',
+            value: 'devcode',
+            width: 120,
+            align: 'center'
+          },
+          {
+            text: '告警原因',
+            value: 'alarmContent',
+            align: 'center',
+            width: 120
+          },
+          {
+            text: '时间',
+            value: 'alarmTime',
+            width: 160,
+            align: 'center'
+          }
+        ], // 告警列表显示列
+        tableShow: true, // 是否显示告警列表
+        tableIcon: 'el-icon-arrow-up',
+        showWellType: this.showWellType(), // 是 否显示井类型下拉
+        wellTypeList: [], // 井类型列表
+        showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+        center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+        zoom: 12, // 地图缩放比例
+        alarmList: [], // 报警列表
+        alarmInfo: {
+          wellCode: '',
+          deptName: '',
+          position: '',
+          deep: '',
+          alarms: []
+        }, // 显示报警详情气泡内容
+        timer :null,
+        currentWindow: {
+          visible: false, // 窗体显示与否
+          position: [this.$store.getters.lng, this.$store.getters.lat],
+          windowType: 'info' // 窗体类型：详情info或报警alarm
+        }, // 当前窗体属性
+        deptShowTop: false, // 是否显示顶级
+        clock: null, // 计时器
+        hasAlarm: false, // 是否有报警,
+        loading: true, // 加载图标是否显示
+        trackPopUp:false,
+        removeHandler:null,
+        showClearBtn: false // 是否显示清除查询按钮
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'needRefresh'
+      ])
+    },
+    mounted() {
+      this.initmars3d()
+    },
+    watch: {
+      alpha(val){
+        this.img_layer.alpha = val/100
+        // this.ysline.alpha = val/100
+        // this.wsline.alpha = val/100
+        this.map.basemap.opacity = val/100
+        this.tiles3dLayer.opacity = val/100
+        this. underground.alpha = val/100
+        console.log(val,this.map.level)
+        if(val<=90 && this.map.level>=19){
+          // this.map.scene.globe.show  = false
+          this.ysline.show = false
+          this.wsline.show = false
+        }else {
+          // this.map.scene.globe.show  = true
+          this.ysline.show = true
+          this.wsline.show = true
+        }
+      },
+      showAll(val) {
+        this.tile_layer.show = val
+      },
+      // needRefresh(val) {
+      //   // 需要刷新
+      //   if (val) {
+      //     this.refreshAlarm()
+      //   }
+      // },
+      showAlarm(val){
+        if(!val && this.currentWindow.windowType=='alarm'){
+          this.currentWindow.visible = false
+        }
+        this.alarm_layer.show = val
+      }
+    },
+    created() {
+      this.fetchWellType()
+    },
+    computed: {
+      handler() {
+        return new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas)
+      }
+    },
+    methods: {
+      changetype(){
+        if(this.listQuery.wellType==='1'){ // 雨水
+          this.rain_point_layer.show = true
+          this.rain_point_layer1.show = true
+          this.sewage_point_layer.show = false
+        }else if(this.listQuery.wellType==='2'){ //污水
+          this.rain_point_layer.show = false
+          this.rain_point_layer1.show = false
+          this.sewage_point_layer.show = true
+        }else{
+          this.rain_point_layer.show = true
+          this.rain_point_layer1.show = true
+          this.sewage_point_layer.show = true
+        }
+      },
+
+      async initpoints(str) {
+        if(this.sewage_point_layer!==null)  this.map.removeLayer(this.sewage_point_layer)
+        if(this.rain_point_layer!==null)  this.map.removeLayer(this.rain_point_layer)
+        if(this.rain_point_layer1!==null)  this.map.removeLayer(this.rain_point_layer1)
+        this.sewage_point_layer = new mars3d.layer.ArcGisWfsLayer({
+          name: '污水点',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/3',
+          where: str,
+          minimumLevel: 19,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/ws3(1).gltf',
+              scale: 1.3
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: -val.井深}
+            }
+          },
+          popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
+        })
+        this.map.addLayer(this.sewage_point_layer)
+
+        this.rain_point_layer = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨水井',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0',
+          where: "附属物名称 = '雨水井' and " + str,
+          minimumLevel: 19,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/ys3.gltf',
+              scale: 1.3
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: -val.井深}
+            }
+          },
+          popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
+        })
+        this.map.addLayer(this.rain_point_layer)
+
+        this.rain_point_layer1 = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨篦',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0',
+          where: "附属物名称 <> '雨水井' and " + str,
+          minimumLevel: 19,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/yubi.gltf',
+              scale: 1.3
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: -val.井深}
+            }
+          },
+          popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
+        })
+        this.map.addLayer(this.rain_point_layer1)
+      },
+      // 初始化放这里
+      async initmars3d() {
+        var mapOptions = {
+          scene: {
+            // 默认视角参数
+            center: {  lat: 27.68, lng: 116.0935, alt: 10000, heading: 360, pitch: -45 },
+            // 以下是Cesium.Globe对象相关参数
+            globe: {
+              depthTestAgainstTerrain: true, // 是否启用深度监测
+              // baseColor: '#00192f', // 地球默认背景色
+              showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+              enableLighting: false // 是否显示昼夜区域
+            },
+            // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+            cameraController: {
+              zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+              minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+              maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
+              enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+              enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+              enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+              enableZoom: true, // 是否允许 用户放大和缩小视图
+              enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+            }
+          },
+          basemaps: [
+            {
+              pid: 10,
+              id: 2011,
+              name: "天地图",
+              type: "group",
+              layers: [
+                // { name: "注记", type: "tdt", layer: "ter_z", key: ["9ae78c51a0a28f06444d541148496e36"] },
+                { name: "注记", type: "tdt", layer: "img_z", key: ["9ae78c51a0a28f06444d541148496e36"] },
+              ]
+            },
+            // {
+            //   "id": 2021,
+            //   "pid": 10,
+            //   "name": "天地图影像",
+            //   "icon": "http://mars3d.cn/example/img/basemaps/tdt_img.png",
+            //   "type": "tdt",
+            //   "layer": "img_d",
+            //   "key": ["9ae78c51a0a28f06444d541148496e36"],
+            //   "show": true
+            // },
+            // {
+            //   "id": 2020,
+            //   "pid": 10,
+            //   "name": "天地图电子",
+            //   "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png",
+            //   "type": "group",
+            //   "layers": [
+            //     { "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["9ae78c51a0a28f06444d541148496e36"] },
+            //     { "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["9ae78c51a0a28f06444d541148496e36"] }
+            //   ]
+            // },
+          ],
+        }
+        // 创建三维地球场景
+        var map = new mars3d.Map('mars3dContainer', mapOptions)
+        map.basemap = 2011
+        map.scene.screenSpaceCameraController.enableCollisionDetection = false
+        // 设置鼠标
+        map.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG ]
+        // 缩放设置 重新设置缩放成员
+        map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+        // 鼠标左键平移
+        map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+        this.map = map
+        this.underground = new mars3d.thing.Underground({
+          alpha: 1,
+        })
+        map.addThing(this.underground)
+        this.tiles3dLayer = new mars3d.layer.TilesetLayer({
+          name: '倾斜摄影',
+          url: 'http://111.198.10.15:20603/CRGroup03/tileset.json',
+          show:true,
+          type: '3dtiles',
+          maximumScreenSpaceError: 8,
+          maximumMemoryUsage: 1024,
+          // center: {lat: 27.750462, lng: 116.090196, alt: 130, heading: 3, pitch: 7 },
+          position: {
+            lng: 116.069103, lat: 27.756591, alt: -70
+          },
+
+          skipLevelOfDetail: true,
+          loadSiblings: true,
+          cullRequestsWhileMoving: true,
+          cullRequestsWhileMovingMultiplier: 10,
+          preferLeaves: true,
+          dynamicScreenSpaceError: true,
+          preloadWhenHidden: true,
+
+          flyTo: true
+        })
+        let that = this
+        this.handler.setInputAction(function(movement) {
+          console.log(movement,that.map.level)//向上滑是100 向下滑是-100
+          if(that.map.level<19){
+            that.ysline.show = true
+            that.wsline.show = true
+          }else{
+            if(that.alpha<90){
+              that.ysline.show = false
+              that.wsline.show = false
+            }
+          }
+        }, Cesium.ScreenSpaceEventType.WHEEL)
+        map.addLayer(this.tiles3dLayer)
+
+        this.tile_layer = new mars3d.layer.ArcGisLayer({
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer',
+          layers: '0,3',
+          show:false,
+          // maximumTerrainLevel: 19,
+          enablePickFeatures: false,
+        })
+        map.addLayer(this.tile_layer)
+
+        this.img_layer = new mars3d.layer.XyzLayer({
+          url: 'http://223.82.47.232:11502/crtiles01/{z}/{x}/{y}.png',
+          crs: 'EPSG:3857',
+          queryParameters: {
+            //可以传自定义url参数，如token等
+            token: 'mars3d',
+          }
+        })
+        map.addLayer(this.img_layer)
+        let wfsLayer = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨水管线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/4',
+          minimumLevel: 19,
+          symbol: {
+            type: 'polylineVolumeP',
+            styleOptions: {
+              color: '#375cad',
+              shape: 'pipeline',
+              radius: 0.1
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: [-val.起始埋深,-val.终止埋深]}
+            }
+          },
+          popup: '名称：雨水管线<br />编号：{编号}<br />材质：{材质}<br />管径：{管径}<br />所属道路：{所属道路}',
+        })
+        map.addLayer(wfsLayer)
+        wfsLayer = new mars3d.layer.ArcGisWfsLayer({
+          name: '污水管线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/5',
+          minimumLevel: 19,
+          symbol: {
+            type: 'polylineVolumeP',
+            styleOptions: {
+              color: '#eb6b0c',
+              shape: 'pipeline',
+              radius: 0.1
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: [-val.起始埋深,-val.终止埋深]}
+            }
+          },
+          popup: '名称：污水管线<br />编号：{编号}<br />材质：{材质}<br />管径：{管径}<br />所属道路：{所属道路}',
+        })
+        map.addLayer(wfsLayer)
+        this.ysline = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨水线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/4',
+          // maximumLevel: 19,
+          enablePickFeatures: false,
+          symbol: {
+            type: 'polylineP',
+            styleOptions: {
+              color: '#375cad',
+              // radius: 0.1
+            },
+          },
+
+        })
+        map.addLayer(this.ysline)
+
+        this.wsline = new mars3d.layer.ArcGisWfsLayer({
+          name: '污水线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/5',
+          // maximumLevel: 19,
+          enablePickFeatures: false,
+          symbol: {
+            type: 'polylineP',
+            styleOptions: {
+              color: '#eb6b0c',
+              // radius: 0.1
+            },
+          },
+
+        })
+        map.addLayer(this.wsline)
+        this.initpoints("1=1")
+        this.refreshAlarm()
+      },
+      // 获取井类型，显示井类型下拉
+      fetchWellType() {
+        getWellType().then(response => {
+          this.wellTypeList = []
+          // 如果该用户支持的井类型只有一个，则不显示该筛选框
+          // const wellTypes = this.$store.getters.wellTypes
+          for (const wellType of response.data) {
+            // if (wellTypes.indexOf(wellType.value) !== -1) {
+              this.wellTypeList.push(wellType)
+            // }
+          }
+          if (this.wellTypeList.length <= 1) {
+            this.showWellType = false
+          }
+        })
+      },
+      flytoinit(){
+        var center = {  lat: 27.68, lng: 116.0935, alt: 10000, heading: 360, pitch: -45 }
+        this.map.setCameraView(center)
+      },
+      // 获取全部井列表
+      getWellList() {
+        if(this.listQuery.keywords=== ''){
+          this.initpoints("1=1")
+          return
+        }
+        getWellList(this.listQuery).then(response => {
+          if (response.code === 200) { // todo
+            let str = "1 <> 1"
+            for (const res of response.data) {
+              str += (" or 编号 = '" + res.wellCode + "'")
+            }
+            this.initpoints(str)
+          }
+        })
+      },
+      // 点击井详情气泡
+      openInfoWindow(wellId) {
+        this.currentWindow.visible = false
+        getWellInfo(wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            this.wellInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'info'
+            this.trackPopUp = true
+          }
+        })
+      },
+      // 刷新报警列表
+      refreshAlarm() {
+        this.count = 60
+        this.loading = true
+        getAlarmsNow().then(response => {
+          if (response.code === 200) {
+
+            this.loading = false
+            // 获取当前报警列表
+            this.alarmList = response.data
+            if (this.alarmList.length > 0) {
+              this.hasAlarm = true
+            }
+            let str = "1 <> 1"
+            var map = {};
+            for (const alarm of response.data) {
+              str += (" or 编号 = '" + alarm.wellCode + "'")
+              map[alarm.wellCode] = alarm
+            }
+            if(this.alarm_layer!==null){
+              this.map.removeLayer(this.alarm_layer)
+            }
+            this.alarm_layer = new mars3d.layer.ArcGisWfsLayer({
+              name: '报警点',
+              url: 'http://223.82.47.232:11408/arcgis/rest/services/sfw/MapServer/1',
+              where: str,
+              // minimumLevel: 15,
+              symbol: {
+                type: 'modelP',
+                styleOptions: {
+                  url: '../static/model/baojing.gltf',
+                  minimumPixelSize: 20,
+                  maximumScale: 15,
+                  scale: 1
+                },
+                // callback: function (attr, styleOpt){
+                //   var val= {attr}.attr
+                //   return {setHeight: val.井深}
+                // }
+              },
+              popup:  function(e){
+                var val = e.graphic.options.attr
+                return  `井编号：${val.编号}<br />井名称：${val.附属物名称}<br />所属道路：${val.所属道路}<br />告警原因：${map[val.编号].alarmContent}<br />告警时间：${map[val.编号].alarmTime}`
+              }
+            })
+            this.map.addLayer(this.alarm_layer)
+          }
+        })
+      },
+      // 点击报警详情
+      openAlarmWindow(wellId, position) {
+        // 旧弹窗不显示
+        this.currentWindow.visible = false
+        // this.filterIcon()
+        getWellAlarms(wellId).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            const wellInfo = response.data
+            this.alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            this.currentWindow.position = position
+            this.center = position
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'alarm'
+            this.trackPopUp = true
+          }
+        })
+      },
+      // 点击报警列表
+      alarmRowClick(row, column, event) {
+        if(this.alpha<10){
+          this.alpha = 15
+        }
+
+        this.flytoinit()
+        var that = this
+        if(this.fly_layer!==null) this.map.removeLayer(this.fly_layer)
+        const wellId = row.wellCode
+        let str = "编号 = '" + wellId + "'"
+        this.fly_layer = null
+        this.fly_layer = new mars3d.layer.ArcGisWfsLayer({
+          name: '报警点',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/sfw/MapServer/1',
+          where: str,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/baojing.gltf',
+              scale: 0
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              var center = {lat: val.wd, lng: val.jd, alt: 50, heading: 360, pitch: -90}
+              that.map.setCameraView(center)
+            }
+          }
+        })
+        this.map.addLayer(this.fly_layer)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .mars3d-popup-content {
+    margin: 20px;
+    line-height: 1.9;
+    font-size: 18px;
+  }
+  @CHARSET "UTF-8";
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    background-color: rgba(255, 234, 241,0.8);
+    top: 40px;
+    left: 0px;
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 621px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding:0px !important;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      /*background-color: rgba(255, 229, 230, 0.8);*/
+      padding: 7px 0px;
+    }
+    .el-table td{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+      padding: 5px 0px;
+      /*line-height: 1;*/
+    }
+    .el-table td:hover{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+  /*按钮样式*/
+  .add-button{
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss">
+  .map-alarm-div {
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
new file mode 100644
index 0000000..ebb002c
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDay.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: {date:'日期'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
+
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
new file mode 100644
index 0000000..2258847
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDept.vue
@@ -0,0 +1,169 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterNote.vue b/src/views/gasDashboard/components/waterNote.vue
new file mode 100644
index 0000000..752330a
--- /dev/null
+++ b/src/views/gasDashboard/components/waterNote.vue
@@ -0,0 +1,148 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList().then(response => {
+        this.currentList = JSON.parse(response.data)
+      })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/gasDashboard/index.vue b/src/views/gasDashboard/index.vue
new file mode 100644
index 0000000..a9f13eb
--- /dev/null
+++ b/src/views/gasDashboard/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row>
+      <!-- 用气统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用气占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+        </el-card>
+      </el-col>
+      <!-- 用气走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!--气体流量计告警统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
+        </el-card>
+      </el-col>
+      <!--燃气报警统计，柱状图-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <alarm-gas-count-by-dept :query="listQuery3"/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 腐蚀速率走势图 -->
+      <el-col>
+        <el-card shadow="never">
+          <corrode-count-by-day :query="listQuery1" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import DeviceCount from './components/DeviceCount'
+import WaterCountByDept from './components/waterCountByDept'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from './components/waterCountByAreaBar'
+import WatchAlarmBar from './components/watchAlarmBar'
+import WaterNote from './components/waterNote'
+import AlarmCountByDept from './components/AlarmCountByDept'
+import WaterCompare from './components/waterCompare'
+import watchGasAlarmBar from './components/watchGasAlarmBar'
+import alarmGasCountByDept from './components/alarmGasCountByDept'
+import corrodeCountByDay from './components/corrodeCountByDay'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WaterCountByAreaBar,
+    WaterCountByDept,
+    WaterCountByDay,
+    WaterNote,
+    PanelGroup,
+    WaterCompare,
+    DeviceCount,
+    WatchAlarmBar,
+    AlarmCountByDept,
+    watchGasAlarmBar,
+    alarmGasCountByDept,
+    corrodeCountByDay
+  },
+  data() {
+    return {
+      listQuery1: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区用气量查询条件
+      listQuery2: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区报警查询条件
+      listQuery3: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1) {
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2) {
+      this.listQuery2 = listQuery2
+    },
+    // 切换报警查询条件
+    changeAlarmGasQuery(listQuery3) {
+      this.listQuery3 = listQuery3
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/gasOverview/cesiumViewer.vue b/src/views/gasOverview/cesiumViewer.vue
new file mode 100644
index 0000000..d787dfd
--- /dev/null
+++ b/src/views/gasOverview/cesiumViewer.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="cesiumContainer"/>
+</template>
+
+<script>
+// 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
+import Viewer from 'cesium/Source/Widgets/Viewer/Viewer'
+// 我们刚才所说的如何让Cesium知道静态资源在哪里的API
+import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
+// 导入必须的样式表
+import 'cesium/Source/Widgets/widgets.css'
+
+export default{
+  name: 'CesiumContainer',
+  data() {
+    return {
+      'viewer': {}
+    }
+  },
+  mounted() {
+    // 设置静态资源目录
+    buildModuleUrl.setBaseUrl('../static/Cesium/')
+    // 创建viewer实例
+    this.viewer = new Viewer('cesiumContainer')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/gasOverview/gasOverviewSimple.vue b/src/views/gasOverview/gasOverviewSimple.vue
new file mode 100644
index 0000000..bc2f67d
--- /dev/null
+++ b/src/views/gasOverview/gasOverviewSimple.vue
@@ -0,0 +1,1033 @@
+<template>
+  <div style="overflow-y: hidden">
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <!--水表检查井编号/地址-->
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/设备编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="initPoints">搜索</el-button>
+          <el-form-item style="margin-left: 10px">
+            <el-slider v-model="alpha" style="width: 150px"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flyToInit"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button :type="showAlarm?'danger':'info'" size="small" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+          </el-form-item>
+          <el-form-item style="margin-left: 5px">
+            <el-switch
+              v-model="sceneMode"
+              active-color="#637F2C"
+              inactive-color="#071a69"
+              active-text="深蓝"
+              inactive-text="实景"/>
+          </el-form-item>
+          <el-form-item style="margin-left: 5px">
+            <el-switch
+              v-model="isShowFlow"
+              :disabled="sceneMode"
+              active-text="开启流向"
+              inactive-text="关闭流向"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div v-if="showAlarm==true && alarmList.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div v-if="showType==true && typeList.length>0" :style="{left: left + 'px'}" class="map-alarm-div">
+      <div class="map-alarm-div-header" style="width:290px">
+        设备列表
+        <span class="icon-right" @click="typeShow=!typeShow">
+          <i v-if="typeShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="typeShow"
+          :style="{visibility: typeShow?'visible':'hidden'}"
+          :class="{moredatascollor:typeList.length>6}"
+          :native="false">
+          <el-table
+            :data="typeList"
+            class="alarm-list-table"
+            border
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column
+              align="center"
+              type="selection"
+              width="55"
+            />
+            <el-table-column
+              v-for="column in columnsType"
+              :key="column.value"
+              :label="column.text"
+              :width="column.width"
+              :align="column.align"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div id="mars3dContainer" class="mars3d-container"/>
+    <div class="cover"/>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { mapGetters } from 'vuex'
+import { getAlarmsNow, getMapping } from '@/api/overview'
+import { getDeviceType } from '@/api/device'
+
+import 'mars3d/dist/mars3d.css'
+import * as mars3d from 'mars3d'
+import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+
+var underground = null // 地球底层
+var building = null // 楼房建筑图层
+var flow = null // 流向图层
+var street = null // 街道图层
+var well_model_layer = null // 井模型层
+var watch_model_layer = null // 水表模型层
+var watch_icon_layer = null // 水表图标层
+var zs_model_layer = null // 噪声模型层
+var zs_icon_layer = null // 噪声图标层
+export default {
+  name: 'OverviewSimple',
+  components: {},
+  data() {
+    return {
+      left: '',
+      mapMark: '-',
+      typeShow: false,
+      showType: true, // 是否显示设备
+      typeList: [],
+      deviceTypeList: [], // 设备类型列表
+      multipleSelection: [], // 多选选中项
+      columnsType: [
+        {
+          text: '设备类型',
+          value: 'name',
+          align: 'center'
+        }
+      ],
+      type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+      refreshType: 'websocket', // 刷新数据方式：clock或websocket
+      sceneMode: true,
+      isShowFlow: true,
+      showAlarm: true, // 是否显示报警
+      alpha: 40, // 是否显示全部井
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deviceType: ''
+      }, // 筛选条件
+      columns: [
+        {
+          text: '水表检查井编号',
+          value: 'wellCode',
+          width: 120,
+          align: 'center'
+        },
+        {
+          text: '设备编号',
+          value: 'devcode',
+          width: 130,
+          align: 'center'
+        },
+        {
+          text: '告警原因',
+          value: 'alarmContent',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '时间',
+          value: 'alarmTime',
+          width: 170,
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      showWellType: this.showWellType(), // 是 否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      alarmList: [], // 报警列表
+      timer: null,
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      hasAlarm: false, // 是否有报警,
+      loading: true, // 加载图标是否显示
+      removeHandler: null,
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'needRefresh'
+    ])
+  },
+  watch: {
+    sceneMode(val) {
+      if (val) {
+        // 深蓝
+        window.map.basemap = 2011
+        building.show = false
+        flow.show = false
+        street.show = true
+      } else {
+        // 实景
+        window.map.basemap = 2021
+        if (window.map.scene._mode === Cesium.SceneMode.SCENE3D) {
+          building.show = true
+        } else {
+          building.show = false
+        }
+        if (!this.isShowFlow) {
+          flow.show = false
+        } else {
+          flow.show = true
+        }
+        street.show = false
+      }
+    },
+    isShowFlow(val) {
+      if (!val) {
+        flow.show = false
+      } else {
+        flow.show = true
+      }
+    },
+    alpha(val) {
+      window.map.basemap.opacity = val / 100
+      underground.alpha = val / 100
+      if (building !== null) {
+        building.setStyle({
+          opacity: val / 100
+        })
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()// 获取设备列表
+  },
+  mounted() {
+    this.initMars3D()
+  },
+  methods: {
+    // table表格每行多选触发方法
+    handleSelectionChange(val) {
+      console.log(val)
+      if (val.length === this.typeList.length || val.length === 0) {
+        this.initPoints()
+      } else if (val.length === 1) {
+        if (val[0].name === '远传水表') {
+          let params = ''
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+              well_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(well_model_layer)
+              if (response.data.length > 0) {
+                let maxLng = parseFloat(response.data[0].longitude)
+                let minLng = parseFloat(response.data[0].longitude)
+                let maxLat = parseFloat(response.data[0].latitude)
+                let minLat = parseFloat(response.data[0].latitude)
+                for (let i = 0; i < response.data.length; i++) {
+                  if (parseFloat(response.data[i].latitude) > 100) continue
+                  const lng = parseFloat(response.data[i].longitude)
+                  const lat = parseFloat(response.data[i].latitude)
+
+                  if (lng > maxLng) maxLng = lng
+                  if (lng < minLng) minLng = lng
+                  if (lat > maxLat) maxLat = lat
+                  if (lat < minLat) minLat = lat
+
+                  well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                    position: [lng, lat, 0],
+                    style: {
+                      url: '../static/model/ys.gltf',
+                      scale: 2
+                    },
+                    popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                  }))
+                }
+                const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+                const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+                const geodesic = new Cesium.EllipsoidGeodesic()
+                geodesic.setEndPoints(start, end)
+                const distance = geodesic.surfaceDistance
+                const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+                window.map.setCameraView(center)
+              }
+            }
+          })
+          params = '13'
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+              watch_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_model_layer)
+              if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+              watch_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+                  style: {
+                    url: '../static/model/sb.glb',
+                    scale: 2,
+                    heading: 90
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/sb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+          params = '8'
+          getMapping(params, this.mapMark).then(response => {
+            if (response.code === 200) {
+              if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+              zs_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_model_layer)
+
+              if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+              zs_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, 0],
+                  style: {
+                    url: '../static/model/zs.glb',
+                    scale: 1,
+                    heading: 90
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/zs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+        } else if (val[0].name === '供水泄漏检测仪') {
+          let params = ''
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+              well_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(well_model_layer)
+              if (response.data.length > 0) {
+                let maxLng = parseFloat(response.data[0].longitude)
+                let minLng = parseFloat(response.data[0].longitude)
+                let maxLat = parseFloat(response.data[0].latitude)
+                let minLat = parseFloat(response.data[0].latitude)
+                for (let i = 0; i < response.data.length; i++) {
+                  if (parseFloat(response.data[i].latitude) > 100) continue
+                  const lng = parseFloat(response.data[i].longitude)
+                  const lat = parseFloat(response.data[i].latitude)
+
+                  if (lng > maxLng) maxLng = lng
+                  if (lng < minLng) minLng = lng
+                  if (lat > maxLat) maxLat = lat
+                  if (lat < minLat) minLat = lat
+
+                  well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                    position: [lng, lat, 0],
+                    style: {
+                      url: '../static/model/ys.gltf',
+                      scale: 2
+                    },
+                    popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                  }))
+                }
+                const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+                const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+                const geodesic = new Cesium.EllipsoidGeodesic()
+                geodesic.setEndPoints(start, end)
+                const distance = geodesic.surfaceDistance
+                const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+                window.map.setCameraView(center)
+              }
+            }
+          })
+          params = '13'
+          getMapping(params, this.mapMark).then(response => {
+            if (response.code === 200) {
+              if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+              watch_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_model_layer)
+              if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+              watch_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+                  style: {
+                    url: '../static/model/sb.glb',
+                    scale: 2,
+                    heading: 90
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/sb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+          params = '8'
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+              zs_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_model_layer)
+
+              if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+              zs_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, 0],
+                  style: {
+                    url: '../static/model/zs.glb',
+                    scale: 1,
+                    heading: 90
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/zs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+        }
+      }
+      // this.multipleSelection = val
+    },
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType(this.listQuery).then(response => {
+        this.deviceTypeList = []
+        // 过滤掉该单位不支持的设备类型
+        const deviceTypes = this.$store.getters.deviceTypes
+        for (const deviceType of response.data) {
+          if (deviceTypes.indexOf(deviceType.value) !== -1) {
+            this.deviceTypeList.push(deviceType)
+          }
+        }
+        this.typeList = this.deviceTypeList
+      })
+    },
+    // 初始化地球
+    async initMars3D() {
+      var mapOptions = {
+        scene: {
+          sceneMode: Cesium.SceneMode.SCENE2D,
+          // 默认视角参数
+          center: { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 },
+          // 以下是Cesium.Globe对象相关参数
+          globe: {
+            depthTestAgainstTerrain: true, // 是否启用深度监测
+            baseColor: '#071a69', // 地球默认背景色
+            showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+            enableLighting: false // 是否显示昼夜区域
+          },
+          // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+          cameraController: {
+            zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+            minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+            maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
+            enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+            enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+            enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+            enableZoom: true, // 是否允许 用户放大和缩小视图
+            enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+          }
+        },
+        control: {
+          infoBox: false,
+          sceneModePicker: true
+        },
+        basemaps: [
+          {
+            pid: 10,
+            id: 2011,
+            name: '天地图',
+            type: 'group',
+            layers: [
+              { name: '注记', type: 'tdt', layer: 'ter_z', key: ['216ee92889e17ab1b083fae665d522b8'] },
+              { name: '注记', type: 'tdt', layer: 'img_z', key: ['216ee92889e17ab1b083fae665d522b8'] }
+            ]
+          },
+          {
+            id: 2021,
+            pid: 10,
+            name: '天地图影像',
+            icon: 'http://mars3d.cn/example/img/basemaps/tdt_img.png',
+            type: 'tdt',
+            layer: 'img_d',
+            key: ['216ee92889e17ab1b083fae665d522b8'],
+            show: true
+          }
+        ]
+      }
+      // 创建三维地球场景
+      const map = new mars3d.Map('mars3dContainer', mapOptions)
+      map.basemap = 2011
+      map.scene.screenSpaceCameraController.enableCollisionDetection = false
+      // 设置鼠标
+      map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
+      // 缩放设置 重新设置缩放成员
+      map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+      // 鼠标左键平移
+      map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+      const bloomEffect = new mars3d.effect.BloomEffect({
+        enabled: true
+      })
+      map.addEffect(bloomEffect)
+      window.map = map
+
+      // 地球底层
+      underground = new mars3d.thing.Underground({
+        alpha: this.alpha / 100
+      })
+      map.addThing(underground)
+      map.basemap.opacity = this.alpha / 100
+
+      const graphicLayer = new mars3d.layer.GraphicLayer()
+      map.addLayer(graphicLayer)
+
+      // 建筑模型
+      building = new mars3d.graphic.ModelPrimitive({
+        position: [120.242284, 35.983704, 0],
+        style: {
+          url: '../static/model/m1/m1.gltf',
+          scale: 1,
+          heading: 18.8,
+          opacity: this.alpha / 100
+        }
+      })
+      graphicLayer.addGraphic(building)
+      building.show = false
+
+      this.initDrawLines()
+      this.initPoints()
+
+      // 屏幕取点
+      const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas)
+      handler.setInputAction(function(evt) {
+        var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid)
+        var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+        var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值
+        var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值
+        console.log('[' + lng + ',' + lat + '],')
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+      // 切换二三维响应函数
+      map.on(mars3d.EventType.morphComplete, function(event) {
+        if (window.map.scene._mode !== Cesium.SceneMode.SCENE3D) {
+          building.show = false
+        } else {
+          building.show = !this.sceneMode
+        }
+      })
+    },
+    // 初始化街道、流向线
+    async initDrawLines() {
+      axios.get('./static/position.json').then((result) => {
+        const positions = result.data.positions
+        flow = new mars3d.layer.GraphicLayer()
+        window.map.addLayer(flow)
+        street = new mars3d.layer.GraphicLayer()
+        window.map.addLayer(street)
+        for (let j = 0; j < positions.length; j++) {
+          flow.addGraphic(this.addFlow(positions[j].items, positions[j].repeat))
+          street.addGraphic(this.addStreet(positions[j].items))
+        }
+        flow.show = false
+      }).catch((error) => {
+        console.log('get position error...' + error)
+      })
+    },
+    // 初始化井，设备
+    async initPoints() {
+      // 井
+      let params = ''
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+          well_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(well_model_layer)
+          if (response.data.length > 0) {
+            let maxLng = parseFloat(response.data[0].longitude)
+            let minLng = parseFloat(response.data[0].longitude)
+            let maxLat = parseFloat(response.data[0].latitude)
+            let minLat = parseFloat(response.data[0].latitude)
+            for (let i = 0; i < response.data.length; i++) {
+              if (parseFloat(response.data[i].latitude) > 100) continue
+              const lng = parseFloat(response.data[i].longitude)
+              const lat = parseFloat(response.data[i].latitude)
+
+              if (lng > maxLng) maxLng = lng
+              if (lng < minLng) minLng = lng
+              if (lat > maxLat) maxLat = lat
+              if (lat < minLat) minLat = lat
+
+              well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                position: [lng, lat, 0],
+                style: {
+                  url: '../static/model/ys.gltf',
+                  scale: 2
+                },
+                popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+              }))
+            }
+            const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+            const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+            const geodesic = new Cesium.EllipsoidGeodesic()
+            geodesic.setEndPoints(start, end)
+            const distance = geodesic.surfaceDistance
+            const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+            window.map.setCameraView(center)
+          }
+        }
+      })
+      params = '13'
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+          watch_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(watch_model_layer)
+          if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+          watch_icon_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(watch_icon_layer)
+          for (let i = 0; i < response.data.length; i++) {
+            watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+              position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+              style: {
+                url: '../static/model/sb.glb',
+                scale: 2,
+                heading: 90
+              },
+              popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+            watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+              id: response.data[i].devcode,
+              position: [response.data[i].longitude, response.data[i].latitude, 1],
+              style: {
+                image: '../static/images/icon/sb.png',
+                scale: 1,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+              },
+              popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+          }
+          this.refreshAlarm()
+        }
+      })
+      params = '8'
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+          zs_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(zs_model_layer)
+
+          if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+          zs_icon_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(zs_icon_layer)
+          for (let i = 0; i < response.data.length; i++) {
+            zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+              position: [response.data[i].longitude, response.data[i].latitude, 0],
+              style: {
+                url: '../static/model/zs.glb',
+                scale: 1,
+                heading: 90
+              },
+              popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+            zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+              id: response.data[i].devcode,
+              position: [response.data[i].longitude, response.data[i].latitude, 1],
+              style: {
+                image: '../static/images/icon/zs.png',
+                scale: 1,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+              },
+              popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+          }
+          this.refreshAlarm()
+        }
+      })
+    },
+    // 流向线
+    addFlow(positions, repeat) {
+      var style = {
+        width: 10,
+        material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
+          color: '#217bd9',
+          repeat: new Cesium.Cartesian2(repeat, 1),
+          image: '../static/images/line.png',
+          speed: 15
+        })
+      }
+      var graphic = new mars3d.graphic.PolylineEntity({
+        positions: positions,
+        style: style
+      })
+      return graphic
+    },
+    // 道路线
+    addStreet(positions) {
+      var graphic = new mars3d.graphic.PolylineEntity({
+        positions: positions,
+        style: {
+          width: 8,
+          color: Cesium.Color.AQUA,
+          clampToGround: true
+        }
+      })
+      return graphic
+    },
+    // 回到原点
+    flyToInit() {
+      let center
+      if (window.map._viewer.scene._mode === Cesium.SceneMode.SCENE3D) {
+        center = { lat: 35.97, lng: 120.2384, alt: 2000, heading: 360, pitch: -45 }
+      } else {
+        center = { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 }
+      }
+      window.map.setCameraView(center)
+    },
+    // 刷新报警列表
+    async refreshAlarm() {
+      this.count = 60
+      this.loading = true
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          this.loading = false
+          // 获取当前报警列表
+          this.alarmList = response.data
+          if (this.alarmList.length > 0) {
+            this.left = 621
+            this.hasAlarm = true
+          } else {
+            this.left = 0
+          }
+          for (const alarm of response.data) {
+            for (const watch of watch_icon_layer.graphics) {
+              if (alarm.devcode === watch.options.id) {
+                if (!watch.popup.startsWith('报警')) {
+                  watch.setStyle({
+                    image: '../static/images/icon/asb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  })
+                  watch.popup = `报警远程水表<br />设备编号：${alarm.devcode}<br />井编号：${alarm.wellCode}<br />井类型：${alarm.wellTypeName}<br />报警时间：${alarm.alarmTime}<br />报警数值：${alarm.alarmValue}<br />报警内容：${alarm.alarmContent}<br />详细位置：${alarm.position}`
+                }
+                break
+              }
+            }
+            for (const zs of zs_icon_layer.graphics) {
+              if (alarm.devcode === zs.options.id) {
+                if (!zs.popup.startsWith('报警')) {
+                  zs.setStyle({
+                    image: '../static/images/icon/azs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  })
+                  zs.popup = `报警噪声记录仪仪<br />设备编号：${alarm.devcode}<br />井编号：${alarm.wellCode}<br />井类型：${alarm.wellTypeName}<br />报警时间：${alarm.alarmTime}<br />报警数值：${alarm.alarmValue}<br />报警内容：${alarm.alarmContent}<br />详细位置：${alarm.position}`
+                }
+                break
+              }
+            }
+          }
+        }
+      })
+    },
+    // 点击报警列表
+    alarmRowClick(row, column, event) {
+      if (this.alpha < 10) {
+        this.alpha = 15
+      }
+      let center
+      for (const watch of watch_icon_layer.graphics) {
+        if (row.devcode === watch.options.id) {
+          center = { lat: watch._point._lat, lng: watch._point._lng, alt: 50, heading: 360, pitch: -90 }
+          window.map.setCameraView(center)
+          break
+        }
+      }
+      for (const zs of zs_icon_layer.graphics) {
+        if (row.devcode === zs.options.id) {
+          center = { lat: zs._point._lat, lng: zs._point._lng, alt: 50, heading: 360, pitch: -90 }
+          window.map.setCameraView(center)
+          break
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .mars3d-popup-content {
+    margin: 20px;
+    line-height: 1.9;
+    font-size: 18px;
+  }
+  /deep/ .cesium-toolbar-button {
+    margin-top: 5px !important;
+    width: 48px !important;
+    height: 48px !important;
+  }
+  /depp/ span.cesium-sceneModePicker-wrapper {
+    margin: 0 50px !important;
+  }
+  /deep/ .mars3d-popup-close-button {
+    top: 10px;
+    right: 10px;
+  }
+  /deep/ .mars3d-popup{
+    margin-top: -40px;
+  }
+  /deep/ .mars3d-popup-content {
+    margin: 15px;
+    line-height: 1.5;
+    font-size: 16px;
+  }
+  /deep/ .mars3d-popup-content-wrapper {
+    box-shadow: 0 2px 6px #00192faa;
+    max-height: 1000px;
+  }
+  /deep/ .mars3d-popup-background {
+    background: #00192faa;
+    border-radius: 10px;
+  }
+  /deep/ .mars3d-popup-tip {
+    border-radius: 0px !important;
+  }
+  /deep/.mars3d-popup-close-button{
+    top: 10px;
+  }
+
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    left: 0px;
+    right: 10px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    top: 40px;
+    left: 0px;
+    background-color: rgba(255, 234, 241,0.8);
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 621px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding:0px !important;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      padding: 7px 0px;
+    }
+    .el-table td{
+      padding: 5px 0px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
+
+<style rel="stylesheet/scss" lang="scss">
+  .map-alarm-div {
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
+  }
+  .cover{
+    position: absolute;
+    bottom: 3px;
+    left: 0px;
+    background-color: #122252;
+    width: 130px;
+    height: 32px;
+  }
+</style>
diff --git a/src/views/gasOverview/overview.vue b/src/views/gasOverview/overview.vue
new file mode 100644
index 0000000..936577c
--- /dev/null
+++ b/src/views/gasOverview/overview.vue
@@ -0,0 +1,802 @@
+<!--suppress ALL -->
+<template>
+  <div>
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="listQuery.wellType" placeholder="选择井类型" @change="changetype" clearable size="small">
+              <el-option
+                v-for="item in wellTypeList"
+                :key="'welltype_'+item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getWellList" size="small" style="margin-top: 2px">搜索</el-button>
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部井</el-checkbox>
+          </el-form-item>
+          <el-form-item >
+            <el-slider v-model="alpha" style="width: 150px"></el-slider>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flytoinit"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <!--<el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>-->
+    </div>
+    <div v-if="showAlarm==true && alarmList.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div id="mars3dContainer" class="mars3d-container"/>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import SelectTree from '@/components/SelectTree/singleSelect'
+  import { getWellType } from '@/api/well'
+  import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode } from '@/api/overview'
+  import DeptSelect from '../../components/DeptSelect/index'
+
+  import 'mars3d/dist/mars3d.css'
+  import * as mars3d from 'mars3d'
+  import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+  var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+
+  var rectangle = null
+  var alarmIcons= []
+  var typeList = []
+  export default {
+    name: 'Overview',
+    components: { DeptSelect, SelectTree },
+    data() {
+      return {
+        map: null,
+        ysline: null,
+        wsline: null,
+        underground: null,
+        img_layer: null,
+        tile_layer: null,
+        tiles3dLayer: null,
+        rain_point_layer: null,
+        rain_point_layer1: null,
+        sewage_point_layer: null,
+        alarm_layer: null,
+        fly_layer: null,
+        type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+        refreshType: 'websocket', // 刷新数据方式：clock或websocket
+        showAlarm: true, // 是否显示报警
+        showAll: false, // 是否显示全部井
+        alpha: 100, // 是否显示全部井
+        listQuery: {
+          keywords: '', // 关键字
+          wellType: '', // 井类型
+          // deptid: '', // 组织机构
+          // isAlarm: '1' // 是否报警
+        }, // 筛选条件
+        columns: [
+          {
+            text: '井编号',
+            value: 'wellCode',
+            width: 220,
+            align: 'center'
+          },
+          {
+            text: '设备编号',
+            value: 'devcode',
+            width: 120,
+            align: 'center'
+          },
+          {
+            text: '告警原因',
+            value: 'alarmContent',
+            align: 'center',
+            width: 120
+          },
+          {
+            text: '时间',
+            value: 'alarmTime',
+            width: 160,
+            align: 'center'
+          }
+        ], // 告警列表显示列
+        tableShow: true, // 是否显示告警列表
+        tableIcon: 'el-icon-arrow-up',
+        showWellType: this.showWellType(), // 是 否显示井类型下拉
+        wellTypeList: [], // 井类型列表
+        showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+        center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+        zoom: 12, // 地图缩放比例
+        alarmList: [], // 报警列表
+        alarmInfo: {
+          wellCode: '',
+          deptName: '',
+          position: '',
+          deep: '',
+          alarms: []
+        }, // 显示报警详情气泡内容
+        timer :null,
+        currentWindow: {
+          visible: false, // 窗体显示与否
+          position: [this.$store.getters.lng, this.$store.getters.lat],
+          windowType: 'info' // 窗体类型：详情info或报警alarm
+        }, // 当前窗体属性
+        deptShowTop: false, // 是否显示顶级
+        clock: null, // 计时器
+        hasAlarm: false, // 是否有报警,
+        loading: true, // 加载图标是否显示
+        trackPopUp:false,
+        removeHandler:null,
+        showClearBtn: false // 是否显示清除查询按钮
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'needRefresh'
+      ])
+    },
+    mounted() {
+      this.initmars3d()
+    },
+    watch: {
+      alpha(val){
+        this.img_layer.alpha = val/100
+        // this.ysline.alpha = val/100
+        // this.wsline.alpha = val/100
+        this.map.basemap.opacity = val/100
+        this.tiles3dLayer.opacity = val/100
+        this. underground.alpha = val/100
+        console.log(val,this.map.level)
+        if(val<=90 && this.map.level>=19){
+          // this.map.scene.globe.show  = false
+          this.ysline.show = false
+          this.wsline.show = false
+        }else {
+          // this.map.scene.globe.show  = true
+          this.ysline.show = true
+          this.wsline.show = true
+        }
+      },
+      showAll(val) {
+        this.tile_layer.show = val
+      },
+      // needRefresh(val) {
+      //   // 需要刷新
+      //   if (val) {
+      //     this.refreshAlarm()
+      //   }
+      // },
+      showAlarm(val){
+        if(!val && this.currentWindow.windowType=='alarm'){
+          this.currentWindow.visible = false
+        }
+        this.alarm_layer.show = val
+      }
+    },
+    created() {
+      this.fetchWellType()
+    },
+    computed: {
+      handler() {
+        return new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas)
+      }
+    },
+    methods: {
+      changetype(){
+        if(this.listQuery.wellType==='1'){ // 雨水
+          this.rain_point_layer.show = true
+          this.rain_point_layer1.show = true
+          this.sewage_point_layer.show = false
+        }else if(this.listQuery.wellType==='2'){ //污水
+          this.rain_point_layer.show = false
+          this.rain_point_layer1.show = false
+          this.sewage_point_layer.show = true
+        }else{
+          this.rain_point_layer.show = true
+          this.rain_point_layer1.show = true
+          this.sewage_point_layer.show = true
+        }
+      },
+
+      async initpoints(str) {
+        if(this.sewage_point_layer!==null)  this.map.removeLayer(this.sewage_point_layer)
+        if(this.rain_point_layer!==null)  this.map.removeLayer(this.rain_point_layer)
+        if(this.rain_point_layer1!==null)  this.map.removeLayer(this.rain_point_layer1)
+        this.sewage_point_layer = new mars3d.layer.ArcGisWfsLayer({
+          name: '污水点',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/3',
+          where: str,
+          minimumLevel: 19,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/ws3(1).gltf',
+              scale: 1.3
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: -val.井深}
+            }
+          },
+          popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
+        })
+        this.map.addLayer(this.sewage_point_layer)
+
+        this.rain_point_layer = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨水井',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0',
+          where: "附属物名称 = '雨水井' and " + str,
+          minimumLevel: 19,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/ys3.gltf',
+              scale: 1.3
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: -val.井深}
+            }
+          },
+          popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
+        })
+        this.map.addLayer(this.rain_point_layer)
+
+        this.rain_point_layer1 = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨篦',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0',
+          where: "附属物名称 <> '雨水井' and " + str,
+          minimumLevel: 19,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/yubi.gltf',
+              scale: 1.3
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: -val.井深}
+            }
+          },
+          popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
+        })
+        this.map.addLayer(this.rain_point_layer1)
+      },
+      // 初始化放这里
+      async initmars3d() {
+        var mapOptions = {
+          scene: {
+            // 默认视角参数
+            center: {  lat: 27.68, lng: 116.0935, alt: 10000, heading: 360, pitch: -45 },
+            // 以下是Cesium.Globe对象相关参数
+            globe: {
+              depthTestAgainstTerrain: true, // 是否启用深度监测
+              // baseColor: '#00192f', // 地球默认背景色
+              showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+              enableLighting: false // 是否显示昼夜区域
+            },
+            // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+            cameraController: {
+              zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+              minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+              maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
+              enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+              enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+              enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+              enableZoom: true, // 是否允许 用户放大和缩小视图
+              enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+            }
+          },
+          basemaps: [
+            {
+              pid: 10,
+              id: 2011,
+              name: "天地图",
+              type: "group",
+              layers: [
+                // { name: "注记", type: "tdt", layer: "ter_z", key: ["9ae78c51a0a28f06444d541148496e36"] },
+                { name: "注记", type: "tdt", layer: "img_z", key: ["9ae78c51a0a28f06444d541148496e36"] },
+              ]
+            },
+            // {
+            //   "id": 2021,
+            //   "pid": 10,
+            //   "name": "天地图影像",
+            //   "icon": "http://mars3d.cn/example/img/basemaps/tdt_img.png",
+            //   "type": "tdt",
+            //   "layer": "img_d",
+            //   "key": ["9ae78c51a0a28f06444d541148496e36"],
+            //   "show": true
+            // },
+            // {
+            //   "id": 2020,
+            //   "pid": 10,
+            //   "name": "天地图电子",
+            //   "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png",
+            //   "type": "group",
+            //   "layers": [
+            //     { "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["9ae78c51a0a28f06444d541148496e36"] },
+            //     { "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["9ae78c51a0a28f06444d541148496e36"] }
+            //   ]
+            // },
+          ],
+        }
+        // 创建三维地球场景
+        var map = new mars3d.Map('mars3dContainer', mapOptions)
+        map.basemap = 2011
+        map.scene.screenSpaceCameraController.enableCollisionDetection = false
+        // 设置鼠标
+        map.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG ]
+        // 缩放设置 重新设置缩放成员
+        map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+        // 鼠标左键平移
+        map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+        this.map = map
+        this.underground = new mars3d.thing.Underground({
+          alpha: 1,
+        })
+        map.addThing(this.underground)
+        this.tiles3dLayer = new mars3d.layer.TilesetLayer({
+          name: '倾斜摄影',
+          url: 'http://111.198.10.15:20603/CRGroup03/tileset.json',
+          show:true,
+          type: '3dtiles',
+          maximumScreenSpaceError: 8,
+          maximumMemoryUsage: 1024,
+          // center: {lat: 27.750462, lng: 116.090196, alt: 130, heading: 3, pitch: 7 },
+          position: {
+            lng: 116.069103, lat: 27.756591, alt: -70
+          },
+
+          skipLevelOfDetail: true,
+          loadSiblings: true,
+          cullRequestsWhileMoving: true,
+          cullRequestsWhileMovingMultiplier: 10,
+          preferLeaves: true,
+          dynamicScreenSpaceError: true,
+          preloadWhenHidden: true,
+
+          flyTo: true
+        })
+        let that = this
+        this.handler.setInputAction(function(movement) {
+          console.log(movement,that.map.level)//向上滑是100 向下滑是-100
+          if(that.map.level<19){
+            that.ysline.show = true
+            that.wsline.show = true
+          }else{
+            if(that.alpha<90){
+              that.ysline.show = false
+              that.wsline.show = false
+            }
+          }
+        }, Cesium.ScreenSpaceEventType.WHEEL)
+        map.addLayer(this.tiles3dLayer)
+
+        this.tile_layer = new mars3d.layer.ArcGisLayer({
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer',
+          layers: '0,3',
+          show:false,
+          // maximumTerrainLevel: 19,
+          enablePickFeatures: false,
+        })
+        map.addLayer(this.tile_layer)
+
+        this.img_layer = new mars3d.layer.XyzLayer({
+          url: 'http://223.82.47.232:11502/crtiles01/{z}/{x}/{y}.png',
+          crs: 'EPSG:3857',
+          queryParameters: {
+            //可以传自定义url参数，如token等
+            token: 'mars3d',
+          }
+        })
+        map.addLayer(this.img_layer)
+        let wfsLayer = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨水管线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/4',
+          minimumLevel: 19,
+          symbol: {
+            type: 'polylineVolumeP',
+            styleOptions: {
+              color: '#375cad',
+              shape: 'pipeline',
+              radius: 0.1
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: [-val.起始埋深,-val.终止埋深]}
+            }
+          },
+          popup: '名称：雨水管线<br />编号：{编号}<br />材质：{材质}<br />管径：{管径}<br />所属道路：{所属道路}',
+        })
+        map.addLayer(wfsLayer)
+        wfsLayer = new mars3d.layer.ArcGisWfsLayer({
+          name: '污水管线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/5',
+          minimumLevel: 19,
+          symbol: {
+            type: 'polylineVolumeP',
+            styleOptions: {
+              color: '#eb6b0c',
+              shape: 'pipeline',
+              radius: 0.1
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: [-val.起始埋深,-val.终止埋深]}
+            }
+          },
+          popup: '名称：污水管线<br />编号：{编号}<br />材质：{材质}<br />管径：{管径}<br />所属道路：{所属道路}',
+        })
+        map.addLayer(wfsLayer)
+        this.ysline = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨水线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/4',
+          // maximumLevel: 19,
+          enablePickFeatures: false,
+          symbol: {
+            type: 'polylineP',
+            styleOptions: {
+              color: '#375cad',
+              // radius: 0.1
+            },
+          },
+
+        })
+        map.addLayer(this.ysline)
+
+        this.wsline = new mars3d.layer.ArcGisWfsLayer({
+          name: '污水线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/5',
+          // maximumLevel: 19,
+          enablePickFeatures: false,
+          symbol: {
+            type: 'polylineP',
+            styleOptions: {
+              color: '#eb6b0c',
+              // radius: 0.1
+            },
+          },
+
+        })
+        map.addLayer(this.wsline)
+        this.initpoints("1=1")
+        this.refreshAlarm()
+      },
+      // 获取井类型，显示井类型下拉
+      fetchWellType() {
+        getWellType().then(response => {
+          this.wellTypeList = []
+          // 如果该用户支持的井类型只有一个，则不显示该筛选框
+          // const wellTypes = this.$store.getters.wellTypes
+          for (const wellType of response.data) {
+            // if (wellTypes.indexOf(wellType.value) !== -1) {
+              this.wellTypeList.push(wellType)
+            // }
+          }
+          if (this.wellTypeList.length <= 1) {
+            this.showWellType = false
+          }
+        })
+      },
+      flytoinit(){
+        var center = {  lat: 27.68, lng: 116.0935, alt: 10000, heading: 360, pitch: -45 }
+        this.map.setCameraView(center)
+      },
+      // 获取全部井列表
+      getWellList() {
+        if(this.listQuery.keywords=== ''){
+          this.initpoints("1=1")
+          return
+        }
+        getWellList(this.listQuery).then(response => {
+          if (response.code === 200) { // todo
+            let str = "1 <> 1"
+            for (const res of response.data) {
+              str += (" or 编号 = '" + res.wellCode + "'")
+            }
+            this.initpoints(str)
+          }
+        })
+      },
+      // 点击井详情气泡
+      openInfoWindow(wellId) {
+        this.currentWindow.visible = false
+        getWellInfo(wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            this.wellInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'info'
+            this.trackPopUp = true
+          }
+        })
+      },
+      // 刷新报警列表
+      refreshAlarm() {
+        this.count = 60
+        this.loading = true
+        getAlarmsNow().then(response => {
+          if (response.code === 200) {
+
+            this.loading = false
+            // 获取当前报警列表
+            this.alarmList = response.data
+            if (this.alarmList.length > 0) {
+              this.hasAlarm = true
+            }
+            let str = "1 <> 1"
+            var map = {};
+            for (const alarm of response.data) {
+              str += (" or 编号 = '" + alarm.wellCode + "'")
+              map[alarm.wellCode] = alarm
+            }
+            if(this.alarm_layer!==null){
+              this.map.removeLayer(this.alarm_layer)
+            }
+            this.alarm_layer = new mars3d.layer.ArcGisWfsLayer({
+              name: '报警点',
+              url: 'http://223.82.47.232:11408/arcgis/rest/services/sfw/MapServer/1',
+              where: str,
+              // minimumLevel: 15,
+              symbol: {
+                type: 'modelP',
+                styleOptions: {
+                  url: '../static/model/baojing.gltf',
+                  minimumPixelSize: 20,
+                  maximumScale: 15,
+                  scale: 1
+                },
+                // callback: function (attr, styleOpt){
+                //   var val= {attr}.attr
+                //   return {setHeight: val.井深}
+                // }
+              },
+              popup:  function(e){
+                var val = e.graphic.options.attr
+                return  `井编号：${val.编号}<br />井名称：${val.附属物名称}<br />所属道路：${val.所属道路}<br />告警原因：${map[val.编号].alarmContent}<br />告警时间：${map[val.编号].alarmTime}`
+              }
+            })
+            this.map.addLayer(this.alarm_layer)
+          }
+        })
+      },
+      // 点击报警详情
+      openAlarmWindow(wellId, position) {
+        // 旧弹窗不显示
+        this.currentWindow.visible = false
+        // this.filterIcon()
+        getWellAlarms(wellId).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            const wellInfo = response.data
+            this.alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            this.currentWindow.position = position
+            this.center = position
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'alarm'
+            this.trackPopUp = true
+          }
+        })
+      },
+      // 点击报警列表
+      alarmRowClick(row, column, event) {
+        if(this.alpha<10){
+          this.alpha = 15
+        }
+
+        this.flytoinit()
+        var that = this
+        if(this.fly_layer!==null) this.map.removeLayer(this.fly_layer)
+        const wellId = row.wellCode
+        let str = "编号 = '" + wellId + "'"
+        this.fly_layer = null
+        this.fly_layer = new mars3d.layer.ArcGisWfsLayer({
+          name: '报警点',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/sfw/MapServer/1',
+          where: str,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/baojing.gltf',
+              scale: 0
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              var center = {lat: val.wd, lng: val.jd, alt: 50, heading: 360, pitch: -90}
+              that.map.setCameraView(center)
+            }
+          }
+        })
+        this.map.addLayer(this.fly_layer)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .mars3d-popup-content {
+    margin: 20px;
+    line-height: 1.9;
+    font-size: 18px;
+  }
+  @CHARSET "UTF-8";
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    background-color: rgba(255, 234, 241,0.8);
+    top: 40px;
+    left: 0px;
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 621px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding:0px !important;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      /*background-color: rgba(255, 229, 230, 0.8);*/
+      padding: 7px 0px;
+    }
+    .el-table td{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+      padding: 5px 0px;
+      /*line-height: 1;*/
+    }
+    .el-table td:hover{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+  /*按钮样式*/
+  .add-button{
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss">
+  .map-alarm-div {
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
+  }
+</style>
diff --git a/src/views/gasOverview/overviewBj.vue b/src/views/gasOverview/overviewBj.vue
new file mode 100644
index 0000000..29c11ba
--- /dev/null
+++ b/src/views/gasOverview/overviewBj.vue
@@ -0,0 +1,1240 @@
+<template>
+  <div>
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-form-item v-if="wellTypeList.length>1">
+            <el-select v-model="listQuery.wellType" placeholder="选择井类型" clearable size="small" @change="changetype">
+              <el-option
+                v-for="item in wellTypeList"
+                :key="'welltype_'+item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <!--<el-form-item>-->
+          <!--<dept-select ref="deptSelect" v-model="listQuery.deptid" :need-top="deptShowTop" dept-type="03" placeholder="选择权属单位" size="small"/>-->
+          <!--</el-form-item>-->
+          <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="getWellList">搜索</el-button>
+          <!--<el-button v-show="showClearBtn" class="filter-item" @click="clearSearch">清除查询</el-button>-->
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部井</el-checkbox>
+          </el-form-item>
+          <el-form-item >
+            <el-slider v-model="alpha" style="width: 150px"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flytoinit"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <!--倒计时刷新-->
+    <!--<div v-if="refreshType=='clock'" class="refresh-div">-->
+    <!--<span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>-->
+    <!--<el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>-->
+    <!--</div>-->
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>
+    </div>
+    <div v-if="showAlarm==true && alarmWells.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div class="overview-map-container">
+      <!--地图-->
+      <div id="cesiumContainer" class="map-demo">
+        <div v-if="trackPopUp" id="trackPopUp">
+          <div id="trackPopUpContent" :style="winPosition" class="leaflet-popup">
+            <el-button type="text" class="leaflet-popup-close-button" href="#" @click="closeInfoWindow">×</el-button>
+            <div class="leaflet-popup-content-wrapper">
+              <div id="trackPopUpLink" class="leaflet-popup-content" style="width: 240px;">
+                <div v-if="currentWindow.windowType=='pipeline'?true:false" class="info-window">
+                  <div class="info-header">{{ pipelineInfo.Handle }}</div>
+                  <div class="info-body">
+                    <div>FID：{{ pipelineInfo.FID }}</div>
+                    <div>D_Type：{{ pipelineInfo.D_Type }}</div>
+                    <div>Diameter：{{ pipelineInfo.Diameter }}</div>
+                    <div>Material：{{ pipelineInfo.Material }}</div>
+                    <div>Memo：{{ pipelineInfo.Memo }}</div>
+                    <div>Use_Years：{{ pipelineInfo.Use_Years }}</div>
+                    <div>x1：{{ pipelineInfo.x1 }} / y1：{{ pipelineInfo.y1 }}</div>
+                    <div>x2：{{ pipelineInfo.x2 }} / y2：{{ pipelineInfo.y2 }}</div>
+                    <div>Deep1：{{ pipelineInfo.Deep1 }} / Deep2：{{ pipelineInfo.Deep2 }}</div>
+                    <div>H1：{{ pipelineInfo.H1 }} / H2：{{ pipelineInfo.H2 }}</div>
+                  </div>
+                </div>
+                <div v-if="currentWindow.windowType=='info'?true:false" class="info-window">
+                  <div class="info-header">{{ wellInfo.wellCode }}</div>
+                  <div class="info-body">
+                    <div>井类型：{{ wellInfo.wellTypeName }}</div>
+                    <div>权属单位：{{ wellInfo.deptName }}</div>
+                    <div>详细地址：{{ wellInfo.position }}</div>
+                  </div>
+                </div>
+                <div v-if="currentWindow.windowType=='alarm'?true:false" class="alarm-window">
+                  <div class="alarm-header">
+                    <svg-icon icon-class="alarm-red" />
+                    {{ alarmInfo.wellCode }}
+                  </div>
+                  <div class="alarm-body">
+                    <div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
+                      <div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
+                      <div>设备编号：<span>{{ alarm.devcode }}</span></div>
+                    </div>
+                    <el-divider/>
+                    <div>井类型：{{ alarmInfo.wellTypeName }}</div>
+                    <div>权属单位：{{ alarmInfo.deptName }}</div>
+                    <div>详细地址：{{ alarmInfo.position }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="leaflet-popup-tip-container">
+              <div class="leaflet-popup-tip"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import { getWellType } from '@/api/well'
+import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode } from '@/api/overview'
+import DeptSelect from '../../components/DeptSelect/index'
+
+import Viewer from 'cesium/Source/Widgets/Viewer/Viewer' // 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
+import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl' // 让Cesium知道静态资源在哪里的API
+import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+var rectangle = null
+var building = null
+var entities = []
+var alarmIcons = []
+var typeList = []
+export default {
+  name: 'OverviewBj',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      // rectangle: null,
+      // building: null,
+      // viewer: null,
+      type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+      refreshType: 'clock', // 刷新数据方式：clock或websocket
+      showAlarm: true, // 是否显示报警
+      showAll: false, // 是否显示全部井
+      alpha: 100, // 是否显示全部井
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: '1' // 是否报警
+      }, // 筛选条件
+      columns: [
+        {
+          text: '井编号',
+          value: 'wellCode',
+          width: 220,
+          align: 'center'
+        },
+        {
+          text: '设备编号',
+          value: 'devcode',
+          width: 120,
+          align: 'center'
+        },
+        {
+          text: '告警原因',
+          value: 'alarmContent',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '时间',
+          value: 'alarmTime',
+          width: 160,
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      showWellType: this.showWellType(), // 是 否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+      zoom: 12, // 地图缩放比例
+      markers: [], // 所有井的点原始数据
+      alarmListOri: [], // 原始报警列表
+      alarmList: [], // 报警列表
+      alarmWells: [], // 报警井列表
+      offset: [-10, -10], // 偏移量
+      alarmOffset: [-15, -30], // 偏移量
+      winPosition: '',
+      wellInfo: {
+        wellCode: '',
+        position: '',
+        wellTypeName: '',
+        deptName: '',
+        bfztName: '',
+        deep: ''
+      }, // 显示井详细信息气泡内容
+      pipelineInfo: {
+        Build_Com: '',
+        Build_Date: '',
+        Build_Per: '',
+        Cable_Type: '',
+        Code: '',
+        D_Type: '',
+        Deep1: '',
+        Deep2: '',
+        Design_Com: '',
+        Design_Per: '',
+        Diameter: '',
+        FID: '',
+        H1: '',
+        H2: '',
+        Handle: '',
+        Material: '',
+        Memo: '',
+        Mon_Com: '',
+        Mon_Per: '',
+        Shape: '',
+        Street: '',
+        Top_H1: '',
+        Top_H2: '',
+        Use_Years: '',
+        x1: '',
+        x2: '',
+        y1: '',
+        y2: ''
+      }, // 显示井详细信息气泡内容
+      alarmInfo: {
+        wellCode: '',
+        deptName: '',
+        position: '',
+        deep: '',
+        alarms: []
+      }, // 显示报警详情气泡内容
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      infoWindowClass: 'nomal-info-window',
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      hasAlarm: false, // 是否有报警,
+      loading: true, // 加载图标是否显示
+      trackPopUp: false,
+      removeHandler: null,
+      provider: null,
+      provider_marker: null,
+      promise_marker: null,
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'needRefresh'
+    ])
+  },
+  watch: {
+    alpha(val) {
+      window.viewer.imageryLayers._layers.forEach(layer => {
+        layer.alpha = val / 100 // 我们可以设置为0
+      })
+      // console.log(this.building)
+      if (building !== null) {
+        building.color.alpha = val / 100
+      }
+    },
+    showAll(val) {
+      console.log(typeList[1])
+      if (val) { // 显示全部
+        for (var i = 0; i < typeList.length; i++) {
+          typeList[i].show = true
+        }
+      } else { // 仅显示报警
+        for (var i = 0; i < typeList.length; i++) {
+          typeList[i].show = false
+        }
+        this.changetype()
+      }
+    },
+    'provider.ready': {
+      handler: function() {
+        if (this.provider.ready) {
+          var promise = this.provider.pickFeatures(842, 142, 0, 2.029164431539006, 0.6965965212763974)
+          var that = this
+          Cesium.when(promise, function(layerInfo) {
+            console.log(layerInfo)
+            // 查询结果展示
+            if (layerInfo && layerInfo.length > 0) {
+              for (var i = 0; i < layerInfo.length; i++) {
+                var item = layerInfo[i].data.geometry.paths[0]
+                var d1 = parseFloat(layerInfo[i].data.attributes.Deep1)
+                var d2 = parseFloat(layerInfo[i].data.attributes.Deep2)
+                var pos = [
+                  item[0][0], item[0][1], -d1,
+                  item[1][0], item[1][1], -d2
+                ]
+                var color = Cesium.Color.YELLOW
+                if (layerInfo[i].data.attributes.备注 === 'DXGX') {
+                  color = Cesium.Color.BLUE
+                } else if (layerInfo[i].data.attributes.备注 === 'GSGX') {
+                  color = Cesium.Color.STEELBLUE
+                } else if (layerInfo[i].data.attributes.备注 === 'GDGX') {
+                  color = Cesium.Color.ORANGE
+                } else if (layerInfo[i].data.attributes.备注 === 'LDGX') {
+                  color = Cesium.Color.PALEGOLDENROD
+                } else if (layerInfo[i].data.attributes.备注 === 'RQGX') {
+                  color = Cesium.Color.RED
+                } else if (layerInfo[i].data.attributes.备注 === 'RLGX') {
+                  color = Cesium.Color.BROWN
+                } else if (layerInfo[i].data.attributes.备注 === 'WSGX') {
+                  color = Cesium.Color.GRAY
+                } else if (layerInfo[i].data.attributes.备注 === 'YSGX') {
+                  color = Cesium.Color.DODGERBLUE
+                }
+                if (pos[0] === pos[3] && pos[1] === pos[4]) {
+                  var d = d1 < d2 ? d1 : d2
+                  var entity = window.viewer.entities.add({
+                    name: 'pipeline',
+                    description: layerInfo[i].data.attributes,
+                    position: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], -(d1 + d2) / 2),
+                    cylinder: {
+                      length: Math.abs(d2 - d1),
+                      topRadius: layerInfo[i].data.attributes.Diameter / 1000, // 圆柱体的顶部半径。
+                      bottomRadius: layerInfo[i].data.attributes.Diameter / 1000, //    圆柱体底部的半径。
+                      material: color
+                    }})
+                } else {
+                  var entity = window.viewer.entities.add({
+                    name: 'pipeline',
+                    description: layerInfo[i].data.attributes,
+                    polylineVolume: {
+                      positions: Cesium.Cartesian3.fromDegreesArrayHeights(pos),
+                      shape: that.computeCircle(layerInfo[i].data.attributes.Diameter / 1000),
+                      material: color
+                    }})
+                }
+              }
+            }
+          })
+        }
+      }
+    },
+    'provider_marker.ready': {
+      handler: function() {
+        if (this.provider_marker.ready) {
+          this.promise_marker = this.provider_marker.pickFeatures(842, 142, 0, 2.029164431539006, 0.6965965212763974)
+          var that = this
+          Cesium.when(this.promise_marker, function(layerInfo) {
+            // 查询结果展示
+            if (layerInfo && layerInfo.length > 0) {
+              console.log(layerInfo)
+              for (var i = 0; i < layerInfo.length; i++) {
+                var center = new Cesium.Cartesian3.fromDegrees(layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深) + 2.5)
+                var matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)
+                var icon = window.viewer.scene.primitives.add(
+                  Cesium.Model.fromGltf({
+                    id: {
+                      id: layerInfo[i].data.attributes.编号,
+                      position: [layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深) + 2.5]
+                    },
+                    url: '../static/model/baojing.gltf',
+                    color: Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(1.0)), // 包含透明度的颜色
+                    scale: 1,
+                    minimumPixelSize: 50,
+                    maximumScale: 2,
+                    colorBlendMode: Cesium.ColorBlendMode['MIX'], // 常用的有三个HIGHLIGHT,REPLACE,MIX
+                    colorBlendAmount: 0.1, // 这个属性必须是MIX混合属性才能生效,见colorBlendMode
+                    modelMatrix: matrix,
+                    allowPicking: true,
+                    show: false
+                  })
+                )
+                icon.show = false
+                alarmIcons.push(icon)
+
+                var color = Cesium.Color.YELLOW
+                if (layerInfo[i].data.attributes.备注.startsWith('DX')) {
+                  color = Cesium.Color.BLUE
+                } else if (layerInfo[i].data.attributes.备注.startsWith('GS')) {
+                  color = Cesium.Color.STEELBLUE
+                } else if (layerInfo[i].data.attributes.备注.startsWith('GD')) {
+                  color = Cesium.Color.ORANGE
+                } else if (layerInfo[i].data.attributes.备注.startsWith('LD')) {
+                  color = Cesium.Color.PALEGOLDENROD
+                } else if (layerInfo[i].data.attributes.备注.startsWith('RQ')) {
+                  color = Cesium.Color.RED
+                } else if (layerInfo[i].data.attributes.备注.startsWith('RL')) {
+                  color = Cesium.Color.BROWN
+                } else if (layerInfo[i].data.attributes.备注.startsWith('WS')) {
+                  color = Cesium.Color.GRAY
+                } else if (layerInfo[i].data.attributes.备注.startsWith('YS')) {
+                  color = Cesium.Color.DODGERBLUE
+                }
+                var type = window.viewer.entities.add({
+                  name: layerInfo[i].data.attributes.备注,
+                  position: Cesium.Cartesian3.fromDegrees(layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深) + 1.5),
+                  point: {
+                    color: color,
+                    pixelSize: 10,
+                    outlineColor: Cesium.Color.WHITE,
+                    outlineWidth: 2,
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY
+                  }
+                })
+                type.show = false
+                typeList.push(type)
+
+                center = new Cesium.Cartesian3.fromDegrees(layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深))
+                matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)
+                var item = window.viewer.scene.primitives.add(
+                  Cesium.Model.fromGltf({
+                    id: {
+                      id: layerInfo[i].data.attributes.编号,
+                      position: [layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深)]
+                    },
+                    url: '../static/model/yubi.gltf',
+                    scale: 2,
+                    modelMatrix: matrix,
+                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 1000),
+                    allowPicking: true
+                  })
+                )
+                entities.push(item)
+              }
+              that.getWellList()
+            }
+          })
+        }
+      }
+    },
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        this.playAudio()
+        this.refreshAlarm()
+      }
+    },
+    showAlarm(val) {
+      if (!val && this.currentWindow.windowType == 'alarm') {
+        this.currentWindow.visible = false
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    // 设置静态资源目录
+    buildModuleUrl.setBaseUrl('../static/Cesium/')
+    this.initcesium()
+  },
+  created() {
+    this.fetchWellType()
+  },
+  methods: {
+    changetype() {
+      var str = '3333'
+      if (this.listQuery.wellType !== '' && this.showAll) {
+        this.showAll = false
+      }
+      if (this.listQuery.wellType === '8') {
+        str = 'DX'
+      } else if (this.listQuery.wellType === '10') {
+        str = 'GS'
+      } else if (this.listQuery.wellType === '5') {
+        str = 'GD'
+      } else if (this.listQuery.wellType === '7') {
+        str = 'LD'
+      } else if (this.listQuery.wellType === '3') {
+        str = 'RQ'
+      } else if (this.listQuery.wellType === '4') {
+        str = 'RL'
+      } else if (this.listQuery.wellType === '2') {
+        str = 'WS'
+      } else if (this.listQuery.wellType === '1') {
+        str = 'YS'
+      }
+      for (var i = 0; i < typeList.length; i++) {
+        if (typeList[i].name.startsWith(str)) {
+          typeList[i].show = true
+        } else {
+          typeList[i].show = false
+        }
+      }
+    },
+    computeCircle(radius) {
+      var positions = []
+      for (var i = 0; i < 360; i++) {
+        var radians = Cesium.Math.toRadians(i)
+        positions.push(
+          new Cesium.Cartesian2(
+            radius * Math.cos(radians),
+            radius * Math.sin(radians)
+          )
+        )
+      }
+      return positions
+    },
+    // 初始化放这里
+    initcesium() {
+      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
+      // var myTerrain = Cesium.createWorldTerrain({
+      //   requestVertexNormals : true,
+      //   requestWaterMask: true,
+      //   name: 'terrain'
+      // })
+      // myTerrain = null
+      // 创建viewer实例
+      window.viewer = new Viewer('cesiumContainer',
+        {
+          geocoder: false, // 是否显示地名查找控件
+          infoBox: false,
+          animation: false, // 是否显示动画控件(左下方那个)
+          timeline: false, // 是否显示时间线控件
+          shadows: false, // 阴影是否被太阳投射
+          showldAnimate: true, // 让场景中的动画自动播放
+          sceneModePicker: false, // 是否显示投影方式控件
+          fullscreenButton: false, // 全屏按钮不显示
+          homeButton: false,
+          navigationHelpButton: false, // 帮助按钮
+          baseLayerPicker: false
+          // terrainProvider : myTerrain
+        })
+      window.viewer.imageryLayers._layers[0].show = false
+      window.viewer.scene.globe.baseColor = Cesium.Color.WHITE
+      var that = this
+      window.viewer.imageryLayers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
+        url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
+        // name: 'baselayer'
+      }))
+      window.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
+      window.viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ // 调用影响中文注记服务
+        url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=216ee92889e17ab1b083fae665d522b8',
+        layer: 'tdtAnnoLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        tileMatrixSetID: 'GoogleMapsCompatible'
+        // name: 'baselayer'
+      }))
+      window.viewer.scene.screenSpaceCameraController.enableCollisionDetection = false
+      // 倾斜视图 鼠标右键旋转
+      window.viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
+      // 缩放设置 重新设置缩放成员
+      window.viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+      // 鼠标左键平移
+      window.viewer.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+      var instance = new Cesium.GeometryInstance({
+        geometry: new Cesium.RectangleGeometry({
+          rectangle: Cesium.Rectangle.fromDegrees(116.2595, 39.9065, 116.2647, 39.908967),
+          height: 0,
+          vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
+        })
+      })
+      window.viewer.scene.primitives.add(new Cesium.Primitive({
+        geometryInstances: instance,
+        allowPicking: false,
+        appearance: new Cesium.EllipsoidSurfaceAppearance({
+          material: Cesium.Material.fromType('Color', {
+            color: new Cesium.Color(1.0, 1.0, 1.0, 0.2)
+          })
+        })
+      }))
+      // rectangle= window.viewer.entities.add({
+      //   name: 'under',
+      //   polyline : {
+      //     positions : Cesium.Cartesian3.fromDegreesArray([116.2595, 39.9065,
+      //       116.2647, 39.9065,
+      //       116.2647, 39.908967,
+      //       116.2595, 39.908967,
+      //       116.2595, 39.9065]),
+      //     width : 10,
+      //     clampToGround: true,
+      //     zIndex: 50,
+      //     material : Cesium.Color.RED
+      //   }});
+      // window.viewer.flyTo(rectangle)
+
+      rectangle = window.viewer.entities.add({
+        name: 'under',
+        polyline: {
+          positions: Cesium.Cartesian3.fromDegreesArray([
+            116.2595, 39.9065,
+            116.2647, 39.9065,
+            116.2647, 39.908967,
+            116.2595, 39.908967,
+            116.2595, 39.9065]),
+          width: 10,
+          clampToGround: true,
+          zIndex: 50,
+          material: Cesium.Color.RED
+        }})
+      window.viewer.flyTo(rectangle, {
+        offset: {
+          heading: 0,
+          pitch: Cesium.Math.toRadians(-90),
+          range: 500
+        }})
+
+      var that = this
+      var center = new Cesium.Cartesian3.fromDegrees(116.2555, 39.908358, 6)
+      var matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)
+      that.provider = new Cesium.ArcGisMapServerImageryProvider({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/erMapService/MapServer',
+        layers: ['7', '8', '9', '10', '11', '12', '13', '14']
+      })
+      that.provider_marker = new Cesium.ArcGisMapServerImageryProvider({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/erMapService/MapServer',
+        layers: ['5', '6']
+      })
+      window.viewer.scene.primitives.add(
+        Cesium.Model.fromGltf({
+          url: '../static/model/building.gltf',
+          scale: 0.8,
+          modelMatrix: matrix,
+          allowPicking: false
+        })
+      ).readyPromise.then(e => {
+        building = e
+      }).otherwise(e => {
+      })
+      var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)
+      handler.setInputAction(function(movement) {
+        var pick = window.viewer.scene.pick(movement['position'])
+        if (Cesium.defined(pick) && (pick.id.name !== 'under')) {
+          // 点击管线
+          if (pick.id.name === 'pipeline') {
+            that.trackPopUp = false
+            that.pipelineInfo = pick.id.description._value
+            that.currentWindow.visible = true
+            that.currentWindow.windowType = 'pipeline'
+            that.trackPopUp = true
+            movement['position'].z = 3000.0
+            var cartographic = Cesium.Cartographic.fromCartesian(movement['position'])
+            var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180]
+            var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0)
+            var id = pick.id._id.replace(/[^0-9]/ig, '')
+            var obj = { position: movement['position'], destination: destination }
+            that.infoWindow(obj)
+          }
+          // 点击报警
+          else if (pick.primitive.basePath === '../static/model/baojing.gltf') {
+            var position = Cesium.Cartesian3.fromDegrees(pick.id.position[0], pick.id.position[1], pick.id.position[2])
+            var c = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position) // 返回Cartesian2
+            console.log(c)
+            if (c === undefined) {
+              return
+            }
+            var obj = { position: c, entity: pick }
+            that.infoAlarmWindow(obj)
+            getWellByCode(pick.id.id).then(response => {
+              var id = response.data.id
+              if (id) {
+                that.openAlarmWindow(id, position)
+              }
+            })
+          }
+          // 点击井
+          else if (pick.primitive.basePath === '../static/model/yubi.gltf') {
+            that.trackPopUp = false
+            getWellByCode(pick.id.id).then(response => {
+              console.log(response)
+              var id = response.data.id
+              if (id) {
+                that.openInfoWindow(id)
+              }
+            })
+            movement['position'].z = 3000.0
+            var cartographic = Cesium.Cartographic.fromCartesian(movement['position'])
+            var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180]
+            var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0)
+            var obj = { position: movement['position'], destination: destination }
+            that.infoWellWindow(obj)
+          }
+        } else {
+          that.closeInfoWindow()
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    },
+    positionPopUp(c) {
+      try {
+        if (c === undefined) {
+          this.trackPopUp = false
+          if (this.removeHandler !== null) {
+            this.removeHandler.call()
+          }
+          return
+        }
+        var x = c.x - 130
+        var y = c.y - 150
+        this.winPosition = 'transform: translate3d(' + x + 'px, ' + y + 'px, 0)'
+      } catch (e) {
+        this.trackPopUp = false
+        if (this.removeHandler !== null) {
+          this.removeHandler.call()
+        }
+      }
+    },
+    infoWindow(obj) {
+      if (obj.position === undefined) {
+        return
+      }
+      var picked = window.viewer.scene.pick(obj.position)
+      if (Cesium.defined(picked)) {
+        var id = Cesium.defaultValue(picked.id, picked.primitive.id)
+        if (id instanceof Cesium.Entity) {
+          var c = new Cesium.Cartesian2(obj.position.x, obj.position.y)
+          this.positionPopUp(c) // Initial position
+          var that = this
+          if (this.removeHandler !== null) {
+            this.removeHandler.call()
+          }
+          this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
+            if (picked.id._polyline != null) {
+              var pos = {}
+              pos.x = (id._polyline._positions._value['0'].x + id._polyline._positions._value[1].x) / 2
+              pos.y = (id._polyline._positions._value['0'].y + id._polyline._positions._value[1].y) / 2
+              pos.z = (id._polyline._positions._value['0'].z + id._polyline._positions._value[1].z) / 2
+              var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, pos)
+            } else if (picked.id._polylineVolume != null) {
+              var pos = {}
+              pos.x = (id._polylineVolume._positions._value['0'].x + id._polylineVolume._positions._value[1].x) / 2
+              pos.y = (id._polylineVolume._positions._value['0'].y + id._polylineVolume._positions._value[1].y) / 2
+              pos.z = (id._polylineVolume._positions._value['0'].z + id._polylineVolume._positions._value[1].z) / 2
+              var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, pos)
+              if (changedC === undefined) {
+                return
+              }
+              changedC.y -= 170
+            } else {
+              var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, id._position._value)
+            }
+            if (changedC === undefined) {
+              return
+            }
+            if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+              that.positionPopUp(changedC)
+              c = changedC
+            }
+          })
+          return id
+        }
+      }
+    },
+    infoWellWindow(obj) {
+      if (obj.position === undefined) {
+        return
+      }
+      var picked = window.viewer.scene.pick(obj.position)
+      if (Cesium.defined(picked)) {
+        console.log(picked instanceof Cesium.Primitive)
+        var c = new Cesium.Cartesian2(obj.position.x, obj.position.y)
+        this.positionPopUp(c) // Initial position
+        var that = this
+        if (this.removeHandler !== null) {
+          this.removeHandler.call()
+        }
+        this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
+          var position = Cesium.Cartesian3.fromDegrees(picked.id.position[0], picked.id.position[1], picked.id.position[2])
+          var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position)
+          if (changedC === undefined) {
+            return
+          }
+          if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+            that.positionPopUp(changedC)
+            c = changedC
+          }
+        })
+      }
+    },
+    infoAlarmWindow(obj) {
+      var picked = obj.entity
+      if (Cesium.defined(picked)) {
+        var c = obj.position
+        c.y -= 150
+        this.positionPopUp(c) // Initial position
+        var that = this
+        if (this.removeHandler !== null) {
+          this.removeHandler.call()
+        }
+        this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
+          var position = Cesium.Cartesian3.fromDegrees(picked.id.position[0], picked.id.position[1], picked.id.position[2])
+          var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position)
+          if (changedC === undefined) {
+            return
+          }
+          changedC.y -= 150
+          if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+            that.positionPopUp(changedC)
+            c = changedC
+          }
+        })
+      }
+    },
+    closeInfoWindow() {
+      this.trackPopUp = false
+      if (this.removeHandler !== null) {
+        this.removeHandler.call()
+      }
+    },
+    init() {
+      this.refreshAlarm()
+    },
+    // 获取井类型，显示井类型下拉
+    fetchWellType() {
+      getWellType().then(response => {
+        this.wellTypeList = []
+        // 如果该用户支持的井类型只有一个，则不显示该筛选框
+        const wellTypes = this.$store.getters.wellTypes
+        for (const wellType of response.data) {
+          if (wellTypes.indexOf(wellType.value) !== -1) {
+            this.wellTypeList.push(wellType)
+          }
+        }
+        if (this.wellTypeList.length <= 1) {
+          this.showWellType = false
+        }
+      })
+    },
+    flytoinit() {
+      // if(rectangle!==null){
+      //   window.viewer.flyTo(rectangle)
+      // }
+      window.viewer.flyTo(rectangle, {
+        offset: {
+          heading: 0,
+          pitch: Cesium.Math.toRadians(-90),
+          range: 500
+        }})
+    },
+    // 获取全部井列表
+    getWellList() {
+      this.loading = true
+      console.log('getWellList')
+      getWellList(this.listQuery).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          this.markers = response.data
+          if (entities.length >= 0) {
+            for (var i = 0; i < entities.length; i++) {
+              alarmIcons[i].show = false
+              for (var j = 0; j < this.markers.length; j++) {
+                if (this.markers[j].wellCode === entities[i].id.id) {
+                  alarmIcons[i].show = true
+                  break
+                }
+              }
+            }
+          }
+        }
+      })
+    },
+    // 点击井详情气泡
+    openInfoWindow(wellId) {
+      this.currentWindow.visible = false
+      getWellInfo(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.wellInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            wellTypeName: wellInfo.wellTypeName,
+            deptName: wellInfo.deptName,
+            bfztName: wellInfo.bfztName,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
+          this.currentWindow.visible = true
+          this.currentWindow.windowType = 'info'
+          this.trackPopUp = true
+        }
+      })
+    },
+    // 刷新报警列表
+    refreshAlarm() {
+      console.log('refreshAlarm')
+      this.count = 60
+      this.loading = true
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          this.loading = false
+          // 获取当前报警列表
+          this.alarmListOri = response.data // 列表原始
+          this.alarmList = response.data
+          if (this.alarmList.length > 0) {
+            this.hasAlarm = true
+          }
+          this.alarmWells = []
+          for (const alarm of response.data) {
+            this.alarmWells.push({
+              wellCode: alarm.wellCode,
+              wellId: alarm.wellId,
+              position: [alarm.lngGaode, alarm.latGaode],
+              positionInfo: alarm.position,
+              visible: true
+            })
+            // }
+          }
+        }
+      })
+    },
+    // 点击报警详情
+    openAlarmWindow(wellId, position) {
+      // 旧弹窗不显示
+      this.currentWindow.visible = false
+      // this.filterIcon()
+      getWellAlarms(wellId).then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.alarmInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            deptName: wellInfo.deptName,
+            wellTypeName: wellInfo.wellTypeName,
+            alarms: wellInfo.alarmList,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = position
+          this.center = position
+          this.currentWindow.visible = true
+          this.currentWindow.windowType = 'alarm'
+          this.trackPopUp = true
+        }
+      })
+    },
+    // 点击报警列表
+    alarmRowClick(row, column, event) {
+      console.log('alarmRowClick')
+      console.log(row)
+      const wellId = row.wellCode
+      for (const alarmWell of alarmIcons) {
+        if (alarmWell.id.id === wellId) {
+          window.viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(alarmWell.id.position[0], alarmWell.id.position[1], alarmWell.id.position[2] + 2.5),
+            orientation: {
+              heading: Cesium.Math.toRadians(0),
+              pitch: Cesium.Math.toRadians(-90),
+              range: 18
+            }
+          })
+          // window.viewer.flyTo(alarmWell,{
+          //   offset : {
+          //     heading : Cesium.Math.toRadians(0.0),
+          //       pitch : Cesium.Math.toRadians(-18),
+          //       range : 18
+          //   }})
+          var position = Cesium.Cartesian3.fromDegrees(alarmWell.id.position[0], alarmWell.id.position[1], alarmWell.id.position[2])
+          var c = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position) // 返回Cartesian2
+          if (c === undefined) {
+            return
+          }
+          var obj = { position: c, entity: alarmWell }
+          this.infoAlarmWindow(obj)
+          console.log(row.wellId)
+          // getWellByCode(alarmWell.id.id).then(response => {
+          //   var id = response.data.id
+          //   if(id){
+          //     that.openAlarmWindow(id, position)
+          //   }
+          // })
+          this.openAlarmWindow(row.wellId, position)
+        }
+      }
+    },
+    // 获取当前deptid的所有下级id,仅最多支持3级
+    fetchDeptList(deptid) {
+      console.log('fetchDeptList')
+      const deptids = [deptid] // 储存了该pid和其子集
+      const deptlist = this.$refs.deptSelect.fetchDeptTree()
+      for (const dept of deptlist) {
+        if (dept.pid === deptid) {
+          deptids.push(dept.id)
+        }
+      }
+      const result = []
+      // 查找所有列表中有没有deptids里面的本人或子集
+      if (deptlist.length > 0) {
+        for (const dept of deptlist) {
+          if (deptids.indexOf(dept.id) !== -1) {
+            result.push(dept.id)
+          } else if (deptids.indexOf(dept.pid) !== -1) {
+            result.push(dept.id)
+          }
+        }
+      }
+      console.log(result)
+      return result
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  @CHARSET "UTF-8";
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    background-color: rgba(255, 234, 241,0.8);
+    top: 40px;
+    left: 0px;
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 504px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      /*background-color: rgba(255, 229, 230, 0.8);*/
+      padding: 7px 0px;
+    }
+    .el-table td{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+      padding: 5px 0px;
+      /*line-height: 1;*/
+    }
+    .el-table td:hover{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 0px;
+    z-index: 11111;
+    .map-demo{
+      z-index: 11111;
+      width: 100%;
+      height: calc(100vh - 146px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width: 29px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+
+      /*leaflet风格气泡窗口样式模板*/
+      .leaflet-popup {
+        z-index: 999;
+        position: absolute;
+        text-align: center;
+      }
+      .leaflet-popup-close-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 4px 4px 0 0;
+        text-align: center;
+        width: 18px;
+        height: 14px;
+        font: 16px/14px Tahoma, Verdana, sans-serif;
+        color: #c3c3c3;
+        text-decoration: none;
+        font-weight: bold;
+        background: transparent;
+      }
+      .leaflet-popup-content-wrapper {
+        text-align: center;
+        /*max-height: 200px;*/
+        overflow-y: auto;
+        background: white;
+        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+        padding: 1px;
+        text-align: left;
+        border-radius: 12px;
+      }
+      .leaflet-popup-content {
+        z-index: 99999;
+        /*height: 200px;*/
+        margin: 10px 10px;
+        /*line-height: 1.4;*/
+        .info-window{
+          z-index: 100001;
+          max-width: 260px;
+          min-width:200px;
+          .info-header{
+            padding: 5px 8px 0px 8px;
+            line-height: 30px;
+            font-weight: bold;
+          }
+          .info-body{
+            padding: 5px 10px 10px 10px;
+            line-height: 23px;
+            font-size: 14px;
+          }
+        }
+        .alarm-window{
+          z-index: 100002;
+          max-width: 250px;
+          .alarm-header {
+            padding: 5px 8px 0px 8px;
+            line-height: 30px;
+            color: red;
+            font-weight: bold;
+          }
+          .alarm-body{
+            padding: 5px 10px 10px 10px;
+            line-height: 23px;
+            font-size: 14px;
+            .alarm-red{
+              color: #ff0000;
+            }
+          }
+        }
+      }
+      .leaflet-popup-tip-container {
+        margin: 0 auto;
+        width: 200px;
+        height: 100px;
+        position: relative;
+        overflow: hidden;
+      }
+      .leaflet-popup-tip {
+        background: white;
+        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+        width: 17px;
+        height: 17px;
+        padding: 1px;
+        margin: -10px auto 0;
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+      }
+    }
+  }
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+  /*按钮样式*/
+  .add-button{
+  }
+</style>

diff --git a/src/router/index.js b/src/router/index.js
index e2cf1e9..4f3dbe0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,19 @@
       name: 'Dashboard',
       meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
     }]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: 'gasDashboard',
+    name: 'GasDashboard',
+    // hidden: true,
+    children: [{
+      path: 'gasDashboard',
+      component: () => import('@/views/gasDashboard/index'),
+      name: 'GasDashboard',
+      meta: { title: '动力管线首页', icon: 'dashboard', noCache: true, affix: true }
+    }]
   }
 ]
 // 实例化vue的时候直挂载constantRouter
@@ -75,6 +88,42 @@
 // 异步挂载路由
 // 动态需要根据权限加载的路由表
 export const asyncRouterMap = [
+  // {
+  //   path: 'gasDashboard',
+  //   component: Layout,
+  //   redirect: '/gasDashboard',
+  //   meta: {
+  //     title: '动力管线首页',
+  //     icon: 'icon-config', // 图标
+  //     permission: ['/gasDashboard']// 权限名称
+  //   },
+  //   children: [
+  //     {
+  //       path: '/gasDashboard',
+  //       component: () => import('@/views/gasDashboard/index'),
+  //       name: 'gasDashboard',
+  //       meta: { title: '动力管线首页', icon: 'icon-config', permission: ['/gasDashboard'] }
+  //     }
+  //   ]
+  // },
+  {
+    path: 'gasOverview',
+    component: Layout,
+    redirect: '/gasOverview',
+    meta: {
+      title: '动力管线总览',
+      icon: 'icon-config', // 图标
+      permission: ['/gasOverview']// 权限名称
+    },
+    children: [
+      {
+        path: '/gasOverview',
+        component: () => import('@/views/gasOverview/gasOverviewSimple'),
+        name: 'gasOverview',
+        meta: { title: '动力管线总览', icon: 'icon-config', permission: ['/gasOverview'] }
+      }
+    ]
+  },
   {
     path: 'overview',
     component: Layout,
diff --git a/src/views/dashboard/components/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
index 4395df9..4347727 100644
--- a/src/views/dashboard/components/AlarmCountByDept.vue
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -44,10 +44,10 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区气体流量计报警占比'
+        text: '分区水表报警占比图'
       },
       chartSettings: {
         labelMap: {
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 30fa639..cbacc0f 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -46,17 +46,20 @@
   mounted() {
     // TODO:待调试真接口
     this.fetchData()
-    this.chartData.rows = [
-      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
-      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
-      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
-      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
-    ]
+    // this.chartData.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 }
+    // ]
   },
   methods: {
     fetchData() {
       deviceStaticsByType().then(response => {
-        // this.chartData.rows = response.data
+        this.chartData.rows = response.data
       })
     }
   }
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 2232a6f..7cdf078 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -32,7 +32,7 @@
     return {
       dataGroup1: [
         {
-          title: ['总用气量', '本月用气量'],
+          title: ['总用水量', '本月用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#40c9c6',
@@ -40,7 +40,7 @@
           index: 0
         },
         {
-          title: ['今日用气量', '生产厂区用气量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
           icon: '',
           color: '#36a3f7',
@@ -58,7 +58,14 @@
       ],
       dataGroup: [
         {
-          title: '气体流量计',
+          title: '阀门数量',
+          context: '--',
+          icon: 'icon-valve',
+          color: '#40c9c6',
+          permission: '/device/list'
+        },
+        {
+          title: '水表数量',
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
@@ -92,7 +99,7 @@
       this.$router.push(path)
     },
     getWater() {
-      // 用气量
+      // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
         this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
diff --git a/src/views/dashboard/components/alarmGasCountByDept.vue b/src/views/dashboard/components/alarmGasCountByDept.vue
deleted file mode 100644
index 534d8f3..0000000
--- a/src/views/dashboard/components/alarmGasCountByDept.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <div style="height: 28px;margin-bottom: 10px;"/>
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-
-  </div>
-</template>
-
-<script>
-import { alarmBySecondArea } from '@/api/overview'
-export default {
-  name: 'AlarmGasCountByDept',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区燃气报警占比'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        }
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      alarmBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/components/corrodeCountByDay.vue b/src/views/dashboard/components/corrodeCountByDay.vue
deleted file mode 100644
index 8563956..0000000
--- a/src/views/dashboard/components/corrodeCountByDay.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { countByDaySecond } from '@/api/dashboard'
-export default {
-  name: 'WaterCountByDay',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: { date: '日期' },
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if (response.data.length > 0) {
-          const arr = response.data.map((item) => {
-            const result = { date: item.date }
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item => item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = { 'date': '日期' }
-          this.chartData.rows = arr
-        }
-      })
-    }
-  }
-}
-</script>
-
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index dbf30c7..5fe709d 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,4 +1,4 @@
-<!--气体流量计告警统计-->
+<!--水表告警统计-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -45,7 +45,7 @@
   data() {
     return {
       title:{
-        text: '气体流量计告警统计'
+        text: '水表告警统计'
       },
       chartSettings:{
         itemStyle: {
diff --git a/src/views/dashboard/components/watchGasAlarmBar.vue b/src/views/dashboard/components/watchGasAlarmBar.vue
deleted file mode 100644
index ae7266e..0000000
--- a/src/views/dashboard/components/watchGasAlarmBar.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--气体流量计告警统计-->
-<template>
-  <div class="container">
-    <function-area ref="func" select="week" @change="fetchData"/>
-    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-// 引入视觉映射组件
-import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/overview'
-import functionArea from './FunctionArea'
-export default {
-  name: 'WatchGasAlarmBar',
-  components: { functionArea },
-  data() {
-    return {
-      title: {
-        text: '燃气告警统计'
-      },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数',
-          'warning': '预警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm', 'warning']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
-      extend: {
-        legend: {
-          show: true
-        },
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        yAxis: {
-          name: '报警次数',
-          position: 'left',
-          max: 10
-        },
-        series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
-        }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-      },
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('today')
-    // this.fetchArea()
-  },
-  methods: {
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
-        if (maxValue < 10) {
-          this.extend.yAxis.max = 10
-        } else {
-          this.extend.yAxis.max = maxValue + 1
-        }
-        this.isShow = true
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .statistic-container {
-
-    .el-button{
-      padding: 5px 10px;
-    }
-    margin-bottom: 10px;
-    text-align: center;
-    .chart-tool-button {
-      padding: 5px;
-      line-height: 16px;
-      margin-top: 5px;
-      font-size: 14px;
-    }
-    .chart-tool-button:hover {
-      background-color: #8cc5ff;
-      cursor: pointer;
-      color: white;
-    }
-    .chart-tool-button:active {
-      background-color: #8cc5ff;
-      color: white;
-    }
-  }
-  .selected {
-    background-color: #8cc5ff;
-    color: white;
-  }
-</style>
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
index 5f7d7c8..6a62089 100644
--- a/src/views/dashboard/components/waterCompare.vue
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -1,4 +1,4 @@
-<!--分区用气对比图-->
+<!--分区用水对比图-->
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
@@ -18,7 +18,7 @@
   components: { FunctionArea },
   data() {
     return {
-      title: { text: '分区用气对比' },
+      title: { text: '分区用水对比图' },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
@@ -47,7 +47,7 @@
           }
         },
         yAxis: {
-          name: '用气量(吨)',
+          name: '用水量(吨)',
           position: 'left',
           max: 10
         },
@@ -66,12 +66,12 @@
         rows: []
       },
       nameDict: {
-        'today': ['昨日用气', '今日用气'],
-        'week': ['近7日用气', '对照时间用气'],
-        'month': ['近30日用气', '对照时间用气'],
-        'season': ['上季度用气', '本季度用气'],
-        'year': ['上年度用气', '本年度用气'],
-        'other': ['对照时间用气', '自选时间用气']
+        'today': ['昨日用水', '今日用水'],
+        'week': ['近7日用水', '对照时间用水'],
+        'month': ['近30日用水', '对照时间用水'],
+        'season': ['上季度用水', '本季度用水'],
+        'year': ['上年度用水', '本年度用水'],
+        'other': ['对照时间用水', '自选时间用水']
       }
     }
   },
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index a8006f7..315c83a 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -57,14 +57,14 @@
         }
       },
       yAxis: {
-        name: '用气量（吨）',
+        name: '用水量（吨）',
         position: 'left'
       },
       series: {
         label: { show: true, position: 'top', formatter: '{c}' },
         barWidth: 25
       },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨' }
     }
     this.grid = {
       right: 40,
@@ -72,7 +72,7 @@
       bottom: 5
     }
     this.title = {
-      text: '分区用气统计'
+      text: '分区用水统计图'
     }
     this.chartSettings = {
       itemStyle: {
@@ -81,7 +81,7 @@
 
       labelMap: {
         'areaName': '分区',
-        'count': '用气量'
+        'count': '用水量'
       },
       dimension: ['areaName'],
       metrics: ['count']
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index ebb002c..8d9861e 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -36,7 +36,7 @@
         endTime: ''
       },
       title: {
-        text: '用气走势图'
+        text: '用水走势图'
       },
       chartSettings: {
         labelMap: {date:'日期'},
@@ -48,7 +48,7 @@
           top: 120
         },
         yAxis: {
-          name: '用气量（吨）',
+          name: '用水量（吨）',
           position: 'left'
         },
         legend: {
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index 2258847..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -64,15 +64,15 @@
           label: { show: true, position: 'outside', formatter: '{b}' },
           right: 120
         },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
       },
       title: {
-        text: '分区用气占比图'
+        text: '分区用水占比图'
       },
       chartSettings: {
         labelMap: {
           'areaName': '分区',
-          'count': '用气量'
+          'count': '用水量'
         },
         dimension: 'areaName',
         metrics: 'count'
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index 752330a..65cdec7 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="title">
-      场区用气事记
+      场区用水事记
       <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
       <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d51bfb7..b562719 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,7 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
-      <!-- 用气统计图 -->
+      <!-- 用水统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
           <water-count-by-area-bar @change="changeWaterQuery"/>
@@ -15,13 +15,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <!-- 分区用气占比图 -->
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
-      <!-- 用气走势图 -->
+      <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
           <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
@@ -39,7 +39,7 @@
           <device-count/>
         </el-card>
       </el-col>
-      <!--气体流量计告警统计，柱状图-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
           <watch-alarm-bar @change="changeAlarmQuery"/>
@@ -51,26 +51,6 @@
           <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
-      <!--燃气报警统计，柱状图-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <alarm-gas-count-by-dept :query="listQuery3"/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 腐蚀速率走势图 -->
-      <el-col>
-        <el-card shadow="never">
-          <corrode-count-by-day :query="listQuery1" />
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -87,14 +67,11 @@
 import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
-import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
-import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
-import watchGasAlarmBar from './components/watchGasAlarmBar'
-import alarmGasCountByDept from './components/alarmGasCountByDept'
-import corrodeCountByDay from './components/corrodeCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
@@ -113,29 +90,7 @@
     WellCountByBfzt,
     WellCountByType,
     DeviceCount,
-    DeviceCountByOnline,
-    watchGasAlarmBar,
-    alarmGasCountByDept,
-    corrodeCountByDay
-  },
-  data() {
-    return {
-      listQuery1: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区用气量查询条件
-      listQuery2: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      }, // 分区报警查询条件
-      listQuery3: {
-        areaId: '110000',
-        startTime: new Date().Format('yyyy-MM-dd'),
-        endTime: new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
+    DeviceCountByOnline
   },
   computed: {
     ...mapGetters([
@@ -159,6 +114,20 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
@@ -176,16 +145,12 @@
       this.$store.dispatch('initWebSocket')
     },
     // 切换分区查询条件
-    changeWaterQuery(listQuery1) {
+    changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
     },
     // 切换报警查询条件
-    changeAlarmQuery(listQuery2) {
+    changeAlarmQuery(listQuery2){
       this.listQuery2 = listQuery2
-    },
-    // 切换报警查询条件
-    changeAlarmGasQuery(listQuery3) {
-      this.listQuery3 = listQuery3
     }
   }
 }
diff --git a/src/views/dashboard/index_bak2.vue b/src/views/dashboard/index_bak2.vue
deleted file mode 100644
index b562719..0000000
--- a/src/views/dashboard/index_bak2.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-  <div class="dashboard-container" style="background-color: white">
-    <panel-group ref="panelgroup"/>
-    <el-row>
-      <!-- 用水统计图 -->
-      <el-col :span="18">
-        <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
-        </el-card>
-      </el-col>
-      <el-col :span="6">
-        <el-card shadow="never">
-          <water-note/>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
-        </el-card>
-      </el-col>
-      <!-- 用水走势图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
-        </el-card>
-      </el-col>
-      <!--设备在线数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-compare/>
-        </el-card>
-      </el-col>
-      <!--设备数量统计-->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <device-count/>
-        </el-card>
-      </el-col>
-      <!--水表报警次数统计，柱状图-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <watch-alarm-bar @change="changeAlarmQuery"/>
-        </el-card>
-      </el-col>
-      <!--报警饼图统计-->
-      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
-        <el-card shadow="never">
-          <alarm-count-by-dept :query="listQuery2"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import PanelGroup from './components/PanelGroup'
-import WellCountByBfzt from './components/WellCountByBfzt'
-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'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDeptBar from './components/waterCountByDeptBar'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from "./components/waterCountByAreaBar";
-import WatchAlarmBar from "./components/watchAlarmBar";
-import WaterNote from "./components/waterNote";
-import AlarmCountByDept from "./components/AlarmCountByDept";
-import WaterCompare from "./components/waterCompare";
-
-export default {
-  name: 'Dashboard',
-  components: {
-    WaterCompare,
-    AlarmCountByDept,
-    WaterNote,
-    WatchAlarmBar,
-    WaterCountByAreaBar,
-    WaterCountByDay,
-    WaterCountByDeptBar,
-    WaterCountByDept,
-    JobByStatus,
-    AlarmByDays,
-    PanelGroup,
-    WellCountByBfzt,
-    WellCountByType,
-    DeviceCount,
-    DeviceCountByOnline
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roleNames',
-      'roleTips',
-      'wellTypes',
-      'deviceTypes',
-      'communications',
-      'area'
-    ])
-  },
-  mutations: {
-    SET_WEBSOCKET: (state, websocket) => {
-      state.websocket = websocket
-    },
-    SET_WS_STATUS: (state, wsStatus) => {
-      state.wsStatus = wsStatus
-    },
-    SET_NEED_REFRESH: (state, needRefresh) => {
-      state.needRefresh = needRefresh
-    }
-  },
-  data(){
-    return {
-      listQuery1:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      },// 分区用水量查询条件
-      listQuery2:{
-        areaId:'110000',
-        startTime:new Date().Format('yyyy-MM-dd'),
-        endTime:new Date().Format('yyyy-MM-dd')
-      } // 分区报警查询条件
-    }
-  },
-  watch: {
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        console.log('refresh dashboard')
-        this.$refs.panelgroup.refresh()
-      }
-    }
-  },
-  mounted() {
-    // this.webSocket()
-  },
-  methods: {
-    webSocket() {
-      this.$store.dispatch('initWebSocket')
-    },
-    // 切换分区查询条件
-    changeWaterQuery(listQuery1){
-      this.listQuery1 = listQuery1
-    },
-    // 切换报警查询条件
-    changeAlarmQuery(listQuery2){
-      this.listQuery2 = listQuery2
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-container{
-  .el-row{
-    .el-col{
-      margin-bottom: 10px;
-    }
-  }
-}
-.dashboard {
-  &-container {
-    padding: 10px 20px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
diff --git a/src/views/gasDashboard/components/AlarmCountByDept.vue b/src/views/gasDashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..4395df9
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,79 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区气体流量计报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/gasDashboard/components/AlarmNowList.vue b/src/views/gasDashboard/components/AlarmNowList.vue
new file mode 100644
index 0000000..890325f
--- /dev/null
+++ b/src/views/gasDashboard/components/AlarmNowList.vue
@@ -0,0 +1,35 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'AlarmNowList',
+  data() {
+    this.title = {
+      text: '7日报警趋势'
+    }
+    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/gasDashboard/components/DeviceCount.vue b/src/views/gasDashboard/components/DeviceCount.vue
new file mode 100644
index 0000000..30fa639
--- /dev/null
+++ b/src/views/gasDashboard/components/DeviceCount.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right', color:'#333' }
+      }
+    }
+    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: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    this.chartData.rows = [
+      { 'deviceType': '气体流量计', 'deviceCount': 20, '下单用户': 1093, '下单率': 0.32 },
+      { 'deviceType': '供水泄露监测仪', 'deviceCount': 20, '下单用户': 3230, '下单率': 0.26 },
+      { 'deviceType': '气体泄露监测仪', 'deviceCount': 50, '下单用户': 2623, '下单率': 0.76 },
+      { 'deviceType': '腐蚀速率监测仪', 'deviceCount': 10, '下单用户': 1423, '下单率': 0.49 }
+    ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        // this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/FunctionArea.vue b/src/views/gasDashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..4c05cee
--- /dev/null
+++ b/src/views/gasDashboard/components/FunctionArea.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Description: 时间筛选器
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div class="statistic-container">
+    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
+    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="change('other')"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        selected:'',
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(type){
+        this.$emit('change', this.timeRange, type )
+      },
+      setDefaultTime(val) {
+        this.selected = val
+        if (val === 'year') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          const beginTime = tYear + '-01-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }if (val === 'season') {
+          var today = new Date()
+          var tYear = today.getFullYear()
+          var tMonth = today.getMonth() + 1
+          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+          const beginTime = tYear + '-' + oldMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        }else if (val === 'month') { // 30日
+          // var today = new Date()
+          // var tYear = today.getFullYear()
+          // var tMonth = today.getMonth() + 1
+          // if (tMonth.toString().length === 1) {
+          //   tMonth = '0' + tMonth
+          // }
+          // const beginTime = tYear + '-' + tMonth + '-01'
+          // const endTime = getDayTime(new Date().getTime())
+          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        } else if (val === 'yesterday') {
+          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+        } else if (val === 'today') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change(val)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+  .checked-btn{
+    color: #278DF9;
+    border-color: #beddfd;
+    background-color: #e9f4fe;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/PanelGroup.vue b/src/views/gasDashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..2232a6f
--- /dev/null
+++ b/src/views/gasDashboard/components/PanelGroup.vue
@@ -0,0 +1,249 @@
+<template>
+  <el-row class="panel-group">
+    <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
+    </div>
+
+    <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
+      <div v-if="hasPerm(card.permission)">
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+import Card1 from '@/components/BigData/Card1'
+import Card from '@/components/BigData/Card'
+// 首页
+import { getWatchStatistic, waterMeterCount, valveCount } from '@/api/dashboard'
+// 根据布防数量统计井数量
+import { wellCountByBfzt } from '@/api/well'
+// 当前报警数
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/dataStatics'
+// 根据工单状态统计工单数量
+import { jobCountByStatus } from '@/api/job'
+export default {
+  components: {
+    Card,
+    Card1
+  },
+  data() {
+    return {
+      dataGroup1: [
+        {
+          title: ['总用气量', '本月用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#40c9c6',
+          unit: '吨',
+          index: 0
+        },
+        {
+          title: ['今日用气量', '生产厂区用气量'],
+          context: ['--', '--'],
+          icon: '',
+          color: '#36a3f7',
+          unit: '吨',
+          index: 1
+        },
+        {
+          title: ['滑道实时噪声'],
+          context: ['--'],
+          icon: 'icon-noise',
+          color: '#f1c353',
+          unit: 'db',
+          index: 2
+        }
+      ],
+      dataGroup: [
+        {
+          title: '气体流量计',
+          context: '--',
+          icon: 'icon-watch',
+          color: '#9694f7',
+          path: '/deviceList?deviceType=13',
+          permission: '/device/list'
+        },
+        {
+          title: '告警信息',
+          context: '--',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          path: '/alarmNow',
+          permission: '/alarm/now'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getWater()
+    // this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    // this.getJobCount()
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWater() {
+      // 用气量
+      getWatchStatistic().then(response => {
+        this.dataGroup1[0].context = [response.data.total ? parseFloat(response.data.total).toFixed(2) : '--', response.data.month ? parseFloat(response.data.month).toFixed(2) : '--']
+        this.dataGroup1[1].context = [response.data.today ? parseFloat(response.data.today).toFixed(2) : '--', response.data.prodution ? parseFloat(response.data.prodution).toFixed(2) : '--']
+        this.dataGroup1[2].context = [response.data.sound ? Number(response.data.sound).toFixed(2) : '--']
+      })
+    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
+    getDeviceCount() {
+      // deviceStaticByStatus().then(response => {
+      //   this.dataGroup[1].context = response.data.total
+      // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+  padding: 0px 0px;
+  display: flex;
+  justify-content: space-between;
+
+  .card-panel-col {
+    margin: 5px;
+    margin-bottom: 18px;
+    flex:1;
+  }
+
+  // .card-panel {
+  //   height: 108px;
+  //   cursor: pointer;
+  //   font-size: 10px;
+  //   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: 40px;
+  //   }
+
+  //   .card-panel-description {
+  //     font-weight: bold;
+  //     margin: 26px;
+  //     margin-left: 0px;
+
+  //     .card-panel-text {
+  //       line-height: 18px;
+  //       color: rgba(0, 0, 0, 0.45);
+  //       font-size: 14px;
+  //       margin-bottom: 12px;
+  //     }
+
+  //     .card-panel-num {
+  //       font-size: 18px;
+  //     }
+  //   }
+  // }
+}
+
+@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/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
new file mode 100644
index 0000000..534d8f3
--- /dev/null
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -0,0 +1,73 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+export default {
+  name: 'AlarmGasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区燃气报警占比'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
new file mode 100644
index 0000000..8563956
--- /dev/null
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { countByDaySecond } from '@/api/dashboard'
+export default {
+  name: 'WaterCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
new file mode 100644
index 0000000..dbf30c7
--- /dev/null
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -0,0 +1,208 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WatchAlarmBar',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{
+        text: '气体流量计告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    // fetchArea() {
+    //   getDoorAreaTree().then(response => {
+    //     if (response.code === 200) {
+    //       this.areaList = response.data.filter(item => {
+    //         return item.pid === '1'
+    //       }).map(function(item) {
+    //         return {
+    //           id: item.id, name: item.name
+    //         }
+    //       })
+    //       if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+    //     }
+    //   })
+    // },
+    // areaChange(val) {
+    //   this.areaId = val
+    //   this.fetchData()
+    // },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 },
+        //   { 'areaName': '分段分区', 'alarm': 38 },
+        //   { 'areaName': '船坞分区', 'alarm': 48 },
+        //   { 'areaName': '刀把码头', 'alarm': 30 },
+        //   { 'areaName': '制管作业区', 'alarm': 82 },
+        //   { 'areaName': '滑道作业区', 'alarm': 34 },
+        //   { 'areaName': '码头作业区', 'alarm': 26 },
+        //   { 'areaName': '车间生产区', 'alarm': 45 }
+        // ]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
new file mode 100644
index 0000000..ae7266e
--- /dev/null
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -0,0 +1,150 @@
+<!--气体流量计告警统计-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import functionArea from './FunctionArea'
+export default {
+  name: 'WatchGasAlarmBar',
+  components: { functionArea },
+  data() {
+    return {
+      title: {
+        text: '燃气告警统计'
+      },
+      chartSettings: {
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('today')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.alarm > item.warning ? item.alarm : item.warning }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
new file mode 100644
index 0000000..5f7d7c8
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCompare.vue
@@ -0,0 +1,123 @@
+<!--分区用气对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { waterCompare } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'WaterCompare',
+  components: { FunctionArea },
+  data() {
+    return {
+      title: { text: '分区用气对比' },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'last': '',
+          'now': ''
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: true
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用气量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        }
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict: {
+        'today': ['昨日用气', '今日用气'],
+        'week': ['近7日用气', '对照时间用气'],
+        'month': ['近30日用气', '对照时间用气'],
+        'season': ['上季度用气', '本季度用气'],
+        'year': ['上年度用气', '本年度用气'],
+        'other': ['对照时间用气', '自选时间用气']
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      waterCompare(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item => { return item.last > item.now ? item.last : item.now }))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis.max = maxValue + 1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
new file mode 100644
index 0000000..a8006f7
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByAreaBar.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <!--<div class="statistic-container">-->
+      <!--<el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>-->
+      <!--<el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>-->
+      <!--<el-date-picker-->
+        <!--v-model="timeRange"-->
+        <!--:picker-options="pickerOptions"-->
+        <!--type="daterange"-->
+        <!--range-separator="至"-->
+        <!--start-placeholder="开始日期"-->
+        <!--end-placeholder="结束日期"-->
+        <!--value-format="yyyy-MM-dd"-->
+        <!--size="mini"-->
+        <!--style="width:250px;margin-right: 20px"-->
+        <!--@change="fetchData"/>-->
+    <!--</div>-->
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+// 引入视觉映射组件
+import 'echarts/lib/component/visualMap'
+import { countBySecondArea } from '@/api/dashboard'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+
+export default {
+  name: 'WaterCountByAreaBar',
+  components: {FunctionArea},
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      xAxis: {
+        axisLabel: {
+          rotate: 30,
+          margin: 30,
+          textStyle: {
+            align: 'center'
+          }
+        }
+      },
+      yAxis: {
+        name: '用气量（吨）',
+        position: 'left'
+      },
+      series: {
+        label: { show: true, position: 'top', formatter: '{c}' },
+        barWidth: 25
+      },
+      tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨' }
+    }
+    this.grid = {
+      right: 40,
+      top: 100,
+      bottom: 5
+    }
+    this.title = {
+      text: '分区用气统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        barCategoryGap: 10
+      },
+
+      labelMap: {
+        'areaName': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // this.fetchArea()
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val) {
+      this.areaId = val
+      this.fetchData()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'count': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+        //   { 'areaName': '厂区', 'count': 78 },
+        //   { 'areaName': '分段分区', 'count': 38 },
+        //   { 'areaName': '船坞分区', 'count': 48 },
+        //   { 'areaName': '刀把码头', 'count': 30 },
+        //   { 'areaName': '制管作业区', 'count': 82 },
+        //   { 'areaName': '滑道作业区', 'count': 34 },
+        //   { 'areaName': '码头作业区', 'count': 26 },
+        //   { 'areaName': '车间生产区', 'count': 45 }
+        // ]
+        this.isShow = true
+      })
+    },
+    setDefaultTime(val) {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        if (tMonth.toString().length === 1) {
+          tMonth = '0' + tMonth
+        }
+        const beginTime = tYear + '-' + tMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      } else if (val === 'week') {
+        // const nowDayOfWeek =  new Date().getDay()-1
+        const nowDayOfWeek =  6
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      } else if (val === 'yesterday') {
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
+      } else if (val === 'today') {
+        this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+      }
+      this.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .statistic-container {
+    .el-button{
+      padding: 5px 10px;
+    }
+    /*margin-bottom: 10px;*/
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
new file mode 100644
index 0000000..ebb002c
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDay.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: {date:'日期'},
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
+
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
new file mode 100644
index 0000000..2258847
--- /dev/null
+++ b/src/views/gasDashboard/components/waterCountByDept.vue
@@ -0,0 +1,169 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/gasDashboard/components/waterNote.vue b/src/views/gasDashboard/components/waterNote.vue
new file mode 100644
index 0000000..752330a
--- /dev/null
+++ b/src/views/gasDashboard/components/waterNote.vue
@@ -0,0 +1,148 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList().then(response => {
+        this.currentList = JSON.parse(response.data)
+      })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/gasDashboard/index.vue b/src/views/gasDashboard/index.vue
new file mode 100644
index 0000000..a9f13eb
--- /dev/null
+++ b/src/views/gasDashboard/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row>
+      <!-- 用气统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用气占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+        </el-card>
+      </el-col>
+      <!-- 用气走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!--气体流量计告警统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
+        </el-card>
+      </el-col>
+      <!--燃气报警统计，柱状图-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <alarm-gas-count-by-dept :query="listQuery3"/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 腐蚀速率走势图 -->
+      <el-col>
+        <el-card shadow="never">
+          <corrode-count-by-day :query="listQuery1" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import DeviceCount from './components/DeviceCount'
+import WaterCountByDept from './components/waterCountByDept'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from './components/waterCountByAreaBar'
+import WatchAlarmBar from './components/watchAlarmBar'
+import WaterNote from './components/waterNote'
+import AlarmCountByDept from './components/AlarmCountByDept'
+import WaterCompare from './components/waterCompare'
+import watchGasAlarmBar from './components/watchGasAlarmBar'
+import alarmGasCountByDept from './components/alarmGasCountByDept'
+import corrodeCountByDay from './components/corrodeCountByDay'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WaterCountByAreaBar,
+    WaterCountByDept,
+    WaterCountByDay,
+    WaterNote,
+    PanelGroup,
+    WaterCompare,
+    DeviceCount,
+    WatchAlarmBar,
+    AlarmCountByDept,
+    watchGasAlarmBar,
+    alarmGasCountByDept,
+    corrodeCountByDay
+  },
+  data() {
+    return {
+      listQuery1: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区用气量查询条件
+      listQuery2: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      }, // 分区报警查询条件
+      listQuery3: {
+        areaId: '110000',
+        startTime: new Date().Format('yyyy-MM-dd'),
+        endTime: new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1) {
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2) {
+      this.listQuery2 = listQuery2
+    },
+    // 切换报警查询条件
+    changeAlarmGasQuery(listQuery3) {
+      this.listQuery3 = listQuery3
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/gasOverview/cesiumViewer.vue b/src/views/gasOverview/cesiumViewer.vue
new file mode 100644
index 0000000..d787dfd
--- /dev/null
+++ b/src/views/gasOverview/cesiumViewer.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="cesiumContainer"/>
+</template>
+
+<script>
+// 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
+import Viewer from 'cesium/Source/Widgets/Viewer/Viewer'
+// 我们刚才所说的如何让Cesium知道静态资源在哪里的API
+import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
+// 导入必须的样式表
+import 'cesium/Source/Widgets/widgets.css'
+
+export default{
+  name: 'CesiumContainer',
+  data() {
+    return {
+      'viewer': {}
+    }
+  },
+  mounted() {
+    // 设置静态资源目录
+    buildModuleUrl.setBaseUrl('../static/Cesium/')
+    // 创建viewer实例
+    this.viewer = new Viewer('cesiumContainer')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/gasOverview/gasOverviewSimple.vue b/src/views/gasOverview/gasOverviewSimple.vue
new file mode 100644
index 0000000..bc2f67d
--- /dev/null
+++ b/src/views/gasOverview/gasOverviewSimple.vue
@@ -0,0 +1,1033 @@
+<template>
+  <div style="overflow-y: hidden">
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <!--水表检查井编号/地址-->
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/设备编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="initPoints">搜索</el-button>
+          <el-form-item style="margin-left: 10px">
+            <el-slider v-model="alpha" style="width: 150px"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flyToInit"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button :type="showAlarm?'danger':'info'" size="small" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+          </el-form-item>
+          <el-form-item style="margin-left: 5px">
+            <el-switch
+              v-model="sceneMode"
+              active-color="#637F2C"
+              inactive-color="#071a69"
+              active-text="深蓝"
+              inactive-text="实景"/>
+          </el-form-item>
+          <el-form-item style="margin-left: 5px">
+            <el-switch
+              v-model="isShowFlow"
+              :disabled="sceneMode"
+              active-text="开启流向"
+              inactive-text="关闭流向"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div v-if="showAlarm==true && alarmList.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div v-if="showType==true && typeList.length>0" :style="{left: left + 'px'}" class="map-alarm-div">
+      <div class="map-alarm-div-header" style="width:290px">
+        设备列表
+        <span class="icon-right" @click="typeShow=!typeShow">
+          <i v-if="typeShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="typeShow"
+          :style="{visibility: typeShow?'visible':'hidden'}"
+          :class="{moredatascollor:typeList.length>6}"
+          :native="false">
+          <el-table
+            :data="typeList"
+            class="alarm-list-table"
+            border
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column
+              align="center"
+              type="selection"
+              width="55"
+            />
+            <el-table-column
+              v-for="column in columnsType"
+              :key="column.value"
+              :label="column.text"
+              :width="column.width"
+              :align="column.align"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div id="mars3dContainer" class="mars3d-container"/>
+    <div class="cover"/>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { mapGetters } from 'vuex'
+import { getAlarmsNow, getMapping } from '@/api/overview'
+import { getDeviceType } from '@/api/device'
+
+import 'mars3d/dist/mars3d.css'
+import * as mars3d from 'mars3d'
+import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+
+var underground = null // 地球底层
+var building = null // 楼房建筑图层
+var flow = null // 流向图层
+var street = null // 街道图层
+var well_model_layer = null // 井模型层
+var watch_model_layer = null // 水表模型层
+var watch_icon_layer = null // 水表图标层
+var zs_model_layer = null // 噪声模型层
+var zs_icon_layer = null // 噪声图标层
+export default {
+  name: 'OverviewSimple',
+  components: {},
+  data() {
+    return {
+      left: '',
+      mapMark: '-',
+      typeShow: false,
+      showType: true, // 是否显示设备
+      typeList: [],
+      deviceTypeList: [], // 设备类型列表
+      multipleSelection: [], // 多选选中项
+      columnsType: [
+        {
+          text: '设备类型',
+          value: 'name',
+          align: 'center'
+        }
+      ],
+      type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+      refreshType: 'websocket', // 刷新数据方式：clock或websocket
+      sceneMode: true,
+      isShowFlow: true,
+      showAlarm: true, // 是否显示报警
+      alpha: 40, // 是否显示全部井
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deviceType: ''
+      }, // 筛选条件
+      columns: [
+        {
+          text: '水表检查井编号',
+          value: 'wellCode',
+          width: 120,
+          align: 'center'
+        },
+        {
+          text: '设备编号',
+          value: 'devcode',
+          width: 130,
+          align: 'center'
+        },
+        {
+          text: '告警原因',
+          value: 'alarmContent',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '时间',
+          value: 'alarmTime',
+          width: 170,
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      showWellType: this.showWellType(), // 是 否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      alarmList: [], // 报警列表
+      timer: null,
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      hasAlarm: false, // 是否有报警,
+      loading: true, // 加载图标是否显示
+      removeHandler: null,
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'needRefresh'
+    ])
+  },
+  watch: {
+    sceneMode(val) {
+      if (val) {
+        // 深蓝
+        window.map.basemap = 2011
+        building.show = false
+        flow.show = false
+        street.show = true
+      } else {
+        // 实景
+        window.map.basemap = 2021
+        if (window.map.scene._mode === Cesium.SceneMode.SCENE3D) {
+          building.show = true
+        } else {
+          building.show = false
+        }
+        if (!this.isShowFlow) {
+          flow.show = false
+        } else {
+          flow.show = true
+        }
+        street.show = false
+      }
+    },
+    isShowFlow(val) {
+      if (!val) {
+        flow.show = false
+      } else {
+        flow.show = true
+      }
+    },
+    alpha(val) {
+      window.map.basemap.opacity = val / 100
+      underground.alpha = val / 100
+      if (building !== null) {
+        building.setStyle({
+          opacity: val / 100
+        })
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()// 获取设备列表
+  },
+  mounted() {
+    this.initMars3D()
+  },
+  methods: {
+    // table表格每行多选触发方法
+    handleSelectionChange(val) {
+      console.log(val)
+      if (val.length === this.typeList.length || val.length === 0) {
+        this.initPoints()
+      } else if (val.length === 1) {
+        if (val[0].name === '远传水表') {
+          let params = ''
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+              well_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(well_model_layer)
+              if (response.data.length > 0) {
+                let maxLng = parseFloat(response.data[0].longitude)
+                let minLng = parseFloat(response.data[0].longitude)
+                let maxLat = parseFloat(response.data[0].latitude)
+                let minLat = parseFloat(response.data[0].latitude)
+                for (let i = 0; i < response.data.length; i++) {
+                  if (parseFloat(response.data[i].latitude) > 100) continue
+                  const lng = parseFloat(response.data[i].longitude)
+                  const lat = parseFloat(response.data[i].latitude)
+
+                  if (lng > maxLng) maxLng = lng
+                  if (lng < minLng) minLng = lng
+                  if (lat > maxLat) maxLat = lat
+                  if (lat < minLat) minLat = lat
+
+                  well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                    position: [lng, lat, 0],
+                    style: {
+                      url: '../static/model/ys.gltf',
+                      scale: 2
+                    },
+                    popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                  }))
+                }
+                const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+                const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+                const geodesic = new Cesium.EllipsoidGeodesic()
+                geodesic.setEndPoints(start, end)
+                const distance = geodesic.surfaceDistance
+                const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+                window.map.setCameraView(center)
+              }
+            }
+          })
+          params = '13'
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+              watch_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_model_layer)
+              if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+              watch_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+                  style: {
+                    url: '../static/model/sb.glb',
+                    scale: 2,
+                    heading: 90
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/sb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+          params = '8'
+          getMapping(params, this.mapMark).then(response => {
+            if (response.code === 200) {
+              if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+              zs_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_model_layer)
+
+              if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+              zs_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, 0],
+                  style: {
+                    url: '../static/model/zs.glb',
+                    scale: 1,
+                    heading: 90
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/zs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+        } else if (val[0].name === '供水泄漏检测仪') {
+          let params = ''
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+              well_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(well_model_layer)
+              if (response.data.length > 0) {
+                let maxLng = parseFloat(response.data[0].longitude)
+                let minLng = parseFloat(response.data[0].longitude)
+                let maxLat = parseFloat(response.data[0].latitude)
+                let minLat = parseFloat(response.data[0].latitude)
+                for (let i = 0; i < response.data.length; i++) {
+                  if (parseFloat(response.data[i].latitude) > 100) continue
+                  const lng = parseFloat(response.data[i].longitude)
+                  const lat = parseFloat(response.data[i].latitude)
+
+                  if (lng > maxLng) maxLng = lng
+                  if (lng < minLng) minLng = lng
+                  if (lat > maxLat) maxLat = lat
+                  if (lat < minLat) minLat = lat
+
+                  well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                    position: [lng, lat, 0],
+                    style: {
+                      url: '../static/model/ys.gltf',
+                      scale: 2
+                    },
+                    popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                  }))
+                }
+                const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+                const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+                const geodesic = new Cesium.EllipsoidGeodesic()
+                geodesic.setEndPoints(start, end)
+                const distance = geodesic.surfaceDistance
+                const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+                window.map.setCameraView(center)
+              }
+            }
+          })
+          params = '13'
+          getMapping(params, this.mapMark).then(response => {
+            if (response.code === 200) {
+              if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+              watch_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_model_layer)
+              if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+              watch_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(watch_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+                  style: {
+                    url: '../static/model/sb.glb',
+                    scale: 2,
+                    heading: 90
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/sb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+          params = '8'
+          getMapping(params, this.listQuery.keywords).then(response => {
+            if (response.code === 200) {
+              if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+              zs_model_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_model_layer)
+
+              if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+              zs_icon_layer = new mars3d.layer.GraphicLayer()
+              window.map.addLayer(zs_icon_layer)
+              for (let i = 0; i < response.data.length; i++) {
+                zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                  position: [response.data[i].longitude, response.data[i].latitude, 0],
+                  style: {
+                    url: '../static/model/zs.glb',
+                    scale: 1,
+                    heading: 90
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+                zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+                  id: response.data[i].devcode,
+                  position: [response.data[i].longitude, response.data[i].latitude, 1],
+                  style: {
+                    image: '../static/images/icon/zs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  },
+                  popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+                }))
+              }
+              this.refreshAlarm()
+            }
+          })
+        }
+      }
+      // this.multipleSelection = val
+    },
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType(this.listQuery).then(response => {
+        this.deviceTypeList = []
+        // 过滤掉该单位不支持的设备类型
+        const deviceTypes = this.$store.getters.deviceTypes
+        for (const deviceType of response.data) {
+          if (deviceTypes.indexOf(deviceType.value) !== -1) {
+            this.deviceTypeList.push(deviceType)
+          }
+        }
+        this.typeList = this.deviceTypeList
+      })
+    },
+    // 初始化地球
+    async initMars3D() {
+      var mapOptions = {
+        scene: {
+          sceneMode: Cesium.SceneMode.SCENE2D,
+          // 默认视角参数
+          center: { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 },
+          // 以下是Cesium.Globe对象相关参数
+          globe: {
+            depthTestAgainstTerrain: true, // 是否启用深度监测
+            baseColor: '#071a69', // 地球默认背景色
+            showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+            enableLighting: false // 是否显示昼夜区域
+          },
+          // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+          cameraController: {
+            zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+            minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+            maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
+            enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+            enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+            enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+            enableZoom: true, // 是否允许 用户放大和缩小视图
+            enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+          }
+        },
+        control: {
+          infoBox: false,
+          sceneModePicker: true
+        },
+        basemaps: [
+          {
+            pid: 10,
+            id: 2011,
+            name: '天地图',
+            type: 'group',
+            layers: [
+              { name: '注记', type: 'tdt', layer: 'ter_z', key: ['216ee92889e17ab1b083fae665d522b8'] },
+              { name: '注记', type: 'tdt', layer: 'img_z', key: ['216ee92889e17ab1b083fae665d522b8'] }
+            ]
+          },
+          {
+            id: 2021,
+            pid: 10,
+            name: '天地图影像',
+            icon: 'http://mars3d.cn/example/img/basemaps/tdt_img.png',
+            type: 'tdt',
+            layer: 'img_d',
+            key: ['216ee92889e17ab1b083fae665d522b8'],
+            show: true
+          }
+        ]
+      }
+      // 创建三维地球场景
+      const map = new mars3d.Map('mars3dContainer', mapOptions)
+      map.basemap = 2011
+      map.scene.screenSpaceCameraController.enableCollisionDetection = false
+      // 设置鼠标
+      map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
+      // 缩放设置 重新设置缩放成员
+      map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+      // 鼠标左键平移
+      map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+      const bloomEffect = new mars3d.effect.BloomEffect({
+        enabled: true
+      })
+      map.addEffect(bloomEffect)
+      window.map = map
+
+      // 地球底层
+      underground = new mars3d.thing.Underground({
+        alpha: this.alpha / 100
+      })
+      map.addThing(underground)
+      map.basemap.opacity = this.alpha / 100
+
+      const graphicLayer = new mars3d.layer.GraphicLayer()
+      map.addLayer(graphicLayer)
+
+      // 建筑模型
+      building = new mars3d.graphic.ModelPrimitive({
+        position: [120.242284, 35.983704, 0],
+        style: {
+          url: '../static/model/m1/m1.gltf',
+          scale: 1,
+          heading: 18.8,
+          opacity: this.alpha / 100
+        }
+      })
+      graphicLayer.addGraphic(building)
+      building.show = false
+
+      this.initDrawLines()
+      this.initPoints()
+
+      // 屏幕取点
+      const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas)
+      handler.setInputAction(function(evt) {
+        var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid)
+        var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+        var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值
+        var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值
+        console.log('[' + lng + ',' + lat + '],')
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+      // 切换二三维响应函数
+      map.on(mars3d.EventType.morphComplete, function(event) {
+        if (window.map.scene._mode !== Cesium.SceneMode.SCENE3D) {
+          building.show = false
+        } else {
+          building.show = !this.sceneMode
+        }
+      })
+    },
+    // 初始化街道、流向线
+    async initDrawLines() {
+      axios.get('./static/position.json').then((result) => {
+        const positions = result.data.positions
+        flow = new mars3d.layer.GraphicLayer()
+        window.map.addLayer(flow)
+        street = new mars3d.layer.GraphicLayer()
+        window.map.addLayer(street)
+        for (let j = 0; j < positions.length; j++) {
+          flow.addGraphic(this.addFlow(positions[j].items, positions[j].repeat))
+          street.addGraphic(this.addStreet(positions[j].items))
+        }
+        flow.show = false
+      }).catch((error) => {
+        console.log('get position error...' + error)
+      })
+    },
+    // 初始化井，设备
+    async initPoints() {
+      // 井
+      let params = ''
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (well_model_layer !== null) window.map.removeLayer(well_model_layer)
+          well_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(well_model_layer)
+          if (response.data.length > 0) {
+            let maxLng = parseFloat(response.data[0].longitude)
+            let minLng = parseFloat(response.data[0].longitude)
+            let maxLat = parseFloat(response.data[0].latitude)
+            let minLat = parseFloat(response.data[0].latitude)
+            for (let i = 0; i < response.data.length; i++) {
+              if (parseFloat(response.data[i].latitude) > 100) continue
+              const lng = parseFloat(response.data[i].longitude)
+              const lat = parseFloat(response.data[i].latitude)
+
+              if (lng > maxLng) maxLng = lng
+              if (lng < minLng) minLng = lng
+              if (lat > maxLat) maxLat = lat
+              if (lat < minLat) minLat = lat
+
+              well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+                position: [lng, lat, 0],
+                style: {
+                  url: '../static/model/ys.gltf',
+                  scale: 2
+                },
+                popup: `给水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+              }))
+            }
+            const start = Cesium.Cartographic.fromDegrees(parseFloat(maxLng), parseFloat(maxLat))
+            const end = Cesium.Cartographic.fromDegrees(parseFloat(minLng), parseFloat(minLat))
+            const geodesic = new Cesium.EllipsoidGeodesic()
+            geodesic.setEndPoints(start, end)
+            const distance = geodesic.surfaceDistance
+            const center = { lat: (parseFloat(maxLat) + parseFloat(minLat)) / 2, lng: (parseFloat(maxLng) + parseFloat(minLng)) / 2, alt: distance + 1500, heading: 360, pitch: -90 }
+            window.map.setCameraView(center)
+          }
+        }
+      })
+      params = '13'
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (watch_model_layer !== null) window.map.removeLayer(watch_model_layer)
+          watch_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(watch_model_layer)
+          if (watch_icon_layer !== null) window.map.removeLayer(watch_icon_layer)
+          watch_icon_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(watch_icon_layer)
+          for (let i = 0; i < response.data.length; i++) {
+            watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+              position: [response.data[i].longitude, response.data[i].latitude, -0.5],
+              style: {
+                url: '../static/model/sb.glb',
+                scale: 2,
+                heading: 90
+              },
+              popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+            watch_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+              id: response.data[i].devcode,
+              position: [response.data[i].longitude, response.data[i].latitude, 1],
+              style: {
+                image: '../static/images/icon/sb.png',
+                scale: 1,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+              },
+              popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+          }
+          this.refreshAlarm()
+        }
+      })
+      params = '8'
+      getMapping(params, this.listQuery.keywords).then(response => {
+        if (response.code === 200) {
+          if (zs_model_layer !== null) window.map.removeLayer(zs_model_layer)
+          zs_model_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(zs_model_layer)
+
+          if (zs_icon_layer !== null) window.map.removeLayer(zs_icon_layer)
+          zs_icon_layer = new mars3d.layer.GraphicLayer()
+          window.map.addLayer(zs_icon_layer)
+          for (let i = 0; i < response.data.length; i++) {
+            zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
+              position: [response.data[i].longitude, response.data[i].latitude, 0],
+              style: {
+                url: '../static/model/zs.glb',
+                scale: 1,
+                heading: 90
+              },
+              popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+            zs_icon_layer.addGraphic(new mars3d.graphic.BillboardEntity({
+              id: response.data[i].devcode,
+              position: [response.data[i].longitude, response.data[i].latitude, 1],
+              style: {
+                image: '../static/images/icon/zs.png',
+                scale: 1,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+              },
+              popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备型号：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
+            }))
+          }
+          this.refreshAlarm()
+        }
+      })
+    },
+    // 流向线
+    addFlow(positions, repeat) {
+      var style = {
+        width: 10,
+        material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
+          color: '#217bd9',
+          repeat: new Cesium.Cartesian2(repeat, 1),
+          image: '../static/images/line.png',
+          speed: 15
+        })
+      }
+      var graphic = new mars3d.graphic.PolylineEntity({
+        positions: positions,
+        style: style
+      })
+      return graphic
+    },
+    // 道路线
+    addStreet(positions) {
+      var graphic = new mars3d.graphic.PolylineEntity({
+        positions: positions,
+        style: {
+          width: 8,
+          color: Cesium.Color.AQUA,
+          clampToGround: true
+        }
+      })
+      return graphic
+    },
+    // 回到原点
+    flyToInit() {
+      let center
+      if (window.map._viewer.scene._mode === Cesium.SceneMode.SCENE3D) {
+        center = { lat: 35.97, lng: 120.2384, alt: 2000, heading: 360, pitch: -45 }
+      } else {
+        center = { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 }
+      }
+      window.map.setCameraView(center)
+    },
+    // 刷新报警列表
+    async refreshAlarm() {
+      this.count = 60
+      this.loading = true
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          this.loading = false
+          // 获取当前报警列表
+          this.alarmList = response.data
+          if (this.alarmList.length > 0) {
+            this.left = 621
+            this.hasAlarm = true
+          } else {
+            this.left = 0
+          }
+          for (const alarm of response.data) {
+            for (const watch of watch_icon_layer.graphics) {
+              if (alarm.devcode === watch.options.id) {
+                if (!watch.popup.startsWith('报警')) {
+                  watch.setStyle({
+                    image: '../static/images/icon/asb.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  })
+                  watch.popup = `报警远程水表<br />设备编号：${alarm.devcode}<br />井编号：${alarm.wellCode}<br />井类型：${alarm.wellTypeName}<br />报警时间：${alarm.alarmTime}<br />报警数值：${alarm.alarmValue}<br />报警内容：${alarm.alarmContent}<br />详细位置：${alarm.position}`
+                }
+                break
+              }
+            }
+            for (const zs of zs_icon_layer.graphics) {
+              if (alarm.devcode === zs.options.id) {
+                if (!zs.popup.startsWith('报警')) {
+                  zs.setStyle({
+                    image: '../static/images/icon/azs.png',
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3)
+                  })
+                  zs.popup = `报警噪声记录仪仪<br />设备编号：${alarm.devcode}<br />井编号：${alarm.wellCode}<br />井类型：${alarm.wellTypeName}<br />报警时间：${alarm.alarmTime}<br />报警数值：${alarm.alarmValue}<br />报警内容：${alarm.alarmContent}<br />详细位置：${alarm.position}`
+                }
+                break
+              }
+            }
+          }
+        }
+      })
+    },
+    // 点击报警列表
+    alarmRowClick(row, column, event) {
+      if (this.alpha < 10) {
+        this.alpha = 15
+      }
+      let center
+      for (const watch of watch_icon_layer.graphics) {
+        if (row.devcode === watch.options.id) {
+          center = { lat: watch._point._lat, lng: watch._point._lng, alt: 50, heading: 360, pitch: -90 }
+          window.map.setCameraView(center)
+          break
+        }
+      }
+      for (const zs of zs_icon_layer.graphics) {
+        if (row.devcode === zs.options.id) {
+          center = { lat: zs._point._lat, lng: zs._point._lng, alt: 50, heading: 360, pitch: -90 }
+          window.map.setCameraView(center)
+          break
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .mars3d-popup-content {
+    margin: 20px;
+    line-height: 1.9;
+    font-size: 18px;
+  }
+  /deep/ .cesium-toolbar-button {
+    margin-top: 5px !important;
+    width: 48px !important;
+    height: 48px !important;
+  }
+  /depp/ span.cesium-sceneModePicker-wrapper {
+    margin: 0 50px !important;
+  }
+  /deep/ .mars3d-popup-close-button {
+    top: 10px;
+    right: 10px;
+  }
+  /deep/ .mars3d-popup{
+    margin-top: -40px;
+  }
+  /deep/ .mars3d-popup-content {
+    margin: 15px;
+    line-height: 1.5;
+    font-size: 16px;
+  }
+  /deep/ .mars3d-popup-content-wrapper {
+    box-shadow: 0 2px 6px #00192faa;
+    max-height: 1000px;
+  }
+  /deep/ .mars3d-popup-background {
+    background: #00192faa;
+    border-radius: 10px;
+  }
+  /deep/ .mars3d-popup-tip {
+    border-radius: 0px !important;
+  }
+  /deep/.mars3d-popup-close-button{
+    top: 10px;
+  }
+
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    left: 0px;
+    right: 10px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    top: 40px;
+    left: 0px;
+    background-color: rgba(255, 234, 241,0.8);
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 621px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding:0px !important;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      padding: 7px 0px;
+    }
+    .el-table td{
+      padding: 5px 0px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
+
+<style rel="stylesheet/scss" lang="scss">
+  .map-alarm-div {
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
+  }
+  .cover{
+    position: absolute;
+    bottom: 3px;
+    left: 0px;
+    background-color: #122252;
+    width: 130px;
+    height: 32px;
+  }
+</style>
diff --git a/src/views/gasOverview/overview.vue b/src/views/gasOverview/overview.vue
new file mode 100644
index 0000000..936577c
--- /dev/null
+++ b/src/views/gasOverview/overview.vue
@@ -0,0 +1,802 @@
+<!--suppress ALL -->
+<template>
+  <div>
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="listQuery.wellType" placeholder="选择井类型" @change="changetype" clearable size="small">
+              <el-option
+                v-for="item in wellTypeList"
+                :key="'welltype_'+item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getWellList" size="small" style="margin-top: 2px">搜索</el-button>
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部井</el-checkbox>
+          </el-form-item>
+          <el-form-item >
+            <el-slider v-model="alpha" style="width: 150px"></el-slider>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flytoinit"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <!--<el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>-->
+    </div>
+    <div v-if="showAlarm==true && alarmList.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div id="mars3dContainer" class="mars3d-container"/>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import SelectTree from '@/components/SelectTree/singleSelect'
+  import { getWellType } from '@/api/well'
+  import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode } from '@/api/overview'
+  import DeptSelect from '../../components/DeptSelect/index'
+
+  import 'mars3d/dist/mars3d.css'
+  import * as mars3d from 'mars3d'
+  import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+  var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+
+  var rectangle = null
+  var alarmIcons= []
+  var typeList = []
+  export default {
+    name: 'Overview',
+    components: { DeptSelect, SelectTree },
+    data() {
+      return {
+        map: null,
+        ysline: null,
+        wsline: null,
+        underground: null,
+        img_layer: null,
+        tile_layer: null,
+        tiles3dLayer: null,
+        rain_point_layer: null,
+        rain_point_layer1: null,
+        sewage_point_layer: null,
+        alarm_layer: null,
+        fly_layer: null,
+        type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+        refreshType: 'websocket', // 刷新数据方式：clock或websocket
+        showAlarm: true, // 是否显示报警
+        showAll: false, // 是否显示全部井
+        alpha: 100, // 是否显示全部井
+        listQuery: {
+          keywords: '', // 关键字
+          wellType: '', // 井类型
+          // deptid: '', // 组织机构
+          // isAlarm: '1' // 是否报警
+        }, // 筛选条件
+        columns: [
+          {
+            text: '井编号',
+            value: 'wellCode',
+            width: 220,
+            align: 'center'
+          },
+          {
+            text: '设备编号',
+            value: 'devcode',
+            width: 120,
+            align: 'center'
+          },
+          {
+            text: '告警原因',
+            value: 'alarmContent',
+            align: 'center',
+            width: 120
+          },
+          {
+            text: '时间',
+            value: 'alarmTime',
+            width: 160,
+            align: 'center'
+          }
+        ], // 告警列表显示列
+        tableShow: true, // 是否显示告警列表
+        tableIcon: 'el-icon-arrow-up',
+        showWellType: this.showWellType(), // 是 否显示井类型下拉
+        wellTypeList: [], // 井类型列表
+        showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+        center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+        zoom: 12, // 地图缩放比例
+        alarmList: [], // 报警列表
+        alarmInfo: {
+          wellCode: '',
+          deptName: '',
+          position: '',
+          deep: '',
+          alarms: []
+        }, // 显示报警详情气泡内容
+        timer :null,
+        currentWindow: {
+          visible: false, // 窗体显示与否
+          position: [this.$store.getters.lng, this.$store.getters.lat],
+          windowType: 'info' // 窗体类型：详情info或报警alarm
+        }, // 当前窗体属性
+        deptShowTop: false, // 是否显示顶级
+        clock: null, // 计时器
+        hasAlarm: false, // 是否有报警,
+        loading: true, // 加载图标是否显示
+        trackPopUp:false,
+        removeHandler:null,
+        showClearBtn: false // 是否显示清除查询按钮
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'needRefresh'
+      ])
+    },
+    mounted() {
+      this.initmars3d()
+    },
+    watch: {
+      alpha(val){
+        this.img_layer.alpha = val/100
+        // this.ysline.alpha = val/100
+        // this.wsline.alpha = val/100
+        this.map.basemap.opacity = val/100
+        this.tiles3dLayer.opacity = val/100
+        this. underground.alpha = val/100
+        console.log(val,this.map.level)
+        if(val<=90 && this.map.level>=19){
+          // this.map.scene.globe.show  = false
+          this.ysline.show = false
+          this.wsline.show = false
+        }else {
+          // this.map.scene.globe.show  = true
+          this.ysline.show = true
+          this.wsline.show = true
+        }
+      },
+      showAll(val) {
+        this.tile_layer.show = val
+      },
+      // needRefresh(val) {
+      //   // 需要刷新
+      //   if (val) {
+      //     this.refreshAlarm()
+      //   }
+      // },
+      showAlarm(val){
+        if(!val && this.currentWindow.windowType=='alarm'){
+          this.currentWindow.visible = false
+        }
+        this.alarm_layer.show = val
+      }
+    },
+    created() {
+      this.fetchWellType()
+    },
+    computed: {
+      handler() {
+        return new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas)
+      }
+    },
+    methods: {
+      changetype(){
+        if(this.listQuery.wellType==='1'){ // 雨水
+          this.rain_point_layer.show = true
+          this.rain_point_layer1.show = true
+          this.sewage_point_layer.show = false
+        }else if(this.listQuery.wellType==='2'){ //污水
+          this.rain_point_layer.show = false
+          this.rain_point_layer1.show = false
+          this.sewage_point_layer.show = true
+        }else{
+          this.rain_point_layer.show = true
+          this.rain_point_layer1.show = true
+          this.sewage_point_layer.show = true
+        }
+      },
+
+      async initpoints(str) {
+        if(this.sewage_point_layer!==null)  this.map.removeLayer(this.sewage_point_layer)
+        if(this.rain_point_layer!==null)  this.map.removeLayer(this.rain_point_layer)
+        if(this.rain_point_layer1!==null)  this.map.removeLayer(this.rain_point_layer1)
+        this.sewage_point_layer = new mars3d.layer.ArcGisWfsLayer({
+          name: '污水点',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/3',
+          where: str,
+          minimumLevel: 19,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/ws3(1).gltf',
+              scale: 1.3
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: -val.井深}
+            }
+          },
+          popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
+        })
+        this.map.addLayer(this.sewage_point_layer)
+
+        this.rain_point_layer = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨水井',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0',
+          where: "附属物名称 = '雨水井' and " + str,
+          minimumLevel: 19,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/ys3.gltf',
+              scale: 1.3
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: -val.井深}
+            }
+          },
+          popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
+        })
+        this.map.addLayer(this.rain_point_layer)
+
+        this.rain_point_layer1 = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨篦',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0',
+          where: "附属物名称 <> '雨水井' and " + str,
+          minimumLevel: 19,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/yubi.gltf',
+              scale: 1.3
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: -val.井深}
+            }
+          },
+          popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
+        })
+        this.map.addLayer(this.rain_point_layer1)
+      },
+      // 初始化放这里
+      async initmars3d() {
+        var mapOptions = {
+          scene: {
+            // 默认视角参数
+            center: {  lat: 27.68, lng: 116.0935, alt: 10000, heading: 360, pitch: -45 },
+            // 以下是Cesium.Globe对象相关参数
+            globe: {
+              depthTestAgainstTerrain: true, // 是否启用深度监测
+              // baseColor: '#00192f', // 地球默认背景色
+              showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+              enableLighting: false // 是否显示昼夜区域
+            },
+            // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+            cameraController: {
+              zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+              minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+              maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
+              enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+              enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+              enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+              enableZoom: true, // 是否允许 用户放大和缩小视图
+              enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+            }
+          },
+          basemaps: [
+            {
+              pid: 10,
+              id: 2011,
+              name: "天地图",
+              type: "group",
+              layers: [
+                // { name: "注记", type: "tdt", layer: "ter_z", key: ["9ae78c51a0a28f06444d541148496e36"] },
+                { name: "注记", type: "tdt", layer: "img_z", key: ["9ae78c51a0a28f06444d541148496e36"] },
+              ]
+            },
+            // {
+            //   "id": 2021,
+            //   "pid": 10,
+            //   "name": "天地图影像",
+            //   "icon": "http://mars3d.cn/example/img/basemaps/tdt_img.png",
+            //   "type": "tdt",
+            //   "layer": "img_d",
+            //   "key": ["9ae78c51a0a28f06444d541148496e36"],
+            //   "show": true
+            // },
+            // {
+            //   "id": 2020,
+            //   "pid": 10,
+            //   "name": "天地图电子",
+            //   "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png",
+            //   "type": "group",
+            //   "layers": [
+            //     { "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["9ae78c51a0a28f06444d541148496e36"] },
+            //     { "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["9ae78c51a0a28f06444d541148496e36"] }
+            //   ]
+            // },
+          ],
+        }
+        // 创建三维地球场景
+        var map = new mars3d.Map('mars3dContainer', mapOptions)
+        map.basemap = 2011
+        map.scene.screenSpaceCameraController.enableCollisionDetection = false
+        // 设置鼠标
+        map.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG ]
+        // 缩放设置 重新设置缩放成员
+        map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+        // 鼠标左键平移
+        map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+        this.map = map
+        this.underground = new mars3d.thing.Underground({
+          alpha: 1,
+        })
+        map.addThing(this.underground)
+        this.tiles3dLayer = new mars3d.layer.TilesetLayer({
+          name: '倾斜摄影',
+          url: 'http://111.198.10.15:20603/CRGroup03/tileset.json',
+          show:true,
+          type: '3dtiles',
+          maximumScreenSpaceError: 8,
+          maximumMemoryUsage: 1024,
+          // center: {lat: 27.750462, lng: 116.090196, alt: 130, heading: 3, pitch: 7 },
+          position: {
+            lng: 116.069103, lat: 27.756591, alt: -70
+          },
+
+          skipLevelOfDetail: true,
+          loadSiblings: true,
+          cullRequestsWhileMoving: true,
+          cullRequestsWhileMovingMultiplier: 10,
+          preferLeaves: true,
+          dynamicScreenSpaceError: true,
+          preloadWhenHidden: true,
+
+          flyTo: true
+        })
+        let that = this
+        this.handler.setInputAction(function(movement) {
+          console.log(movement,that.map.level)//向上滑是100 向下滑是-100
+          if(that.map.level<19){
+            that.ysline.show = true
+            that.wsline.show = true
+          }else{
+            if(that.alpha<90){
+              that.ysline.show = false
+              that.wsline.show = false
+            }
+          }
+        }, Cesium.ScreenSpaceEventType.WHEEL)
+        map.addLayer(this.tiles3dLayer)
+
+        this.tile_layer = new mars3d.layer.ArcGisLayer({
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer',
+          layers: '0,3',
+          show:false,
+          // maximumTerrainLevel: 19,
+          enablePickFeatures: false,
+        })
+        map.addLayer(this.tile_layer)
+
+        this.img_layer = new mars3d.layer.XyzLayer({
+          url: 'http://223.82.47.232:11502/crtiles01/{z}/{x}/{y}.png',
+          crs: 'EPSG:3857',
+          queryParameters: {
+            //可以传自定义url参数，如token等
+            token: 'mars3d',
+          }
+        })
+        map.addLayer(this.img_layer)
+        let wfsLayer = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨水管线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/4',
+          minimumLevel: 19,
+          symbol: {
+            type: 'polylineVolumeP',
+            styleOptions: {
+              color: '#375cad',
+              shape: 'pipeline',
+              radius: 0.1
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: [-val.起始埋深,-val.终止埋深]}
+            }
+          },
+          popup: '名称：雨水管线<br />编号：{编号}<br />材质：{材质}<br />管径：{管径}<br />所属道路：{所属道路}',
+        })
+        map.addLayer(wfsLayer)
+        wfsLayer = new mars3d.layer.ArcGisWfsLayer({
+          name: '污水管线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/5',
+          minimumLevel: 19,
+          symbol: {
+            type: 'polylineVolumeP',
+            styleOptions: {
+              color: '#eb6b0c',
+              shape: 'pipeline',
+              radius: 0.1
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              return {setHeight: [-val.起始埋深,-val.终止埋深]}
+            }
+          },
+          popup: '名称：污水管线<br />编号：{编号}<br />材质：{材质}<br />管径：{管径}<br />所属道路：{所属道路}',
+        })
+        map.addLayer(wfsLayer)
+        this.ysline = new mars3d.layer.ArcGisWfsLayer({
+          name: '雨水线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/4',
+          // maximumLevel: 19,
+          enablePickFeatures: false,
+          symbol: {
+            type: 'polylineP',
+            styleOptions: {
+              color: '#375cad',
+              // radius: 0.1
+            },
+          },
+
+        })
+        map.addLayer(this.ysline)
+
+        this.wsline = new mars3d.layer.ArcGisWfsLayer({
+          name: '污水线',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/5',
+          // maximumLevel: 19,
+          enablePickFeatures: false,
+          symbol: {
+            type: 'polylineP',
+            styleOptions: {
+              color: '#eb6b0c',
+              // radius: 0.1
+            },
+          },
+
+        })
+        map.addLayer(this.wsline)
+        this.initpoints("1=1")
+        this.refreshAlarm()
+      },
+      // 获取井类型，显示井类型下拉
+      fetchWellType() {
+        getWellType().then(response => {
+          this.wellTypeList = []
+          // 如果该用户支持的井类型只有一个，则不显示该筛选框
+          // const wellTypes = this.$store.getters.wellTypes
+          for (const wellType of response.data) {
+            // if (wellTypes.indexOf(wellType.value) !== -1) {
+              this.wellTypeList.push(wellType)
+            // }
+          }
+          if (this.wellTypeList.length <= 1) {
+            this.showWellType = false
+          }
+        })
+      },
+      flytoinit(){
+        var center = {  lat: 27.68, lng: 116.0935, alt: 10000, heading: 360, pitch: -45 }
+        this.map.setCameraView(center)
+      },
+      // 获取全部井列表
+      getWellList() {
+        if(this.listQuery.keywords=== ''){
+          this.initpoints("1=1")
+          return
+        }
+        getWellList(this.listQuery).then(response => {
+          if (response.code === 200) { // todo
+            let str = "1 <> 1"
+            for (const res of response.data) {
+              str += (" or 编号 = '" + res.wellCode + "'")
+            }
+            this.initpoints(str)
+          }
+        })
+      },
+      // 点击井详情气泡
+      openInfoWindow(wellId) {
+        this.currentWindow.visible = false
+        getWellInfo(wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            this.wellInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'info'
+            this.trackPopUp = true
+          }
+        })
+      },
+      // 刷新报警列表
+      refreshAlarm() {
+        this.count = 60
+        this.loading = true
+        getAlarmsNow().then(response => {
+          if (response.code === 200) {
+
+            this.loading = false
+            // 获取当前报警列表
+            this.alarmList = response.data
+            if (this.alarmList.length > 0) {
+              this.hasAlarm = true
+            }
+            let str = "1 <> 1"
+            var map = {};
+            for (const alarm of response.data) {
+              str += (" or 编号 = '" + alarm.wellCode + "'")
+              map[alarm.wellCode] = alarm
+            }
+            if(this.alarm_layer!==null){
+              this.map.removeLayer(this.alarm_layer)
+            }
+            this.alarm_layer = new mars3d.layer.ArcGisWfsLayer({
+              name: '报警点',
+              url: 'http://223.82.47.232:11408/arcgis/rest/services/sfw/MapServer/1',
+              where: str,
+              // minimumLevel: 15,
+              symbol: {
+                type: 'modelP',
+                styleOptions: {
+                  url: '../static/model/baojing.gltf',
+                  minimumPixelSize: 20,
+                  maximumScale: 15,
+                  scale: 1
+                },
+                // callback: function (attr, styleOpt){
+                //   var val= {attr}.attr
+                //   return {setHeight: val.井深}
+                // }
+              },
+              popup:  function(e){
+                var val = e.graphic.options.attr
+                return  `井编号：${val.编号}<br />井名称：${val.附属物名称}<br />所属道路：${val.所属道路}<br />告警原因：${map[val.编号].alarmContent}<br />告警时间：${map[val.编号].alarmTime}`
+              }
+            })
+            this.map.addLayer(this.alarm_layer)
+          }
+        })
+      },
+      // 点击报警详情
+      openAlarmWindow(wellId, position) {
+        // 旧弹窗不显示
+        this.currentWindow.visible = false
+        // this.filterIcon()
+        getWellAlarms(wellId).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            const wellInfo = response.data
+            this.alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            this.currentWindow.position = position
+            this.center = position
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'alarm'
+            this.trackPopUp = true
+          }
+        })
+      },
+      // 点击报警列表
+      alarmRowClick(row, column, event) {
+        if(this.alpha<10){
+          this.alpha = 15
+        }
+
+        this.flytoinit()
+        var that = this
+        if(this.fly_layer!==null) this.map.removeLayer(this.fly_layer)
+        const wellId = row.wellCode
+        let str = "编号 = '" + wellId + "'"
+        this.fly_layer = null
+        this.fly_layer = new mars3d.layer.ArcGisWfsLayer({
+          name: '报警点',
+          url: 'http://223.82.47.232:11408/arcgis/rest/services/sfw/MapServer/1',
+          where: str,
+          symbol: {
+            type: 'modelP',
+            styleOptions: {
+              url: '../static/model/baojing.gltf',
+              scale: 0
+            },
+            callback: function (attr, styleOpt){
+              var val= {attr}.attr
+              var center = {lat: val.wd, lng: val.jd, alt: 50, heading: 360, pitch: -90}
+              that.map.setCameraView(center)
+            }
+          }
+        })
+        this.map.addLayer(this.fly_layer)
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .mars3d-popup-content {
+    margin: 20px;
+    line-height: 1.9;
+    font-size: 18px;
+  }
+  @CHARSET "UTF-8";
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    background-color: rgba(255, 234, 241,0.8);
+    top: 40px;
+    left: 0px;
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 621px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding:0px !important;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      /*background-color: rgba(255, 229, 230, 0.8);*/
+      padding: 7px 0px;
+    }
+    .el-table td{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+      padding: 5px 0px;
+      /*line-height: 1;*/
+    }
+    .el-table td:hover{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+  /*按钮样式*/
+  .add-button{
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss">
+  .map-alarm-div {
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
+  }
+</style>
diff --git a/src/views/gasOverview/overviewBj.vue b/src/views/gasOverview/overviewBj.vue
new file mode 100644
index 0000000..29c11ba
--- /dev/null
+++ b/src/views/gasOverview/overviewBj.vue
@@ -0,0 +1,1240 @@
+<template>
+  <div>
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-form-item v-if="wellTypeList.length>1">
+            <el-select v-model="listQuery.wellType" placeholder="选择井类型" clearable size="small" @change="changetype">
+              <el-option
+                v-for="item in wellTypeList"
+                :key="'welltype_'+item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <!--<el-form-item>-->
+          <!--<dept-select ref="deptSelect" v-model="listQuery.deptid" :need-top="deptShowTop" dept-type="03" placeholder="选择权属单位" size="small"/>-->
+          <!--</el-form-item>-->
+          <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="getWellList">搜索</el-button>
+          <!--<el-button v-show="showClearBtn" class="filter-item" @click="clearSearch">清除查询</el-button>-->
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部井</el-checkbox>
+          </el-form-item>
+          <el-form-item >
+            <el-slider v-model="alpha" style="width: 150px"/>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flytoinit"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <!--倒计时刷新-->
+    <!--<div v-if="refreshType=='clock'" class="refresh-div">-->
+    <!--<span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>-->
+    <!--<el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>-->
+    <!--</div>-->
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>
+    </div>
+    <div v-if="showAlarm==true && alarmWells.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div class="overview-map-container">
+      <!--地图-->
+      <div id="cesiumContainer" class="map-demo">
+        <div v-if="trackPopUp" id="trackPopUp">
+          <div id="trackPopUpContent" :style="winPosition" class="leaflet-popup">
+            <el-button type="text" class="leaflet-popup-close-button" href="#" @click="closeInfoWindow">×</el-button>
+            <div class="leaflet-popup-content-wrapper">
+              <div id="trackPopUpLink" class="leaflet-popup-content" style="width: 240px;">
+                <div v-if="currentWindow.windowType=='pipeline'?true:false" class="info-window">
+                  <div class="info-header">{{ pipelineInfo.Handle }}</div>
+                  <div class="info-body">
+                    <div>FID：{{ pipelineInfo.FID }}</div>
+                    <div>D_Type：{{ pipelineInfo.D_Type }}</div>
+                    <div>Diameter：{{ pipelineInfo.Diameter }}</div>
+                    <div>Material：{{ pipelineInfo.Material }}</div>
+                    <div>Memo：{{ pipelineInfo.Memo }}</div>
+                    <div>Use_Years：{{ pipelineInfo.Use_Years }}</div>
+                    <div>x1：{{ pipelineInfo.x1 }} / y1：{{ pipelineInfo.y1 }}</div>
+                    <div>x2：{{ pipelineInfo.x2 }} / y2：{{ pipelineInfo.y2 }}</div>
+                    <div>Deep1：{{ pipelineInfo.Deep1 }} / Deep2：{{ pipelineInfo.Deep2 }}</div>
+                    <div>H1：{{ pipelineInfo.H1 }} / H2：{{ pipelineInfo.H2 }}</div>
+                  </div>
+                </div>
+                <div v-if="currentWindow.windowType=='info'?true:false" class="info-window">
+                  <div class="info-header">{{ wellInfo.wellCode }}</div>
+                  <div class="info-body">
+                    <div>井类型：{{ wellInfo.wellTypeName }}</div>
+                    <div>权属单位：{{ wellInfo.deptName }}</div>
+                    <div>详细地址：{{ wellInfo.position }}</div>
+                  </div>
+                </div>
+                <div v-if="currentWindow.windowType=='alarm'?true:false" class="alarm-window">
+                  <div class="alarm-header">
+                    <svg-icon icon-class="alarm-red" />
+                    {{ alarmInfo.wellCode }}
+                  </div>
+                  <div class="alarm-body">
+                    <div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
+                      <div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
+                      <div>设备编号：<span>{{ alarm.devcode }}</span></div>
+                    </div>
+                    <el-divider/>
+                    <div>井类型：{{ alarmInfo.wellTypeName }}</div>
+                    <div>权属单位：{{ alarmInfo.deptName }}</div>
+                    <div>详细地址：{{ alarmInfo.position }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="leaflet-popup-tip-container">
+              <div class="leaflet-popup-tip"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SelectTree from '@/components/SelectTree/singleSelect'
+import { getWellType } from '@/api/well'
+import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode } from '@/api/overview'
+import DeptSelect from '../../components/DeptSelect/index'
+
+import Viewer from 'cesium/Source/Widgets/Viewer/Viewer' // 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
+import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl' // 让Cesium知道静态资源在哪里的API
+import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+var rectangle = null
+var building = null
+var entities = []
+var alarmIcons = []
+var typeList = []
+export default {
+  name: 'OverviewBj',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      // rectangle: null,
+      // building: null,
+      // viewer: null,
+      type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+      refreshType: 'clock', // 刷新数据方式：clock或websocket
+      showAlarm: true, // 是否显示报警
+      showAll: false, // 是否显示全部井
+      alpha: 100, // 是否显示全部井
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: '1' // 是否报警
+      }, // 筛选条件
+      columns: [
+        {
+          text: '井编号',
+          value: 'wellCode',
+          width: 220,
+          align: 'center'
+        },
+        {
+          text: '设备编号',
+          value: 'devcode',
+          width: 120,
+          align: 'center'
+        },
+        {
+          text: '告警原因',
+          value: 'alarmContent',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '时间',
+          value: 'alarmTime',
+          width: 160,
+          align: 'center'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      showWellType: this.showWellType(), // 是 否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+      zoom: 12, // 地图缩放比例
+      markers: [], // 所有井的点原始数据
+      alarmListOri: [], // 原始报警列表
+      alarmList: [], // 报警列表
+      alarmWells: [], // 报警井列表
+      offset: [-10, -10], // 偏移量
+      alarmOffset: [-15, -30], // 偏移量
+      winPosition: '',
+      wellInfo: {
+        wellCode: '',
+        position: '',
+        wellTypeName: '',
+        deptName: '',
+        bfztName: '',
+        deep: ''
+      }, // 显示井详细信息气泡内容
+      pipelineInfo: {
+        Build_Com: '',
+        Build_Date: '',
+        Build_Per: '',
+        Cable_Type: '',
+        Code: '',
+        D_Type: '',
+        Deep1: '',
+        Deep2: '',
+        Design_Com: '',
+        Design_Per: '',
+        Diameter: '',
+        FID: '',
+        H1: '',
+        H2: '',
+        Handle: '',
+        Material: '',
+        Memo: '',
+        Mon_Com: '',
+        Mon_Per: '',
+        Shape: '',
+        Street: '',
+        Top_H1: '',
+        Top_H2: '',
+        Use_Years: '',
+        x1: '',
+        x2: '',
+        y1: '',
+        y2: ''
+      }, // 显示井详细信息气泡内容
+      alarmInfo: {
+        wellCode: '',
+        deptName: '',
+        position: '',
+        deep: '',
+        alarms: []
+      }, // 显示报警详情气泡内容
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      infoWindowClass: 'nomal-info-window',
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      hasAlarm: false, // 是否有报警,
+      loading: true, // 加载图标是否显示
+      trackPopUp: false,
+      removeHandler: null,
+      provider: null,
+      provider_marker: null,
+      promise_marker: null,
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'needRefresh'
+    ])
+  },
+  watch: {
+    alpha(val) {
+      window.viewer.imageryLayers._layers.forEach(layer => {
+        layer.alpha = val / 100 // 我们可以设置为0
+      })
+      // console.log(this.building)
+      if (building !== null) {
+        building.color.alpha = val / 100
+      }
+    },
+    showAll(val) {
+      console.log(typeList[1])
+      if (val) { // 显示全部
+        for (var i = 0; i < typeList.length; i++) {
+          typeList[i].show = true
+        }
+      } else { // 仅显示报警
+        for (var i = 0; i < typeList.length; i++) {
+          typeList[i].show = false
+        }
+        this.changetype()
+      }
+    },
+    'provider.ready': {
+      handler: function() {
+        if (this.provider.ready) {
+          var promise = this.provider.pickFeatures(842, 142, 0, 2.029164431539006, 0.6965965212763974)
+          var that = this
+          Cesium.when(promise, function(layerInfo) {
+            console.log(layerInfo)
+            // 查询结果展示
+            if (layerInfo && layerInfo.length > 0) {
+              for (var i = 0; i < layerInfo.length; i++) {
+                var item = layerInfo[i].data.geometry.paths[0]
+                var d1 = parseFloat(layerInfo[i].data.attributes.Deep1)
+                var d2 = parseFloat(layerInfo[i].data.attributes.Deep2)
+                var pos = [
+                  item[0][0], item[0][1], -d1,
+                  item[1][0], item[1][1], -d2
+                ]
+                var color = Cesium.Color.YELLOW
+                if (layerInfo[i].data.attributes.备注 === 'DXGX') {
+                  color = Cesium.Color.BLUE
+                } else if (layerInfo[i].data.attributes.备注 === 'GSGX') {
+                  color = Cesium.Color.STEELBLUE
+                } else if (layerInfo[i].data.attributes.备注 === 'GDGX') {
+                  color = Cesium.Color.ORANGE
+                } else if (layerInfo[i].data.attributes.备注 === 'LDGX') {
+                  color = Cesium.Color.PALEGOLDENROD
+                } else if (layerInfo[i].data.attributes.备注 === 'RQGX') {
+                  color = Cesium.Color.RED
+                } else if (layerInfo[i].data.attributes.备注 === 'RLGX') {
+                  color = Cesium.Color.BROWN
+                } else if (layerInfo[i].data.attributes.备注 === 'WSGX') {
+                  color = Cesium.Color.GRAY
+                } else if (layerInfo[i].data.attributes.备注 === 'YSGX') {
+                  color = Cesium.Color.DODGERBLUE
+                }
+                if (pos[0] === pos[3] && pos[1] === pos[4]) {
+                  var d = d1 < d2 ? d1 : d2
+                  var entity = window.viewer.entities.add({
+                    name: 'pipeline',
+                    description: layerInfo[i].data.attributes,
+                    position: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], -(d1 + d2) / 2),
+                    cylinder: {
+                      length: Math.abs(d2 - d1),
+                      topRadius: layerInfo[i].data.attributes.Diameter / 1000, // 圆柱体的顶部半径。
+                      bottomRadius: layerInfo[i].data.attributes.Diameter / 1000, //    圆柱体底部的半径。
+                      material: color
+                    }})
+                } else {
+                  var entity = window.viewer.entities.add({
+                    name: 'pipeline',
+                    description: layerInfo[i].data.attributes,
+                    polylineVolume: {
+                      positions: Cesium.Cartesian3.fromDegreesArrayHeights(pos),
+                      shape: that.computeCircle(layerInfo[i].data.attributes.Diameter / 1000),
+                      material: color
+                    }})
+                }
+              }
+            }
+          })
+        }
+      }
+    },
+    'provider_marker.ready': {
+      handler: function() {
+        if (this.provider_marker.ready) {
+          this.promise_marker = this.provider_marker.pickFeatures(842, 142, 0, 2.029164431539006, 0.6965965212763974)
+          var that = this
+          Cesium.when(this.promise_marker, function(layerInfo) {
+            // 查询结果展示
+            if (layerInfo && layerInfo.length > 0) {
+              console.log(layerInfo)
+              for (var i = 0; i < layerInfo.length; i++) {
+                var center = new Cesium.Cartesian3.fromDegrees(layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深) + 2.5)
+                var matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)
+                var icon = window.viewer.scene.primitives.add(
+                  Cesium.Model.fromGltf({
+                    id: {
+                      id: layerInfo[i].data.attributes.编号,
+                      position: [layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深) + 2.5]
+                    },
+                    url: '../static/model/baojing.gltf',
+                    color: Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(1.0)), // 包含透明度的颜色
+                    scale: 1,
+                    minimumPixelSize: 50,
+                    maximumScale: 2,
+                    colorBlendMode: Cesium.ColorBlendMode['MIX'], // 常用的有三个HIGHLIGHT,REPLACE,MIX
+                    colorBlendAmount: 0.1, // 这个属性必须是MIX混合属性才能生效,见colorBlendMode
+                    modelMatrix: matrix,
+                    allowPicking: true,
+                    show: false
+                  })
+                )
+                icon.show = false
+                alarmIcons.push(icon)
+
+                var color = Cesium.Color.YELLOW
+                if (layerInfo[i].data.attributes.备注.startsWith('DX')) {
+                  color = Cesium.Color.BLUE
+                } else if (layerInfo[i].data.attributes.备注.startsWith('GS')) {
+                  color = Cesium.Color.STEELBLUE
+                } else if (layerInfo[i].data.attributes.备注.startsWith('GD')) {
+                  color = Cesium.Color.ORANGE
+                } else if (layerInfo[i].data.attributes.备注.startsWith('LD')) {
+                  color = Cesium.Color.PALEGOLDENROD
+                } else if (layerInfo[i].data.attributes.备注.startsWith('RQ')) {
+                  color = Cesium.Color.RED
+                } else if (layerInfo[i].data.attributes.备注.startsWith('RL')) {
+                  color = Cesium.Color.BROWN
+                } else if (layerInfo[i].data.attributes.备注.startsWith('WS')) {
+                  color = Cesium.Color.GRAY
+                } else if (layerInfo[i].data.attributes.备注.startsWith('YS')) {
+                  color = Cesium.Color.DODGERBLUE
+                }
+                var type = window.viewer.entities.add({
+                  name: layerInfo[i].data.attributes.备注,
+                  position: Cesium.Cartesian3.fromDegrees(layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深) + 1.5),
+                  point: {
+                    color: color,
+                    pixelSize: 10,
+                    outlineColor: Cesium.Color.WHITE,
+                    outlineWidth: 2,
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY
+                  }
+                })
+                type.show = false
+                typeList.push(type)
+
+                center = new Cesium.Cartesian3.fromDegrees(layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深))
+                matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)
+                var item = window.viewer.scene.primitives.add(
+                  Cesium.Model.fromGltf({
+                    id: {
+                      id: layerInfo[i].data.attributes.编号,
+                      position: [layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深)]
+                    },
+                    url: '../static/model/yubi.gltf',
+                    scale: 2,
+                    modelMatrix: matrix,
+                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 1000),
+                    allowPicking: true
+                  })
+                )
+                entities.push(item)
+              }
+              that.getWellList()
+            }
+          })
+        }
+      }
+    },
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        this.playAudio()
+        this.refreshAlarm()
+      }
+    },
+    showAlarm(val) {
+      if (!val && this.currentWindow.windowType == 'alarm') {
+        this.currentWindow.visible = false
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    // 设置静态资源目录
+    buildModuleUrl.setBaseUrl('../static/Cesium/')
+    this.initcesium()
+  },
+  created() {
+    this.fetchWellType()
+  },
+  methods: {
+    changetype() {
+      var str = '3333'
+      if (this.listQuery.wellType !== '' && this.showAll) {
+        this.showAll = false
+      }
+      if (this.listQuery.wellType === '8') {
+        str = 'DX'
+      } else if (this.listQuery.wellType === '10') {
+        str = 'GS'
+      } else if (this.listQuery.wellType === '5') {
+        str = 'GD'
+      } else if (this.listQuery.wellType === '7') {
+        str = 'LD'
+      } else if (this.listQuery.wellType === '3') {
+        str = 'RQ'
+      } else if (this.listQuery.wellType === '4') {
+        str = 'RL'
+      } else if (this.listQuery.wellType === '2') {
+        str = 'WS'
+      } else if (this.listQuery.wellType === '1') {
+        str = 'YS'
+      }
+      for (var i = 0; i < typeList.length; i++) {
+        if (typeList[i].name.startsWith(str)) {
+          typeList[i].show = true
+        } else {
+          typeList[i].show = false
+        }
+      }
+    },
+    computeCircle(radius) {
+      var positions = []
+      for (var i = 0; i < 360; i++) {
+        var radians = Cesium.Math.toRadians(i)
+        positions.push(
+          new Cesium.Cartesian2(
+            radius * Math.cos(radians),
+            radius * Math.sin(radians)
+          )
+        )
+      }
+      return positions
+    },
+    // 初始化放这里
+    initcesium() {
+      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
+      // var myTerrain = Cesium.createWorldTerrain({
+      //   requestVertexNormals : true,
+      //   requestWaterMask: true,
+      //   name: 'terrain'
+      // })
+      // myTerrain = null
+      // 创建viewer实例
+      window.viewer = new Viewer('cesiumContainer',
+        {
+          geocoder: false, // 是否显示地名查找控件
+          infoBox: false,
+          animation: false, // 是否显示动画控件(左下方那个)
+          timeline: false, // 是否显示时间线控件
+          shadows: false, // 阴影是否被太阳投射
+          showldAnimate: true, // 让场景中的动画自动播放
+          sceneModePicker: false, // 是否显示投影方式控件
+          fullscreenButton: false, // 全屏按钮不显示
+          homeButton: false,
+          navigationHelpButton: false, // 帮助按钮
+          baseLayerPicker: false
+          // terrainProvider : myTerrain
+        })
+      window.viewer.imageryLayers._layers[0].show = false
+      window.viewer.scene.globe.baseColor = Cesium.Color.WHITE
+      var that = this
+      window.viewer.imageryLayers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
+        url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
+        // name: 'baselayer'
+      }))
+      window.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
+      window.viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ // 调用影响中文注记服务
+        url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=216ee92889e17ab1b083fae665d522b8',
+        layer: 'tdtAnnoLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        tileMatrixSetID: 'GoogleMapsCompatible'
+        // name: 'baselayer'
+      }))
+      window.viewer.scene.screenSpaceCameraController.enableCollisionDetection = false
+      // 倾斜视图 鼠标右键旋转
+      window.viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
+      // 缩放设置 重新设置缩放成员
+      window.viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+      // 鼠标左键平移
+      window.viewer.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+      var instance = new Cesium.GeometryInstance({
+        geometry: new Cesium.RectangleGeometry({
+          rectangle: Cesium.Rectangle.fromDegrees(116.2595, 39.9065, 116.2647, 39.908967),
+          height: 0,
+          vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
+        })
+      })
+      window.viewer.scene.primitives.add(new Cesium.Primitive({
+        geometryInstances: instance,
+        allowPicking: false,
+        appearance: new Cesium.EllipsoidSurfaceAppearance({
+          material: Cesium.Material.fromType('Color', {
+            color: new Cesium.Color(1.0, 1.0, 1.0, 0.2)
+          })
+        })
+      }))
+      // rectangle= window.viewer.entities.add({
+      //   name: 'under',
+      //   polyline : {
+      //     positions : Cesium.Cartesian3.fromDegreesArray([116.2595, 39.9065,
+      //       116.2647, 39.9065,
+      //       116.2647, 39.908967,
+      //       116.2595, 39.908967,
+      //       116.2595, 39.9065]),
+      //     width : 10,
+      //     clampToGround: true,
+      //     zIndex: 50,
+      //     material : Cesium.Color.RED
+      //   }});
+      // window.viewer.flyTo(rectangle)
+
+      rectangle = window.viewer.entities.add({
+        name: 'under',
+        polyline: {
+          positions: Cesium.Cartesian3.fromDegreesArray([
+            116.2595, 39.9065,
+            116.2647, 39.9065,
+            116.2647, 39.908967,
+            116.2595, 39.908967,
+            116.2595, 39.9065]),
+          width: 10,
+          clampToGround: true,
+          zIndex: 50,
+          material: Cesium.Color.RED
+        }})
+      window.viewer.flyTo(rectangle, {
+        offset: {
+          heading: 0,
+          pitch: Cesium.Math.toRadians(-90),
+          range: 500
+        }})
+
+      var that = this
+      var center = new Cesium.Cartesian3.fromDegrees(116.2555, 39.908358, 6)
+      var matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)
+      that.provider = new Cesium.ArcGisMapServerImageryProvider({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/erMapService/MapServer',
+        layers: ['7', '8', '9', '10', '11', '12', '13', '14']
+      })
+      that.provider_marker = new Cesium.ArcGisMapServerImageryProvider({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/erMapService/MapServer',
+        layers: ['5', '6']
+      })
+      window.viewer.scene.primitives.add(
+        Cesium.Model.fromGltf({
+          url: '../static/model/building.gltf',
+          scale: 0.8,
+          modelMatrix: matrix,
+          allowPicking: false
+        })
+      ).readyPromise.then(e => {
+        building = e
+      }).otherwise(e => {
+      })
+      var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)
+      handler.setInputAction(function(movement) {
+        var pick = window.viewer.scene.pick(movement['position'])
+        if (Cesium.defined(pick) && (pick.id.name !== 'under')) {
+          // 点击管线
+          if (pick.id.name === 'pipeline') {
+            that.trackPopUp = false
+            that.pipelineInfo = pick.id.description._value
+            that.currentWindow.visible = true
+            that.currentWindow.windowType = 'pipeline'
+            that.trackPopUp = true
+            movement['position'].z = 3000.0
+            var cartographic = Cesium.Cartographic.fromCartesian(movement['position'])
+            var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180]
+            var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0)
+            var id = pick.id._id.replace(/[^0-9]/ig, '')
+            var obj = { position: movement['position'], destination: destination }
+            that.infoWindow(obj)
+          }
+          // 点击报警
+          else if (pick.primitive.basePath === '../static/model/baojing.gltf') {
+            var position = Cesium.Cartesian3.fromDegrees(pick.id.position[0], pick.id.position[1], pick.id.position[2])
+            var c = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position) // 返回Cartesian2
+            console.log(c)
+            if (c === undefined) {
+              return
+            }
+            var obj = { position: c, entity: pick }
+            that.infoAlarmWindow(obj)
+            getWellByCode(pick.id.id).then(response => {
+              var id = response.data.id
+              if (id) {
+                that.openAlarmWindow(id, position)
+              }
+            })
+          }
+          // 点击井
+          else if (pick.primitive.basePath === '../static/model/yubi.gltf') {
+            that.trackPopUp = false
+            getWellByCode(pick.id.id).then(response => {
+              console.log(response)
+              var id = response.data.id
+              if (id) {
+                that.openInfoWindow(id)
+              }
+            })
+            movement['position'].z = 3000.0
+            var cartographic = Cesium.Cartographic.fromCartesian(movement['position'])
+            var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180]
+            var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0)
+            var obj = { position: movement['position'], destination: destination }
+            that.infoWellWindow(obj)
+          }
+        } else {
+          that.closeInfoWindow()
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    },
+    positionPopUp(c) {
+      try {
+        if (c === undefined) {
+          this.trackPopUp = false
+          if (this.removeHandler !== null) {
+            this.removeHandler.call()
+          }
+          return
+        }
+        var x = c.x - 130
+        var y = c.y - 150
+        this.winPosition = 'transform: translate3d(' + x + 'px, ' + y + 'px, 0)'
+      } catch (e) {
+        this.trackPopUp = false
+        if (this.removeHandler !== null) {
+          this.removeHandler.call()
+        }
+      }
+    },
+    infoWindow(obj) {
+      if (obj.position === undefined) {
+        return
+      }
+      var picked = window.viewer.scene.pick(obj.position)
+      if (Cesium.defined(picked)) {
+        var id = Cesium.defaultValue(picked.id, picked.primitive.id)
+        if (id instanceof Cesium.Entity) {
+          var c = new Cesium.Cartesian2(obj.position.x, obj.position.y)
+          this.positionPopUp(c) // Initial position
+          var that = this
+          if (this.removeHandler !== null) {
+            this.removeHandler.call()
+          }
+          this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
+            if (picked.id._polyline != null) {
+              var pos = {}
+              pos.x = (id._polyline._positions._value['0'].x + id._polyline._positions._value[1].x) / 2
+              pos.y = (id._polyline._positions._value['0'].y + id._polyline._positions._value[1].y) / 2
+              pos.z = (id._polyline._positions._value['0'].z + id._polyline._positions._value[1].z) / 2
+              var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, pos)
+            } else if (picked.id._polylineVolume != null) {
+              var pos = {}
+              pos.x = (id._polylineVolume._positions._value['0'].x + id._polylineVolume._positions._value[1].x) / 2
+              pos.y = (id._polylineVolume._positions._value['0'].y + id._polylineVolume._positions._value[1].y) / 2
+              pos.z = (id._polylineVolume._positions._value['0'].z + id._polylineVolume._positions._value[1].z) / 2
+              var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, pos)
+              if (changedC === undefined) {
+                return
+              }
+              changedC.y -= 170
+            } else {
+              var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, id._position._value)
+            }
+            if (changedC === undefined) {
+              return
+            }
+            if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+              that.positionPopUp(changedC)
+              c = changedC
+            }
+          })
+          return id
+        }
+      }
+    },
+    infoWellWindow(obj) {
+      if (obj.position === undefined) {
+        return
+      }
+      var picked = window.viewer.scene.pick(obj.position)
+      if (Cesium.defined(picked)) {
+        console.log(picked instanceof Cesium.Primitive)
+        var c = new Cesium.Cartesian2(obj.position.x, obj.position.y)
+        this.positionPopUp(c) // Initial position
+        var that = this
+        if (this.removeHandler !== null) {
+          this.removeHandler.call()
+        }
+        this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
+          var position = Cesium.Cartesian3.fromDegrees(picked.id.position[0], picked.id.position[1], picked.id.position[2])
+          var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position)
+          if (changedC === undefined) {
+            return
+          }
+          if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+            that.positionPopUp(changedC)
+            c = changedC
+          }
+        })
+      }
+    },
+    infoAlarmWindow(obj) {
+      var picked = obj.entity
+      if (Cesium.defined(picked)) {
+        var c = obj.position
+        c.y -= 150
+        this.positionPopUp(c) // Initial position
+        var that = this
+        if (this.removeHandler !== null) {
+          this.removeHandler.call()
+        }
+        this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
+          var position = Cesium.Cartesian3.fromDegrees(picked.id.position[0], picked.id.position[1], picked.id.position[2])
+          var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position)
+          if (changedC === undefined) {
+            return
+          }
+          changedC.y -= 150
+          if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+            that.positionPopUp(changedC)
+            c = changedC
+          }
+        })
+      }
+    },
+    closeInfoWindow() {
+      this.trackPopUp = false
+      if (this.removeHandler !== null) {
+        this.removeHandler.call()
+      }
+    },
+    init() {
+      this.refreshAlarm()
+    },
+    // 获取井类型，显示井类型下拉
+    fetchWellType() {
+      getWellType().then(response => {
+        this.wellTypeList = []
+        // 如果该用户支持的井类型只有一个，则不显示该筛选框
+        const wellTypes = this.$store.getters.wellTypes
+        for (const wellType of response.data) {
+          if (wellTypes.indexOf(wellType.value) !== -1) {
+            this.wellTypeList.push(wellType)
+          }
+        }
+        if (this.wellTypeList.length <= 1) {
+          this.showWellType = false
+        }
+      })
+    },
+    flytoinit() {
+      // if(rectangle!==null){
+      //   window.viewer.flyTo(rectangle)
+      // }
+      window.viewer.flyTo(rectangle, {
+        offset: {
+          heading: 0,
+          pitch: Cesium.Math.toRadians(-90),
+          range: 500
+        }})
+    },
+    // 获取全部井列表
+    getWellList() {
+      this.loading = true
+      console.log('getWellList')
+      getWellList(this.listQuery).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          this.markers = response.data
+          if (entities.length >= 0) {
+            for (var i = 0; i < entities.length; i++) {
+              alarmIcons[i].show = false
+              for (var j = 0; j < this.markers.length; j++) {
+                if (this.markers[j].wellCode === entities[i].id.id) {
+                  alarmIcons[i].show = true
+                  break
+                }
+              }
+            }
+          }
+        }
+      })
+    },
+    // 点击井详情气泡
+    openInfoWindow(wellId) {
+      this.currentWindow.visible = false
+      getWellInfo(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.wellInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            wellTypeName: wellInfo.wellTypeName,
+            deptName: wellInfo.deptName,
+            bfztName: wellInfo.bfztName,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
+          this.currentWindow.visible = true
+          this.currentWindow.windowType = 'info'
+          this.trackPopUp = true
+        }
+      })
+    },
+    // 刷新报警列表
+    refreshAlarm() {
+      console.log('refreshAlarm')
+      this.count = 60
+      this.loading = true
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          this.loading = false
+          // 获取当前报警列表
+          this.alarmListOri = response.data // 列表原始
+          this.alarmList = response.data
+          if (this.alarmList.length > 0) {
+            this.hasAlarm = true
+          }
+          this.alarmWells = []
+          for (const alarm of response.data) {
+            this.alarmWells.push({
+              wellCode: alarm.wellCode,
+              wellId: alarm.wellId,
+              position: [alarm.lngGaode, alarm.latGaode],
+              positionInfo: alarm.position,
+              visible: true
+            })
+            // }
+          }
+        }
+      })
+    },
+    // 点击报警详情
+    openAlarmWindow(wellId, position) {
+      // 旧弹窗不显示
+      this.currentWindow.visible = false
+      // this.filterIcon()
+      getWellAlarms(wellId).then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.alarmInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            deptName: wellInfo.deptName,
+            wellTypeName: wellInfo.wellTypeName,
+            alarms: wellInfo.alarmList,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = position
+          this.center = position
+          this.currentWindow.visible = true
+          this.currentWindow.windowType = 'alarm'
+          this.trackPopUp = true
+        }
+      })
+    },
+    // 点击报警列表
+    alarmRowClick(row, column, event) {
+      console.log('alarmRowClick')
+      console.log(row)
+      const wellId = row.wellCode
+      for (const alarmWell of alarmIcons) {
+        if (alarmWell.id.id === wellId) {
+          window.viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(alarmWell.id.position[0], alarmWell.id.position[1], alarmWell.id.position[2] + 2.5),
+            orientation: {
+              heading: Cesium.Math.toRadians(0),
+              pitch: Cesium.Math.toRadians(-90),
+              range: 18
+            }
+          })
+          // window.viewer.flyTo(alarmWell,{
+          //   offset : {
+          //     heading : Cesium.Math.toRadians(0.0),
+          //       pitch : Cesium.Math.toRadians(-18),
+          //       range : 18
+          //   }})
+          var position = Cesium.Cartesian3.fromDegrees(alarmWell.id.position[0], alarmWell.id.position[1], alarmWell.id.position[2])
+          var c = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position) // 返回Cartesian2
+          if (c === undefined) {
+            return
+          }
+          var obj = { position: c, entity: alarmWell }
+          this.infoAlarmWindow(obj)
+          console.log(row.wellId)
+          // getWellByCode(alarmWell.id.id).then(response => {
+          //   var id = response.data.id
+          //   if(id){
+          //     that.openAlarmWindow(id, position)
+          //   }
+          // })
+          this.openAlarmWindow(row.wellId, position)
+        }
+      }
+    },
+    // 获取当前deptid的所有下级id,仅最多支持3级
+    fetchDeptList(deptid) {
+      console.log('fetchDeptList')
+      const deptids = [deptid] // 储存了该pid和其子集
+      const deptlist = this.$refs.deptSelect.fetchDeptTree()
+      for (const dept of deptlist) {
+        if (dept.pid === deptid) {
+          deptids.push(dept.id)
+        }
+      }
+      const result = []
+      // 查找所有列表中有没有deptids里面的本人或子集
+      if (deptlist.length > 0) {
+        for (const dept of deptlist) {
+          if (deptids.indexOf(dept.id) !== -1) {
+            result.push(dept.id)
+          } else if (deptids.indexOf(dept.pid) !== -1) {
+            result.push(dept.id)
+          }
+        }
+      }
+      console.log(result)
+      return result
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  @CHARSET "UTF-8";
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    background-color: rgba(255, 234, 241,0.8);
+    top: 40px;
+    left: 0px;
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 504px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      /*background-color: rgba(255, 229, 230, 0.8);*/
+      padding: 7px 0px;
+    }
+    .el-table td{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+      padding: 5px 0px;
+      /*line-height: 1;*/
+    }
+    .el-table td:hover{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 0px;
+    z-index: 11111;
+    .map-demo{
+      z-index: 11111;
+      width: 100%;
+      height: calc(100vh - 146px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width: 29px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+
+      /*leaflet风格气泡窗口样式模板*/
+      .leaflet-popup {
+        z-index: 999;
+        position: absolute;
+        text-align: center;
+      }
+      .leaflet-popup-close-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 4px 4px 0 0;
+        text-align: center;
+        width: 18px;
+        height: 14px;
+        font: 16px/14px Tahoma, Verdana, sans-serif;
+        color: #c3c3c3;
+        text-decoration: none;
+        font-weight: bold;
+        background: transparent;
+      }
+      .leaflet-popup-content-wrapper {
+        text-align: center;
+        /*max-height: 200px;*/
+        overflow-y: auto;
+        background: white;
+        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+        padding: 1px;
+        text-align: left;
+        border-radius: 12px;
+      }
+      .leaflet-popup-content {
+        z-index: 99999;
+        /*height: 200px;*/
+        margin: 10px 10px;
+        /*line-height: 1.4;*/
+        .info-window{
+          z-index: 100001;
+          max-width: 260px;
+          min-width:200px;
+          .info-header{
+            padding: 5px 8px 0px 8px;
+            line-height: 30px;
+            font-weight: bold;
+          }
+          .info-body{
+            padding: 5px 10px 10px 10px;
+            line-height: 23px;
+            font-size: 14px;
+          }
+        }
+        .alarm-window{
+          z-index: 100002;
+          max-width: 250px;
+          .alarm-header {
+            padding: 5px 8px 0px 8px;
+            line-height: 30px;
+            color: red;
+            font-weight: bold;
+          }
+          .alarm-body{
+            padding: 5px 10px 10px 10px;
+            line-height: 23px;
+            font-size: 14px;
+            .alarm-red{
+              color: #ff0000;
+            }
+          }
+        }
+      }
+      .leaflet-popup-tip-container {
+        margin: 0 auto;
+        width: 200px;
+        height: 100px;
+        position: relative;
+        overflow: hidden;
+      }
+      .leaflet-popup-tip {
+        background: white;
+        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+        width: 17px;
+        height: 17px;
+        padding: 1px;
+        margin: -10px auto 0;
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+      }
+    }
+  }
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+  /*按钮样式*/
+  .add-button{
+  }
+</style>
diff --git a/src/views/gasOverview/overviewCesium.vue b/src/views/gasOverview/overviewCesium.vue
new file mode 100644
index 0000000..9915f5f
--- /dev/null
+++ b/src/views/gasOverview/overviewCesium.vue
@@ -0,0 +1,1211 @@
+<!--suppress ALL -->
+<template>
+  <div>
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item>
+            <el-input v-model.trim="listQuery.keywords" placeholder="井编号/地址" clearable size="small"/>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="listQuery.wellType" placeholder="选择井类型" @change="changetype" clearable size="small">
+              <el-option
+                v-for="item in wellTypeList"
+                :key="'welltype_'+item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+
+          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getWellList" size="small" style="margin-top: 2px">搜索</el-button>
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部井</el-checkbox>
+          </el-form-item>
+          <el-form-item >
+            <el-slider v-model="alpha" style="width: 150px"></el-slider>
+          </el-form-item>
+          <el-form-item style="margin-left:5px">
+            <el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flytoinit"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>
+    </div>
+    <div v-if="showAlarm==true && alarmWells.length>0" class="map-alarm-div">
+      <div class="map-alarm-div-header">
+        告警列表
+        <span class="icon-right" @click="tableShow=!tableShow">
+          <i v-if="tableShow" class="el-icon-arrow-up"/>
+          <i v-else class="el-icon-arrow-down"/>
+        </span>
+      </div>
+      <transition name="el-collapse-transition">
+        <el-scrollbar
+          v-show="tableShow"
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:alarmList.length>6}"
+          :native="false">
+          <el-table
+            :data="alarmList"
+            class="alarm-list-table"
+            border
+            @row-dblclick="alarmRowClick">
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+      </transition>
+    </div>
+    <div class="overview-map-container">
+      <!--地图-->
+      <div id="cesiumContainer"  class="map-demo">
+        <div id="trackPopUp" v-if="trackPopUp">
+          <div id="trackPopUpContent" class="leaflet-popup" :style="winPosition">
+            <el-button type="text" class="leaflet-popup-close-button" href="#" @click="closeInfoWindow">×</el-button>
+            <div class="leaflet-popup-content-wrapper">
+              <div id="trackPopUpLink" class="leaflet-popup-content" style="width: 240px;">
+                <div v-if="currentWindow.windowType=='pipeline'?true:false" class="info-window">
+                  <div class="info-header">{{ pipelineInfo.Handle }}</div>
+                  <div class="info-body">
+                    <div>编号：{{ pipelineInfo.编号 }}</div>
+                    <div>管径：{{ pipelineInfo.管径 }}</div>
+                    <div>材质：{{ pipelineInfo.材质 }}</div>
+                    <div>所属道路：{{ pipelineInfo.所属道路 }}</div>
+                    <div>起始埋深：{{ pipelineInfo.起始埋深 }}</div>
+                    <div>终止埋深：{{ pipelineInfo.终止埋深 }}</div>
+                    <div>起始地面高：{{ pipelineInfo.起始地面高 }}</div>
+                    <div>终止地面高：{{ pipelineInfo.终止地面高 }}</div>
+                  </div>
+                </div>
+                <div v-if="currentWindow.windowType=='info'?true:false" class="info-window">
+                  <div class="info-header">{{ wellInfo.wellCode }}</div>
+                  <div class="info-body">
+                    <div>井类型：{{ wellInfo.wellTypeName }}</div>
+                    <div>权属单位：{{ wellInfo.deptName }}</div>
+                    <div>详细地址：{{ wellInfo.position }}</div>
+                  </div>
+                </div>
+                <div v-if="currentWindow.windowType=='alarm'?true:false" class="alarm-window">
+                  <div class="alarm-header">
+                    <svg-icon icon-class="alarm-red" />
+                    {{ alarmInfo.wellCode }}
+                  </div>
+                  <div class="alarm-body">
+                    <div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
+                      <div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
+                      <div>设备编号：<span>{{ alarm.devcode }}</span></div>
+                    </div>
+                    <el-divider/>
+                    <div>井类型：{{ alarmInfo.wellTypeName }}</div>
+                    <div>权属单位：{{ alarmInfo.deptName }}</div>
+                    <div>详细地址：{{ alarmInfo.position }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="leaflet-popup-tip-container">
+              <div class="leaflet-popup-tip"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import SelectTree from '@/components/SelectTree/singleSelect'
+  import { getWellType } from '@/api/well'
+  import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode } from '@/api/overview'
+  import DeptSelect from '../../components/DeptSelect/index'
+
+  import Viewer from 'cesium/Source/Widgets/Viewer/Viewer'    // 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
+  import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'    // 让Cesium知道静态资源在哪里的API
+  import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
+  var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+  var rectangle = null
+  var building = null
+  var entities= []
+  var alarmIcons= []
+  var typeList = []
+  export default {
+    name: 'OverviewCesium',
+    components: { DeptSelect, SelectTree },
+    data() {
+      return {
+        // rectangle: null,
+        // building: null,
+        // viewer: null,
+        type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+        refreshType: 'clock', // 刷新数据方式：clock或websocket
+        showAlarm: true, // 是否显示报警
+        showAll: false, // 是否显示全部井
+        alpha: 100, // 是否显示全部井
+        listQuery: {
+          keywords: '', // 关键字
+          wellType: '', // 井类型
+          deptid: '', // 组织机构
+          isAlarm: '1' // 是否报警
+        }, // 筛选条件
+        columns: [
+          {
+            text: '井编号',
+            value: 'wellCode',
+            width: 220,
+            align: 'center'
+          },
+          {
+            text: '设备编号',
+            value: 'devcode',
+            width: 120,
+            align: 'center'
+          },
+          {
+            text: '告警原因',
+            value: 'alarmContent',
+            align: 'center',
+            width: 120
+          },
+          {
+            text: '时间',
+            value: 'alarmTime',
+            width: 160,
+            align: 'center'
+          }
+        ], // 告警列表显示列
+        tableShow: true, // 是否显示告警列表
+        tableIcon: 'el-icon-arrow-up',
+        showWellType: this.showWellType(), // 是 否显示井类型下拉
+        wellTypeList: [], // 井类型列表
+        showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+        commonIcon: 'well-common-green', // 通用图标 绿
+        commonIconAlarm: 'well-common-red', // 通用图标 红
+        center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+        zoom: 12, // 地图缩放比例
+        markers: [], // 所有井的点原始数据
+        alarmListOri: [], // 原始报警列表
+        alarmList: [], // 报警列表
+        alarmWells: [], // 报警井列表
+        offset: [-10, -10], // 偏移量
+        alarmOffset: [-15, -30], // 偏移量
+        winPosition:'',
+        wellInfo: {
+          wellCode: '',
+          position: '',
+          wellTypeName: '',
+          deptName: '',
+          bfztName: '',
+          deep: ''
+        }, // 显示井详细信息气泡内容
+        pipelineInfo: {
+          Build_Com: "",
+          Build_Date: "",
+          Build_Per: "",
+          Cable_Type: "",
+          Code: "",
+          D_Type: "",
+          起始埋深: "",
+          终止埋深: "",
+          Design_Com: "",
+          Design_Per: "",
+          管径: "",
+          编号: "",
+          起始地面高: "",
+          终止地面高: "",
+          Handle: "",
+          材质: "",
+          所属道路: "",
+          Mon_Com: "",
+          Mon_Per: "",
+          Shape: "",
+          Street: "",
+          Top_H1: "",
+          Top_H2: "",
+          Use_Years: "",
+          x1: "",
+          x2: "",
+          y1: "",
+          y2: ""
+        }, // 显示井详细信息气泡内容
+        alarmInfo: {
+          wellCode: '',
+          deptName: '',
+          position: '',
+          deep: '',
+          alarms: []
+        }, // 显示报警详情气泡内容
+        currentWindow: {
+          visible: false, // 窗体显示与否
+          position: [this.$store.getters.lng, this.$store.getters.lat],
+          windowType: 'info' // 窗体类型：详情info或报警alarm
+        }, // 当前窗体属性
+        infoWindowClass: 'nomal-info-window',
+        deptShowTop: false, // 是否显示顶级
+        clock: null, // 计时器
+        hasAlarm: false, // 是否有报警,
+        loading: true, // 加载图标是否显示
+        trackPopUp:false,
+        removeHandler:null,
+        provider: null,
+        provider_marker: null,
+        promise_marker: null,
+        showClearBtn: false // 是否显示清除查询按钮
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'needRefresh'
+      ])
+    },
+    mounted() {
+      this.init()
+      // 设置静态资源目录
+      buildModuleUrl.setBaseUrl('../static/Cesium/')
+      this.initcesium()
+    },
+    watch: {
+      alpha(val){
+        window.viewer.imageryLayers._layers.forEach(layer => {
+          layer.alpha = val/100; // 我们可以设置为0
+        })
+        // console.log(this.building)
+        if(building!==null){
+          building.color.alpha = val/100
+        }
+      },
+      showAll(val) {
+        console.log(typeList[1])
+        if (val) { // 显示全部
+          for(var i=0;i<typeList.length;i++){
+            typeList[i].show = true
+          }
+        } else { // 仅显示报警
+          for(var i=0;i<typeList.length;i++){
+            typeList[i].show = false
+          }
+          this.changetype()
+        }
+      },
+      'provider.ready':{
+        handler: function() {
+          if(this.provider.ready){
+            var promise = this.provider.pickFeatures(1372,698,0,2.0252993224201554,0.4725502746921085)
+            var that = this
+            Cesium.when(promise, function(layerInfo) {
+              console.log(layerInfo)
+              //查询结果展示
+              if (layerInfo && layerInfo.length > 0) {
+                for(var i=0;i<layerInfo.length;i++){
+                  that.addLine(layerInfo[i])
+                }
+              }
+            })
+          }
+        }
+      },
+      'provider_marker.ready':{
+        handler: function() {
+          if(this.provider_marker.ready){
+            this.promise_marker = this.provider_marker.pickFeatures(1372,698,0,2.0252993224201554,0.4725502746921085)
+            var that = this
+            Cesium.when(this.promise_marker, function(layerInfo) {
+              console.log(layerInfo)
+              //查询结果展示
+              if (layerInfo && layerInfo.length > 0) {
+                for(var i=0;i<layerInfo.length;i++){
+                  that.addWell(layerInfo[i])
+                }
+                that.getWellList()
+              }
+            })
+          }
+        }
+      },
+      needRefresh(val) {
+        // 需要刷新
+        if (val) {
+          this.playAudio()
+          this.refreshAlarm()
+        }
+      },
+      showAlarm(val){
+        if(!val && this.currentWindow.windowType=='alarm'){
+          this.currentWindow.visible = false
+        }
+      }
+    },
+    created() {
+      this.fetchWellType()
+    },
+    methods: {
+      async addLine(val){
+        let that = this
+        var item = val.data.geometry.paths[0];
+        var d1 = parseFloat(val.data.attributes.起始埋深)
+        var d2 = parseFloat(val.data.attributes.终止埋深)
+        var pos = [
+          item[0][0],item[0][1],-d1,
+          item[1][0],item[1][1],-d2
+        ]
+        var color = Cesium.Color.YELLOW
+        if(val.data.layerId === 4){
+          color = Cesium.Color.STEELBLUE
+        }else if(val.data.layerId === 5){
+          color = Cesium.Color.BROWN
+        }
+        // else if(val.data.attributes.备注 === 'GSGX'){
+        //   color = Cesium.Color.BLUE
+        // }else if(val.data.attributes.备注 === 'GDGX'){
+        //   color = Cesium.Color.ORANGE
+        // }else if(val.data.attributes.备注 === 'LDGX'){
+        //   color = Cesium.Color.PALEGOLDENROD
+        // }else if(val.data.attributes.备注 === 'RQGX'){
+        //   color = Cesium.Color.RED
+        // }else if(val.data.attributes.备注 === 'RLGX'){
+        //   color = Cesium.Color.BROWN
+        // }else if(val.data.attributes.备注 === 'WSGX'){
+        //   color = Cesium.Color.GRAY
+        // }else if(val.data.attributes.备注 === 'YSGX'){
+        //   color = Cesium.Color.DODGERBLUE
+        // }
+        val.data.attributes.Handle = val.data.layerName.split('.')[2]
+        if(pos[0]===pos[3]&&pos[1]===pos[4]){
+          var d = d1<d2?d1:d2
+          var entity = window.viewer.entities.add({
+            name: 'pipeline',
+            description: val.data.attributes,
+            position: Cesium.Cartesian3.fromDegrees(pos[0],pos[1],-(d1+d2)/2),
+            cylinder : {
+              length : Math.abs(d2-d1),
+              topRadius : val.data.attributes.管径/1000,//圆柱体的顶部半径。
+              bottomRadius : val.data.attributes.管径/1000,//    圆柱体底部的半径。
+              material: color,
+            }})
+        }else{
+          var entity = window.viewer.entities.add({
+            name: 'pipeline',
+            description: val.data.attributes,
+            polylineVolume: {
+              positions: Cesium.Cartesian3.fromDegreesArrayHeights( pos ),
+              shape: that.computeCircle(val.data.attributes.管径/1000),
+              material: color,
+            }});
+        }
+      },
+      async addWell(val){
+        let center=new Cesium.Cartesian3.fromDegrees(val.data.geometry.x,val.data.geometry.y, -parseFloat(val.data.attributes.井深)+2.5)
+        let matrix=Cesium.Transforms.eastNorthUpToFixedFrame(center)
+        let icon = window.viewer.scene.primitives.add(
+          Cesium.Model.fromGltf({
+            id:{
+              id:val.data.attributes.编号 ,
+              position:[val.data.geometry.x,val.data.geometry.y, -parseFloat(val.data.attributes.井深)+2.5]
+            },
+            url:'../static/model/baojing.gltf',
+            color:Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(1.0)),//包含透明度的颜色
+            scale: 1,
+            minimumPixelSize:50,
+            maximumScale:2,
+            colorBlendMode:Cesium.ColorBlendMode['MIX'],//常用的有三个HIGHLIGHT,REPLACE,MIX
+            colorBlendAmount:0.1,//这个属性必须是MIX混合属性才能生效,见colorBlendMode
+            modelMatrix:matrix,
+            allowPicking:true,
+            show: false
+          })
+        )
+        icon.show = false
+        alarmIcons.push(icon)
+
+        let color = Cesium.Color.YELLOW
+        if(val.data.attributes.附属物名称.startsWith('雨')){
+          color = Cesium.Color.STEELBLUE
+        }else if(val.data.attributes.附属物名称.startsWith('污') ){
+          color = Cesium.Color.BROWN
+        }
+        let type = window.viewer.entities.add({
+          name:  val.data.attributes.附属物名称,
+          position: Cesium.Cartesian3.fromDegrees(val.data.geometry.x,val.data.geometry.y, -parseFloat(val.data.attributes.井深)+1.5),
+          point: {
+            color: color,
+            pixelSize: 10,
+            outlineColor: Cesium.Color.WHITE,
+            outlineWidth: 2,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY
+          }
+        });
+        type.show = false
+        typeList.push(type)
+
+        center=new Cesium.Cartesian3.fromDegrees(val.data.geometry.x,val.data.geometry.y, -parseFloat(val.data.attributes.井深))
+        matrix=Cesium.Transforms.eastNorthUpToFixedFrame(center)
+        let item = window.viewer.scene.primitives.add(
+          Cesium.Model.fromGltf({
+            id:{
+              id:val.data.attributes.编号 ,
+              position:[val.data.geometry.x,val.data.geometry.y, -parseFloat(val.data.attributes.井深)]
+            },
+            url:'../static/model/yubi.gltf',
+            scale:2,
+            modelMatrix:matrix,
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 1000),
+            allowPicking:true
+          })
+        )
+        entities.push(item)
+      },
+      changetype(){
+        var str = '3333'
+        if(this.listQuery.wellType !=='' && this.showAll){
+          this.showAll = false
+        }
+        if(this.listQuery.wellType === '8'){
+          str = 'DX'
+        }else if(this.listQuery.wellType === '10'){
+          str = 'GS'
+        }else if(this.listQuery.wellType === '5'){
+          str = 'GD'
+        }else if(this.listQuery.wellType === '7'){
+          str = 'LD'
+        }else if(this.listQuery.wellType === '3'){
+          str = 'RQ'
+        }else if(this.listQuery.wellType === '4'){
+          str = 'RL'
+        }else if(this.listQuery.wellType === '2'){
+          str = '污'
+        }else if(this.listQuery.wellType === '1'){
+          str = '雨'
+        }
+        for(var i=0;i<typeList.length;i++){
+          if(typeList[i].name.startsWith(str)){
+            typeList[i].show = true
+          }else{
+            typeList[i].show = false
+          }
+        }
+      },
+      computeCircle (radius) {
+        var positions = [];
+        for (var i = 0; i < 360; i++) {
+          var radians = Cesium.Math.toRadians(i);
+          positions.push(
+            new Cesium.Cartesian2(
+              radius * Math.cos(radians),
+              radius * Math.sin(radians)
+            )
+          );
+        }
+        return positions;
+      },
+      // 初始化放这里
+      initcesium() {
+        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
+        // 创建viewer实例
+        window.viewer = new Viewer('cesiumContainer',
+          {
+            geocoder: false, //是否显示地名查找控件
+            infoBox: false,
+            animation: false, //是否显示动画控件(左下方那个)
+            timeline: false, //是否显示时间线控件
+            shadows: false, // 阴影是否被太阳投射
+            showldAnimate: true, //让场景中的动画自动播放
+            sceneModePicker: false, //是否显示投影方式控件
+            fullscreenButton: false, //全屏按钮不显示
+            homeButton: false,
+            navigationHelpButton: false,//帮助按钮
+            baseLayerPicker: false,
+            // terrainProvider : myTerrain
+          })
+        window.viewer.imageryLayers._layers[0].show = false
+        window.viewer.scene.globe.baseColor = Cesium.Color.WHITE;
+        var that = this
+        window.viewer.imageryLayers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
+          url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
+          // name: 'baselayer'
+        }));
+        window.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
+        window.viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文注记服务
+          url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=216ee92889e17ab1b083fae665d522b8",
+          layer: "tdtAnnoLayer",
+          style: "default",
+          format: "image/jpeg",
+          tileMatrixSetID: "GoogleMapsCompatible",
+          // name: 'baselayer'
+        }));
+        window.viewer.scene.screenSpaceCameraController.enableCollisionDetection = false
+        // 倾斜视图 鼠标右键旋转
+        window.viewer.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG ]
+        // 缩放设置 重新设置缩放成员
+        window.viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+        // 鼠标左键平移
+        window.viewer.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+        var instance = new Cesium.GeometryInstance({
+          geometry: new Cesium.RectangleGeometry({
+            rectangle: Cesium.Rectangle.fromDegrees(116.04, 27.74,116.147, 27.795),
+            height : 0,
+            vertexFormat:Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
+          })
+        });
+        window.viewer.scene.primitives.add(new Cesium.Primitive({
+          geometryInstances: instance,
+          allowPicking: false,
+          appearance: new Cesium.EllipsoidSurfaceAppearance({
+            material:Cesium.Material.fromType('Color', {
+              color : new Cesium.Color(1.0, 1.0, 1.0, 0.2)
+            })
+          })
+        }));
+
+        rectangle= window.viewer.entities.add({
+          name: 'under',
+          polyline : {
+            positions : Cesium.Cartesian3.fromDegreesArray([
+              116.04, 27.74,
+              116.147, 27.74,
+              116.147, 27.795,
+              116.04, 27.795,
+              116.04, 27.74]),
+            width : 10,
+            clampToGround: true,
+            zIndex: 50,
+            material : Cesium.Color.RED
+          }});
+        window.viewer.flyTo(rectangle,{
+          offset : {
+            heading : 0,
+            pitch : Cesium.Math.toRadians(-90),
+            range : 12000
+          }})
+
+        var that = this;
+        var center=new Cesium.Cartesian3.fromDegrees(116.2555, 39.908358,6)
+        var matrix=Cesium.Transforms.eastNorthUpToFixedFrame(center)
+        that.provider = new Cesium.ArcGisMapServerImageryProvider({
+          url:'http://111.198.10.15:13002/arcgis/rest/services/crgx/MapServer',
+          layers:['4','5']
+        })
+        that.provider_marker = new Cesium.ArcGisMapServerImageryProvider({
+          url:'http://111.198.10.15:13002/arcgis/rest/services/crgx/MapServer',
+          layers:['0', '3']
+        });
+        // window.viewer.scene.primitives.add(
+        //   Cesium.Model.fromGltf({
+        //     url:'../static/model/building.gltf',
+        //     scale:0.8,
+        //     modelMatrix:matrix,
+        //     allowPicking:false
+        //   })
+        // ).readyPromise.then(e=>{
+        //   building = e
+        // }).otherwise(e=>{
+        // })
+        var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
+        handler.setInputAction(function (movement) {
+          var pick = window.viewer.scene.pick(movement["position"]);
+          if (Cesium.defined(pick) && (pick.id.name !== 'under')) {
+            //点击管线
+            if(pick.id.name === 'pipeline'){
+              that.trackPopUp = false
+              that.pipelineInfo = pick.id.description._value
+              that.currentWindow.visible = true
+              that.currentWindow.windowType = 'pipeline'
+              that.trackPopUp = true
+              movement['position'].z = 3000.0
+              var cartographic = Cesium.Cartographic.fromCartesian(movement['position'])
+              var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180]
+              var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0)
+              var id = pick.id._id.replace(/[^0-9]/ig, "")
+              var obj = { position: movement["position"], destination: destination }
+              that.infoWindow(obj)
+            }
+            //点击报警
+            else if(pick.primitive.basePath==="../static/model/baojing.gltf"){
+              var position = Cesium.Cartesian3.fromDegrees(pick.id.position[0], pick.id.position[1], pick.id.position[2]);
+              var c = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position)  //返回Cartesian2
+              console.log(c)
+              if(c === undefined){
+                return
+              }
+              var obj = { position: c,entity:pick}
+              that.infoAlarmWindow(obj)
+              getWellByCode(pick.id.id).then(response => {
+                var id = response.data.id
+                if(id){
+                  that.openAlarmWindow(id, position)
+                }
+              })
+            }
+            //点击井
+            else if(pick.primitive.basePath==="../static/model/yubi.gltf"){
+              that.trackPopUp = false
+              getWellByCode(pick.id.id).then(response => {
+                console.log(response)
+                var id = response.data.id
+                if(id){
+                  that.openInfoWindow(id)
+                }
+              })
+              movement['position'].z = 3000.0
+              var cartographic = Cesium.Cartographic.fromCartesian(movement['position'])
+              var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180]
+              var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0)
+              var obj = { position: movement["position"], destination: destination }
+              that.infoWellWindow(obj)
+            }
+          }
+          else{
+            that.closeInfoWindow()
+          }
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      },
+      positionPopUp (c) {
+        try{
+          if(c === undefined){
+            this.trackPopUp = false
+            if(this.removeHandler!==null){
+              this.removeHandler.call()
+            }
+            return ;
+          }
+          var x = c.x - 130;
+          var y = c.y - 150;
+          this.winPosition = 'transform: translate3d('+x+'px, '+y+'px, 0)'
+        }catch (e) {
+          this.trackPopUp = false
+          if(this.removeHandler!==null){
+            this.removeHandler.call()
+          }
+        }
+      },
+      infoWindow(obj) {
+        if( obj.position === undefined ){
+          return
+        }
+        var picked = window.viewer.scene.pick(obj.position);
+        if (Cesium.defined(picked)) {
+          var id = Cesium.defaultValue(picked.id, picked.primitive.id);
+          if (id instanceof Cesium.Entity) {
+            var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
+            this.positionPopUp(c); // Initial position
+            var that = this
+            if(this.removeHandler!==null){
+              this.removeHandler.call()
+            }
+            this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
+              if (picked.id._polyline != null) {
+                var pos = {};
+                pos.x = (id._polyline._positions._value["0"].x + id._polyline._positions._value[1].x) / 2;
+                pos.y = (id._polyline._positions._value["0"].y + id._polyline._positions._value[1].y) / 2;
+                pos.z = (id._polyline._positions._value["0"].z + id._polyline._positions._value[1].z) / 2;
+                var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, pos);
+              }else if (picked.id._polylineVolume != null) {
+                var pos = {};
+                pos.x = (id._polylineVolume._positions._value["0"].x + id._polylineVolume._positions._value[1].x) / 2;
+                pos.y = (id._polylineVolume._positions._value["0"].y + id._polylineVolume._positions._value[1].y) / 2;
+                pos.z = (id._polylineVolume._positions._value["0"].z + id._polylineVolume._positions._value[1].z) / 2;
+                var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, pos);
+                if(changedC === undefined){
+                  return
+                }
+                changedC.y -= 170
+              } else {
+                var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, id._position._value);
+              }
+              if(changedC === undefined){
+                return
+              }
+              if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+                that.positionPopUp(changedC);
+                c = changedC;
+              }
+            });
+            return id;
+          }
+        }
+      },
+      infoWellWindow(obj) {
+        if( obj.position === undefined ){
+          return
+        }
+        var picked = window.viewer.scene.pick(obj.position);
+        if (Cesium.defined(picked)) {
+          console.log(picked instanceof Cesium.Primitive)
+          var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
+          this.positionPopUp(c); // Initial position
+          var that = this
+          if(this.removeHandler!==null){
+            this.removeHandler.call()
+          }
+          this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
+            var position = Cesium.Cartesian3.fromDegrees(picked.id.position[0], picked.id.position[1], picked.id.position[2]);
+            var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position);
+            if(changedC === undefined){
+              return
+            }
+            if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+              that.positionPopUp(changedC);
+              c = changedC;
+            }
+          });
+        }
+      },
+      infoAlarmWindow(obj) {
+        var picked = obj.entity
+        if (Cesium.defined(picked)) {
+          var c = obj.position
+          c.y-=150
+          this.positionPopUp(c); // Initial position
+          var that = this
+          if(this.removeHandler!==null){
+            this.removeHandler.call()
+          }
+          this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
+            var position = Cesium.Cartesian3.fromDegrees(picked.id.position[0], picked.id.position[1], picked.id.position[2])
+            var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position);
+            if(changedC === undefined){
+              return
+            }
+            changedC.y-=150
+            if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
+              that.positionPopUp(changedC);
+              c = changedC;
+            }
+          });
+        }
+      },
+      closeInfoWindow(){
+        this.trackPopUp = false
+        if(this.removeHandler!==null){
+          this.removeHandler.call()
+        }
+      },
+      init() {
+        this.refreshAlarm()
+      },
+      // 获取井类型，显示井类型下拉
+      fetchWellType() {
+        getWellType().then(response => {
+          this.wellTypeList = []
+          // 如果该用户支持的井类型只有一个，则不显示该筛选框
+          // const wellTypes = this.$store.getters.wellTypes
+          for (const wellType of response.data) {
+            // if (wellTypes.indexOf(wellType.value) !== -1) {
+              this.wellTypeList.push(wellType)
+            // }
+          }
+          if (this.wellTypeList.length <= 1) {
+            this.showWellType = false
+          }
+        })
+      },
+      flytoinit(){
+        // if(rectangle!==null){
+        //   window.viewer.flyTo(rectangle)
+        // }
+        window.viewer.flyTo(rectangle,{
+          offset : {
+            heading : 0,
+            pitch : Cesium.Math.toRadians(-90),
+            range : 500
+          }})
+      },
+      // 获取全部井列表
+      getWellList() {
+        this.loading = true
+        console.log('getWellList')
+        getWellList(this.listQuery).then(response => {
+          this.loading = false
+          if (response.code === 200) {
+            this.markers = response.data
+            if(entities.length>=0){
+              for(var i=0;i<entities.length;i++){
+                alarmIcons[i].show = false
+                for(var j=0;j<this.markers.length;j++){
+                  if(this.markers[j].wellCode === entities[i].id.id){
+                    alarmIcons[i].show = true
+                    break
+                  }
+                }
+              }
+            }
+          }
+        })
+      },
+      // 点击井详情气泡
+      openInfoWindow(wellId) {
+        this.currentWindow.visible = false
+        getWellInfo(wellId).then(response => {
+          if (response.code === 200) {
+            const wellInfo = response.data
+            this.wellInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              wellTypeName: wellInfo.wellTypeName,
+              deptName: wellInfo.deptName,
+              bfztName: wellInfo.bfztName,
+              deep: wellInfo.deep
+            }
+            this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'info'
+            this.trackPopUp = true
+          }
+        })
+      },
+      // 刷新报警列表
+      refreshAlarm() {
+        console.log('refreshAlarm')
+        this.count = 60
+        this.loading = true
+        getAlarmsNow().then(response => {
+          if (response.code === 200) {
+            this.loading = false
+            // 获取当前报警列表
+            this.alarmListOri = response.data // 列表原始
+            this.alarmList = response.data
+            if (this.alarmList.length > 0) {
+              this.hasAlarm = true
+            }
+            this.alarmWells = []
+            for (const alarm of response.data) {
+              this.alarmWells.push({
+                wellCode: alarm.wellCode,
+                wellId: alarm.wellId,
+                position: [alarm.lngGaode, alarm.latGaode],
+                positionInfo: alarm.position,
+                visible: true
+              })
+              // }
+            }
+          }
+        })
+      },
+      // 点击报警详情
+      openAlarmWindow(wellId, position) {
+        // 旧弹窗不显示
+        this.currentWindow.visible = false
+        // this.filterIcon()
+        getWellAlarms(wellId).then(response => {
+          console.log(response)
+          if (response.code === 200) {
+            const wellInfo = response.data
+            this.alarmInfo = {
+              wellCode: wellInfo.wellCode,
+              position: wellInfo.position,
+              deptName: wellInfo.deptName,
+              wellTypeName: wellInfo.wellTypeName,
+              alarms: wellInfo.alarmList,
+              deep: wellInfo.deep
+            }
+            this.currentWindow.position = position
+            this.center = position
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'alarm'
+            this.trackPopUp = true
+          }
+        })
+      },
+      // 点击报警列表
+      alarmRowClick(row, column, event) {
+        console.log('alarmRowClick')
+        console.log(row)
+        const wellId = row.wellCode
+        for (const alarmWell of alarmIcons) {
+          if (alarmWell.id.id === wellId) {
+            window.viewer.camera.flyTo({
+              destination : Cesium.Cartesian3.fromDegrees(alarmWell.id.position[0], alarmWell.id.position[1], alarmWell.id.position[2]+2.5),
+              orientation  : {
+                heading : Cesium.Math.toRadians(0),
+                pitch : Cesium.Math.toRadians(-90),
+                range : 18
+              }
+            });
+            // window.viewer.flyTo(alarmWell,{
+            //   offset : {
+            //     heading : Cesium.Math.toRadians(0.0),
+            //       pitch : Cesium.Math.toRadians(-18),
+            //       range : 18
+            //   }})
+            var position = Cesium.Cartesian3.fromDegrees(alarmWell.id.position[0], alarmWell.id.position[1], alarmWell.id.position[2]);
+            var c = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position)  //返回Cartesian2
+            if(c === undefined){
+              return
+            }
+            var obj = { position: c,entity:alarmWell }
+            this.infoAlarmWindow(obj)
+            console.log(row.wellId)
+            // getWellByCode(alarmWell.id.id).then(response => {
+            //   var id = response.data.id
+            //   if(id){
+            //     that.openAlarmWindow(id, position)
+            //   }
+            // })
+            this.openAlarmWindow(row.wellId, position)
+          }
+        }
+      },
+      // 获取当前deptid的所有下级id,仅最多支持3级
+      fetchDeptList(deptid) {
+        console.log('fetchDeptList')
+        const deptids = [deptid] // 储存了该pid和其子集
+        const deptlist = this.$refs.deptSelect.fetchDeptTree()
+        for (const dept of deptlist) {
+          if (dept.pid === deptid) {
+            deptids.push(dept.id)
+          }
+        }
+        const result = []
+        // 查找所有列表中有没有deptids里面的本人或子集
+        if (deptlist.length > 0) {
+          for (const dept of deptlist) {
+            if (deptids.indexOf(dept.id) !== -1) {
+              result.push(dept.id)
+            } else if (deptids.indexOf(dept.pid) !== -1) {
+              result.push(dept.id)
+            }
+          }
+        }
+        console.log(result)
+        return result
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  @CHARSET "UTF-8";
+  // 查询框
+  .map-search-div{
+    position: absolute;
+    z-index: 100;
+    padding: 0px 10px;
+    background-color: rgba(244, 244, 244, 0.9);
+    /*left: 90px;*/
+    .el-form-item{
+      margin-bottom: 0px;
+    }
+  }
+  // 刷新框
+  .function-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 1100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    /*background-color: rgba(244, 233, 230, 1.0);*/
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 报警列表
+  .map-alarm-div{
+    position: absolute;
+    z-index: 100;
+    background-color: rgba(255, 234, 241,0.8);
+    top: 40px;
+    left: 0px;
+    .map-alarm-div-header{
+      line-height: 35px;
+      width: 504px;
+      padding-left: 10px;
+      .icon-right{
+        position: absolute;
+        right: 15px;
+      }
+      .icon-right:hover{
+        color: #409EFF;
+        cursor: pointer;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor{
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+
+    .el-table th{
+      /*background-color: rgba(255, 229, 230, 0.8);*/
+      padding: 7px 0px;
+    }
+    .el-table td{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+      padding: 5px 0px;
+      /*line-height: 1;*/
+    }
+    .el-table td:hover{
+      /*background-color: rgba(255, 234, 241, 0.8);*/
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+  // 刷新框
+  .refresh-div{
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    z-index: 100;
+    padding: 10px;
+    color: #ce8b74;
+    font-size: 14px;
+    background-color: rgba(244, 233, 230, 1.0);
+    .font-red{
+      color: red;
+      font-weight: bold;
+    }
+    .el-icon-refresh:hover{
+      color: red;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+  // 地图
+  .overview-map-container{
+    width: 100%;
+    padding: 0px;
+    z-index: 11111;
+    .map-demo{
+      z-index: 11111;
+      width: 100%;
+      height: calc(100vh - 146px);
+      .svg-icon{
+        width: 20px;
+        height: 20px;
+      }
+      .alarm-icon{
+        width: 29px;
+        height: 30px;
+      }
+      .nomal-info-window{
+        background-color: pink;
+      }
+
+      /*leaflet风格气泡窗口样式模板*/
+      .leaflet-popup {
+        z-index: 999;
+        position: absolute;
+        text-align: center;
+      }
+      .leaflet-popup-close-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 4px 4px 0 0;
+        text-align: center;
+        width: 18px;
+        height: 14px;
+        font: 16px/14px Tahoma, Verdana, sans-serif;
+        color: #c3c3c3;
+        text-decoration: none;
+        font-weight: bold;
+        background: transparent;
+      }
+      .leaflet-popup-content-wrapper {
+        text-align: center;
+        /*max-height: 200px;*/
+        overflow-y: auto;
+        background: white;
+        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+        padding: 1px;
+        text-align: left;
+        border-radius: 12px;
+      }
+      .leaflet-popup-content {
+        z-index: 99999;
+        /*height: 200px;*/
+        margin: 10px 10px;
+        /*line-height: 1.4;*/
+        .info-window{
+          z-index: 100001;
+          max-width: 260px;
+          min-width:200px;
+          .info-header{
+            padding: 5px 8px 0px 8px;
+            line-height: 30px;
+            font-weight: bold;
+          }
+          .info-body{
+            padding: 5px 10px 10px 10px;
+            line-height: 23px;
+            font-size: 14px;
+          }
+        }
+        .alarm-window{
+          z-index: 100002;
+          max-width: 250px;
+          .alarm-header {
+            padding: 5px 8px 0px 8px;
+            line-height: 30px;
+            color: red;
+            font-weight: bold;
+          }
+          .alarm-body{
+            padding: 5px 10px 10px 10px;
+            line-height: 23px;
+            font-size: 14px;
+            .alarm-red{
+              color: #ff0000;
+            }
+          }
+        }
+      }
+      .leaflet-popup-tip-container {
+        margin: 0 auto;
+        width: 0px;
+        height: 100px;
+        position: relative;
+        overflow: hidden;
+      }
+      .leaflet-popup-tip {
+        background: white;
+        box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+        width: 17px;
+        height: 17px;
+        padding: 1px;
+        margin: -10px auto 0;
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+      }
+    }
+  }
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+  /*按钮样式*/
+  .add-button{
+  }
+</style>