添加页面点击事件

src/api/event.js

@@ -1,19 +1,20 @@
 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-resources/VisuForestEventCenterController/getNearEvent?longitude='+longitude+"&latitude="+latitude+"&day="+day,
+    url: '/center-resources/VisuForestEventCenterController/getNearEvent?longitude=' + longitude + "&latitude=" + latitude + "&day=" + day + "&eventTypeIdDl=" + eventTypeIdDl + "&eventTypeId=" + eventTypeId,
     method: 'get',
     headers: {
       loading: loading
     },
   })
 }
+
 //获取附近摄像头
-export function getNearCamera(longitude,latitude) {
+export function getNearCamera(longitude, latitude) {
   return request({
-    url: '/center-resources/VisuForestEventCenterController/getNearCamera?longitude='+longitude+"&latitude="+latitude+"&type=1",
+    url: '/center-resources/VisuForestEventCenterController/getNearCamera?longitude=' + longitude + "&latitude=" + latitude + "&type=1",
     method: 'get',
   })
 }

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>