add:设备告警网关告警对接 接口
This commit is contained in:
zhaohy
272
hx-ai-intelligent/src/view/alarmManagement/energyAlarm/look.vue
Normal file
272
hx-ai-intelligent/src/view/alarmManagement/energyAlarm/look.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<ns-drawer
|
||||
v-model:visible="visible"
|
||||
width="520"
|
||||
:title="' '"
|
||||
:footer-style="{ textAlign: 'right' }"
|
||||
:ok="btnClick"
|
||||
:cancel="handleClose"
|
||||
placement="right"
|
||||
@close="handleClose">
|
||||
<div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
|
||||
<!-- top -->
|
||||
<div class="box">
|
||||
<div class="card"></div>
|
||||
<div style="left: 25px; position: absolute; height: 35px; line-height: 35px">
|
||||
告警编号：{{ infoObject.alarmCode }}
|
||||
</div>
|
||||
<div style="right: 20px; position: absolute; height: 35px; line-height: 35px">
|
||||
{{ infoObject.updateTime }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- center -->
|
||||
<div style="width: 100%; height: 400px">
|
||||
<div style="width: 100%; height: 100%" ref="graphChart"></div>
|
||||
</div>
|
||||
<!-- bottom -->
|
||||
<div style="width: 100%; margin-top: 10px">
|
||||
<a-descriptions :column="1" bordered>
|
||||
<a-descriptions-item label="优先级">{{
|
||||
infoObject.priority ? infoObject.priority.label : ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">{{
|
||||
infoObject.alarmLogState ? infoObject.alarmLogState.label : ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="错误码">{{ infoObject.errorCode }}</a-descriptions-item>
|
||||
<a-descriptions-item label="告警描述">
|
||||
<div style="color: #2778ff">{{ infoObject.alarmTitle }}</div>
|
||||
{{ infoObject.abnormalDescription }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="设备信息"> {{ infoObject.deviceInfo }} </a-descriptions-item>
|
||||
<a-descriptions-item label="重复次数">
|
||||
{{ infoObject.alarmRepetitions }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button type="primary" @click="handleClose">确定</a-button>
|
||||
</template>
|
||||
</ns-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: 'look', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
import { ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const graphChart = ref(null);
|
||||
const infoObject = ref({
|
||||
priority: null,
|
||||
alarmCode: null,
|
||||
alarmLogState: null,
|
||||
errorCode: null,
|
||||
alarmTitle: null,
|
||||
abnormalDescription: null,
|
||||
deviceInfo: null,
|
||||
alarmRepetitions: null,
|
||||
updateTime: null,
|
||||
});
|
||||
const visible = ref(false);
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
infoObject.value = {
|
||||
priority: null,
|
||||
alarmCode: null,
|
||||
alarmLogState: null,
|
||||
errorCode: null,
|
||||
alarmTitle: null,
|
||||
abnormalDescription: null,
|
||||
deviceInfo: null,
|
||||
alarmRepetitions: null,
|
||||
updateTime: null,
|
||||
};
|
||||
};
|
||||
const btnClick = () => {
|
||||
handleClose();
|
||||
};
|
||||
const toggle = (data: any) => {
|
||||
infoObject.value = data;
|
||||
visible.value = true;
|
||||
setTimeout(() => {
|
||||
getChatr();
|
||||
}, 500);
|
||||
};
|
||||
const getChatr = () => {
|
||||
let dayData = [];
|
||||
let energyAlarm = [];
|
||||
|
||||
// Extend data for 30 days
|
||||
for (let i = 1; i < 30; i++) {
|
||||
dayData.push(`3/${i}`);
|
||||
energyAlarm.push(Math.floor(Math.random() * 250));
|
||||
}
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
const option = {
|
||||
// title: {
|
||||
// text: '告警趋势/ 近30天',
|
||||
// textStyle: {
|
||||
// fontSize: 16,
|
||||
// fontWeight: 'normal',
|
||||
// color: '#aaaaaa',
|
||||
// },
|
||||
// left: '1%',
|
||||
// top: '2%',
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
let res = params[0].marker + ' ' + params[0].seriesName + ' : ' + params[0].data;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '10%', // 设置图表距离左边的距离
|
||||
right: '4%', // 设置图表距离右边的距离
|
||||
top: '6%',
|
||||
borderWidth: 0,
|
||||
y2: 60, // 距离底边
|
||||
},
|
||||
legend: [
|
||||
{
|
||||
show: false,
|
||||
top: 5,
|
||||
left: 'center', // 将图例居中显示
|
||||
textStyle: {
|
||||
color: 'rgb(89, 89, 89)',
|
||||
fontSize: '14',
|
||||
fontWeight: 'normal',
|
||||
}, // 注意这里的颜色值要用引号括起来
|
||||
data: ['电压值'],
|
||||
itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素
|
||||
},
|
||||
],
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: {
|
||||
// restore: {},
|
||||
// saveAsImage: {},
|
||||
// },
|
||||
// },
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true, // 显示 X 轴刻度标签
|
||||
color: 'rgb(89, 89, 89)', // X 轴刻度标签的字体颜色
|
||||
fontSize: 12, // X 轴刻度标签的字体大小
|
||||
formatter: function (value) {
|
||||
// 可选：格式化 X 轴刻度标签文本
|
||||
return value;
|
||||
},
|
||||
},
|
||||
data: dayData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
shwo: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true, // 显示
|
||||
formatter: function (value) {
|
||||
return value + ' V'; // 在刻度值后加上单位
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
height: 12,
|
||||
start: 0,
|
||||
end: 100,
|
||||
handleSize: '300%', // 设置滑块的大小
|
||||
bottom: 15,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '电压值',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: '#2778FF',
|
||||
},
|
||||
},
|
||||
symbol: 'circle', // 数据点的形状，这里设置为圆形
|
||||
symbolSize: 8,
|
||||
label: {
|
||||
show: true,
|
||||
color: 'rgb(89, 89, 89)',
|
||||
position: 'top',
|
||||
top: '10',
|
||||
formatter: function (value) {
|
||||
return Number(energyAlarm[value.dataIndex]) + 'V';
|
||||
},
|
||||
},
|
||||
data: energyAlarm,
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
defineExpose({
|
||||
toggle,
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: @font-size-base;
|
||||
border-bottom: 1px solid @primary-color;
|
||||
}
|
||||
.card {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 5px;
|
||||
height: 35px;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
width: 25%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user