You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
10 KiB
371 lines
10 KiB
<template>
|
|
<ns-drawer
|
|
v-model:visible="visible"
|
|
width="562px"
|
|
: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="boxstyle">
|
|
<div class="ns-title-extra-box" style="position: absolute; height: 35px; line-height: 30px">
|
|
告警编号：{{ infoObject.alarmCode }}
|
|
</div>
|
|
<div style="right: 20px; position: absolute; height: 35px; line-height: 30px">
|
|
{{ infoObject.updateTime }}
|
|
</div>
|
|
</div>
|
|
<!-- center -->
|
|
<div style="width: 100%; height: 300px">
|
|
<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: any = [];
|
|
|
|
// 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: any) {
|
|
// 可选：格式化 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: any) {
|
|
return value + ' V'; // 在刻度值后加上单位
|
|
},
|
|
},
|
|
},
|
|
],
|
|
//滑块样式
|
|
dataZoom: [
|
|
{
|
|
type: 'slider',
|
|
// backgroundColor: 'yellow',
|
|
fillerColor: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(97, 134, 255, 1)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(36, 186, 255, 1)',
|
|
},
|
|
],
|
|
false,
|
|
),
|
|
height: 12, // 设置slider的高度为15
|
|
start: 0,
|
|
end: 100,
|
|
right: 13,
|
|
left: 10,
|
|
bottom: 10,
|
|
handleIcon:
|
|
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
|
|
handleSize: '140%', // 放大按钮
|
|
// borderColor: 'none',
|
|
handleStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(97, 134, 255, 1)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(36, 186, 255, 1)',
|
|
},
|
|
],
|
|
false,
|
|
),
|
|
borderWidth: 4,
|
|
borderColor: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(255, 255, 255, 1)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(204, 238, 255, 1)',
|
|
},
|
|
],
|
|
false,
|
|
),
|
|
shadowOffsetX: 0, // 阴影偏移x轴多少
|
|
shadowOffsetY: 0, // 阴影偏移y轴多少
|
|
},
|
|
// 显示的label的格式化器
|
|
// 20050101 变为 2005\n0101
|
|
// labelFormatter: function (index, value) {
|
|
// const year = value.slice(0, 4);
|
|
// const date = value.slice(4);
|
|
// return year + '\n' + date;
|
|
// },
|
|
// textStyle: {
|
|
// fontStyle: 'italic', // 设置字体倾斜
|
|
// },
|
|
showDataShadow: false, // 隐藏数据阴影
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '电压值',
|
|
type: 'line',
|
|
itemStyle: {
|
|
color: '#fff',
|
|
borderColor: 'rgba(67, 136, 251, 1)',
|
|
borderWidth: 2,
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: 'rgba(67, 136, 251, 1)',
|
|
width: 2,
|
|
},
|
|
},
|
|
symbol: 'circle', // 数据点的形状，这里设置为圆形
|
|
symbolSize: 8,
|
|
label: {
|
|
show: false,
|
|
color: 'rgb(89, 89, 89)',
|
|
position: 'top',
|
|
top: '10',
|
|
formatter: function (value: any) {
|
|
return Number(energyAlarm[value.dataIndex]) + 'V';
|
|
},
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(22, 127, 255, 0.4)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(22, 127, 255, 0)',
|
|
},
|
|
],
|
|
false,
|
|
),
|
|
shadowColor: 'rgba(22, 127, 255, 0.4)',
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
data: energyAlarm,
|
|
},
|
|
],
|
|
};
|
|
chartInstance = echarts.init(graphChart.value);
|
|
chartInstance.setOption(option);
|
|
};
|
|
defineExpose({
|
|
toggle,
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
.boxstyle {
|
|
width: 100%;
|
|
height: 35px;
|
|
display: flex;
|
|
position: relative;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
:deep(.ant-descriptions-item-label) {
|
|
width: 134px;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|
|
|