|
|
@@ -15,7 +15,14 @@
|
|
|
</el-row>
|
|
|
<div class="chart-wrapper">
|
|
|
<div class="chart-item" style="flex: 1">
|
|
|
- <div class="chart-title">告警级别分布</div>
|
|
|
+ <div class="chart-title flex-row">
|
|
|
+ 告警级别分布
|
|
|
+ <el-radio-group v-model="searchType" size="small" @change="onSearchTypeChange">
|
|
|
+ <el-radio-button label="">全部告警</el-radio-button>
|
|
|
+ <el-radio-button label="1">已关闭告警</el-radio-button>
|
|
|
+ <el-radio-button label="2">未关闭告警</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
<Chart height="300px" ref="chart1"></Chart>
|
|
|
</div>
|
|
|
<div class="chart-item" style="flex: 1.5">
|
|
|
@@ -44,7 +51,7 @@ import api from '/@/api/alarm'
|
|
|
import AlarmList from '/@/views/iot/alarm/list/index.vue'
|
|
|
import { useThemeChange } from '/@/hooks/useCommon'
|
|
|
import Chart from '/@/components/chart/index.vue'
|
|
|
-import { getLineOption } from '/@/components/chart/options'
|
|
|
+import { getLineOption, getPie2Option, getPie3Option, getPie4Option, getPieOption } from '/@/components/chart/options'
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
const chart1 = ref()
|
|
|
@@ -52,6 +59,9 @@ const chart2 = ref()
|
|
|
const chart3 = ref()
|
|
|
const chart4 = ref()
|
|
|
|
|
|
+// 查询类型：不传为 全部告警 1已关闭告警 2未关闭告警
|
|
|
+const searchType = ref('')
|
|
|
+
|
|
|
const { proxy } = getCurrentInstance() as any
|
|
|
const { alarm_type } = proxy.useDict('alarm_type')
|
|
|
const alarmTypeMap: any = {}
|
|
|
@@ -93,20 +103,13 @@ const homeOne = reactive([
|
|
|
},
|
|
|
])
|
|
|
|
|
|
-const getOverviewData = () => {
|
|
|
- // 顶部统计数据
|
|
|
- api.dashboard.getTotalAlarmStatistics().then((res: any) => {
|
|
|
- homeOne[0].allnum = res.alarmTotalCount
|
|
|
- homeOne[1].allnum = res.closeAlarmCount
|
|
|
- homeOne[2].allnum = res.unCloseAlarmCount
|
|
|
- homeOne[3].allnum = res.averageDealTime
|
|
|
- })
|
|
|
+const onSearchTypeChange = () => {
|
|
|
// 告警级别分布
|
|
|
api.dashboard
|
|
|
.getAlarmLevel({
|
|
|
- searchType: null,
|
|
|
- startDate: dayjs().startOf('month').format('YYYY-MM-DD'),
|
|
|
- endDate: dayjs().endOf('month').format('YYYY-MM-DD'),
|
|
|
+ searchType: searchType.value,
|
|
|
+ startDate: dayjs().startOf('year').format('YYYY-MM-DD'),
|
|
|
+ endDate: dayjs().endOf('year').format('YYYY-MM-DD'),
|
|
|
})
|
|
|
.then((res: any) => {
|
|
|
const resData = res || [
|
|
|
@@ -136,12 +139,36 @@ const getOverviewData = () => {
|
|
|
levelName: '提醒',
|
|
|
},
|
|
|
]
|
|
|
- console.log(resData)
|
|
|
+ chart1.value?.draw(
|
|
|
+ getPieOption({
|
|
|
+ data: resData.map((item: any) => ({ name: item.levelName, value: item.alarmCount })),
|
|
|
+ })
|
|
|
+ )
|
|
|
})
|
|
|
+}
|
|
|
+
|
|
|
+const getOverviewData = () => {
|
|
|
+ // 顶部统计数据
|
|
|
+ api.dashboard.getTotalAlarmStatistics().then((res: any) => {
|
|
|
+ homeOne[0].allnum = res.alarmTotalCount
|
|
|
+ homeOne[1].allnum = res.closeAlarmCount
|
|
|
+ homeOne[2].allnum = res.unCloseAlarmCount
|
|
|
+ homeOne[3].allnum = res.averageDealTime
|
|
|
+ })
|
|
|
+ onSearchTypeChange()
|
|
|
// 告警趋势 intervalType 统计间隔：1小时 2天 3月
|
|
|
api.dashboard.getAnalyzeTrend({ intervalType: 2 }).then((res: any) => {
|
|
|
- const resData = res || []
|
|
|
- console.log(resData)
|
|
|
+ const resData = Object.values(res || []) as any[]
|
|
|
+ const legend = Object.keys(res || [])
|
|
|
+ // console.log(resData)
|
|
|
+
|
|
|
+ chart2.value?.draw(
|
|
|
+ getLineOption({
|
|
|
+ legend,
|
|
|
+ datas: resData.map((arr: any) => arr.map((item: any) => item.alarmCount)),
|
|
|
+ xAxis: resData?.[0]?.map((item: any) => item.alarmDate),
|
|
|
+ })
|
|
|
+ )
|
|
|
})
|
|
|
// 处理状态
|
|
|
api.dashboard
|
|
|
@@ -165,6 +192,11 @@ const getOverviewData = () => {
|
|
|
},
|
|
|
]
|
|
|
console.log(resData)
|
|
|
+ chart3.value?.draw(
|
|
|
+ getPieOption({
|
|
|
+ data: resData.map((item: any) => ({ name: item.status, value: item.alarmCount })),
|
|
|
+ })
|
|
|
+ )
|
|
|
})
|
|
|
api.dashboard.getDeviceAlarmTop10().then((res: any) => {
|
|
|
const list = res || []
|
