275 lines
7.3 KiB
Vue
275 lines
7.3 KiB
Vue
<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.monitoringPoints }}
|
||
</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,
|
||
monitoringPoints: 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,
|
||
monitoringPoints: 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>
|