类型分布
This commit is contained in:
龚皓
parent
43526edb32
commit
7b5bb1aea7
|
|
@ -3,58 +3,188 @@
|
|||
<el-card class="alert-card">
|
||||
<div class="alert-header">告警趋势</div>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" class="alert-tabs">
|
||||
<el-tab-pane label="24小时" name="first">24小时数据展示</el-tab-pane>
|
||||
<el-tab-pane label="30天" name="second">30天数据展示</el-tab-pane>
|
||||
<el-tab-pane label="12月" name="third">12月数据展示</el-tab-pane>
|
||||
<el-tab-pane label="前一天" name="first">前一天数据</el-tab-pane>
|
||||
<el-tab-pane label="3天" name="second">近3天数据展示</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div id="alert-chart" class="chart-container"></div>
|
||||
<div id="alertChart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { login, getEvents } from '../../superbox.js';
|
||||
|
||||
const username = 'turingvideo';
|
||||
const password = '1234qwer!';
|
||||
|
||||
export default {
|
||||
name: 'AlertChart',
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
activeName: 'first',
|
||||
eventsData: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
async created() {
|
||||
try {
|
||||
const token = await login(username, password);
|
||||
this.eventsData = await getEvents(token);
|
||||
this.initChart();
|
||||
} catch (error) {
|
||||
console.error("Error fetching events:", error);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
// 根据选中的标签刷新图表数据
|
||||
this.initChart();
|
||||
},
|
||||
initChart() {
|
||||
var chartDom = document.getElementById('alert-chart');
|
||||
var chartDom = document.getElementById('alertChart');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
if (this.activeName === 'first') {
|
||||
option = this.get24HourChartOption();
|
||||
} else if (this.activeName === 'second') {
|
||||
option = this.get3DayChartOption();
|
||||
}
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
get24HourChartOption() {
|
||||
const now = new Date();
|
||||
const todayMidnight = new Date(now);
|
||||
todayMidnight.setHours(0, 0, 0, 0);
|
||||
|
||||
const yesterdayMidnight = new Date(todayMidnight);
|
||||
yesterdayMidnight.setDate(todayMidnight.getDate() - 1);
|
||||
|
||||
const timePoints = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'];
|
||||
const alertCounts = Array(timePoints.length).fill(0);
|
||||
|
||||
this.eventsData.forEach(event => {
|
||||
const eventTime = new Date(event.started_at);
|
||||
if (eventTime >= yesterdayMidnight && eventTime < todayMidnight) {
|
||||
const hours = eventTime.getHours();
|
||||
if (hours < 4) alertCounts[1]++;
|
||||
else if (hours < 8) alertCounts[2]++;
|
||||
else if (hours < 12) alertCounts[3]++;
|
||||
else if (hours < 16) alertCounts[4]++;
|
||||
else if (hours < 20) alertCounts[5]++;
|
||||
else if (hours < 24) alertCounts[6]++;
|
||||
}
|
||||
});
|
||||
|
||||
// Accumulate the alert counts
|
||||
for (let i = 1; i < alertCounts.length; i++) {
|
||||
alertCounts[i] += alertCounts[i - 1];
|
||||
}
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: '24小时内告警数量变化',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: '{b0}: {c0}'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2024-07-08 00:00', '2024-07-08 08:00', '2024-07-08 16:00', '2024-07-09 00:00', '2024-07-09 08:00', '2024-07-09 16:00']
|
||||
data: timePoints
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 22, 28, 43, 49, 62],
|
||||
data: alertCounts,
|
||||
type: 'line',
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
option && myChart.setOption(option);
|
||||
get3DayChartOption() {
|
||||
const now = new Date();
|
||||
const day1Midnight = new Date(now);
|
||||
day1Midnight.setHours(0, 0, 0, 0);
|
||||
|
||||
const day2Midnight = new Date(day1Midnight);
|
||||
day2Midnight.setDate(day1Midnight.getDate() - 1);
|
||||
|
||||
const day3Midnight = new Date(day2Midnight);
|
||||
day3Midnight.setDate(day2Midnight.getDate() - 1);
|
||||
|
||||
// 在生成字符串之前增加一天
|
||||
const adjustedDay1 = new Date(day1Midnight);
|
||||
adjustedDay1.setDate(day1Midnight.getDate() + 1);
|
||||
|
||||
const adjustedDay2 = new Date(day2Midnight);
|
||||
adjustedDay2.setDate(day2Midnight.getDate() + 1);
|
||||
|
||||
const adjustedDay3 = new Date(day3Midnight);
|
||||
adjustedDay3.setDate(day3Midnight.getDate() + 1);
|
||||
|
||||
// 使用调整后的日期作为时间点
|
||||
const timePoints = [
|
||||
adjustedDay3.toISOString().slice(0, 10),
|
||||
adjustedDay2.toISOString().slice(0, 10),
|
||||
adjustedDay1.toISOString().slice(0, 10),
|
||||
];
|
||||
const alertCounts = Array(timePoints.length).fill(0);
|
||||
|
||||
this.eventsData.forEach(event => {
|
||||
const eventTime = new Date(event.started_at);
|
||||
if (eventTime >= day3Midnight && eventTime < day2Midnight) {
|
||||
alertCounts[0]++;
|
||||
} else if (eventTime >= day2Midnight && eventTime < day1Midnight) {
|
||||
alertCounts[1]++;
|
||||
} else if (eventTime >= day1Midnight && eventTime <= now) {
|
||||
alertCounts[2]++;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: '近3天内告警数量变化',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: '{b0}: {c0}'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: timePoints
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: alertCounts,
|
||||
type: 'line',
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,48 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="stats-card">
|
||||
<div class="stats-header">布控情况</div>
|
||||
<div class="stats-header">告警数量和类型分布</div>
|
||||
<el-row :gutter="20" class="stats-row">
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">布控区域数</div>
|
||||
<div class="stats-value">15</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">布控站点数</div>
|
||||
<div class="stats-value">54</div>
|
||||
<div class="stats-subvalue">7 异常站点</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">布控摄像头数</div>
|
||||
<div class="stats-value">2000</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="stats-divider"></div>
|
||||
<div class="stats-header">告警情况</div>
|
||||
<el-row :gutter="20" class="stats-row">
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">告警站点</div>
|
||||
<div class="stats-value">25</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">未完成告警</div>
|
||||
<div class="stats-value">1511</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">已完成告警</div>
|
||||
<div class="stats-value">123916</div>
|
||||
</div>
|
||||
<el-col :span="24">
|
||||
<div ref="chart" class="chart"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
|
@ -50,9 +12,100 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { login, getAlgorithms,getEvents} from '../../superbox.js';
|
||||
|
||||
const username = 'turingvideo';
|
||||
const password = '1234qwer!';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Statistics'
|
||||
}
|
||||
name: 'Statistics',
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
seriesData: [
|
||||
|
||||
],
|
||||
};
|
||||
},
|
||||
// mounted() {
|
||||
// this.initChart();
|
||||
// },
|
||||
async created(){
|
||||
try{
|
||||
const token = await login(username, password);
|
||||
await this.fetchTypeMapping(token);
|
||||
await this.updateSeriesData(token);
|
||||
this.initChart();
|
||||
}catch(error){
|
||||
console.error("Error fetching algorithms:", error);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchTypeMapping(token) {
|
||||
const algorithms = await getAlgorithms(token);
|
||||
let mapping = algorithms.map(algorithm => ({
|
||||
value: 0, // 初始化为10，可以根据实际数据进行调整
|
||||
code_name: algorithm.code_name,
|
||||
name: algorithm.name
|
||||
}));
|
||||
const newMapping = [
|
||||
{code_name: "minizawu:532",name: "杂物堆积",value: 0},
|
||||
]
|
||||
|
||||
mapping = mapping.concat(newMapping);
|
||||
this.seriesData = mapping;
|
||||
},
|
||||
async updateSeriesData(token){
|
||||
const events = await getEvents(token);
|
||||
events.forEach(event => {
|
||||
const matchAlgorithm = this.seriesData.find(item => item.code_name === event.types);
|
||||
if (matchAlgorithm){
|
||||
matchAlgorithm.value += 1;
|
||||
}
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
itemGap: 20,
|
||||
data: this.seriesData.map(item => item.name),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '告警类型',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '150px'],
|
||||
data: this.seriesData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
stillShowZeroSum: false,
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -72,30 +125,12 @@ export default {
|
|||
}
|
||||
|
||||
.stats-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-title {
|
||||
font-size: 16px;
|
||||
/* margin-top: 20px; */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.stats-subvalue {
|
||||
font-size: 14px;
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
.stats-divider {
|
||||
border-top: 1px solid #3a4b5c;
|
||||
margin: 20px 0;
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue