fix: 首页接口对接
parent
82fbd9bda3
commit
ef261a32d1
|
@ -20,7 +20,7 @@
|
|||
import { ref } from 'vue'
|
||||
import LineCharts from './echarts/LineCharts.vue'
|
||||
import ItemCard from './ItemCard.vue'
|
||||
import { getOneDayWarnCount, getSevenDayWarnTrend } from 'services/system/dashboard'
|
||||
import { getSevenDayWarnTrend } from 'services/system/dashboard'
|
||||
import echarts from '@cmp/cmp-echarts/hooks/echarts'
|
||||
export const colorMap = ['rgba(255, 0, 0, 1)', 'rgba(245, 167, 45, 1)', 'rgba(18, 185, 242, 1)', 'rgba(24, 144, 255, 1)']
|
||||
const chartSetting = {
|
||||
|
@ -53,20 +53,11 @@ export default {
|
|||
value: 0
|
||||
}
|
||||
])
|
||||
;(async function () {
|
||||
const res = await getOneDayWarnCount()
|
||||
if (!res.success) return
|
||||
countData.value[0].value = res.data.critical
|
||||
countData.value[1].value = res.data.major
|
||||
countData.value[2].value = res.data.minor
|
||||
countData.value[3].value = res.data.warning
|
||||
})()
|
||||
const lineData = ref({
|
||||
keys: [],
|
||||
values: []
|
||||
})
|
||||
;(async function () {
|
||||
// 一天是86400秒
|
||||
const res = await getSevenDayWarnTrend()
|
||||
if (!res.success) return
|
||||
const names = Object.keys(res.data)
|
||||
|
@ -77,7 +68,12 @@ export default {
|
|||
4: '提示告警'
|
||||
}
|
||||
if (!names.length) return
|
||||
|
||||
// 左侧
|
||||
countData.value[0].value = res.data[1].reduce((total, { count }) => count + total, 0)
|
||||
countData.value[1].value = res.data[2].reduce((total, { count }) => count + total, 0)
|
||||
countData.value[2].value = res.data[3].reduce((total, { count }) => count + total, 0)
|
||||
countData.value[3].value = res.data[4].reduce((total, { count }) => count + total, 0)
|
||||
// 右侧
|
||||
const result = {
|
||||
keys: res.data[names[0]].map(({ date }) => date),
|
||||
values: names.map(name => {
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<ItemCard title="单日告警统计" v-bind="$attrs">
|
||||
<LoopCharts class="full-height" id="alarm1" v-if="todayAlarmData" :data="todayAlarmData" width="100%" type="half" :setting="chartSetting"></LoopCharts>
|
||||
<LoopCharts class="full-height" id="alarm1" v-if="loaded" :data="todayAlarmData" width="100%" type="half" :setting="chartSetting"></LoopCharts>
|
||||
</ItemCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ItemCard from './ItemCard.vue'
|
||||
import { getAlarmChart } from 'services/monitor/index.js'
|
||||
import LoopCharts from './echarts/LoopCharts.vue'
|
||||
import { colorMap } from './AlarmHandling.vue'
|
||||
import { getOneDayWarnCount } from 'services/system/dashboard'
|
||||
const chartSetting = {
|
||||
color: colorMap
|
||||
}
|
||||
|
@ -16,23 +16,46 @@ export default {
|
|||
components: { ItemCard, LoopCharts },
|
||||
data() {
|
||||
return {
|
||||
todayAlarmData: null,
|
||||
loaded: false,
|
||||
todayAlarmData: [
|
||||
{
|
||||
name: '紧急告警',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '重要告警',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '次要告警',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '提示告警',
|
||||
value: 0
|
||||
}
|
||||
],
|
||||
chartSetting
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this, this.getTodayAlarm()
|
||||
this.getTodayAlarm()
|
||||
},
|
||||
methods: {
|
||||
getTodayAlarm() {
|
||||
getAlarmChart({
|
||||
action: 'pieChart',
|
||||
time: 'TODAY'
|
||||
}).then(data => {
|
||||
if (data.success) {
|
||||
this.todayAlarmData = data.data
|
||||
this.loaded = false
|
||||
getOneDayWarnCount()
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
this.todayAlarmData[0].value = res.data.critical
|
||||
this.todayAlarmData[1].value = res.data.major
|
||||
this.todayAlarmData[2].value = res.data.minor
|
||||
this.todayAlarmData[3].value = res.data.warning
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loaded = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue