积水点echarts图

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
+  })
+}

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"
@@ -83,25 +84,25 @@ export default {
           id: 'auditorReport'
         },
         {
-          title:'城管局',
+          title: '交警',
-          id:'case'
+          id: 'trafficPolice'
-        },
-        {
-          title:'智能算法识别',
-          id:'video'
-        },
-        {
-          title:'水务集团',
-          id:'null'
         },
         {
           title: '群众上报',
           id: 'commonReport'
         },
         {
-          title:'交警',
+          title: '智能算法识别',
-          id:'trafficPolice'
+          id: 'video'
         },
+        {
+          title: '城管局',
+          id: 'case'
+        }
+        // {
+        //   title:'水务集团',
+        //   id:'null'
+        // },
       ],
       tabsActiveName: '全部',
       statisticalAnalysisIsShow: false,
@@ -127,7 +128,9 @@ export default {
         // },
       ],
       listAll: [],
-      policeList: []
+      policeList: [],
+      // 单项总数
+      allNum: 0
     }
   },
   components: {
@@ -157,9 +160,10 @@ export default {
     selectWaterPoint().then((res) => {
       selectWaterPoliceList().then((policeRes) => {
         this.policeList = policeRes.data.data || []
-        let dataAll = [...res.data.data, ...policeRes.data.data]
+        const dataAll = [...res.data.data, ...policeRes.data.data]
         this.list = dataAll
         this.listAll = dataAll
+        this.allNum = this.list.length
         bus.$emit('waterPoint', dataAll)
       })
       // this.list = res.data.data
@@ -174,7 +178,7 @@ export default {
   },
   methods: {
     getDesc (item) {
-      let deepth = item.waterPointDepth ? parseFloat(item.waterPointDepth) * 100 : 0
+      const deepth = item.waterPointDepth ? (parseFloat(item.waterPointDepth) * 100).toFixed(0) : 0
       switch (item.pointLevel) {
         case 'traffic':
           return `影响车辆(${deepth}cm)`
@@ -196,13 +200,13 @@ export default {
           switch (item) {
             case '影响车辆(>30cm)':
               this.list = this.list.filter(v => v.pointLevel != 'traffic')
-            break;
+              break
             case '影响行人(<30cm)':
               this.list = this.list.filter(v => v.pointLevel != 'pedestrian')
-            break;
+              break
             case '无积水(<10cm)':
               this.list = this.list.filter(v => v.pointLevel != 'non')
-            break;
+              break
           }
         }
       } else {
@@ -213,13 +217,13 @@ export default {
           switch (item) {
             case '影响车辆(>30cm)':
               this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'traffic'))
-            break;
+              break
             case '影响行人(<30cm)':
               this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian'))
-            break;
+              break
             case '无积水(<10cm)':
               this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non'))
-            break;
+              break
           }
         }
       }
@@ -228,20 +232,23 @@ export default {
       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) => {
           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)
+            this.allNum = this.list.length
           })
         })
       } else if (item.title == '交警') {
         this.list = this.policeList
+        this.allNum = this.list.length
         bus.$emit('waterPoint', this.list)
       } else if (item.id == 'auditorReport') {
         this.list = []
@@ -250,11 +257,12 @@ export default {
             this.list.push(tempItem)
           }
         })
+        this.allNum = this.list.length
         bus.$emit('waterPoint', this.list)
       } else {
         selectReportOrigin({ reportOrigin: item.id }).then((res) => {
-          
           this.list = res.data.data
+          this.allNum = this.list.length
           bus.$emit('waterPoint', res.data.data)
         })
       }
@@ -272,7 +280,6 @@ export default {
         default:
           return '未知'
       }
-      
     },
     openStatisticalAnalysis () {
       this.statisticalAnalysisIsShow = true
@@ -348,7 +355,7 @@ export default {
     },
 
     openDialog (item) {
-      bus.$emit("openWaterPointDialog", 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 {
@@ -691,7 +701,7 @@ export default {
 .box3 {
   color: #fff;
   margin-top: 10px;
-  height: 620px;
+  height: 600px;
   overflow-y: scroll;
   cursor: pointer;
   .item {

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>

src/views/pages/waterPoints/components/WaterPointPop.vue

@@ -71,33 +71,39 @@
     <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 {};
+        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);
+        console.log(this.feature)
         this.cameraData.push({
           cameraName: this.feature.data.channelName,
           channelCode: this.feature.data.channelCode
@@ -115,12 +121,12 @@ export default {
   data () {
     return {
       filterButton: {
-        typeSelect:['近7天','近30天',],
+        typeSelect: ['近7天', '近30天'],
-        typeSelectActive:'近7天',
+        typeSelectActive: '近7天'
       },
       cameraData: []
 
-    };
+    }
   },
   methods: {
     // particularsClick(data){
@@ -153,14 +159,15 @@ export default {
     openVideo (row) {
       console.log(row)
       bus.$emit('openCurrentVideoWaterPoint', row.channelCode)
-    },
+    }
+
   },
   directives: {
     viewer: viewer({
-        debug: true,
+      debug: true
-    }),
+    })
-  },
+  }
-};
+}
 </script>
 <style lang="scss">
 // .leaflet-popup {
@@ -168,13 +175,13 @@ export default {
 // }
 .water-point-pop {
   .leaflet-popup-content-wrapper {
-      box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+    box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: 0.4);
-      background: rgba(24,51,76,.95);
+    background: rgba(24, 51, 76, 0.95);
-      border: 1px solid rgba(50,227,235,.95);
+    border: 1px solid rgba(50, 227, 235, 0.95);
   }
   .leaflet-popup-content {
     width: 634px !important;
-      height: 420px;
+    // height: 420px;
     padding: 12px 16px;
     .pop-box {
       width: 100%;
@@ -186,8 +193,12 @@ export default {
         left: 0;
         height: 42px;
         width: 100%;
-          opacity: .4;
+        opacity: 0.4;
-          background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
+        background: linear-gradient(
+          180deg,
+          rgba($color: #1fa2fe, $alpha: 1) 0,
+          rgba($color: #1fa2fe, $alpha: 0) 100%
+        );
       }
 
       .title {
@@ -210,12 +221,12 @@ export default {
       .site-address {
         margin: 12px 0;
         padding-left: 20px;
-          background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
+        background: url(../../../../assets/construction/iconAddress.png)
-          color: rgba(255, 255, 255, .6);
+          no-repeat left center;
+        color: rgba(255, 255, 255, 0.6);
       }
 
       .site-content {
-          
         .site-content-right {
           display: flex;
           justify-content: space-between;
@@ -243,7 +254,8 @@ export default {
                   background-color: #446dac !important;
                 }
               }
-                th,td {
+              th,
+              td {
                 border-right: 1px solid #325d94;
               }
             }
@@ -254,7 +266,6 @@ export default {
         }
       }
     }
-
   }
 
   .leaflet-popup-close-button {