From 3aa1284cfb8b8f81ab331f20a70c35400be5f4b3 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Wed, 7 Sep 2022 14:19:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=AF=E6=B0=B4=E7=82=B9echarts=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/waterPoints.js                        |  33 +-
 .../waterPoints/components/ComplaintEvent.vue | 152 +++---
 .../waterPoints/components/WaterHistory.vue   | 445 ++++++++++++++++++
 .../waterPoints/components/WaterPointPop.vue  | 251 +++++-----
 4 files changed, 689 insertions(+), 192 deletions(-)
 create mode 100644 src/views/pages/waterPoints/components/WaterHistory.vue

diff --git a/src/api/waterPoints.js b/src/api/waterPoints.js
index 3c7cff4..2c4d460 100644
--- a/src/api/waterPoints.js
+++ b/src/api/waterPoints.js
@@ -8,7 +8,6 @@ export function selectWaterPoint(params) {
   })
 }
 
-
 export function selectWaterCamera(params) {
   return request({
     url: 'api/project/water/selectWaterCamera',
@@ -65,3 +64,35 @@ export function selectWaterPoliceList(params) {
     params
   })
 }
+// 根据积水点查询该点存在积水情况的日期
+export function selectWaterPondingDate(params) {
+  return request({
+    url: 'api/project/water/selectWaterPondingDate',
+    method: 'get',
+    params
+  })
+}
+// 查询当天的积水点深度情况
+export function selectWaterPondingInDay(params) {
+  return request({
+    url: 'api/project/water/selectWaterPondingInDay',
+    method: 'get',
+    params
+  })
+}
+// 查询积水点当月内每天最深深度
+export function selectWaterPondingInMonth(params) {
+  return request({
+    url: 'api/project/water/selectWaterPondingInMonth',
+    method: 'get',
+    params
+  })
+}
+// 查询积水点当月内每天积水时长
+export function selectWaterPondingHoursInMonth(params) {
+  return request({
+    url: 'api/project/water/selectWaterPondingHoursInMonth',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/pages/waterPoints/components/ComplaintEvent.vue b/src/views/pages/waterPoints/components/ComplaintEvent.vue
index 007c5e0..d09a821 100644
--- a/src/views/pages/waterPoints/components/ComplaintEvent.vue
+++ b/src/views/pages/waterPoints/components/ComplaintEvent.vue
@@ -23,6 +23,7 @@
           </div>
         </div>
       </div>
+      <div class="allNum">总数：{{allNum}}个</div>
       <div class="filter-btn-box">
         <div class="filter-btn-processStateSelect">
           <div  class="processStateSelect-btn"
@@ -62,7 +63,7 @@
 <script>
 import dayjs from 'dayjs'
 import { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
-import { selectWaterPoint,selectWaterCamera,selectReportOrigin, selectWaterPoliceList } from '@/api/waterPoints'
+import { selectWaterPoint, selectWaterCamera, selectReportOrigin, selectWaterPoliceList } from '@/api/waterPoints'
 import StatisticalAnalysis from './StatisticalAnalysis.vue'
 import bus from '@/views/layout/bus'
 import {
@@ -75,33 +76,33 @@ export default {
     return {
       tabsButton: [
         {
-          title:'全部',
-          id:'all'
+          title: '全部',
+          id: 'all'
         },
         {
-          title:'水务局',
-          id:'auditorReport'
+          title: '水务局',
+          id: 'auditorReport'
         },
         {
-          title:'城管局',
-          id:'case'
+          title: '交警',
+          id: 'trafficPolice'
         },
         {
-          title:'智能算法识别',
-          id:'video'
+          title: '群众上报',
+          id: 'commonReport'
         },
         {
-          title:'水务集团',
-          id:'null'
+          title: '智能算法识别',
+          id: 'video'
         },
         {
-          title:'群众上报',
-          id:'commonReport'
-        },
-        {
-          title:'交警',
-          id:'trafficPolice'
-        },
+          title: '城管局',
+          id: 'case'
+        }
+        // {
+        //   title:'水务集团',
+        //   id:'null'
+        // },
       ],
       tabsActiveName: '全部',
       statisticalAnalysisIsShow: false,
@@ -124,10 +125,12 @@ export default {
         //   topType: '物联感知',
         //   type: '影响车辆(>30cm)',
         //   text: '液位：12cm'
-        // }, 
+        // },
       ],
-      listAll:[],
-      policeList: []
+      listAll: [],
+      policeList: [],
+      // 单项总数
+      allNum: 0
     }
   },
   components: {
@@ -137,8 +140,8 @@ export default {
     const currentDate = new Date()
     currentDate.setTime(currentDate.getTime())
     currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000)
-    const yMonth = currentDate.getMonth() > 8 ? currentDate.getMonth() + 1: '0' + (currentDate.getMonth()+1)
-    const yDate = currentDate.getDate() > 9 ? currentDate.getDate(): '0' + currentDate.getDate()
+    const yMonth = currentDate.getMonth() > 8 ? currentDate.getMonth() + 1 : '0' + (currentDate.getMonth() + 1)
+    const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
     this.preTime =
       currentDate.getFullYear() +
       '-' +
@@ -154,13 +157,14 @@ export default {
     // this.selectRaise()
     // this.selectNoiceEvent()
 
-    selectWaterPoint().then( (res) => {
+    selectWaterPoint().then((res) => {
       selectWaterPoliceList().then((policeRes) => {
-        this.policeList = policeRes.data.data || [] 
-        let dataAll = [...res.data.data, ...policeRes.data.data]
+        this.policeList = policeRes.data.data || []
+        const dataAll = [...res.data.data, ...policeRes.data.data]
         this.list = dataAll
         this.listAll = dataAll
-        bus.$emit('waterPoint',dataAll)
+        this.allNum = this.list.length
+        bus.$emit('waterPoint', dataAll)
       })
       // this.list = res.data.data
       // this.listAll = res.data.data
@@ -173,9 +177,9 @@ export default {
     // })
   },
   methods: {
-    getDesc(item) {
-      let deepth = item.waterPointDepth ? parseFloat(item.waterPointDepth) * 100 : 0
-      switch(item.pointLevel) {
+    getDesc (item) {
+      const deepth = item.waterPointDepth ? (parseFloat(item.waterPointDepth) * 100).toFixed(0) : 0
+      switch (item.pointLevel) {
         case 'traffic':
           return `影响车辆(${deepth}cm)`
           break
@@ -190,76 +194,80 @@ export default {
     selectType (item) {
       if (this.filterButton.typeActive.indexOf(item) > -1) {
         this.filterButton.typeActive.splice(this.filterButton.typeActive.indexOf(item), 1)
-        if(this.filterButton.typeActive.length == 0){
+        if (this.filterButton.typeActive.length == 0) {
           this.list = []
-        } else{
-          switch(item){
+        } else {
+          switch (item) {
             case '影响车辆(>30cm)':
-              this.list = this.list.filter( v => v.pointLevel != 'traffic')
-            break;
+              this.list = this.list.filter(v => v.pointLevel != 'traffic')
+              break
             case '影响行人(<30cm)':
-              this.list = this.list.filter( v => v.pointLevel != 'pedestrian')
-            break;
+              this.list = this.list.filter(v => v.pointLevel != 'pedestrian')
+              break
             case '无积水(<10cm)':
-              this.list = this.list.filter( v => v.pointLevel != 'non')
-            break;
+              this.list = this.list.filter(v => v.pointLevel != 'non')
+              break
           }
         }
       } else {
         this.filterButton.typeActive.push(item)
-        if(this.filterButton.typeActive.length == 3){
+        if (this.filterButton.typeActive.length == 3) {
           this.list = this.listAll
         } else {
-          switch(item){
+          switch (item) {
             case '影响车辆(>30cm)':
-              this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'traffic'))
-            break;
+              this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'traffic'))
+              break
             case '影响行人(<30cm)':
-              this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'pedestrian'))
-            break;
+              this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian'))
+              break
             case '无积水(<10cm)':
-              this.list = this.list.concat(this.listAll.filter( v => v.pointLevel == 'non'))
-            break;
+              this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non'))
+              break
           }
         }
       }
 
-      bus.$emit('waterPoint',this.list)
+      bus.$emit('waterPoint', this.list)
       this.$parent.eventCheckList = this.filterButton.typeActive
     },
     tabHandleClick (item) {
+      this.allNum = 0
       this.tabsActiveName = item.title
       this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
 
       if (item.title == '全部') {
-        selectWaterPoint().then( (res) => {
+        selectWaterPoint().then((res) => {
           selectWaterPoliceList().then((policeRes) => {
-            let dataAll = [...res.data.data, ...policeRes.data.data]
+            const dataAll = [...res.data.data, ...policeRes.data.data]
             this.list = dataAll
             // this.listAll = dataAll
-            bus.$emit('waterPoint',dataAll)
+            bus.$emit('waterPoint', dataAll)
+            this.allNum = this.list.length
           })
         })
-      } else if(item.title == '交警') {
+      } else if (item.title == '交警') {
         this.list = this.policeList
-        bus.$emit('waterPoint',this.list)
-      } else if(item.id == 'auditorReport') {
+        this.allNum = this.list.length
+        bus.$emit('waterPoint', this.list)
+      } else if (item.id == 'auditorReport') {
         this.list = []
         this.listAll.forEach(tempItem => {
-          if(tempItem.reportOrigin === 'auditorReport') {
+          if (tempItem.reportOrigin === 'auditorReport') {
             this.list.push(tempItem)
           }
         })
-        bus.$emit('waterPoint',this.list)
+        this.allNum = this.list.length
+        bus.$emit('waterPoint', this.list)
       } else {
-        selectReportOrigin({reportOrigin:item.id}).then( (res) => {
-          
+        selectReportOrigin({ reportOrigin: item.id }).then((res) => {
           this.list = res.data.data
-          bus.$emit('waterPoint',res.data.data)
+          this.allNum = this.list.length
+          bus.$emit('waterPoint', res.data.data)
         })
       }
     },
-    reportOrigin(reportOrigin){
+    reportOrigin (reportOrigin) {
       switch (reportOrigin) {
         case 'auditorReport':
           return '水务集团上报'
@@ -272,7 +280,6 @@ export default {
         default:
           return '未知'
       }
-      
     },
     openStatisticalAnalysis () {
       this.statisticalAnalysisIsShow = true
@@ -347,8 +354,8 @@ export default {
       }
     },
 
-    openDialog(item) {
-      bus.$emit("openWaterPointDialog", item);
+    openDialog (item) {
+      bus.$emit('openWaterPointDialog', item)
     }
   }
 }
@@ -494,7 +501,10 @@ export default {
         cursor: pointer;
       }
     }
-
+    .allNum {
+      color: #ffffff;
+      margin: 12px 0px 0 12px;
+    }
     .filter-btn-box {
       margin-top: 16px;
       .filter-btn-typeSelect {
@@ -535,17 +545,17 @@ export default {
             margin-left: 8px;
           }
         }
-        .processStateSelect-btn:nth-child(1){
+        .processStateSelect-btn:nth-child(1) {
           .select-circle {
             border: 1px solid #f74b3f;
           }
         }
-        .processStateSelect-btn:nth-child(2){
+        .processStateSelect-btn:nth-child(2) {
           .select-circle {
             border: 1px solid #ffae2b;
           }
         }
-        .processStateSelect-btn:nth-child(3){
+        .processStateSelect-btn:nth-child(3) {
           .select-circle {
             border: 1px solid #31d779;
           }
@@ -565,17 +575,17 @@ export default {
             border-radius: 50%;
           }
         }
-        .processStateSelect-btn-active:nth-child(1){
+        .processStateSelect-btn-active:nth-child(1) {
           .select-circle::after {
             background: #f74b3f;
           }
         }
-        .processStateSelect-btn-active:nth-child(2){
+        .processStateSelect-btn-active:nth-child(2) {
           .select-circle::after {
             background: #ffae2b;
           }
         }
-        .processStateSelect-btn-active:nth-child(3){
+        .processStateSelect-btn-active:nth-child(3) {
           .select-circle::after {
             background: #31d779;
           }
@@ -691,7 +701,7 @@ export default {
 .box3 {
   color: #fff;
   margin-top: 10px;
-  height: 620px;
+  height: 600px;
   overflow-y: scroll;
   cursor: pointer;
   .item {
diff --git a/src/views/pages/waterPoints/components/WaterHistory.vue b/src/views/pages/waterPoints/components/WaterHistory.vue
new file mode 100644
index 0000000..8346b3e
--- /dev/null
+++ b/src/views/pages/waterPoints/components/WaterHistory.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="wrapper">
+    <h1>历史水位趋势图</h1>
+    <div style="padding: 0.1rem 0">
+      <el-radio-group v-model="radio"  @change="radioChange">
+        <el-radio label="day">积水历史查询</el-radio>
+        <el-radio label="month">历史积水高点趋势</el-radio>
+        <el-radio label="monthTime">历史积水时长</el-radio>
+      </el-radio-group>
+    </div>
+    <div>
+      请选择日期：
+      <el-cascader
+      v-if="radio === 'day'"
+      placeholder="请选择日期"
+      :options="dateYearBtns"
+      v-model="dateYearData"
+      popper-class="pc-sel-area-cascader"
+      filterable></el-cascader>
+      <el-cascader
+      v-if="radio === 'month'"
+      placeholder="请选择日期"
+      :options="dateMonthBtns"
+      v-model="dateMonthData"
+      popper-class="pc-sel-area-cascader"
+      filterable></el-cascader>
+      <el-cascader
+      v-if="radio === 'monthTime'"
+      placeholder="请选择日期"
+      :options="dateMonthBtns"
+      v-model="dateMonthTimeData"
+      popper-class="pc-sel-area-cascader"
+      filterable></el-cascader>
+    </div>
+    <div v-if="radio === 'day'">
+      <div id="water-points-curve"></div>
+    </div>
+    <div v-else-if="radio === 'month'">
+      <div id="water-points-columnar"></div>
+    </div>
+    <div v-else-if="radio === 'monthTime'">
+      <div id="water-points-time"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { selectWaterPondingDate, selectWaterPondingInMonth, selectWaterPondingInDay, selectWaterPondingHoursInMonth } from '@/api/waterPoints'
+import { months } from 'moment'
+export default {
+  components: {},
+  props: {
+    feature: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      radio: 'day',
+      // 时间容器
+      dateList: [],
+      // 联级折线选项
+      dateYearBtns: [],
+      // 联级柱状选项
+      dateMonthBtns: [],
+      // 折线图
+      depthDayX: [],
+      depthDayY: [],
+      // 柱状图
+      depthMonthX: [],
+      depthMonthY: [],
+      // 时间柱状图
+      depthMonthTimeY: [],
+      depthMonthTimeX: [],
+      // 联级选择
+      dateYearData: [],
+      dateMonthData: [],
+      dateMonthTimeData: []
+    }
+  },
+  watch: {
+    dateYearData (val) {
+      console.log(this.dateYearData, val, 'aaaaa')
+      this.depthDayX = []
+      this.depthDayY = []
+      selectWaterPondingInDay({ water_point_id: this.feature.data.waterPointId, year: String(this.dateYearData[0]), month: String(this.dateYearData[1]), day: String(this.dateYearData[2]) }).then((res) => {
+        console.log(res.data.data, 'res')
+        res.data.data.map(val => {
+          this.depthDayX.push(val.hour + ':' + val.minute)
+          this.depthDayY.push(Number(val.depth) * 100)
+        })
+        console.log(this.depthDayX, this.depthDayY, ' this.depthDayX')
+        this.initEventTypeCharts()
+      })
+    },
+    dateMonthData (val) {
+      console.log(this.dateMonthData, val, 'aaaaa')
+      this.depthMonthX = []
+      this.depthMonthY = []
+      selectWaterPondingInMonth({ water_point_id: this.feature.data.waterPointId, year: String(this.dateMonthData[0]), month: String(this.dateMonthData[1]) }).then((res) => {
+        console.log(res.data.data, 'res')
+        res.data.data.map(val => {
+          this.depthMonthY.push(Number(val.depth) * 100)
+          this.depthMonthX.push(val.year + '/' + val.month + '/' + val.day)
+        })
+        console.log(this.depthMonthX, this.depthMonthY, ' this.depthDayX')
+        this.initEventTypeCharts2()
+      })
+    },
+    dateMonthTimeData (val) {
+      console.log(this.dateMonthTimeData, val, 'aaaaa')
+      this.depthMonthTimeX = []
+      this.depthMonthTimeY = []
+      selectWaterPondingHoursInMonth({ water_point_id: this.feature.data.waterPointId, year: String(this.dateMonthTimeData[0]), month: String(this.dateMonthTimeData[1]) }).then((res) => {
+        console.log(res.data.data, 'res')
+        res.data.data.map(val => {
+          this.depthMonthTimeY.push(Number(val.hours))
+          this.depthMonthTimeX.push(val.year + '/' + val.month + '/' + val.day)
+        })
+        console.log(this.depthMonthX, this.depthMonthY, ' this.depthDayX')
+        this.initEventTypeCharts3()
+      })
+    }
+  },
+  computed: {},
+  methods: {
+    radioChange (value) {
+      switch (value) {
+        case 'day':
+          this.initEventTypeCharts()
+          break
+        case 'month':
+          this.initEventTypeCharts2()
+          break
+        case 'monthTime':
+          this.initEventTypeCharts3()
+          break
+      }
+    },
+    dataChange () {
+      console.log(this.feature.data.waterPointId, 'feature')
+      selectWaterPondingDate({ water_point_id: this.feature.data.waterPointId }).then((res) => {
+        this.dateList = res.data.data
+        this.dateList.map(val => {
+          console.log('111111111111111111111', this.dateYearBtns, val)
+          let flag1 = false
+          let index1 = -1
+          this.dateYearBtns.map((v, index) => {
+            if (v.label == val.year) {
+              flag1 = true
+              index1 = index
+            }
+          })
+          if (!flag1) {
+            this.dateYearBtns.push({ label: val.year, value: val.year, children: [{ label: val.month, value: val.month, children: [{ label: val.day, value: val.day }] }] })
+          } else {
+            let flag2 = false
+            let index2 = -1
+            console.log('11111111111', this.dateYearBtns[index1], index1)
+            this.dateYearBtns[index1].children.map((item, i) => {
+              if (item.label == val.month) {
+                flag2 = true
+                index2 = i
+              }
+            })
+            if (!flag2) {
+              this.dateYearBtns[index1].children.push({ label: val.month, value: val.month, children: [{ label: val.day, value: val.day }] })
+            } else {
+              this.dateYearBtns[index1].children[index2].children.push({ label: val.day, value: val.day })
+            }
+          }
+        })
+        this.dateList.map(val => {
+          let flag1 = false
+          let index1 = -1
+          this.dateMonthBtns.map((v, index) => {
+            if (v.label == val.year) {
+              flag1 = true
+              index1 = index
+            }
+          })
+          if (!flag1) {
+            this.dateMonthBtns.push({ label: val.year, value: val.year, children: [{ label: val.month, value: val.month }] })
+          } else {
+            let flag2 = false
+            let index2 = -1
+            console.log('2222222', this.dateMonthBtns[index1], index1)
+            this.dateMonthBtns[index1].children.map((item, i) => {
+              if (item.label == val.month) {
+                flag2 = true
+                index2 = i
+              }
+            })
+            if (!flag2) {
+              this.dateMonthBtns[index1].children.push({ label: val.month, value: val.month })
+            }
+          }
+        })
+        console.log('33333333', this.dateMonthBtns)
+        console.log(this.dateList[0], ' this.dateMonthBtns')
+        this.dateYearData.push(this.dateList[0].year, this.dateList[0].month, this.dateList[0].day)
+        this.dateMonthData.push(this.dateList[0].year, this.dateList[0].month)
+        this.dateMonthTimeData.push(this.dateList[0].year, this.dateList[0].month)
+        console.log(this.dateYearData, 'this.dateMonthBtns')
+      })
+    },
+    // 折线图
+    initEventTypeCharts () {
+      const option = {
+
+        xAxis: {
+          type: 'category',
+          data: this.depthDayX,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255,1)'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：cm',
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255,1)'
+            }
+          },
+          splitLine: {
+            show: false // 去掉折线图中的横线
+          }
+        },
+        series: [
+          {
+            name: '深度',
+            data: this.depthDayY,
+            type: 'line',
+            smooth: true,
+            lineStyle: {
+              color: '#1ffefd'
+            },
+            itemStyle: {
+              normal: {
+                borderColor: '#1ffefd' // 拐点边框颜色
+              }
+            }
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        }
+      }
+      const eventType = echarts.init(
+        document.getElementById('water-points-curve')
+      )
+      eventType.setOption(option)
+    },
+    // 柱状图
+    initEventTypeCharts2 () {
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.depthMonthX,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位：cm',
+            splitLine: {
+              show: false // 去掉折线图中的横线
+            }
+          }
+        ],
+        series: [
+          {
+            name: '深度',
+            type: 'bar',
+            barWidth: '60%',
+            data: this.depthMonthY,
+            itemStyle: {
+              color: '#1ffefd'
+            }
+          }
+        ]
+      }
+      const eventType = echarts.init(
+        document.getElementById('water-points-columnar')
+      )
+      eventType.setOption(option)
+    },
+    // 时长柱状图
+    initEventTypeCharts3 () {
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.depthMonthTimeX,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位：h',
+            splitLine: {
+              show: false // 去掉折线图中的横线
+            }
+          }
+        ],
+        series: [
+          {
+            name: '时长',
+            type: 'bar',
+            barWidth: '60%',
+            data: this.depthMonthTimeY,
+            itemStyle: {
+              color: '#1ffefd'
+            }
+
+          }
+        ]
+      }
+      const eventType = echarts.init(
+        document.getElementById('water-points-time')
+      )
+      eventType.setOption(option)
+    }
+  },
+  created () {},
+  mounted () {
+    this.dataChange()
+    console.log(this.dateYearBtns[0], 'aaaaaaa')
+  }
+}
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+  h1 {
+    margin: 0;
+    font-weight: normal;
+    font-size: 0.18rem;
+  }
+  ::v-deep .el-dropdown {
+    color: #ffffff;
+  }
+  #water-points-curve,
+  #water-points-columnar {
+    width: 100%;
+    height: 210px;
+  }
+  ::v-deep .el-radio {
+    color: #ffffff;
+  }
+  ::v-deep .el-radio__input.is-checked .el-radio__inner {
+    border-color: #1ffefd;
+    background: #1ffefd;
+  }
+  ::v-deep .el-radio.is-checked {
+    .el-radio__label {
+      color: #1ffefd !important;
+    }
+  }
+  ::v-deep .el-input__inner {
+    border: none;
+    background-color: rgba(24, 51, 76, 0.95);
+    color: #ffffff;
+  }
+}
+</style>
+<style lang="scss">
+.pc-sel-area-cascader {
+  border: 1px solid #1ffefd !important;
+  .el-cascader-node.in-active-path,
+  .el-cascader-node.is-active,
+  .el-cascader-node.is-selectable.in-checked-path {
+    color: #1ffefd;
+  }
+  .el-cascader-node:hover {
+    // 设置鼠标滑过时文字颜色
+    color: #1ffefd;
+  }
+  .el-cascader-menu {
+    background: rgba(24, 51, 76, 0.95) !important;
+    border-right: 1px solid #1ffefd;
+    color: #ffffff;
+  }
+  .el-cascader-node:not(.is-disabled):focus,
+  .el-cascader-node:not(.is-disabled):hover {
+    background: rgba(24, 51, 76, 0.95);
+  }
+  .el-popper[x-placement^="bottom"] .popper__arrow::after {
+    border-bottom-color: rgba(24, 51, 76, 0.95) !important;
+  }
+  .el-popper[x-placement^="bottom"] .popper__arrow {
+    border-bottom-color: rgba(24, 51, 76, 0.95) !important;
+  }
+  .popper__arrow {
+    border-bottom-color: #1ffefd !important;
+  }
+  .popper__arrow::after {
+    border-bottom-color: #1ffefd !important;
+  }
+}
+</style>
diff --git a/src/views/pages/waterPoints/components/WaterPointPop.vue b/src/views/pages/waterPoints/components/WaterPointPop.vue
index e86b53d..4566ddf 100644
--- a/src/views/pages/waterPoints/components/WaterPointPop.vue
+++ b/src/views/pages/waterPoints/components/WaterPointPop.vue
@@ -17,7 +17,7 @@
     <div class="site-content">
       <div class="site-content-right">
         <div
-          class="images" 
+          class="images"
           v-viewer="{movable: false}"
           style="
             width: 280px;
@@ -71,40 +71,46 @@
     <div class="btn-area">
       <button class="button" @click="analyse(feature)">线索分析</button>
     </div>
+    <WaterHistory v-if="feature.data.reportOrigin!='police'" :feature='feature' />
   </div>
 </template>
 <script>
-import bus from "@/views/layout/bus";
+import bus from '@/views/layout/bus'
 import 'viewerjs/dist/viewer.css'
-import { directive as viewer } from "v-viewer"
+import { directive as viewer } from 'v-viewer'
 // import * as echarts from 'echarts'
 // import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
 import { selectCameraByName } from '@/api/waterPoints'
+import WaterHistory from './WaterHistory.vue'
 export default {
-  name: "",
+  name: '',
   props: {
     feature: {
       type: Object,
       default: () => {
-        return {};
-      },
-    },
-  },
-  mounted() {
-  selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
-    if(res.data.data){
-      this.feature.data.channelCode = res.data.data[0].channelCode
-      this.feature.data.channelName = res.data.data[0].channelName
-      this.feature.data.ssqy = res.data.data[0].ssqy
-      this.feature.data.videoCapture = res.data.data[0].videoCapture
-      console.log(this.feature);
-      this.cameraData.push({
-        cameraName: this.feature.data.channelName,
-        channelCode: this.feature.data.channelCode
-      })
+        return {}
+      }
     }
-  })
-    
+  },
+  components: {
+    WaterHistory
+  },
+  mounted () {
+    console.log(this.feature, 'feature')
+    selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
+      if (res.data.data) {
+        this.feature.data.channelCode = res.data.data[0].channelCode
+        this.feature.data.channelName = res.data.data[0].channelName
+        this.feature.data.ssqy = res.data.data[0].ssqy
+        this.feature.data.videoCapture = res.data.data[0].videoCapture
+        console.log(this.feature)
+        this.cameraData.push({
+          cameraName: this.feature.data.channelName,
+          channelCode: this.feature.data.channelCode
+        })
+      }
+    })
+
     // selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
     //   console.log(res)
     // })
@@ -112,33 +118,33 @@ export default {
     //   console.log(res)
     // })
   },
-  data() {
+  data () {
     return {
-      filterButton:{
-        typeSelect:['近7天','近30天',],
-        typeSelectActive:'近7天',
+      filterButton: {
+        typeSelect: ['近7天', '近30天'],
+        typeSelectActive: '近7天'
       },
       cameraData: []
 
-    };
+    }
   },
   methods: {
     // particularsClick(data){
     //   console.log(data)
     //   bus.$emit("mainClick", data);
     // },
-    getLevel(data) {
-      if(data.reportOrigin === 'police') {
+    getLevel (data) {
+      if (data.reportOrigin === 'police') {
         return '暂无'
-      } else if(data.pointLevel=='traffic') {
+      } else if (data.pointLevel == 'traffic') {
         return '影响车辆(>30cm)'
-      } else if(data.pointLevel=='pedestrian') {
+      } else if (data.pointLevel == 'pedestrian') {
         return '影响行人(<30cm)'
       } else {
         return '无积水(<10cm)'
       }
     },
-    typeSelect(item) {
+    typeSelect (item) {
       this.filterButton.typeSelectActive = item
     },
 
@@ -147,121 +153,126 @@ export default {
       viewer.show()
     },
     // 线索分析
-    analyse(data) {
-      bus.$emit('waterPointAnalysis',data)
+    analyse (data) {
+      bus.$emit('waterPointAnalysis', data)
     },
-    openVideo(row){
+    openVideo (row) {
       console.log(row)
-      bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
-    },
+      bus.$emit('openCurrentVideoWaterPoint', row.channelCode)
+    }
+
   },
   directives: {
     viewer: viewer({
-        debug: true,
-    }),
-  },
-};
+      debug: true
+    })
+  }
+}
 </script>
 <style lang="scss">
 // .leaflet-popup {
 //   width: auto !important;
 // }
-  .water-point-pop {
-    .leaflet-popup-content-wrapper {
-      box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
-      background: rgba(24,51,76,.95);
-      border: 1px solid rgba(50,227,235,.95);
-    }
-    .leaflet-popup-content {
-      width: 634px !important;
-      height: 420px;
-      padding: 12px 16px;
-      .pop-box {
+.water-point-pop {
+  .leaflet-popup-content-wrapper {
+    box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: 0.4);
+    background: rgba(24, 51, 76, 0.95);
+    border: 1px solid rgba(50, 227, 235, 0.95);
+  }
+  .leaflet-popup-content {
+    width: 634px !important;
+    // height: 420px;
+    padding: 12px 16px;
+    .pop-box {
+      width: 100%;
+      height: 100%;
+
+      .title-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 42px;
         width: 100%;
-        height: 100%;
+        opacity: 0.4;
+        background: linear-gradient(
+          180deg,
+          rgba($color: #1fa2fe, $alpha: 1) 0,
+          rgba($color: #1fa2fe, $alpha: 0) 100%
+        );
+      }
 
-        .title-bg {
-          position: absolute;
-          top: 0;
-          left: 0;
-          height: 42px;
-          width: 100%;
-          opacity: .4;
-          background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
+      .title {
+        color: #1ffefd;
+        font-size: 16px;
+        font-weight: bold;
+        span:nth-child(2) {
+          display: inline-block;
+          width: 40px;
+          height: 22px;
+          margin-left: 8px;
+          border-radius: 2px;
+          border: 1px solid #0494ff;
+          color: #1ffefd;
+          text-align: center;
+          font-size: 14px;
         }
+      }
 
-        .title{
-            color: #1ffefd;
-            font-size: 16px;
-            font-weight: bold;
-            span:nth-child(2) {
-              display: inline-block;
-              width: 40px;
-              height: 22px;
-              margin-left: 8px;
-              border-radius: 2px;
-              border: 1px solid #0494ff;
-              color: #1ffefd;
-              text-align: center;
-              font-size: 14px;
+      .site-address {
+        margin: 12px 0;
+        padding-left: 20px;
+        background: url(../../../../assets/construction/iconAddress.png)
+          no-repeat left center;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .site-content {
+        .site-content-right {
+          display: flex;
+          justify-content: space-between;
+          // width: 280px;
+          .images {
+            margin-top: 30px;
+          }
+          .video-table {
+            margin-top: 20px;
+            width: 300px;
+            h4 {
+              color: #fff;
             }
-        }
-        
-        .site-address {
-          margin: 12px 0;
-          padding-left: 20px;
-          background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
-          color: rgba(255, 255, 255, .6);
-        }
-
-        .site-content {
-          
-          .site-content-right {
-            display: flex;
-            justify-content: space-between;
-            // width: 280px;
-            .images {
-              margin-top: 30px;
-            }
-            .video-table {
-              margin-top: 20px;
-              width: 300px;
-              h4 {
-                color: #fff;
-              }
-              .el-table{
-                margin-top: 8px;
-                border: 1px solid #325d94;
-                .el-table__body-wrapper{
-                  height: 90px;
-                  overflow-y: auto;
-                  &::-webkit-scrollbar {
+            .el-table {
+              margin-top: 8px;
+              border: 1px solid #325d94;
+              .el-table__body-wrapper {
+                height: 90px;
+                overflow-y: auto;
+                &::-webkit-scrollbar {
                   width: 8px;
                   background-color: #10335e;
-                  }
-                  &::-webkit-scrollbar-thumb {
-                    background-color: #446dac !important;
-                  }
                 }
-                th,td {
-                  border-right: 1px solid #325d94;
+                &::-webkit-scrollbar-thumb {
+                  background-color: #446dac !important;
                 }
               }
-              .el-table::before {
-                display: none;
+              th,
+              td {
+                border-right: 1px solid #325d94;
               }
             }
+            .el-table::before {
+              display: none;
+            }
           }
         }
       }
-
-    }
-
-    .leaflet-popup-close-button {
-      color: #3afefc !important;
-      font-size: 12px;
     }
   }
+
+  .leaflet-popup-close-button {
+    color: #3afefc !important;
+    font-size: 12px;
+  }
+}
 </style>
 <style lang='scss' scoped>
 .particulars {