diff --git a/package.json b/package.json
index cfbb01a..58d5885 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
     "avue-plugin-map": "^1.0.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "echarts": "^4.2.1",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
+    "moment": "^2.29.4",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
diff --git a/src/api/rain/report/inspectionContentReport.js b/src/api/rain/report/inspectionContentReport.js
new file mode 100644
index 0000000..9506a6a
--- /dev/null
+++ b/src/api/rain/report/inspectionContentReport.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function inspectionChart(data) {
+  return request({
+    url: '/api/admin/rain-inspection/chart',
+    method: 'get',
+    params:data
+  })
+}
diff --git a/src/api/rain/report/maintainContentReport.js b/src/api/rain/report/maintainContentReport.js
new file mode 100644
index 0000000..ec7dcec
--- /dev/null
+++ b/src/api/rain/report/maintainContentReport.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function maintainsChart(data) {
+  return request({
+    url: '/api/admin/rain-maintains/chart',
+    method: 'get',
+    params:data
+  })
+}
diff --git a/src/main.js b/src/main.js
index af26d29..9ec8ca4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,7 +13,9 @@ import router from './router'
 
 import '@/icons' // icon
 import '@/permission' // permission control
-import ViewUI from 'view-design';
+import ViewUI from 'view-design';
+import moment from "moment"
+Vue.prototype.$moment = moment;
 import './styles/viewui-mine.less';
 Vue.use(ViewUI);
 /**
diff --git a/src/utils/request.js b/src/utils/request.js
index b530ddb..0ec346c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,87 +1,101 @@
-import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
-import store from '@/store'
-import { getToken } from '@/utils/auth'
-
-// create an axios instance
-const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
-  // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 50000 // request timeout
-})
-
-// request interceptor
-service.interceptors.request.use(
-  config => {
-    // do something before request is sent
-
-    if (store.getters.token) {
-      // let each request carry token
-      // ['X-Token'] is a custom headers key
-      // please modify it according to the actual situation
-      //config.headers['X-Token'] = getToken();
-
-      config.headers['Authorization'] ="Bearer "+getToken()
-    }
-    return config
-  },
-  error => {
-    // do something with request error
-    console.log(error) // for debug
-    return Promise.reject(error)
-  }
-)
-
-// response interceptor
-service.interceptors.response.use(
-  /**
-   * If you want to get http information such as headers or status
-   * Please return  response => response
-  */
-
-  /**
-   * Determine the request status by custom code
-   * Here is just an example
-   * You can also judge the status by HTTP Status Code
-   */
-  response => {
-    const res = response.data
-
-    // if the custom code is not 20000, it is judged as an error.
-    if (res.errcode) {
-      Message({
-        message: res.errmsg || 'Error',
-        type: 'error',
-        duration: 5 * 1000
-      })
-
-      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.errcode === 50008 || res.errcode === 50012 || res.errcode === 50014) {
-        // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          store.dispatch('user/resetToken').then(() => {
-            location.reload()
-          })
-        })
-      }
-      return Promise.reject(new Error(res.errmsg || 'Error'))
-    } else {
-      return res
-    }
-  },
-  error => {
-    console.log('err' + error) // for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(error)
-  }
-)
-
+import axios from 'axios'
+import {
+  MessageBox,
+  Message,
+  Loading
+} from 'element-ui'
+import store from '@/store'
+import {
+  getToken
+} from '@/utils/auth'
+let loading;
+
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 50000 // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+    loading = Loading.service({
+      lock: true,
+      background: "rgba(0,0,0,0.4)",
+      text: "正在加载中..."
+    })
+    if (store.getters.token) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      //config.headers['X-Token'] = getToken();
+
+      config.headers['Authorization'] = "Bearer " + getToken()
+    }
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    const res = response.data
+
+    loading.close()
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.errcode) {
+      Message({
+        message: res.errmsg || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      if (res.errcode === 50008 || res.errcode === 50012 || res.errcode === 50014) {
+        // to re-login
+        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again',
+          'Confirm logout', {
+            confirmButtonText: 'Re-Login',
+            cancelButtonText: 'Cancel',
+            type: 'warning'
+          }).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload()
+          })
+        })
+      }
+      return Promise.reject(new Error(res.errmsg || 'Error'))
+    } else {
+      return res
+    }
+  },
+  error => {
+    loading.close()
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
 export default service
diff --git a/src/views/rain/report.vue b/src/views/rain/report.vue
new file mode 100644
index 0000000..569a535
--- /dev/null
+++ b/src/views/rain/report.vue
@@ -0,0 +1,9 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
diff --git a/src/views/rain/report/components/BarChart.vue b/src/views/rain/report/components/BarChart.vue
new file mode 100644
index 0000000..cef9fb2
--- /dev/null
+++ b/src/views/rain/report/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/rain/report/components/LineChart.vue b/src/views/rain/report/components/LineChart.vue
new file mode 100644
index 0000000..1cc468a
--- /dev/null
+++ b/src/views/rain/report/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/rain/report/components/PieChart.vue b/src/views/rain/report/components/PieChart.vue
new file mode 100644
index 0000000..3979b90
--- /dev/null
+++ b/src/views/rain/report/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: true
+          },
+          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/rain/report/components/mixins/resize.js b/src/views/rain/report/components/mixins/resize.js
new file mode 100644
index 0000000..234953b
--- /dev/null
+++ b/src/views/rain/report/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/rain/report/inspectionContentReport.vue b/src/views/rain/report/inspectionContentReport.vue
new file mode 100644
index 0000000..789f82a
--- /dev/null
+++ b/src/views/rain/report/inspectionContentReport.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="container">
+    <!-- 查询配置 -->
+    <div style="padding: 0px 20px">
+      <div ref="lxHeader">
+        <LxHeader icon="md-apps" text="巡查内容统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+          <div slot="content"></div>
+          <slot>
+            <div class="searchFields">
+
+              <DatePicker type="datetimerange" v-model="searchFields.daterange" format="yyyy-MM-dd" placeholder="选择时间范围"
+                style="width: 250px;" @on-ok="handleDaterange"></DatePicker>
+              <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
+              <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
+
+            </div>
+          </slot>
+        </LxHeader>
+      </div>
+      <div class="table-tree" v-if="showData">
+        <el-table :data="tableData" :height="tableHeight" class="v-table" style="width: 100%">
+          <el-table-column type="index" align="center">
+          </el-table-column>
+          <el-table-column prop="userName" label="巡查内容" sortable width="180">
+          </el-table-column>
+          <el-table-column prop="total" label="巡查次数" sortable>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <line-chart :chartData="rptData" :height="chartHeight" />
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import LineChart from "./components/LineChart.vue"
+  import {
+    inspectionChart
+  } from '../../../api/rain/report/inspectionContentReport.js'
+  export default {
+    components: {
+      LxHeader,
+      LineChart
+    },
+    created() {
+
+      this.initLoad();
+      var sdate = this.$moment().format("yyyy-01-01");
+      this.searchFields.daterange.push(sdate)
+      this.searchFields.daterange.push(this.$moment(sdate).add(1, 'years').add(-1, "days").format("yyyy-MM-DD"));
+
+      this.searchFields.start_date = this.formatdate(this.searchFields.daterange[0]);
+      this.searchFields.end_date = this.formatdate(this.searchFields.daterange[1]);
+      this.load();
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {
+          start_date: "",
+          end_date: "",
+          daterange: []
+        },
+        tableData: [],
+        tableHeight: 0,
+        chartHeight: "",
+        btnText: "数据展示",
+        dataArr: [],
+        rptData: {
+          xArr: [],
+          series: {},
+          legendArr: []
+        }
+      }
+    },
+    methods: {
+
+      handleDaterange() {
+      this.searchFields.start_date = this.formatdate(this.searchFields.daterange[0]);
+      this.searchFields.end_date = this.formatdate(this.searchFields.daterange[1]);
+      },
+      formatdate(date) {
+        return this.$moment(date).format("YYYY-MM-DD")
+      },
+      viewPart() {
+        this.showData = !this.showData;
+        this.btnText = this.showData ? "图表展示" : "数据展示"
+      },
+      initLoad() {
+        var that = this;
+        var clientHeight = document.documentElement.clientHeight
+        var lxHeader_height = 96.5; //查询 头部
+        var paginationHeight = 37; //分页的高度
+        var topHeight = 50; //页面 头部
+        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
+        that.tableHeight = tableHeight;
+        that.chartHeight = tableHeight + "px"
+
+      },
+      handleSelectSClient(item) {
+        this.searchFields.material_client_id = item.id;
+      },
+      handleSelectUser(item) {
+        this.searchFields.user_original_id = item.id;
+      },
+      load() {
+        // this.showData = true;
+        var planarr = [];
+        var xArr = [];
+        var usearr = [];
+        var tableArr = [];
+        inspectionChart({
+          ...this.searchFields
+        }).then((res) => {
+          console.log(res);
+          for (var m of res) {
+            xArr.push(m.ask_content_name);
+            planarr.push(
+              m.ask_content_id_count
+            )
+            tableArr.push({
+              userName: m.ask_content_name,
+              total: m.ask_content_id_count,
+            })
+          }
+          this.rptData.series = [{
+            name: "巡查次数",
+            type: 'bar',
+            data: planarr,
+            barMaxWidth: 20, // 每一个都要设置
+          }]
+          this.rptData.xArr = xArr;
+          this.rptData.legendArr = xArr;
+          this.tableData = tableArr;
+        }).catch((res) => {})
+      }
+
+    }
+  };
+</script>
+<style>
+  .searchFields .el-input__inner {
+    height: 32px !important;
+    line-height: 32px !important;
+  }
+</style>
diff --git a/src/views/rain/report/maintainContentReport.vue b/src/views/rain/report/maintainContentReport.vue
new file mode 100644
index 0000000..6bb25e6
--- /dev/null
+++ b/src/views/rain/report/maintainContentReport.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="container">
+    <!-- 查询配置 -->
+    <div style="padding: 0px 20px">
+      <div ref="lxHeader">
+        <LxHeader icon="md-apps" text="养护内容统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+          <div slot="content"></div>
+          <slot>
+            <div class="searchFields">
+              <el-select class="vm10" filterable v-model="searchFields.type" placeholder="请选择所属片区">
+                <el-option v-for="item in rainTypes" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+              <DatePicker type="datetimerange" v-model="searchFields.daterange" format="yyyy-MM-dd" placeholder="选择时间范围"
+                style="width: 250px;margin-left: 15px;" @on-ok="handleDaterange"></DatePicker>
+              <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
+              <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
+
+            </div>
+          </slot>
+        </LxHeader>
+      </div>
+      <div class="table-tree" v-if="showData">
+        <el-table :data="tableData" :height="tableHeight" class="v-table" style="width: 100%">
+          <el-table-column type="index" align="center">
+          </el-table-column>
+          <el-table-column prop="userName" label="养护内容" sortable width="180">
+          </el-table-column>
+          <el-table-column prop="total" label="养护次数" sortable>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <line-chart :chartData="rptData" :height="chartHeight" />
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import LineChart from "./components/LineChart.vue"
+  import {
+    maintainsChart
+  } from '../../../api/rain/report/maintainContentReport.js'
+  export default {
+    components: {
+      LxHeader,
+      LineChart
+    },
+    created() {
+
+      this.initLoad();
+      var sdate = this.$moment().format("yyyy-01-01");
+      this.searchFields.daterange.push(sdate)
+      this.searchFields.daterange.push(this.$moment(sdate).add(1, 'years').add(-1, "days").format("yyyy-MM-DD"));
+
+      this.searchFields.start_date = this.formatdate(this.searchFields.daterange[0]);
+      this.searchFields.end_date = this.formatdate(this.searchFields.daterange[1]);
+      this.load();
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {
+          start_date: "",
+          end_date: "",
+          daterange: [],
+          type: 1
+        },
+        rainTypes: [{
+            id: 1,
+            name: "雨水管道疏挖"
+          },
+          {
+            id: 2,
+            name: "雨水管道疏通"
+          },
+          {
+            id: 3,
+            name: "汛期助排"
+          },
+          {
+            id: 5,
+            name: "出水口排查"
+          }
+        ],
+        tableData: [],
+        tableHeight: 0,
+        chartHeight: "",
+        btnText: "数据展示",
+        dataArr: [],
+        rptData: {
+          xArr: [],
+          series: {},
+          legendArr: []
+        }
+      }
+    },
+    methods: {
+
+      handleDaterange() {
+        this.searchFields.start_date = this.formatdate(this.searchFields.daterange[0]);
+        this.searchFields.end_date = this.formatdate(this.searchFields.daterange[1]);
+      },
+      formatdate(date) {
+        return this.$moment(date).format("YYYY-MM-DD")
+      },
+      viewPart() {
+        this.showData = !this.showData;
+        this.btnText = this.showData ? "图表展示" : "数据展示"
+      },
+      initLoad() {
+        var that = this;
+        var clientHeight = document.documentElement.clientHeight
+        var lxHeader_height = 96.5; //查询 头部
+        var paginationHeight = 37; //分页的高度
+        var topHeight = 50; //页面 头部
+        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
+        that.tableHeight = tableHeight;
+        that.chartHeight = tableHeight + "px"
+
+      },
+      handleSelectSClient(item) {
+        this.searchFields.material_client_id = item.id;
+      },
+      handleSelectUser(item) {
+        this.searchFields.user_original_id = item.id;
+      },
+      load() {
+        // this.showData = true;
+        var planarr = [];
+        var xArr = [];
+        var usearr = [];
+        var tableArr = [];
+        maintainsChart({
+          ...this.searchFields
+        }).then((res) => {
+          console.log(res);
+          for (var m of res) {
+            xArr.push(m.title_name);
+            planarr.push(
+              m.title_id_count
+            )
+            tableArr.push({
+              userName: m.title_name,
+              total: m.title_id_count,
+            })
+          }
+          this.rptData.series = [{
+            name: "养护次数",
+            type: 'bar',
+            data: planarr,
+            barMaxWidth: 20, // 每一个都要设置
+          }]
+          this.rptData.xArr = xArr;
+          this.rptData.legendArr = xArr;
+          this.tableData = tableArr;
+        }).catch((res) => {})
+      }
+
+    }
+  };
+</script>
+<style>
+  .searchFields .el-input__inner {
+    height: 32px !important;
+    line-height: 32px !important;
+  }
+
+  .vm10 input {
+    height: 32px;
+    vertical-align: middle;
+  }
+</style>