372 lines
10 KiB
Vue
372 lines
10 KiB
Vue
<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>
|