From 7bc6f5aec71eb7e7816cd959ef0d7fff1aa59b88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Tue, 27 Sep 2022 15:13:47 +0800
Subject: [PATCH] up

---
 .env.development                              |    2 +
 src/api/dashboard/dashboard.js                |    9 +
 src/layout/index.vue                          |    3 +-
 src/router/index.js                           |    5 -
 src/views/dashboard/components/BarChart.vue   |  149 +++
 src/views/dashboard/components/LineChart.vue  |  144 ++
 src/views/dashboard/components/PieChart.vue   |  163 +++
 .../dashboard/components/mixins/resize.js     |   55 +
 src/views/dashboard/index.vue                 | 1009 ++++++++------
 src/views/rain/inspection/components/maps.vue | 1170 +++++++++--------
 src/views/rain/inspection/maps.vue            |  391 +-----
 src/views/rain/inspection/plan.vue            |    6 +-
 src/views/rain/maintain/maps.vue              |    8 +
 13 files changed, 1739 insertions(+), 1375 deletions(-)
 create mode 100644 src/api/dashboard/dashboard.js
 create mode 100644 src/views/dashboard/components/BarChart.vue
 create mode 100644 src/views/dashboard/components/LineChart.vue
 create mode 100644 src/views/dashboard/components/PieChart.vue
 create mode 100644 src/views/dashboard/components/mixins/resize.js
 create mode 100644 src/views/rain/maintain/maps.vue

diff --git a/.env.development b/.env.development
index 32c098c..d89589a 100644
--- a/.env.development
+++ b/.env.development
@@ -4,3 +4,5 @@ ENV = 'development'
 # base api
 VUE_APP_BASE_API = ''
 VUE_APP_DOMAIN=http://patrol.115.langye.net/
+
+#VUE_APP_DOMAIN=http://192.168.60.100:9001/
diff --git a/src/api/dashboard/dashboard.js b/src/api/dashboard/dashboard.js
new file mode 100644
index 0000000..79aaa5f
--- /dev/null
+++ b/src/api/dashboard/dashboard.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function indexChart(data) {
+  return request({
+    url: '/api/admin/other/statistic',
+    method: 'get',
+    params:data
+  })
+}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 9a2d1d4..6028644 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -10,7 +10,8 @@
         <app-main />
       </el-scrollbar>
     </div>
-  </div>
+  </div>
+  
 </template>
 
 <script>
