Showing
4 changed files
with
22 additions
and
5 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <p class="center" v-if="alarmList.length">告警数</p> | ||
| 4 | <div ref="chartRef" :style="{ height, width }" v-show="alarmList.length"></div> | 3 | <div ref="chartRef" :style="{ height, width }" v-show="alarmList.length"></div> |
| 5 | <div v-show="!alarmList.length"><Empty /></div> | 4 | <div v-show="!alarmList.length"><Empty /></div> |
| 6 | </div> | 5 | </div> |
| @@ -24,6 +23,10 @@ | @@ -24,6 +23,10 @@ | ||
| 24 | const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); | 23 | const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
| 25 | 24 | ||
| 26 | onMounted(() => { | 25 | onMounted(() => { |
| 26 | + let alarmTotal = 0; | ||
| 27 | + for (const item of props.alarmList) { | ||
| 28 | + alarmTotal += Number(item[1]); | ||
| 29 | + } | ||
| 27 | setOptions({ | 30 | setOptions({ |
| 28 | tooltip: { | 31 | tooltip: { |
| 29 | trigger: 'axis', | 32 | trigger: 'axis', |
| @@ -34,7 +37,11 @@ | @@ -34,7 +37,11 @@ | ||
| 34 | bottom: '3%', | 37 | bottom: '3%', |
| 35 | containLabel: true, | 38 | containLabel: true, |
| 36 | }, | 39 | }, |
| 37 | - | 40 | + legend: { |
| 41 | + data: ['告警数'], | ||
| 42 | + left: 'center', | ||
| 43 | + formatter: (name) => `${name} ${alarmTotal}`, | ||
| 44 | + }, | ||
| 38 | xAxis: { | 45 | xAxis: { |
| 39 | type: 'time', | 46 | type: 'time', |
| 40 | }, | 47 | }, |
| @@ -56,6 +63,10 @@ | @@ -56,6 +63,10 @@ | ||
| 56 | watch( | 63 | watch( |
| 57 | () => props.alarmList, | 64 | () => props.alarmList, |
| 58 | (newValue) => { | 65 | (newValue) => { |
| 66 | + let alarmTotal = 0; | ||
| 67 | + for (const item of props.alarmList) { | ||
| 68 | + alarmTotal += Number(item[1]); | ||
| 69 | + } | ||
| 59 | setOptions({ | 70 | setOptions({ |
| 60 | tooltip: { | 71 | tooltip: { |
| 61 | trigger: 'axis', | 72 | trigger: 'axis', |
| @@ -66,7 +77,11 @@ | @@ -66,7 +77,11 @@ | ||
| 66 | bottom: '3%', | 77 | bottom: '3%', |
| 67 | containLabel: true, | 78 | containLabel: true, |
| 68 | }, | 79 | }, |
| 69 | - | 80 | + legend: { |
| 81 | + data: ['告警数'], | ||
| 82 | + left: 'center', | ||
| 83 | + formatter: (name) => `${name} ${alarmTotal}`, | ||
| 84 | + }, | ||
| 70 | xAxis: { | 85 | xAxis: { |
| 71 | type: 'time', | 86 | type: 'time', |
| 72 | }, | 87 | }, |
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <p class="center" v-if="dataPointList.length">消息量</p> | ||
| 4 | <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div> | 3 | <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div> |
| 5 | <div v-show="!dataPointList.length"><Empty /></div> | 4 | <div v-show="!dataPointList.length"><Empty /></div> |
| 6 | </div> | 5 | </div> |
| @@ -38,6 +38,8 @@ | @@ -38,6 +38,8 @@ | ||
| 38 | import { useModal } from '/@/components/Modal'; | 38 | import { useModal } from '/@/components/Modal'; |
| 39 | import ManageDeviceTokenModal from '../modal/ManageDeviceTokenModal.vue'; | 39 | import ManageDeviceTokenModal from '../modal/ManageDeviceTokenModal.vue'; |
| 40 | import { getDeviceToken } from '/@/api/device/deviceManager'; | 40 | import { getDeviceToken } from '/@/api/device/deviceManager'; |
| 41 | + import wz from '/@/assets/images/wz.png'; | ||
| 42 | + | ||
| 41 | export default defineComponent({ | 43 | export default defineComponent({ |
| 42 | components: { | 44 | components: { |
| 43 | Image, | 45 | Image, |
| @@ -62,7 +64,7 @@ | @@ -62,7 +64,7 @@ | ||
| 62 | const BMap = (window as any).BMap; | 64 | const BMap = (window as any).BMap; |
| 63 | if (!wrapEl) return; | 65 | if (!wrapEl) return; |
| 64 | const map = new BMap.Map(wrapEl); | 66 | const map = new BMap.Map(wrapEl); |
| 65 | - let myIcon = new BMap.Icon('/src/assets/images/wz.png', new BMap.Size(20, 30)); | 67 | + let myIcon = new BMap.Icon(wz, new BMap.Size(20, 30)); |
| 66 | 68 | ||
| 67 | const point = new BMap.Point(Number(longitude), Number(latitude)); | 69 | const point = new BMap.Point(Number(longitude), Number(latitude)); |
| 68 | var content = `我在 ${address}`; | 70 | var content = `我在 ${address}`; |