添加页面点击事件

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-environment/VisuForestEventCenterController/getNearEvent?longitude='+longitude+"&latitude="+latitude+"&day="+day,
+    url: '/center-environment/VisuForestEventCenterController/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)" :color="['#0e7957', '#0da24c']" 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>
@@ -460,12 +460,14 @@
   import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
   import firespread from '@/views/firespread.vue' //事件详情弹窗
   import Firespread from "./firespread";
+  import chart from "./from/dvCapsuleChart.vue";
 
   let echarts = require('echarts')
   export default {
     components: {
       Firespread,
       supermap,
+      chart,
       // supermapNotProcessed,
       // supermapProcessed,
       vheader,
@@ -551,6 +553,8 @@
         eventList: [],
         pageSize: 10,
         pageNum: 1,
+        eventTypeIdDl:[],
+        eventTypeId:[],
 
         eventListnew: [],
         eventListAll: [],
@@ -588,6 +592,20 @@
     },
     /** ----------------------------------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;
@@ -826,7 +844,7 @@
       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
@@ -845,7 +863,7 @@
       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
         })
       },
@@ -875,7 +893,7 @@
       },
       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++) {
@@ -972,9 +990,9 @@
         this.pageSize = pageSize;
         this.pageNum = pageNum;
         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 = []
           this.eventList = res.data
           if (this.eventList != null && this.eventList.length > 0) {
             if (this.eventList[0].eventStatusValue == 'forest_event_status_1') {
@@ -989,7 +1007,7 @@
       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
@@ -1006,7 +1024,7 @@
       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}
@@ -1105,7 +1123,7 @@
       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>