添加页面点击事件

src/api/event.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request'
 
 //获取附近事件
-export function getNearEvent(longitude,latitude,day,loading) {
+export function getNearEvent(longitude, latitude, day, loading, eventTypeIdDl, eventTypeId) {
   return request({
-    url: '/center-emergency/VisuEmergencyEventCenterController/getNearEvent?longitude='+longitude+"&latitude="+latitude+"&day="+day,
+    url: '/center-emergency/VisuEmergencyEventCenterController/getNearEvent?longitude=' + longitude + "&latitude=" + latitude + "&day=" + day + "&eventTypeIdDl=" + eventTypeIdDl + "&eventTypeId=" + eventTypeId,
     method: 'get',
     headers: {
       loading: loading

src/views/forest.vue

@@ -388,12 +388,12 @@
           <div class="forthis">
             <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-              <div class="this-title">
+              <div class="this-title" style="cursor: pointer" @click="setEventTypeId({eventTypeIdDl: [], eventTypeId: []})">
                 <span>事件分类</span>
                 <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
               </div>
               <div class="i-list-con small-bottom-margin h-19">
-                <dv-capsule-chart v-if="showEventKind" :config="eventKind"
+                <chart v-if="showEventKind" :config="eventKind"  @setEventTypeId="setEventTypeId"
                                   style="width: 90%;height: 18vh; padding:.5rem 1rem"/>
               </div>
             </dv-border-box-13>
@@ -459,7 +459,6 @@ import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
 import TVWall from '@/components/TVWall.vue' //电视墙弹窗
 import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
 import firespread from '@/views/firespread.vue' //事件详情弹窗
-
 /** ----------------------------------摄像头预览开始------------------------------------- */
 import {
   getDahuaVideoServer
@@ -468,7 +467,7 @@ import {
 import Firespread from './firespread'
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
-
+import chart from "./from/dvCapsuleChart.vue";
 let echarts = require('echarts')
 export default {
   components: {
@@ -479,6 +478,7 @@ export default {
     vheader,
     vBottomMenu,
     eventLocation,
+    chart,
     TVWall,
     dateChoose,
     eventdetailsdialog,
@@ -573,6 +573,8 @@ export default {
       /** ----------------------------------weosocket开始------------------------------------- */
       weosocket: false,
       websock: '',
+      eventTypeIdDl:[],
+      eventTypeId:[],
       setIntervalWesocketPush: null,
       /** ----------------------------------weosocket结束------------------------------------- */
       /** ----------------------------------摄像头预览开始------------------------------------- */
@@ -595,6 +597,21 @@ export default {
   },
   /** ----------------------------------weosocket结束------------------------------------- */
   methods: {
+    setEventTypeId(data) {
+      // let data = {eventTypeIdDl: [], eventTypeId: []}
+      // let data = {eventTypeIdDl: that.eventTypeIdDl, eventTypeId: that.eventTypeId}
+      let that = this
+      that.eventTypeIdDl = data.eventTypeIdDl
+      that.eventTypeId = data.eventTypeId
+      that.getSupermap(that.calendarDay, false)
+      that.getTodayEvents(that.calendarDay, false)
+      that.getEventByEventType(that.calendarDay, false)
+      that.getExposureStage(that.calendarDay, false)
+      that.getEventByReportorOrder(that.calendarDay, false)
+      that.getDeptEventCount(that.calendarDay, false)
+      that.getEventList(that.calendarDay, that.pageSize, that.pageNum, '', false)
+    },
+
     // searchEvent(pageSize,pageNum,eventSearch) {
     //   this.pageSize = pageSize;
     //   this.pageNum = pageNum;
@@ -833,7 +850,7 @@ export default {
     getTodayEvents(day, loading) {
       let that = this
       //左侧获取事件信息统计
-      getTodayEvents({ day: day }, loading).then(res => {
+      getTodayEvents({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId,day: day}, loading).then(res => {
         this.aiTotal = res.data.aiTotal
         this.aiTotal_pre = res.data.aiTotal_pre
         this.newReport = res.data.newReport
@@ -852,7 +869,7 @@ export default {
     getDeptEventCount(day, loading) {
       let that = this
       //左侧获取事件部门数量
-      getDeptEventCount({ day: day }, loading).then(res => {
+      getDeptEventCount({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId,day: day}, loading).then(res => {
         this.forestFarm = res.data
       })
     },
@@ -882,7 +899,7 @@ export default {
     },
     getSupermap(day, loading) {
       let that = this
-      getNearEvent('', '', day, loading).then(res => {
+      getNearEvent('', '', day, loading, that.eventTypeIdDl, that.eventTypeId).then(res => {
         that.markersList = []
         if (res.data != null && res.data.length > 0) {
           for (let i = 0; i < res.data.length; i++) {
@@ -981,7 +998,7 @@ export default {
       let that = this
       this.eventList = []
       //右侧获取事件列表
-      getEventList({ day: day, pageSize: pageSize, pageNum: pageNum, eventName: eventSearch }, loading).then(res => {
+      getEventList({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId, day: day, pageSize: pageSize, pageNum: pageNum, eventName: eventSearch}, loading).then(res => {
         this.eventList = res.data
         if (this.eventList != null && this.eventList.length > 0) {
           if (this.eventList[0].eventStatusValue == 'forest_event_status_1') {
@@ -996,24 +1013,24 @@ export default {
     getEventByEventType(day, loading) {
       let that = this
       //右侧获取事件分类
-      getEventByEventType({ day: day }, loading).then(res => {
+      getEventByEventType({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId, day: day}, loading).then(res => {
         if (res.data != null && res.data.length > 0) {
           this.showEventKind = true
           this.eventKind.data = res.data
           this.eventKind.colors = ['#1ce0a9', '#d6333b', '#e68d3f', '#32c5e9', '#2abc65']
           this.eventKind.showValue = true
-          this.eventKind = { ...this.eventKind }
+          this.eventKind = {...this.eventKind}
         } else {
           this.showEventKind = false
           this.eventKind = {}
-          this.eventKind = { ...this.eventKind }
+          this.eventKind = {...this.eventKind}
         }
       })
     },
     getEventByReportorOrder(day, loading) {
       let that = this
       //右侧获取上报排名
-      getEventByReportorOrder({ day: day }, loading).then(res => {
+      getEventByReportorOrder({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId,day: day}, loading).then(res => {
         if (res.data != null && res.data.length > 0) {
           this.reportList.data = res.data
           this.reportList = { ...this.reportList }
@@ -1112,7 +1129,7 @@ export default {
     getExposureStage(day, loading) {
       let that = this
       //右侧获取曝光台
-      getExposureStage({ day: day }, loading).then(res => {
+      getExposureStage({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId,day: day}, loading).then(res => {
         this.exposureStageList = res.data
       })
     },

src/views/from/dvCapsuleChart.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="dv-capsule-chart">
+    <template v-if="mergedConfig">
+      <div class="label-column">
+        <div v-for="item in mergedConfig.data" :key="item.name" style="cursor: pointer" @click="getEventList(item)">
+          {{ item.name }} 
+        </div>
+        <div>&nbsp;</div>
+      </div>
+      <div class="capsule-container">
+        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
+          <div
+            @click="getEventList(capsule)"
+            class="capsule-item-column"
+            :style="`cursor: pointer;width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
+          >
+            <div
+              style="cursor: pointer" @click="getEventList(capsule)"
+              v-if="mergedConfig.showValue"
+              class="capsule-item-value"
+            >{{ capsuleValue[index] }}
+            </div>
+          </div>
+        </div>
+
+        <div class="unit-label">
+          <div
+            v-for="(label, index) in labelData"
+            :key="label + index"
+          >{{ label }}
+          </div>
+        </div>
+      </div>
+
+      <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import {deepMerge} from '@jiaminghi/charts/lib/util/index'
+
+import {deepClone} from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvCapsuleChart',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      defaultConfig: {
+        /**
+         * @description Capsule chart data
+         * @type {Array<Object>}
+         * @default data = []
+         * @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]
+         */
+        data: [],
+        /**
+         * @description Colors (hex|rgb|rgba|color keywords)
+         * @type {Array<String>}
+         * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
+         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
+         */
+        colors: [
+          '#37a2da',
+          '#32c5e9',
+          '#67e0e3',
+          '#9fe6b8',
+          '#ffdb5c',
+          '#ff9f7f',
+          '#fb7293'
+        ],
+        /**
+         * @description Chart unit
+         * @type {String}
+         * @default unit = ''
+         */
+        unit: '',
+        /**
+         * @description Show item value
+         * @type {Boolean}
+         * @default showValue = false
+         */
+        showValue: false
+      },
+
+      mergedConfig: null,
+
+      capsuleLength: [],
+      capsuleValue: [],
+      labelData: [],
+      labelDataLength: []
+    }
+  },
+  watch: {
+    config() {
+      const {calcData} = this
+      calcData()
+    }
+  },
+  methods: {
+    getEventList(val) {
+      debugger
+      let args = {eventTypeIdDl: [], eventTypeId: []}
+      if (val.id != '0') {
+        args.eventTypeIdDl.push(-1)
+        args.eventTypeId.push(val.id)
+      } else {
+        args.eventTypeIdDl.push(val.parentId)
+        args.eventTypeId.push(-1)
+      }
+      this.$emit('setEventTypeId', args)
+
+    },
+    calcData() {
+      const {mergeConfig, calcCapsuleLengthAndLabelData} = this
+
+      mergeConfig()
+
+      calcCapsuleLengthAndLabelData()
+    },
+    mergeConfig() {
+      let {config, defaultConfig} = this
+
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
+    },
+    calcCapsuleLengthAndLabelData() {
+      const {data} = this.mergedConfig
+
+      if (!data.length) return
+
+      const capsuleValue = data.map(({value}) => value)
+
+      const maxValue = Math.max(...capsuleValue)
+
+      this.capsuleValue = capsuleValue
+
+      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
+
+      const oneFifth = maxValue / 5
+
+      const labelData = Array.from(
+        new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
+      )
+
+      this.labelData = labelData
+
+      this.labelDataLength = Array.from(labelData).map(v =>
+        maxValue ? v / maxValue : 0
+      )
+    }
+  },
+  mounted() {
+    const {calcData} = this
+
+    calcData()
+  }
+}
+</script>