|
|
@@ -4,10 +4,10 @@
|
|
|
<el-card shadow="hover" style="margin-top: 10px">
|
|
|
<el-row justify="end" align="middle">
|
|
|
<el-col :span="19" style="text-align: right">
|
|
|
- <el-radio-group v-model="timeRadio" size="large" @change="handleDateRangeChange">
|
|
|
- <el-radio-button label="今日" value="today" />
|
|
|
- <el-radio-button label="本周" value="week" />
|
|
|
- <el-radio-button label="本月" value="month" />
|
|
|
+ <el-radio-group v-model="timeRadio" size="small" @change="handleDateRangeChange">
|
|
|
+<!-- <el-radio-button label="今日" value="today" />-->
|
|
|
+ <el-radio-button label="近7天" value="week" />
|
|
|
+ <el-radio-button label="近30天" value="month" />
|
|
|
</el-radio-group>
|
|
|
</el-col>
|
|
|
<el-col :span="5" style="text-align: right">
|
|
|
@@ -17,7 +17,7 @@
|
|
|
range-separator="-"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
- style="margin-left: 10px; margin-right: 20px"
|
|
|
+ style="margin-left: 10px; margin-right: 30px"
|
|
|
/>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -45,7 +45,7 @@
|
|
|
<el-col :span="8">
|
|
|
<el-card shadow="hover">
|
|
|
<h3>告警级别</h3>
|
|
|
- <div class="chart-placeholder"></div>
|
|
|
+ <div ref="alarmLevel" class="chart-placeholder"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
@@ -59,21 +59,13 @@
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="hover">
|
|
|
<h3>在线时长排行</h3>
|
|
|
- <el-table :data="onlineTimeRanking" style="width: 100%">
|
|
|
- <el-table-column prop="rank" label="排名" width="60"></el-table-column>
|
|
|
- <el-table-column prop="device" label="设备名称"></el-table-column>
|
|
|
- <el-table-column prop="value" label="时长"></el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div ref="onlineTime" class="chart-placeholder"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="hover">
|
|
|
<h3>告警数量排行</h3>
|
|
|
- <el-table :data="alarmRanking" style="width: 100%">
|
|
|
- <el-table-column prop="rank" label="排名" width="60"></el-table-column>
|
|
|
- <el-table-column prop="device" label="设备名称"></el-table-column>
|
|
|
- <el-table-column prop="value" label="告警数量"></el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div ref="alarmNum" class="chart-placeholder"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -82,13 +74,13 @@
|
|
|
<el-card shadow="hover">
|
|
|
<h3>告警清单</h3>
|
|
|
<el-table v-loading="loading" :data="alarmList" row-key="id">
|
|
|
- <el-table-column label="设备名称" align="left" prop="deviceName" :show-overflow-tooltip="true" />
|
|
|
- <el-table-column label="告警等级" align="center" prop="errorLevel" width="100">
|
|
|
+ <el-table-column label="设备名称" align="left" prop="deviceName" width="100" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="告警等级" align="center" prop="errorLevel" width="80">
|
|
|
<template #default="scope">
|
|
|
<dict-tag :options="smsb_device_error_level" :value="scope.row.errorLevel" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="告警类型" align="center" prop="errorType" width="100">
|
|
|
+ <el-table-column label="告警类型" align="center" prop="errorType" width="80">
|
|
|
<template #default="scope">
|
|
|
<dict-tag :options="smsb_device_error_type" :value="scope.row.errorType" />
|
|
|
</template>
|
|
|
@@ -107,21 +99,24 @@ import { reactive } from 'vue';
|
|
|
import { deviceStatistics } from '@/api/smsb/device/device';
|
|
|
import * as echarts from 'echarts';
|
|
|
import { DeviceErrorRecordQuery, DeviceErrorRecordVO } from '@/api/smsb/device/errorRecord_type';
|
|
|
-import { alarmCountByType, listDeviceErrorRecord } from '@/api/smsb/device/errorRecord';
|
|
|
+import { alarmCountByLevel, alarmCountByType, alarmNumTop, listDeviceErrorRecord, onlineTimeTop } from '@/api/smsb/device/errorRecord';
|
|
|
|
|
|
const alarmList = ref<DeviceErrorRecordVO[]>([]);
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const { smsb_device_error_level, smsb_device_error_type } = toRefs<any>(proxy?.useDict('smsb_device_error_level', 'smsb_device_error_type'));
|
|
|
const total = ref(0);
|
|
|
const loading = ref(true);
|
|
|
-const timeRadio = ref('today');
|
|
|
+const timeRadio = ref('week');
|
|
|
const dateRange = ref(['2025-01-01', '2025-01-01']);
|
|
|
const typePie = ref();
|
|
|
+const alarmLevel = ref();
|
|
|
const alarmCount = ref();
|
|
|
+const alarmNum = ref();
|
|
|
+const onlineTime = ref();
|
|
|
const dialogData = reactive<DialogPageData<DeviceErrorRecordQuery>>({
|
|
|
dialogQueryParams: {
|
|
|
pageNum: 1,
|
|
|
- pageSize: 11,
|
|
|
+ pageSize: 18,
|
|
|
deviceId: undefined,
|
|
|
params: {}
|
|
|
}
|
|
|
@@ -135,18 +130,6 @@ const stats = reactive([
|
|
|
{ label: '待接入设备', value: 0, class: 'warning' }
|
|
|
]);
|
|
|
|
|
|
-const onlineTimeRanking = reactive([
|
|
|
- { rank: 1, device: '设备A', value: '6000' },
|
|
|
- { rank: 2, device: '设备B', value: '5900' },
|
|
|
- { rank: 3, device: '设备C', value: '5800' }
|
|
|
-]);
|
|
|
-
|
|
|
-const alarmRanking = reactive([
|
|
|
- { rank: 1, device: '设备A', value: '6000' },
|
|
|
- { rank: 2, device: '设备B', value: '5900' },
|
|
|
- { rank: 3, device: '设备C', value: '5800' }
|
|
|
-]);
|
|
|
-
|
|
|
const handleDateRangeChange = () => {
|
|
|
const rangeType = timeRadio.value;
|
|
|
const today = new Date();
|
|
|
@@ -166,6 +149,9 @@ const handleDateRangeChange = () => {
|
|
|
}
|
|
|
dateRange.value = [formatDate(startDate), formatDate(endDate)];
|
|
|
alarmCountData();
|
|
|
+ getAlarmLevel();
|
|
|
+ getAlarmNumTop();
|
|
|
+ getOnlineTimeTop();
|
|
|
};
|
|
|
|
|
|
const formatDate = (date: Date) => {
|
|
|
@@ -174,6 +160,88 @@ const formatDate = (date: Date) => {
|
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
|
return `${year}-${month}-${day}`;
|
|
|
};
|
|
|
+const getOnlineTimeTop = async () => {
|
|
|
+ const params = {
|
|
|
+ startTime: dateRange.value[0],
|
|
|
+ endTime: dateRange.value[1]
|
|
|
+ };
|
|
|
+ const res = await onlineTimeTop(params);
|
|
|
+ const onlineTimeTopInstance = echarts.init(onlineTime.value, 'macaroons');
|
|
|
+ onlineTimeTopInstance.setOption({
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01]
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: res.data.deviceNameList
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ data: res.data.onlineTimeList
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+};
|
|
|
+const getAlarmNumTop = async () => {
|
|
|
+ const params = {
|
|
|
+ startTime: dateRange.value[0],
|
|
|
+ endTime: dateRange.value[1]
|
|
|
+ };
|
|
|
+ const res = await alarmNumTop(params);
|
|
|
+ const alarmNumTopInstance = echarts.init(alarmNum.value, 'macaroons');
|
|
|
+ alarmNumTopInstance.setOption({
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01]
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: res.data.deviceNameList
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'bar',
|
|
|
+ data: res.data.alarmNumList
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+};
|
|
|
const alarmCountData = async () => {
|
|
|
const params = {
|
|
|
startTime: dateRange.value[0],
|
|
|
@@ -197,6 +265,59 @@ const alarmCountData = async () => {
|
|
|
]
|
|
|
});
|
|
|
};
|
|
|
+const getAlarmLevel = async () => {
|
|
|
+ const params = {
|
|
|
+ startTime: dateRange.value[0],
|
|
|
+ endTime: dateRange.value[1]
|
|
|
+ };
|
|
|
+ const res = await alarmCountByLevel(params);
|
|
|
+
|
|
|
+ const alarmLevelInstance = echarts.init(alarmLevel.value, 'macaroons');
|
|
|
+ alarmLevelInstance.setOption({
|
|
|
+ title: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['普通', '紧急']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: res.data.alarmDateList
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '普通',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ data: res.data.normalAlamList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '紧急',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ data: res.data.dangerAlamList
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+};
|
|
|
const getDeviceStatistics = async () => {
|
|
|
const res = await deviceStatistics();
|
|
|
stats.forEach((item) => {
|
|
|
@@ -233,7 +354,7 @@ const getDeviceStatistics = async () => {
|
|
|
{
|
|
|
name: '类型占比',
|
|
|
type: 'pie',
|
|
|
- radius: '60%',
|
|
|
+ radius: '65%',
|
|
|
data: [
|
|
|
{ value: (res.data.onlineNum / res.data.totalNum) * 100, name: '在线' },
|
|
|
{ value: (res.data.offlineNum / res.data.totalNum) * 100, name: '离线' },
|
|
|
@@ -262,6 +383,9 @@ onMounted(() => {
|
|
|
getDeviceStatistics();
|
|
|
getAlarmList();
|
|
|
alarmCountData();
|
|
|
+ getAlarmLevel();
|
|
|
+ getAlarmNumTop();
|
|
|
+ getOnlineTimeTop();
|
|
|
});
|
|
|
</script>
|
|
|
|