diff --git a/src/router/index.js b/src/router/index.js
index eb16fee..4746c8c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,11 +40,6 @@ export const constantRoutes = [{
     path: '/404',
     component: () => import('@/views/404'),
     hidden: true
-  },
-  {
-    path: '/rain/inspection/maps',
-    component: () => import('@/views/rain/inspection/maps'),
-    hidden: true
   },
   {
     path: '/',
diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue
new file mode 100644
index 0000000..cef9fb2
--- /dev/null
+++ b/src/views/dashboard/components/BarChart.vue
@@ -0,0 +1,149 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '500px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.$nextTick(() => {
+          this.setOptions(this.chartData);
+        })
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            {
+              startValue: 0,
+              endValue: 6, // 显示条数
+              type: 'slider',
+              show: true,
+              xAxisIndex: [0],
+              handleSize: 0, //滑动条的 左右2个滑动条的大小
+              height: 8, //组件高度
+              left: 50, //左边的距离
+              right: 40, //右边的距离
+              bottom: 31, //右边的距离
+              handleColor: '#EFEFEF', //h滑动图标的颜色
+              handleStyle: {
+                borderColor: '#409EFF',
+                borderWidth: '1',
+                shadowBlur: 2,
+                background: '#EFEFEF',
+                shadowColor: '#EFEFEF'
+              },
+              fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                  //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                  //给第一个设置0，第四个设置1，就是垂直渐变
+                  offset: 0,
+                  color: '#409EFF'
+                },
+                {
+                  offset: 1,
+                  color: '#409EFF'
+                }
+              ]),
+              backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+              showDataShadow: false, //是否显示数据阴影 默认auto
+              showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+              handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+              filterMode: 'filter'
+            }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          grid: {
+            top: 10,
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+            axisTick: {
+              show: false
+            }
+          }],
+          series: [{
+            name: '数据',
+            type: 'bar',
+            stack: 'vistors',
+            barWidth: '60%',
+            data: chartdata.yArr,
+            animationDuration,
+            barMaxWidth: 20, // 每一个都要设置
+          }]
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/dashboard/components/LineChart.vue b/src/views/dashboard/components/LineChart.vue
new file mode 100644
index 0000000..1cc468a
--- /dev/null
+++ b/src/views/dashboard/components/LineChart.vue
@@ -0,0 +1,144 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '400px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            // {
+            //   startValue: 0,
+            //   endValue: 6, // 显示条数
+            //   type: 'slider',
+            //   show: true,
+            //   xAxisIndex: [0],
+            //  // handleSize: 0, //滑动条的 左右2个滑动条的大小
+            //   height: 8, //组件高度
+            //   left: 50, //左边的距离
+            //   right: 40, //右边的距离
+            //   bottom: 26, //右边的距离
+            //   handleColor: '#EFEFEF', //h滑动图标的颜色
+            //   handleStyle: {
+            //     borderColor: '#409EFF',
+            //     borderWidth: '1',
+            //     shadowBlur: 2,
+            //     background: '#EFEFEF',
+            //     shadowColor: '#EFEFEF'
+            //   },
+            //   fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+            //       //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+            //       //给第一个设置0，第四个设置1，就是垂直渐变
+            //       offset: 0,
+            //       color: '#409EFF'
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: '#409EFF'
+            //     }
+            //   ]),
+            //   backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+            //   showDataShadow: false, //是否显示数据阴影 默认auto
+            //   showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            //   handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            //   filterMode: 'filter'
+            // }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          legendArr:[],
+          legend: {
+            orient: 'horizontal',
+            bottom: '3%',
+            data:chartdata.legendArr
+          },
+            tooltip: {
+              trigger: 'axis'
+            },
+            backgroundColor:"#fff",
+          grid: {
+            top: '3%',
+            left: '2%',
+            right: '2%',
+            bottom: '12%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            axisLabel: {rotate: chartdata.rotate},
+            data: chartdata.xArr,
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+          }],
+          series: chartdata.series
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue
new file mode 100644
index 0000000..004c945
--- /dev/null
+++ b/src/views/dashboard/components/PieChart.vue
@@ -0,0 +1,163 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '300px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            // {
+            //   startValue: 0,
+            //   endValue: 6, // 显示条数
+            //   type: 'slider',
+            //   show: true,
+            //   xAxisIndex: [0],
+            //  // handleSize: 0, //滑动条的 左右2个滑动条的大小
+            //   height: 8, //组件高度
+            //   left: 50, //左边的距离
+            //   right: 40, //右边的距离
+            //   bottom: 26, //右边的距离
+            //   handleColor: '#EFEFEF', //h滑动图标的颜色
+            //   handleStyle: {
+            //     borderColor: '#409EFF',
+            //     borderWidth: '1',
+            //     shadowBlur: 2,
+            //     background: '#EFEFEF',
+            //     shadowColor: '#EFEFEF'
+            //   },
+            //   fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+            //       //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+            //       //给第一个设置0，第四个设置1，就是垂直渐变
+            //       offset: 0,
+            //       color: '#409EFF'
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: '#409EFF'
+            //     }
+            //   ]),
+            //   backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+            //   showDataShadow: false, //是否显示数据阴影 默认auto
+            //   showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            //   handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            //   filterMode: 'filter'
+            // }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          legend: {
+            orient: 'horizontal',
+            bottom: '4%',
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          grid: {
+            top: 0,
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: false
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+            axisLine: {
+                show: false  //不显示坐标轴轴线
+            },
+            axisTick: {
+                show: false  //不显示坐标轴刻度
+            },
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+            axisLine: {
+                show: false  //不显示坐标轴轴线
+            },
+            axisTick: {
+                show: false  //不显示坐标轴刻度
+            },
+          }],
+          radiusArr:[],
+          series: [{
+            name: '数据',
+            type: 'pie',
+            stack: 'vistors',
+            barWidth: '60%',
+            radius: chartdata.radiusArr,
+            center: ['50%', '45%'],
+            data: chartdata.yArr,
+            animationDuration
+          }]
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/dashboard/components/mixins/resize.js b/src/views/dashboard/components/mixins/resize.js
new file mode 100644
index 0000000..234953b
--- /dev/null
+++ b/src/views/dashboard/components/mixins/resize.js
@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index c03bacb..5666427 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,429 +1,626 @@
-<template>
-  <div class="dashboard-container">
-
-    <div class="dashboard-text">当前登陆人: {{ name }}</div>
-    <!-- <div class="dashboard-text">roles: <span v-for="role in roles" :key="role">{{ role }}</span></div> -->
-    <el-row  :gutter="20">
-      <el-col :span="12" style="margin-bottom:15px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>雨管巡查</span>
-            <el-button @click='gowhere(1)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
-          </div>
-          <div class="text item">
-           <el-table :data="tableData" class="v-table" :height="300" style="width: 100%">
-           <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
-           <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsinspection"
-             :label="column.title" :width="column.width" :fixed="column.fixed">
-             <template slot-scope="scope">
-               <div v-if="column.type=='typeName'">
-                 <el-tag>{{scope.row[column.field]}}</el-tag>
-               </div>
-               <div v-else-if="column.type=='statusName'">
-                 <el-tag :type="(scope.row[column.field]==0?'':(scope.row[column.field]==1?'success':(scope.row[column.field]==2?'warning':'info')))">
-                   {{insStatus[scope.row[column.field]]}}
-                 </el-tag>
-               </div>
-
-               <div v-else-if="column.type=='user'">
-                   {{getUserName(scope.row)}}
-               </div>
-               <div v-else>{{scope.row[column.field]}}</div>
-             </template>
-           </el-table-column>
-           </el-table>
-          </div>
-        </el-card>
-
-
-      </el-col>
-      <el-col :span="12" style="margin-bottom:15px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>雨管养护</span>
-            <el-button @click='gowhere(2)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
-          </div>
-          <div class="text item">
-           <el-table :data="mainData" class="v-table" :height="300" style="width: 100%">
-           <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
-           <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsmain"
-             :label="column.title" :width="column.width" :fixed="column.fixed">
-             <template slot-scope="scope">
-               <div v-if="column.type=='type'">
-                   <el-tag>{{scope.row[column.field]}}</el-tag>
-               </div>
-               <div v-else-if="column.type=='status'">
-                 <el-tag :type="(scope.row[column.field]==0?'':(scope.row[column.field]==1?'success':(scope.row[column.field]==2?'warning':(scope.row[column.field]==3?'info':'danger'))))">
-                   {{insStatus[scope.row[column.field]]}}
-                 </el-tag>
-               </div>
-
-               <div v-else-if="column.type=='user'">
-                   {{getUserName(scope.row)}}
-               </div>
-
-               <div v-else>{{scope.row[column.field]}}</div>
-             </template>
-           </el-table-column>
-           </el-table>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>通用巡查</span>
-            <el-button @click='gowhere(3)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
-          </div>
-          <div class="text item">
-           <el-table :data="comData" class="v-table" :height="300" style="width: 100%">
-           <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
-           <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnscom"
-             :label="column.title" :width="column.width" :fixed="column.fixed">
-             <template slot-scope="scope">
-
-               <div v-if="column.type=='status'">
-                 <el-tag :type="(scope.row[column.field]==1?'':(scope.row[column.field]==2?'success':'warning'))">
-                   {{comStatus[scope.row[column.field]]}}
-                 </el-tag>
-               </div>
-
-               <div v-else-if="column.type=='user'">
-                   {{getUserName(scope.row)}}
-               </div>
-               <div v-else>{{scope.row[column.field]}}</div>
-             </template>
-           </el-table-column>
-           </el-table>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>日常监督考核</span>
-            <el-button @click='gowhere(4)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
-          </div>
-          <div class="text item">
-           <el-table :data="dailyData" class="v-table" :height="300" style="width: 100%">
-           <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
-           <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsdaily"
-             :label="column.title" :width="column.width" :fixed="column.fixed">
-             <template slot-scope="scope">
-               <div v-if="column.type=='status'">
-                 <el-tag :type="(scope.row[column.field]==1?'':(scope.row[column.field]==2?'success':'danger'))">
-                   {{dailyStatus[scope.row[column.field]]}}
-                 </el-tag>
-               </div>
-               <div v-else>{{scope.row[column.field]}}</div>
-             </template>
-           </el-table-column>
-           </el-table>
-          </div>
-        </el-card>
-      </el-col>
-
-
-
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
+<template>
+  <div class="dashboard-container">
+
+    <div class="dashboard-text">当前登陆人: {{ name }}</div>
+    <el-row :gutter="20">
+      <el-col :span="16" style="margin-bottom:15px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>巡查养护统计</span>
+            <DatePicker :value="select.date" placeholder="选择所属月份" placement="bottom" style="width: 130px;float: right;"
+              type="month" @on-change="changeMonth"></DatePicker>
+          </div>
+          <div class="text item">
+            <el-table :data="tableTypeData" class="v-table" :height="300" style="width: 100%">
+              <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsType"
+                :label="column.title" :width="column.width" :fixed="column.fixed">
+                <template slot-scope="scope">
+
+                  <div>{{scope.row[column.field]}}</div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+
+
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>巡查类型分析</span>
+          </div>
+          <div class="text item">
+            <pie-chart :chartData="rptChartData"></pie-chart>
+          </div>
+        </el-card>
+
+      </el-col>
+      <el-col :span="16" style="margin-bottom:15px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>片区/单位统计</span>
+          </div>
+          <div class="text item">
+            <el-table :data="tableAreaData" class="v-table" :height="300" style="width: 100%">
+              <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsArea"
+                :label="column.title" :width="column.width" :fixed="column.fixed">
+                <template slot-scope="scope">
+
+                  <div>{{scope.row[column.field]}}</div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+
+
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>养护类型分析</span>
+          </div>
+          <div class="text item">
+            <pie-chart :chartData="rptYChartData"></pie-chart>
+          </div>
+        </el-card>
+
+      </el-col>
+      <el-col :span="12" style="margin-bottom:15px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>雨管巡查</span>
+            <el-button @click='gowhere(1)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
+          </div>
+          <div class="text item">
+            <el-table :data="tableData" class="v-table" :height="300" style="width: 100%">
+              <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
+              <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsinspection"
+                :label="column.title" :width="column.width" :fixed="column.fixed">
+                <template slot-scope="scope">
+                  <div v-if="column.type=='typeName'">
+                    <el-tag>{{scope.row[column.field]}}</el-tag>
+                  </div>
+                  <div v-else-if="column.type=='statusName'">
+                    <el-tag
+                      :type="(scope.row[column.field]==0?'':(scope.row[column.field]==1?'success':(scope.row[column.field]==2?'warning':'info')))">
+                      {{insStatus[scope.row[column.field]]}}
+                    </el-tag>
+                  </div>
+
+                  <div v-else-if="column.type=='user'">
+                    {{getUserName(scope.row)}}
+                  </div>
+                  <div v-else>{{scope.row[column.field]}}</div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+
+
+      </el-col>
+      <el-col :span="12" style="margin-bottom:15px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>雨管养护</span>
+            <el-button @click='gowhere(2)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
+          </div>
+          <div class="text item">
+            <el-table :data="mainData" class="v-table" :height="300" style="width: 100%">
+              <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
+              <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsmain"
+                :label="column.title" :width="column.width" :fixed="column.fixed">
+                <template slot-scope="scope">
+                  <div v-if="column.type=='type'">
+                    <el-tag>{{scope.row[column.field]}}</el-tag>
+                  </div>
+                  <div v-else-if="column.type=='status'">
+                    <el-tag
+                      :type="(scope.row[column.field]==0?'':(scope.row[column.field]==1?'success':(scope.row[column.field]==2?'warning':(scope.row[column.field]==3?'info':'danger'))))">
+                      {{insStatus[scope.row[column.field]]}}
+                    </el-tag>
+                  </div>
+
+                  <div v-else-if="column.type=='user'">
+                    {{getUserName(scope.row)}}
+                  </div>
+
+                  <div v-else>{{scope.row[column.field]}}</div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" v-if="false">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>通用巡查</span>
+            <el-button @click='gowhere(3)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
+          </div>
+          <div class="text item">
+            <el-table :data="comData" class="v-table" :height="300" style="width: 100%">
+              <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
+              <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnscom"
+                :label="column.title" :width="column.width" :fixed="column.fixed">
+                <template slot-scope="scope">
+
+                  <div v-if="column.type=='status'">
+                    <el-tag :type="(scope.row[column.field]==1?'':(scope.row[column.field]==2?'success':'warning'))">
+                      {{comStatus[scope.row[column.field]]}}
+                    </el-tag>
+                  </div>
+
+                  <div v-else-if="column.type=='user'">
+                    {{getUserName(scope.row)}}
+                  </div>
+                  <div v-else>{{scope.row[column.field]}}</div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" v-if="false">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>日常监督考核</span>
+            <el-button @click='gowhere(4)' style="float: right; padding: 3px 0" type="text">更多>></el-button>
+          </div>
+          <div class="text item">
+            <el-table :data="dailyData" class="v-table" :height="300" style="width: 100%">
+              <el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
+              <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columnsdaily"
+                :label="column.title" :width="column.width" :fixed="column.fixed">
+                <template slot-scope="scope">
+                  <div v-if="column.type=='status'">
+                    <el-tag :type="(scope.row[column.field]==1?'':(scope.row[column.field]==2?'success':'danger'))">
+                      {{dailyStatus[scope.row[column.field]]}}
+                    </el-tag>
+                  </div>
+                  <div v-else>{{scope.row[column.field]}}</div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+      </el-col>
+
+
+
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import {
+    mapGetters
+  } from 'vuex'
+
   import {
     listall
-  } from '../../api/rain/inspection.js'
-  import {
-    listmain
-  } from '../../api/rain/maintain.js'
-  import {
-    listcommon
-  } from '../../api/commonInspection/index.js'
-  import {
-    listdaily
-  } from '../../api/assess/daily.js'
-export default {
-  name: 'Dashboard',
-  data(){
-    return {
-      tableData:[],
-      mainData:[],
-      comData:[],
-      dailyData:[],
-      paginations:{
-        page:1,
-        page_size:10
-      },
-      insStatus:["待审核","已审核","已办结","已退回","缺陷办结"],
-      comStatus:['',"已提交","已审核","已办结"],
-      dailyStatus:['',"无异常","已处理","未处理"],
-      columnsinspection: [{
-          field: "address",
-          title: "地址",
-          type: "string",
-          align: "left",
-          width: 300
-        },
-        {
-          field: "typeName",
-          title: "类型",
-          type: "typeName",
-          align: "left",
-          width: 120
-        },
-        {
-          field: "status",
-          title: "状态",
-          type: "statusName",
-          align: "center",
-          width: 120
-        },
-        {
-          field: "username",
-          title: "提交人",
-          type: "user",
-          align: "center",
-          width: 120
-        },
-        {
-          field: "created_at",
-          title: "提交日期",
-          type: "string",
-          align: "center",
-          width: 180
-        }
-      ],
-      columnsmain:[
-        {
-            field: "address",
-            title: "地址/排放点",
-            type: "string",
-            align: "left",
-            width:300
-          },
-          {
-              field: "typeName",
-              title: "类型",
-              type: "type",
-              align: "left",
-              width:120
-          },
-          {
-              field: "status",
-              title: "状态",
-              type: "status",
-              align: "center",
-              width:120
-          },
-          {
-            field: "username",
-            title: "提交人",
-            type: "user",
-            align: "center",
-            width:120
-          },
-          {
-            field: "created_at",
-            title: "提交日期",
-            type: "string",
-            align: "center",
-            width:180
-          }
-      ],
-      columnscom:[{
+  } from '../../api/rain/inspection.js'
+  import {
+    listmain
+  } from '../../api/rain/maintain.js'
+  import {
+    listcommon
+  } from '../../api/commonInspection/index.js'
+  import {
+    listdaily
+  } from '../../api/assess/daily.js'
+
+
+  import PieChart from "./components/PieChart.vue"
+  import {
+    indexChart
+  } from '../../api/dashboard/dashboard.js'
+
+  export default {
+    name: 'Dashboard',
+    components: {
+      PieChart
+    },
+    data() {
+      return {
+        tableData: [],
+        rptChartData: [],
+        rptYChartData:[],
+        mainData: [],
+        comData: [],
+        dailyData: [],
+        tableTypeData: [],
+        tableAreaData: [],
+        paginations: {
+          page: 1,
+          page_size: 10
+        },
+        select: {
+          date: ""
+        },
+        insStatus: ["待审核", "已审核", "已办结", "已退回", "缺陷办结"],
+        comStatus: ['', "已提交", "已审核", "已办结"],
+        dailyStatus: ['', "无异常", "已处理", "未处理"],
+        columnsinspection: [{
+            field: "address",
+            title: "地址",
+            type: "string",
+            align: "left",
+            width: 300
+          },
+          {
+            field: "typeName",
+            title: "类型",
+            type: "typeName",
+            align: "left",
+            width: 120
+          },
+          {
+            field: "status",
+            title: "状态",
+            type: "statusName",
+            align: "center",
+            width: 120
+          },
+          {
+            field: "username",
+            title: "提交人",
+            type: "user",
+            align: "center",
+            width: 120
+          },
+          {
+            field: "created_at",
+            title: "提交日期",
+            type: "string",
+            align: "center",
+            width: 180
+          }
+        ],
+        columnsmain: [{
+            field: "address",
+            title: "地址/排放点",
+            type: "string",
+            align: "left",
+            width: 300
+          },
+          {
+            field: "typeName",
+            title: "类型",
+            type: "type",
+            align: "left",
+            width: 120
+          },
+          {
+            field: "status",
+            title: "状态",
+            type: "status",
+            align: "center",
+            width: 120
+          },
+          {
+            field: "username",
+            title: "提交人",
+            type: "user",
+            align: "center",
+            width: 120
+          },
+          {
+            field: "created_at",
+            title: "提交日期",
+            type: "string",
+            align: "center",
+            width: 180
+          }
+        ],
+        columnscom: [{
             field: "feedback_department_name",
             title: "反馈科室",
-            type: "string",
-             width:120
+            type: "string",
+            width: 120
           },
           {
             field: "ask_type_name",
             title: "类型",
             type: "ask_type_id",
-            align: "center",
-             width:120
+            align: "center",
+            width: 120
           },
           {
             field: "ask_content_name",
             title: "内容",
             type: "string",
-            align: "center",
-             width:120
-          },
-          {
-            field: "address",
-            title: "地址",
-            type: "string",
-            align: "lefft",
-             width:300
-
-          },
-          {
-            field: "status",
-            title: "状态",
-            type: "status",
-            align: "center",
-             width:120
-          },
-          {
-            field: "username",
-            title: "提交人",
-            type: "user",
-            align: "center",
-             width:120
-          },
-          {
-            field: "department_name",
-            title: "提交科室",
-            type: "department_id",
-            align: "center",
-             width:120
-          },
-          {
-            field: "created_at",
-            title: "提交日期",
-            type: "string",
-            align: "center",
-            width:180
-          }],
-          columnsdaily:[{
+            align: "center",
+            width: 120
+          },
+          {
+            field: "address",
+            title: "地址",
+            type: "string",
+            align: "lefft",
+            width: 300
+
+          },
+          {
+            field: "status",
+            title: "状态",
+            type: "status",
+            align: "center",
+            width: 120
+          },
+          {
+            field: "username",
+            title: "提交人",
+            type: "user",
+            align: "center",
+            width: 120
+          },
+          {
+            field: "department_name",
+            title: "提交科室",
+            type: "department_id",
+            align: "center",
+            width: 120
+          },
+          {
+            field: "created_at",
+            title: "提交日期",
+            type: "string",
+            align: "center",
+            width: 180
+          }
+        ],
+        columnsdaily: [{
             field: "name",
             title: "名称",
-            type: "string",
+            type: "string",
             align: "left"
           },
           {
             field: "status",
             title: "状态",
             type: "status",
-            align: "center",
-            width:120
-          }]
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'name',
-      'roles'
-    ])
-  },
-  created() {
-    this.initload()
-    this.load()
-  },
-  methods:{
-    getUserName(row) {
-      if (row.admin) {
-        return row.admin.name;
-      } else if (row.user) {
-        return row.user.name;
-      } else {
-        return "未知";
-      }
-
-    },
-    initload(){
-    },
-    gowhere(type){
-      let url ="/admin/#/rain/inspection/inspection"
-      if(type==1){
-        url ="/admin/#/rain/inspection/inspection"
-      }
-      if(type==2){
-        url ="/admin/#/rain/maintain/maintain"
-      }
-      if(type==3){
-        url ="/admin/#/common/index"
-      }
-      if(type==4){
-        url ="/admin/#/assess/daily"
-      }
-
-      window.location.href = url
-    },
-    load() {
-      listall({
-        page: this.paginations.page,
-        page_size: this.paginations.page_size,
-        is_export:0
-      }).then(response => {
-
-        for(var m of response.data){
-          m.typeName = m.type==1?"日常雨水设施":"在建工地巡查"
-          // m.username = m.admin?m.admin.name:""
-
-        }
-        this.tableData = response.data;
-      }).catch(error => {
-        console.log(error)
-        reject(error)
-      });
-
-      listmain({
-        page: this.paginations.page,
-        page_size: this.paginations.page_size,
-        is_export:0
-      }).then(response => {
-       for(var m of response.data){
-         m.typeName = (m.type==1?"雨水管道疏挖":(m.type==2?"雨水管道疏通":(m.type==3?"汛期助排":"污泥外运")))
-          // m.username = m.admin?m.admin.name:""
-       }
-               this.mainData = response.data;
-      }).catch(error => {
-        console.log(error)
-        reject(error)
-      });
-
-      listcommon({
-        page: this.paginations.page,
-        page_size: this.paginations.page_size,
-        is_export:0
-      }).then(response => {
-       for(var m of response.data){
-           // m.username = m.user?m.user.name:""
-           m.ask_type_name = m.ask_type_detail?m.ask_type_detail.value:""
-           m.ask_content_name = m.ask_content_detail?m.ask_content_detail.value:""
-           m.department_name = m.department?m.department.name:""
-           m.feedback_department_name = m.feedback_department?m.feedback_department.name:""
-       }
-       this.comData = response.data;
-      }).catch(error => {
-        console.log(error)
-        reject(error)
-      });
-
-      listdaily({
-        page: this.paginations.page,
-        page_size: this.paginations.page_size
-      }).then(response => {
-
-       this.dailyData = response.data;
-      }).catch(error => {
-        console.log(error)
-        reject(error)
-      });
-
-
-
-
-    },
-  }
-
-}
-</script>
-
-<style lang="scss" scoped>
-.dashboard {
-  &-container {
-    margin: 30px;
-    margin-top:0
-  }
-  &-text {
-    font-size: 18px;
-    line-height: 30px;
-    margin:10px 0;
-  }
-}
+            align: "center",
+            width: 120
+          }
+        ],
+        columnsType: [{
+            field: "name",
+            title: "业务",
+            type: "string",
+            width: 120
+          },
+          {
+            field: "type_name",
+            title: "类型",
+            type: "ask_type_id",
+            align: "center"
+          },
+          {
+            field: "total",
+            title: "上报次数",
+            type: "string",
+            align: "center",
+            width: 120
+          },
+          {
+            field: "end_type_total",
+            title: "已办结次数",
+            type: "string",
+            align: "center",
+            width: 120
+
+          }
+        ],
+        columnsArea: [{
+            field: "name",
+            title: "业务",
+            type: "string",
+            width: 120
+          },
+          {
+            field: "type_name",
+            title: "片区",
+            type: "ask_type_id",
+            align: "center"
+          },
+          {
+            field: "total",
+            title: "上报次数",
+            type: "string",
+            align: "center",
+            width: 120
+          },
+          {
+            field: "end_type_total",
+            title: "已办结次数",
+            type: "string",
+            align: "center",
+            width: 120
+
+          }
+        ],
+
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'name',
+        'roles'
+      ])
+    },
+    created() {
+      this.select.date = this.$moment().format("yyyy-MM")
+      this.initload()
+      this.load();
+      this.indexChart();
+    },
+    methods: {
+      changeMonth(e) {
+        this.select.date = e;
+        this.indexChart();
+      },
+      getUserName(row) {
+        if (row.admin) {
+          return row.admin.name;
+        } else if (row.user) {
+          return row.user.name;
+        } else {
+          return "未知";
+        }
+
+      },
+      initload() {},
+      indexChart() { //图标和巡查养护统计类型
+
+        indexChart(this.select).then(response => {
+
+          console.log(response)
+
+          this.tableTypeData = response.type_total;
+          this.tableAreaData = response.area_total;
+
+
+          var xarr = [];
+          var yarr = [];
+          var _xarr = [];
+          var _yarr = [];
+          response.type_total.map(item => {
+            if (item.name == "巡查") {
+              xarr.push(item.type_name);
+              yarr.push({
+                value: item.total,
+                name: item.type_name
+              });
+            }
+            else{
+              _xarr.push(item.type_name);
+              _yarr.push({
+                value: item.total,
+                name: item.type_name
+              });
+            }
+          })
+          this.rptYChartData = {
+            xArr: _xarr,
+            radiusArr: '50%',
+            yArr: _yarr
+          }
+
+          this.rptChartData = {
+            xArr: xarr,
+            radiusArr: '50%',
+            yArr: yarr
+          }
+
+
+        }).catch(error => {
+          console.log(error)
+          reject(error)
+        });
+
+      },
+      gowhere(type) {
+        let url = "/admin/#/rain/inspection/inspection"
+        if (type == 1) {
+          url = "/admin/#/rain/inspection/inspection"
+        }
+        if (type == 2) {
+          url = "/admin/#/rain/maintain/maintain"
+        }
+        if (type == 3) {
+          url = "/admin/#/common/index"
+        }
+        if (type == 4) {
+          url = "/admin/#/assess/daily"
+        }
+
+        window.location.href = url
+      },
+      load() {
+        listall({
+          page: this.paginations.page,
+          page_size: this.paginations.page_size,
+          is_export: 0
+        }).then(response => {
+
+          for (var m of response.data) {
+            m.typeName = m.type == 1 ? "日常雨水设施" : "在建工地巡查"
+            // m.username = m.admin?m.admin.name:""
+
+          }
+          this.tableData = response.data;
+        }).catch(error => {
+          console.log(error)
+          reject(error)
+        });
+
+        listmain({
+          page: this.paginations.page,
+          page_size: this.paginations.page_size,
+          is_export: 0
+        }).then(response => {
+          for (var m of response.data) {
+            m.typeName = (m.type == 1 ? "雨水管道疏挖" : (m.type == 2 ? "雨水管道疏通" : (m.type == 3 ? "汛期助排" : "污泥外运")))
+            // m.username = m.admin?m.admin.name:""
+          }
+          this.mainData = response.data;
+        }).catch(error => {
+          console.log(error)
+          reject(error)
+        });
+
+        listcommon({
+          page: this.paginations.page,
+          page_size: this.paginations.page_size,
+          is_export: 0
+        }).then(response => {
+          for (var m of response.data) {
+            // m.username = m.user?m.user.name:""
+            m.ask_type_name = m.ask_type_detail ? m.ask_type_detail.value : ""
+            m.ask_content_name = m.ask_content_detail ? m.ask_content_detail.value : ""
+            m.department_name = m.department ? m.department.name : ""
+            m.feedback_department_name = m.feedback_department ? m.feedback_department.name : ""
+          }
+          this.comData = response.data;
+        }).catch(error => {
+          console.log(error)
+          reject(error)
+        });
+
+        listdaily({
+          page: this.paginations.page,
+          page_size: this.paginations.page_size
+        }).then(response => {
+
+          this.dailyData = response.data;
+        }).catch(error => {
+          console.log(error)
+          reject(error)
+        });
+
+
+
+
+      },
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dashboard {
+    &-container {
+      margin: 30px;
+      margin-top: 0
+    }
+
+    &-text {
+      font-size: 18px;
+      line-height: 30px;
+      margin: 10px 0;
+    }
+  }
 </style>
diff --git a/src/views/rain/inspection/components/maps.vue b/src/views/rain/inspection/components/maps.vue
index ad1c3b9..b317435 100644
--- a/src/views/rain/inspection/components/maps.vue
+++ b/src/views/rain/inspection/components/maps.vue
@@ -1,573 +1,599 @@
-
-<template>
-  <div>
-    <dialogShow :title="title" :is-show.sync="isShow" :width="width" @resetform="resetPointArr">
-      <template v-slot:searchtype>
-        <el-popover
-          placement="right-start"
-          width="500"
-          trigger="click"
-          v-model="showSearch"
-          >
-          <div>
-            <el-row>
-              <el-col :span="11">
-                <Input class="vm10" style="width: 93%;" v-model="searchFields.keyword"
-                  placeholder="关键字搜索" />
-              </el-col>
-              <el-col :span="11" :offset="2">
-                <el-select class="vm10" v-model="searchFields.road_id" filterable remote reserve-keyword clearable
-                   @focus="remoteRoad" placeholder="请输入关键词查找道路" :remote-method="remoteMethod" :loading="roadloading">
-                   <el-option v-for="item in roadsList" :key="item.id" :label="item.name" :value="item.id">
-                   </el-option>
-                 </el-select>
-              </el-col>
-              <el-col :span="11">
-                <el-select class="vm10" filterable v-model="searchFields.area_id" placeholder="请选择所属片区">
-                  <el-option v-for="item in selects.areasList" :key="item.id" :label="item.name" :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-col>
-              <el-col :span="11" :offset="2">
-                <el-select class="vm10" filterable v-model="searchFields.maintain_id" placeholder="请选择所属养护单位">
-                  <el-option v-for="item in selects.maintainList" :key="item.id" :label="item.name" :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-col>
-              <el-col :span="11">
-                <el-select class="vm10" filterable v-model="searchFields.status" placeholder="请选择状态">
-                  <el-option v-for="item in selects.statusList" :key="item.id" :label="item.name" :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-col>
-              <el-col :span="11" :offset="2">
-                <el-select class="vm10" filterable v-model="searchFields.unusual_type_id" placeholder="请选择异常类型">
-                  <el-option v-for="item in selects.sunusualList" :key="item.id" :label="item.value" :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-col>
-              <el-col :span="11" >
-                <el-select class="vm10" filterable v-model="searchFields.type" placeholder="请选择类型">
-                  <el-option v-for="item in selects.typeList" :key="item.id" :label="item.name" :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-col>
-              <el-col :span="11" :offset="2">
-                <el-select class="vm10" filterable v-model="searchFields.end_type" placeholder="请选择结办类型">
-                  <el-option v-for="item in selects.endTypeList" :key="item.id" :label="item.name" :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-col>
-              <el-col :span="11">
-                <el-select class="vm10" filterable v-model="searchFields.ask_content_id" placeholder="请选择巡查内容">
-                  <el-option v-for="item in selects.sequiementList" :key="item.id" :label="item.value" :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-col>
-              <el-col :span="24">
-                <el-date-picker class="vm10" v-model="mapdatesearch" type="daterange" range-separator="至"
-                  start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
-                </el-date-picker>
-              </el-col>
-              <el-col :span="24">
-                <Button type="primary" @click="loadMap(false)" style="margin-left: 10px">查询</Button>
-                <Button type="primary" @click="resetSearch" style="margin-left: 10px">重置</Button>
-              </el-col>
-            </el-row>
-              </div>
-              <el-button type="primary" slot="reference">多项搜索</el-button>
-
-        </el-popover>
-        </template>
-
-        <!-- 地图 -->
-       <template v-slot:content>
-        <div class="wrapper" v-if="showmap">
-          <div class="chooseMap">
-            <div>
-              <el-radio-group v-model="showMap" @change="changeMap">
-                <el-radio v-for="item in mapRadioList" :label="item.id">{{item.title}}</el-radio>
-              </el-radio-group>
-            </div>
-            <div>
-              <el-checkbox-group v-model="checkList" @change="changeCheck">
-                  <el-checkbox v-for="item in mapCheckList"  :label="item.id">{{item.title}}</el-checkbox>
-              </el-checkbox-group>
-            </div>
-
-          </div>
-          <!-- 地图 -->
-          <div class="map" id="olMap"></div>
-          <!-- 弹框 -->
-          <div ref="popup" class="popup" v-show="shopPopup">
-            <div class="info">
-              <div class="address">地址：{{nowAddress}}</div>
-              <div class="showinfo" @click='showInfo(nowId,types)'>查看详情</div>
-            </div>
-          </div>
-        </div>
-
-      </template>
-
-    </dialogShow>
-
-
-    <showRainEquipmentInfo ref="showRainEquipmentInfo"></showRainEquipmentInfo>
-    <showRainSiteInfo ref="showRainSiteInfo"></showRainSiteInfo>
-  </div>
-
-</template>
-<script>
-import "ol/ol.css";
-import {Tile as TileLayer,Vector as VectorLayer } from "ol/layer";
-import XYZ from "ol/source/XYZ";
-import {TileArcGISRest} from "ol/source"
-import tilegrid from "ol/tilegrid/TileGrid"
-import { defaults as defaultControls } from "ol/control";
-import {get as getprojection} from "ol/proj"
-import {Projection,addProjection} from "ol/proj"
-import Map from "ol/Map.js";
-import View from "ol/View.js";
-
-// 标注点位
-import { Vector as VectorSource } from "ol/source";
-import * as olProj from "ol/proj";
-import {Feature, Overlay} from "ol"
-import { Point } from "ol/geom";
-import { Style, Fill, Stroke, Circle as sCircle } from "ol/style";
-
-
-import proj4 from 'proj4'
-
-import {CONFIGS,MAPCONFIGS} from '@/views/rain/inspection/components/config'
-
-import {listroad} from '../../../../api/basic/road.js'
-import showRainEquipmentInfo from '@/views/rain/inspection/components/showRainEquipmentInfo'
-import showRainSiteInfo from '@/views/rain/inspection/components/showRainSiteInfo'
-import dialogShow from '@/components/dialogShow'
-
-export default {
-  components: {
-    showRainEquipmentInfo,
-    showRainSiteInfo,
-    CONFIGS,
-    MAPCONFIGS,
-    dialogShow
-  },
-  data() {
-   return {
-     showSearch:false,
-     title: "巡查点位",
-     showmap:false,
-     width: "100%",
-     isShow: false,
-      map: null,
-      shopPopup:false,
-      nowAddress:"",
-      nowId:"",
-      types:"",
-      showMap:"M2",
-      mapRadioList:[
-        {
-          id:"M2",
-          title:"天地图"
-        },{
-          id:"S1",
-          title:"水利图"
-        },{
-          id:"H1",
-          title:"河道图"
-        }
-      ],
-      checkList:['M1','L1'],
-      mapCheckList:[
-        {
-          id:"M1",
-          title:"高清影像"
-        },{
-          id:"L1",
-          title:"路网"
-        }
-      ],
-      configs :CONFIGS,
-      mapConfigs:MAPCONFIGS,
-      projection:"EPSG:4490",
-      featuresArr:[],
-      flagLayer:"",
-      pointArr:[],
-
-      searchFields: {
-        is_export: 0,
-        is_auth:1
-      },
-      roadsList: [],
-      roaddisabled: false,
-      roadloading: false,
-      mapdatesearch:"",
-      selects: {
-
-      },
-    };
-
-  },
-  created() {
-  },
-  mounted() {
-    //  转换坐标系
-      proj4.defs("EPSG:4490", '+proj=longlat +ellps=GRS80 +no_defs')
-      this.projection = new Projection({
-          code: this.mapConfigs.Map_Code,
-          units: this.mapConfigs.Map_units,
-          axisOrientation: this.mapConfigs.Map_axisOrientation,
-          global: this.mapConfigs.Map_global,
-      });
-      addProjection(this.projection);
-    // this.initMap();
-  },
-  watch:{
-    pointArr(newval,oldval){
-      if(newval){
-        // this.resetPointArr()
-        this.pointArr = newval
-        this.showmap = false
-        this.$nextTick(function () {
-            this.showmap = true
-            this.showMap = 'M2'
-            this.checkList = ['M1','L1']
-            this.showMaps()
-        })
-      }
-    },
-    mapdatesearch(newVal, oldVal) {
-      if (newVal) {
-        this.searchFields.start_date = newVal[0]
-        this.searchFields.end_date = newVal[1]
-      } else {
-        this.searchFields.start_date = ""
-        this.searchFields.end_date = ""
-      }
-
-    }
-  },
-  methods: {
-    showMaps(){
-      this.$nextTick(function () {
-          this.initMap();
-      })
-    },
-    initMap() {
-     let map = new Map({
-       target: "olMap",
-        view: new View({
-          center: this.mapConfigs.MAP_center, //中心点经纬度
-          zoom: this.mapConfigs.Map_Zooms[0], //图层缩放大小
-          maxZoom:this.mapConfigs.Map_Zooms[1],
-          minZoom:this.mapConfigs.Map_Zooms[2],
-          projection: this.projection,
-        }),
-        layers:[],
-        // interactions: defaultControls({
-        //     doubleClickZoom: false,
-        // }),
-      });
-      this.map = map;
-      // 添加天地图
-      let url = "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}";
-      url = `${url}&T=vec_c&tk=82526d64e8504a0341f775c087863825`;
-      let tdtLayer = new TileLayer({
-        title: "天地图",
-        id: "M2",
-        type: "overlay",
-        visible: true,
-        layerType: "TD地图",
-        opacity: 1,
-        source: new XYZ({
-            crossOrigin:'anonymous',
-            url: url,
-            projection:"EPSG:4326"
-          })
-      });
-      this.map.addLayer(tdtLayer);
-      this.ShowLayers()
-      this.setMarker()
-      this.addOverlay()
-      this.singleclick()
-
-            // this.map.layer2.setVisible(false)
-    },
-
-
-    //加载图层
-    ShowLayers() {
-        for (var i = 0; i < this.configs.length; i++) {
-            var result = this.configs[i];
-            if (result.layerType == "GIS地图") {
-                let projection = getprojection(result.projection);
-                let origin = [-400.0, 399.9999999999998];
-                let resolutions = [0.0027465820824835565,0.0013732910412417782,6.866455206208891E-4,3.4332276031044456E-4,1.7166138015522228E-4,8.583069007761114E-5,4.291534503880557E-5,2.1457672519402785E-5,1.0728836259701392E-5];
-
-                let fullExtent = [118.63622216442072, 30.12564516975147, 122.81217622965288, 32.74305227616479];
-
-                let tileGrid = new tilegrid({
-                    tileSize: 256,
-                    origin: origin,
-                    extent: fullExtent,
-                    resolutions: resolutions
-                });
-                let layer = new TileLayer({
-                    title: result.title,
-                    id: result.id,
-                    type: result.type,
-                    visible: result.visible,
-                    layerType: result.layerType,
-                    opacity: result.opacity,
-                    source: new XYZ({
-                        tileGrid: tileGrid,
-                        url: result.url,
-                        projection: projection
-                    })
-                })
-                this.map.addLayer(layer);
-            }else {
-                let layer = new TileLayer({
-                    title: result.title,
-                    id: result.id,
-                    type: result.type,
-                    visible: result.visible,
-                    layerType: result.layerType,
-                    opacity: result.opacity,
-                    source: new TileArcGISRest({
-                        url: result.url,
-                        projection: result.projection
-                    }),
-                });
-                this.map.addLayer(layer);
-            }
-        }
-
-    },
-
-
-// 设置巡查 点位
-    setMarker() {
-      // 设置图层
-          this.flagLayer = new VectorLayer({
-              source: new VectorSource()
-          });
-          // 添加图层
-          this.map.addLayer(this.flagLayer);
-      // 循环添加feature
-      for (let i = 0; i < this.pointArr.length; i++) {
-          // 创建feature，一个feature就是一个点坐标信息
-          let feature = new Feature({
-              geometry: new Point([this.pointArr[i][0], this.pointArr[i][1]])
-          });
-          // 设置展示 地址
-          feature.set('address',this.pointArr[i][2])
-          feature.set('types',this.pointArr[i][4])
-          // 设置 巡查ID
-          feature.setId(this.pointArr[i][3])
-          feature.setStyle(
-            new Style({
-              image: new sCircle({
-                fill: new Fill({
-                  color: '#0f9b0f',
-                }),
-                radius: 6,
-              }),
-            })
-          );
-          this.featuresArr.push(feature);
-      } // for 结束
-      this.flagLayer.getSource().addFeatures(this.featuresArr);
-    },
-
-    addOverlay() {
-      // 创建Overlay
-      let elPopup = this.$refs.popup;
-      this.popup = new Overlay({
-        element: elPopup,
-        positioning: "bottom-center",
-        stopEvent: false,
-        offset: [0, -20],
-      });
-      this.map.addOverlay(this.popup);
-    },
-    singleclick() {
-      // 点击
-      this.map.on("singleclick", (e) => {
-        // 判断是否点击在点上
-        let feature = this.map.forEachFeatureAtPixel(
-          e.pixel,
-          (feature) => feature
-        );
-        if (feature) {
-          this.shopPopup = true;
-          // 设置弹窗位置
-          let coordinates = feature.getGeometry().getCoordinates();
-          this.nowAddress = feature.get('address');
-          this.nowId = feature.getId()
-          this.types = feature.get('types');
-          this.popup.setPosition(coordinates);
-        } else {
-          this.shopPopup = false;
-        }
-      });
-    },
-
-    showInfo(id,type){
-      // 日常雨水设施
-      if (type == 1) {
-        this.$refs.showRainEquipmentInfo.isShow = true
-        this.$refs.showRainEquipmentInfo.getEquipmentInfo(id)
-        this.$refs.showRainEquipmentInfo.infoId = id
-        this.$refs.showRainEquipmentInfo.formType = 'showform'
-      }
-      // 工地
-      if (type == 2) {
-        this.$refs.showRainSiteInfo.isShow = true
-        this.$refs.showRainSiteInfo.getSiteInfo(id)
-        this.$refs.showRainSiteInfo.infoId = id
-        this.$refs.showRainSiteInfo.formType = 'showform'
-      }
-
-    },
-    changeMap(val){
-      for(var m of this.mapRadioList){
-        if(m.id==val){
-          console.log("val",val)
-          this.checkLayers(val,true)
-        }else{
-          this.checkLayers(m.id,false)
-        }
-      }
-    },
-    changeCheck(val){
-      if(val.length==0){
-        for(var m of this.mapCheckList){
-          this.checkLayers(m.id,false)
-        }
-      }else if(val.length==this.mapCheckList.length){
-        console.log(val)
-        for(var m of this.mapCheckList){
-          this.checkLayers(m.id,true)
-        }
-      }else{
-        for(var m of this.mapCheckList){
-          if(m.id==val[0]){
-            this.checkLayers(m.id,true)
-          }else{
-            this.checkLayers(m.id,false)
-          }
-        }
-      }
-
-    },
-
-    // 切换地图
-    checkLayers(id, bool) {
-
-        let layers = this.map.getLayers().getArray();
-        for (let i = 0; i < layers.length; i++) {
-            if (layers[i].get("id") == id) {
-
-                if (bool) {
-                  console.log(id)
-                    layers[i].setVisible(true);
-                }else{
-                    layers[i].setVisible(false);
-                }
-            }
-        }
-    },
-    loadMap(){
-      this.$emit('loadMap',this.searchFields)
-    },
-    resetPointArr(){
-      this.map = null
-      let _that = this;
-      this.flagLayer
-        .getSource()
-        .getFeatures()
-        .forEach(function(feature) {
-          _that.flagLayer.getSource().removeFeature(feature);
-        });
-      this.featuresArr = [];
-      this.flagLayer.getSource().clear();
-    },
-    resetSearch(){
-      this.searchFields = {}
-      this.mapdatesearch=['','']
-    },
-    remoteRoad() {
-      this.roadsList = []
-    },
-    remoteMethod(query) {
-      if (query != '') {
-        this.roadloading = true
-        listroad({
-          name: query
-        }).then(res => {
-          this.roadloading = false
-          this.roadsList = res.data
-        })
-      } else {
-        this.roadsList = []
-      }
-    }
-
-  },
-};
-</script>
-<style lang="scss" scoped>
-
-.chooseMap{
-  position: absolute;
-  margin: 15px 20px;
-  // width: 350px;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 0.8px solid hsla(0,0%,60%,.2);
-  z-index:99;
-  top: 0;
-  right: 0;
-  line-height: 40px;
-  // text-align: center;
-  padding:0 40px 0 20px;
-}
-.map {
-  width: 100vw;
-  height: 100vh;
-}
-.popup {
-  width: 200px;
-  background-color: white;
-  padding: 18px;
-  border-radius: 10px;
-  box-shadow: 0 0 15px rgb(177, 177, 177);
-  .info {
-    font-size: 14px;
-    text-align: left;
-    ul {
-      padding-left: 0;
-    }
-    .showinfo{
-      color:red;
-      cursor: pointer;
-    }
-  }
-}
-.common-dialog{
-    margin:0!important;
-    .el-dialog__header{
-      padding-top:0;
-      button{
-            height: 28px;
-            padding: 0 20px;
-            line-height: 28px;
-            margin-left: 10px;
-      }
-    }
-}
-
+<template>
+  <div>
+    <dialogShow :title="title" :is-show.sync="isShow" :width="width" @resetform="resetPointArr">
+      <template v-slot:searchtype>
+        <el-popover placement="right-start" width="500" trigger="click" v-model="showSearch">
+          <div>
+            <el-row>
+              <el-col :span="11">
+                <Input class="vm10" style="width: 93%;" v-model="searchFields.keyword" placeholder="关键字搜索" />
+              </el-col>
+              <el-col :span="11" :offset="2">
+                <el-select class="vm10" v-model="searchFields.road_id" filterable remote reserve-keyword clearable
+                  @focus="remoteRoad" placeholder="请输入关键词查找道路" :remote-method="remoteMethod" :loading="roadloading">
+                  <el-option v-for="item in roadsList" :key="item.id" :label="item.name" :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="11">
+                <el-select class="vm10" filterable v-model="searchFields.area_id" placeholder="请选择所属片区">
+                  <el-option v-for="item in selects.areasList" :key="item.id" :label="item.name" :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="11" :offset="2">
+                <el-select class="vm10" filterable v-model="searchFields.maintain_id" placeholder="请选择所属养护单位">
+                  <el-option v-for="item in selects.maintainList" :key="item.id" :label="item.name" :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="11">
+                <el-select class="vm10" filterable v-model="searchFields.status" placeholder="请选择状态">
+                  <el-option v-for="item in selects.statusList" :key="item.id" :label="item.name" :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="11" :offset="2">
+                <el-select class="vm10" filterable v-model="searchFields.unusual_type_id" placeholder="请选择异常类型">
+                  <el-option v-for="item in selects.sunusualList" :key="item.id" :label="item.value" :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="11">
+                <el-select class="vm10" filterable v-model="searchFields.type" placeholder="请选择类型">
+                  <el-option v-for="item in selects.typeList" :key="item.id" :label="item.name" :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="11" :offset="2">
+                <el-select class="vm10" filterable v-model="searchFields.end_type" placeholder="请选择结办类型">
+                  <el-option v-for="item in selects.endTypeList" :key="item.id" :label="item.name" :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="11">
+                <el-select class="vm10" filterable v-model="searchFields.ask_content_id" placeholder="请选择巡查内容">
+                  <el-option v-for="item in selects.sequiementList" :key="item.id" :label="item.value" :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="24">
+                <el-date-picker class="vm10" v-model="mapdatesearch" type="daterange" range-separator="至"
+                  start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
+                </el-date-picker>
+              </el-col>
+              <el-col :span="24">
+                <Button type="primary" @click="loadMap(false)" style="margin-left: 10px">查询</Button>
+                <Button type="primary" @click="resetSearch" style="margin-left: 10px">重置</Button>
+              </el-col>
+            </el-row>
+          </div>
+          <el-button type="primary" slot="reference">多项搜索</el-button>
+
+        </el-popover>
+      </template>
+
+      <!-- 地图 -->
+      <template v-slot:content>
+        <div class="wrapper" v-if="showmap">
+          <div class="chooseMap">
+            <div>
+              <el-radio-group v-model="showMap" @change="changeMap">
+                <el-radio v-for="item in mapRadioList" :label="item.id">{{item.title}}</el-radio>
+              </el-radio-group>
+            </div>
+            <div>
+              <el-checkbox-group v-model="checkList" @change="changeCheck">
+                <el-checkbox v-for="item in mapCheckList" :label="item.id">{{item.title}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+
+          </div>
+          <!-- 地图 -->
+          <div class="map" id="olMap"></div>
+          <!-- 弹框 -->
+          <div ref="popup" class="popup" v-show="shopPopup">
+            <div class="info">
+              <div class="address">地址：{{nowAddress}}</div>
+              <div class="showinfo" @click='showInfo(nowId,types)'>查看详情</div>
+            </div>
+          </div>
+        </div>
+
+      </template>
+
+    </dialogShow>
+
+
+    <showRainEquipmentInfo ref="showRainEquipmentInfo"></showRainEquipmentInfo>
+    <showRainSiteInfo ref="showRainSiteInfo"></showRainSiteInfo>
+  </div>
+
+</template>
+<script>
+  import "ol/ol.css";
+  import {
+    Tile as TileLayer,
+    Vector as VectorLayer
+  } from "ol/layer";
+  import XYZ from "ol/source/XYZ";
+  import {
+    TileArcGISRest
+  } from "ol/source"
+  import tilegrid from "ol/tilegrid/TileGrid"
+  import {
+    defaults as defaultControls
+  } from "ol/control";
+  import {
+    get as getprojection
+  } from "ol/proj"
+  import {
+    Projection,
+    addProjection
+  } from "ol/proj"
+  import Map from "ol/Map.js";
+  import View from "ol/View.js";
+
+  // 标注点位
+  import {
+    Vector as VectorSource
+  } from "ol/source";
+  import * as olProj from "ol/proj";
+  import {
+    Feature,
+    Overlay
+  } from "ol"
+  import {
+    Point
+  } from "ol/geom";
+  import {
+    Style,
+    Fill,
+    Stroke,
+    Circle as sCircle
+  } from "ol/style";
+
+
+  import proj4 from 'proj4'
+
+  import {
+    CONFIGS,
+    MAPCONFIGS
+  } from '@/views/rain/inspection/components/config'
+
+  import {
+    listroad
+  } from '../../../../api/basic/road.js'
+  import showRainEquipmentInfo from '@/views/rain/inspection/components/showRainEquipmentInfo'
+  import showRainSiteInfo from '@/views/rain/inspection/components/showRainSiteInfo'
+  import dialogShow from '@/components/dialogShow'
+
+  export default {
+    components: {
+      showRainEquipmentInfo,
+      showRainSiteInfo,
+      CONFIGS,
+      MAPCONFIGS,
+      dialogShow
+    },
+    data() {
+      return {
+        showSearch: false,
+        title: "巡查点位",
+        showmap: false,
+        width: "100%",
+        isShow: false,
+        map: null,
+        shopPopup: false,
+        nowAddress: "",
+        nowId: "",
+        types: "",
+        showMap: "M2",
+        mapRadioList: [{
+          id: "M2",
+          title: "天地图"
+        }, {
+          id: "S1",
+          title: "水利图"
+        }, {
+          id: "H1",
+          title: "河道图"
+        }],
+        checkList: ['M1', 'L1'],
+        mapCheckList: [{
+          id: "M1",
+          title: "高清影像"
+        }, {
+          id: "L1",
+          title: "路网"
+        }],
+        configs: CONFIGS,
+        mapConfigs: MAPCONFIGS,
+        projection: "EPSG:4490",
+        featuresArr: [],
+        flagLayer: "",
+        pointArr: [],
+
+        searchFields: {
+          is_export: 0,
+          is_auth: 1
+        },
+        roadsList: [],
+        roaddisabled: false,
+        roadloading: false,
+        mapdatesearch: "",
+        selects: {
+
+        },
+      };
+
+    },
+    created() {},
+    mounted() {
+      //  转换坐标系
+      proj4.defs("EPSG:4490", '+proj=longlat +ellps=GRS80 +no_defs')
+      this.projection = new Projection({
+        code: this.mapConfigs.Map_Code,
+        units: this.mapConfigs.Map_units,
+        axisOrientation: this.mapConfigs.Map_axisOrientation,
+        global: this.mapConfigs.Map_global,
+      });
+      addProjection(this.projection);
+      // this.initMap();
+    },
+    watch: {
+      pointArr(newval, oldval) {
+        if (newval) {
+          // this.resetPointArr()
+          this.pointArr = newval
+          this.showmap = false
+          this.$nextTick(function() {
+            this.showmap = true
+            this.showMap = 'M2'
+            this.checkList = ['M1', 'L1']
+            this.showMaps()
+          })
+        }
+      },
+      mapdatesearch(newVal, oldVal) {
+        if (newVal) {
+          this.searchFields.start_date = newVal[0]
+          this.searchFields.end_date = newVal[1]
+        } else {
+          this.searchFields.start_date = ""
+          this.searchFields.end_date = ""
+        }
+
+      }
+    },
+    methods: {
+      showMaps() {
+        this.$nextTick(function() {
+          this.initMap();
+        })
+      },
+      initMap() {
+        let map = new Map({
+          target: "olMap",
+          view: new View({
+            center: this.mapConfigs.MAP_center, //中心点经纬度
+            zoom: this.mapConfigs.Map_Zooms[0], //图层缩放大小
+            maxZoom: this.mapConfigs.Map_Zooms[1],
+            minZoom: this.mapConfigs.Map_Zooms[2],
+            projection: this.projection,
+          }),
+          layers: [],
+          // interactions: defaultControls({
+          //     doubleClickZoom: false,
+          // }),
+        });
+        this.map = map;
+        // 添加天地图
+        let url = "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}";
+        url = `${url}&T=vec_c&tk=82526d64e8504a0341f775c087863825`;
+        let tdtLayer = new TileLayer({
+          title: "天地图",
+          id: "M2",
+          type: "overlay",
+          visible: true,
+          layerType: "TD地图",
+          opacity: 1,
+          source: new XYZ({
+            crossOrigin: 'anonymous',
+            url: url,
+            projection: "EPSG:4326"
+          })
+        });
+        this.map.addLayer(tdtLayer);
+        this.ShowLayers()
+        this.setMarker()
+        this.addOverlay()
+        this.singleclick()
+
+        // this.map.layer2.setVisible(false)
+      },
+
+
+      //加载图层
+      ShowLayers() {
+        for (var i = 0; i < this.configs.length; i++) {
+          var result = this.configs[i];
+          if (result.layerType == "GIS地图") {
+            let projection = getprojection(result.projection);
+            let origin = [-400.0, 399.9999999999998];
+            let resolutions = [0.0027465820824835565, 0.0013732910412417782, 6.866455206208891E-4,
+              3.4332276031044456E-4, 1.7166138015522228E-4, 8.583069007761114E-5, 4.291534503880557E-5,
+              2.1457672519402785E-5, 1.0728836259701392E-5
+            ];
+
+            let fullExtent = [118.63622216442072, 30.12564516975147, 122.81217622965288, 32.74305227616479];
+
+            let tileGrid = new tilegrid({
+              tileSize: 256,
+              origin: origin,
+              extent: fullExtent,
+              resolutions: resolutions
+            });
+            let layer = new TileLayer({
+              title: result.title,
+              id: result.id,
+              type: result.type,
+              visible: result.visible,
+              layerType: result.layerType,
+              opacity: result.opacity,
+              source: new XYZ({
+                tileGrid: tileGrid,
+                url: result.url,
+                projection: projection
+              })
+            })
+            this.map.addLayer(layer);
+          } else {
+            let layer = new TileLayer({
+              title: result.title,
+              id: result.id,
+              type: result.type,
+              visible: result.visible,
+              layerType: result.layerType,
+              opacity: result.opacity,
+              source: new TileArcGISRest({
+                url: result.url,
+                projection: result.projection
+              }),
+            });
+            this.map.addLayer(layer);
+          }
+        }
+
+      },
+
+
+      // 设置巡查 点位
+      setMarker() {
+        // 设置图层
+        this.flagLayer = new VectorLayer({
+          source: new VectorSource()
+        });
+        // 添加图层
+        this.map.addLayer(this.flagLayer);
+        // 循环添加feature
+        for (let i = 0; i < this.pointArr.length; i++) {
+          // 创建feature，一个feature就是一个点坐标信息
+          let feature = new Feature({
+            geometry: new Point([this.pointArr[i][0], this.pointArr[i][1]])
+          });
+          // 设置展示 地址
+          feature.set('address', this.pointArr[i][2])
+          feature.set('types', this.pointArr[i][4])
+          // 设置 巡查ID
+          feature.setId(this.pointArr[i][3])
+          feature.setStyle(
+            new Style({
+              image: new sCircle({
+                fill: new Fill({
+                  color: '#0f9b0f',
+                }),
+                radius: 6,
+              }),
+            })
+          );
+          this.featuresArr.push(feature);
+        } // for 结束
+        this.flagLayer.getSource().addFeatures(this.featuresArr);
+      },
+
+      addOverlay() {
+        // 创建Overlay
+        let elPopup = this.$refs.popup;
+        this.popup = new Overlay({
+          element: elPopup,
+          positioning: "bottom-center",
+          stopEvent: false,
+          offset: [0, -20],
+        });
+        this.map.addOverlay(this.popup);
+      },
+      singleclick() {
+        // 点击
+        this.map.on("singleclick", (e) => {
+          // 判断是否点击在点上
+          let feature = this.map.forEachFeatureAtPixel(
+            e.pixel,
+            (feature) => feature
+          );
+          if (feature) {
+            this.shopPopup = true;
+            // 设置弹窗位置
+            let coordinates = feature.getGeometry().getCoordinates();
+            this.nowAddress = feature.get('address');
+            this.nowId = feature.getId()
+            this.types = feature.get('types');
+            this.popup.setPosition(coordinates);
+          } else {
+            this.shopPopup = false;
+          }
+        });
+      },
+
+      showInfo(id, type) {
+        // 日常雨水设施
+        if (type == 1) {
+          this.$refs.showRainEquipmentInfo.isShow = true
+          this.$refs.showRainEquipmentInfo.getEquipmentInfo(id)
+          this.$refs.showRainEquipmentInfo.infoId = id
+          this.$refs.showRainEquipmentInfo.formType = 'showform'
+        }
+        // 工地
+        if (type == 2) {
+          this.$refs.showRainSiteInfo.isShow = true
+          this.$refs.showRainSiteInfo.getSiteInfo(id)
+          this.$refs.showRainSiteInfo.infoId = id
+          this.$refs.showRainSiteInfo.formType = 'showform'
+        }
+
+      },
+      changeMap(val) {
+        for (var m of this.mapRadioList) {
+          if (m.id == val) {
+            console.log("val", val)
+            this.checkLayers(val, true)
+          } else {
+            this.checkLayers(m.id, false)
+          }
+        }
+      },
+      changeCheck(val) {
+        if (val.length == 0) {
+          for (var m of this.mapCheckList) {
+            this.checkLayers(m.id, false)
+          }
+        } else if (val.length == this.mapCheckList.length) {
+          console.log(val)
+          for (var m of this.mapCheckList) {
+            this.checkLayers(m.id, true)
+          }
+        } else {
+          for (var m of this.mapCheckList) {
+            if (m.id == val[0]) {
+              this.checkLayers(m.id, true)
+            } else {
+              this.checkLayers(m.id, false)
+            }
+          }
+        }
+
+      },
+
+      // 切换地图
+      checkLayers(id, bool) {
+
+        let layers = this.map.getLayers().getArray();
+        for (let i = 0; i < layers.length; i++) {
+          if (layers[i].get("id") == id) {
+
+            if (bool) {
+              console.log(id)
+              layers[i].setVisible(true);
+            } else {
+              layers[i].setVisible(false);
+            }
+          }
+        }
+      },
+      loadMap() {
+        this.$emit('loadMap', this.searchFields)
+      },
+      resetPointArr() {
+        this.map = null
+        let _that = this;
+        this.flagLayer
+          .getSource()
+          .getFeatures()
+          .forEach(function(feature) {
+            _that.flagLayer.getSource().removeFeature(feature);
+          });
+        this.featuresArr = [];
+        this.flagLayer.getSource().clear();
+      },
+      resetSearch() {
+        this.searchFields = {}
+        this.mapdatesearch = ['', '']
+      },
+      remoteRoad() {
+        this.roadsList = []
+      },
+      remoteMethod(query) {
+        if (query != '') {
+          this.roadloading = true
+          listroad({
+            name: query
+          }).then(res => {
+            this.roadloading = false
+            this.roadsList = res.data
+          })
+        } else {
+          this.roadsList = []
+        }
+      }
+
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  .chooseMap {
+    position: absolute;
+    margin: 15px 20px;
+    // width: 350px;
+    background-color: #fff;
+    border-radius: 4px;
+    border: 0.8px solid hsla(0, 0%, 60%, .2);
+    z-index: 99;
+    top: 0;
+    right: 0;
+    line-height: 40px;
+    // text-align: center;
+    padding: 0 40px 0 20px;
+  }
+
+  .map {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .popup {
+    width: 200px;
+    background-color: white;
+    padding: 18px;
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgb(177, 177, 177);
+
+    .info {
+      font-size: 14px;
+      text-align: left;
+
+      ul {
+        padding-left: 0;
+      }
+
+      .showinfo {
+        color: red;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .common-dialog {
+    margin: 0 !important;
+
+    .el-dialog__header {
+      padding-top: 0;
+
+      button {
+        height: 28px;
+        padding: 0 20px;
+        line-height: 28px;
+        margin-left: 10px;
+      }
+    }
+  }
 </style>
diff --git a/src/views/rain/inspection/maps.vue b/src/views/rain/inspection/maps.vue
index 2643a5e..02409e3 100644
--- a/src/views/rain/inspection/maps.vue
+++ b/src/views/rain/inspection/maps.vue
@@ -1,393 +1,8 @@
-
 <template>
-<dialogShow :title="title" :is-show.sync="isShow" :width="width" style="height:500px">
-  <template v-slot:content style="height:500px">
-    <div class="wrapper">
-      <div class="chooseMap">
-        <div>
-          <el-radio-group v-model="showMap" @change="changeMap">
-            <el-radio v-for="item in mapRadioList" :label="item.id">{{item.title}}</el-radio>
-          </el-radio-group>
-        </div>
-        <div>
-          <el-checkbox-group v-model="checkList" @change="changeCheck">
-              <el-checkbox v-for="item in mapCheckList"  :label="item.id">{{item.title}}</el-checkbox>
-          </el-checkbox-group>
-        </div>
-
-      </div>
-      <div class="map" id="olMap"></div>
-      <!-- 弹框 -->
-      <div ref="popup" class="popup" v-show="shopPopup">
-        <div class="info">
-          <div class="address">地址：{{nowAddress}}</div>
-          <div class="showinfo" @click='showInfo(nowId)'>查看详情</div>
-        </div>
-      </div>
-      <!-- 查看详情 -->
-      <showRainEquipmentInfo ref="showRainEquipmentInfo"></showRainEquipmentInfo>
-      <showRainSiteInfo ref="showRainSiteInfo"></showRainSiteInfo>
-    </div>
-
- </template>
-
-</dialogShow>
 </template>
-<script>
-import "ol/ol.css";
-import {Tile as TileLayer,Vector as VectorLayer } from "ol/layer";
-import XYZ from "ol/source/XYZ";
-import {TileArcGISRest} from "ol/source"
-import tilegrid from "ol/tilegrid/TileGrid"
-import { defaults as defaultControls } from "ol/control";
-import {get as getprojection} from "ol/proj"
-import {Projection,addProjection} from "ol/proj"
-import Map from "ol/Map.js";
-import View from "ol/View.js";
-
-// 标注点位
-import { Vector as VectorSource } from "ol/source";
-import * as olProj from "ol/proj";
-import {Feature, Overlay} from "ol"
-import { Point } from "ol/geom";
-import { Style, Fill, Stroke, Circle as sCircle } from "ol/style";
-
-
-import proj4 from 'proj4'
-
-import {CONFIGS,MAPCONFIGS} from '@/views/rain/inspection/components/config'
-
-import showRainEquipmentInfo from '@/views/rain/inspection/components/showRainEquipmentInfo'
-import showRainSiteInfo from '@/views/rain/inspection/components/showRainSiteInfo'
-import dialogShow from '@/components/dialogShow'
-
-export default {
-  components: {
-    showRainEquipmentInfo,
-    showRainSiteInfo,
-    CONFIGS,
-    MAPCONFIGS,
-    dialogShow
-  },
-  data() {
-   return {
-     title: "巡查点位",
-     width: "100%",
-     isShow: true,
-
-      map: null,
-      shopPopup:false,
-      nowAddress:"",
-      nowId:"",
-      showMap:"M2",
-      mapRadioList:[
-        {
-          id:"M2",
-          title:"天地图"
-        },{
-          id:"S1",
-          title:"水利图"
-        },{
-          id:"H1",
-          title:"河道图"
-        }
-      ],
-      checkList:['M1','L1'],
-      mapCheckList:[
-        {
-          id:"M1",
-          title:"高清影像",
-          checked:true
-        },{
-          id:"L1",
-          title:"路网",
-          checked:true
-        }
-      ],
-      configs :CONFIGS,
-      mapConfigs:MAPCONFIGS,
-      projection:"EPSG:4490",
-      featuresArr:[],
-
-      pointArr:[
-        [120.63212, 31.26249, 'suzhouas',51],
-        [120.63212, 30.26249, 'suzhouwown2',50],
-        [120.55590234876, 31.320813249765, 'suzhouwown2',49],
-      ]
-    };
-
-  },
-  created() {
-  },
-  mounted() {
-    //  转换坐标系
-  
-
-  },
-  methods: {
-    showMap(){
-      this.$nextTick(function () {
-            this.initMap();
-      })
-    },
-    initMap() {
-      proj4.defs("EPSG:4490", '+proj=longlat +ellps=GRS80 +no_defs')
-      this.projection = new Projection({
-          code: this.mapConfigs.Map_Code,
-          units: this.mapConfigs.Map_units,
-          axisOrientation: this.mapConfigs.Map_axisOrientation,
-          global: this.mapConfigs.Map_global,
-      });
-      addProjection(this.projection);
-     let map = new Map({
-       target: "olMap",
-        view: new View({
-          center: this.mapConfigs.MAP_center, //中心点经纬度
-          zoom: this.mapConfigs.Map_Zooms[0], //图层缩放大小
-          maxZoom:this.mapConfigs.Map_Zooms[1],
-          minZoom:this.mapConfigs.Map_Zooms[2],
-          projection: this.projection,
-        }),
-        layers:[],
-        // interactions: defaultControls({
-        //     doubleClickZoom: false,
-        // }),
-      });
-      this.map = map;
-      // 添加天地图
-      let url = "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}";
-      url = `${url}&T=vec_c&tk=82526d64e8504a0341f775c087863825`;
-      let tdtLayer = new TileLayer({
-        title: "天地图",
-        id: "M2",
-        type: "overlay",
-        visible: true,
-        layerType: "TD地图",
-        opacity: 1,
-        source: new XYZ({
-            crossOrigin:'anonymous',
-            url: url,
-            projection:"EPSG:4326"
-          })
-      });
-      this.map.addLayer(tdtLayer);
-      this.ShowLayers()
-      this.setMarker()
-      this.addOverlay()
-      this.singleclick()
 
-            // this.map.layer2.setVisible(false)
-
-    },
-
-
-    //加载图层
-    ShowLayers() {
-        for (var i = 0; i < this.configs.length; i++) {
-            var result = this.configs[i];
-            if (result.layerType == "GIS地图") {
-                let projection = getprojection(result.projection);
-                let origin = [-400.0, 399.9999999999998];
-                let resolutions = [0.0027465820824835565,0.0013732910412417782,6.866455206208891E-4,3.4332276031044456E-4,1.7166138015522228E-4,8.583069007761114E-5,4.291534503880557E-5,2.1457672519402785E-5,1.0728836259701392E-5];
-
-                let fullExtent = [118.63622216442072, 30.12564516975147, 122.81217622965288, 32.74305227616479];
-
-                let tileGrid = new tilegrid({
-                    tileSize: 256,
-                    origin: origin,
-                    extent: fullExtent,
-                    resolutions: resolutions
-                });
-                let layer = new TileLayer({
-                    title: result.title,
-                    id: result.id,
-                    type: result.type,
-                    visible: result.visible,
-                    layerType: result.layerType,
-                    opacity: result.opacity,
-                    source: new XYZ({
-                        tileGrid: tileGrid,
-                        url: result.url,
-                        projection: projection
-                    })
-                })
-                this.map.addLayer(layer);
-            }else {
-                let layer = new TileLayer({
-                    title: result.title,
-                    id: result.id,
-                    type: result.type,
-                    visible: result.visible,
-                    layerType: result.layerType,
-                    opacity: result.opacity,
-                    source: new TileArcGISRest({
-                        url: result.url,
-                        projection: result.projection
-                    }),
-                });
-                this.map.addLayer(layer);
-            }
-        }
-
-    },
-
-
-// 设置巡查 点位
-    setMarker() {
-      // 设置图层
-          let flagLayer = new VectorLayer({
-              id:"pointer",
-              source: new VectorSource()
-          });
-          // 添加图层
-          this.map.addLayer(flagLayer);
-      // 循环添加feature
-      for (let i = 0; i < this.pointArr.length; i++) {
-          // 创建feature，一个feature就是一个点坐标信息
-          let feature = new Feature({
-              geometry: new Point([this.pointArr[i][0], this.pointArr[i][1]])
-          });
-          // 设置展示 地址
-          feature.set('address',this.pointArr[i][2])
-          // 设置 巡查ID
-          feature.setId(this.pointArr[i][3])
-          feature.setStyle(
-            new Style({
-              image: new sCircle({
-                fill: new Fill({
-                  color: '#38ef7d',
-                }),
-                radius: 6,
-              }),
-            })
-          );
-          this.featuresArr.push(feature);
-      } // for 结束
-      flagLayer.getSource().addFeatures(this.featuresArr);
-    },
-
-    addOverlay() {
-      // 创建Overlay
-      let elPopup = this.$refs.popup;
-      this.popup = new Overlay({
-        element: elPopup,
-        positioning: "bottom-center",
-        stopEvent: false,
-        offset: [0, -20],
-      });
-      this.map.addOverlay(this.popup);
-    },
-    singleclick() {
-      // 点击
-      this.map.on("singleclick", (e) => {
-        // 判断是否点击在点上
-        let feature = this.map.forEachFeatureAtPixel(
-          e.pixel,
-          (feature) => feature
-        );
-        if (feature) {
-          this.shopPopup = true;
-          // 设置弹窗位置
-          let coordinates = feature.getGeometry().getCoordinates();
-          this.nowAddress = feature.get('address');
-          this.nowId = feature.getId()
-          this.popup.setPosition(coordinates);
-        } else {
-          this.shopPopup = false;
-        }
-      });
-    },
-
-    showInfo(id){
-        this.$refs.showRainEquipmentInfo.isShow = true
-        this.$refs.showRainEquipmentInfo.getEquipmentInfo(id)
-        this.$refs.showRainEquipmentInfo.infoId = id
-        this.$refs.showRainEquipmentInfo.formType = 'showform'
-    },
-    changeMap(val){
-      for(var m of this.mapRadioList){
-        if(val==m.id){
-          this.checkLayers(val,true)
-        }else{
-          this.checkLayers(m.id,false)
-        }
-      }
-    },
-    changeCheck(val){
-      if(val.length==0){
-        for(var m of this.mapCheckList){
-          this.checkLayers(m.id,false)
-        }
-      }else if(val.length==this.mapCheckList.length){
-        console.log(val)
-        for(var m of this.mapCheckList){
-          this.checkLayers(m.id,true)
-        }
-      }else{
-        for(var m of this.mapCheckList){
-          if(m.id==val[0]){
-            this.checkLayers(m.id,true)
-          }else{
-            this.checkLayers(m.id,false)
-          }
-        }
-      }
-
-    },
-
-    // 切换地图
-    checkLayers(id, bool) {
-        var layers = this.map.getLayers().getArray();
-        for (let i = 0; i < layers.length; i++) {
-            if (layers[i].get("id") == id) {
-                if (bool) {
-                    layers[i].setVisible(true);
-                }else{
-                    layers[i].setVisible(false);
-                }
-            }
-        }
-    }
-
-  },
-};
+<script>
 </script>
-<style lang="scss" scoped>
 
-.chooseMap{
-  position: absolute;
-  margin: 15px 20px;
-  // width: 350px;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 0.8px solid hsla(0,0%,60%,.2);
-  z-index:99;
-  top: 0;
-  right: 0;
-  line-height: 40px;
-  // text-align: center;
-  padding:0 40px 0 20px;
-}
-.map {
-  width: 100vw;
-  height: 100vh;
-}
-.popup {
-  width: 200px;
-  background-color: white;
-  padding: 18px;
-  border-radius: 10px;
-  box-shadow: 0 0 15px rgb(177, 177, 177);
-  .info {
-    font-size: 14px;
-    text-align: left;
-    ul {
-      padding-left: 0;
-    }
-    .showinfo{
-      color:red;
-      cursor: pointer;
-    }
-  }
-}
-</style>
+<style>
+</style>
\ No newline at end of file
diff --git a/src/views/rain/inspection/plan.vue b/src/views/rain/inspection/plan.vue
index 47d5de2..96c5072 100644
--- a/src/views/rain/inspection/plan.vue
+++ b/src/views/rain/inspection/plan.vue
@@ -250,15 +250,15 @@
               field: "area_name",
               title: "巡查片区",
               type: "string",
-              width:180,
+              width:120,
               align: "center"
           },
           {
               field: "road_name",
               title: "巡查道路",
               type: "road_name",
-              width:180,
-              align: "center"
+              width:680,
+              align: "left"
           },
           {
               field: "day",
diff --git a/src/views/rain/maintain/maps.vue b/src/views/rain/maintain/maps.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/src/views/rain/maintain/maps.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file