fix:能源告警配置
This commit is contained in:
zhaohy
@@ -25,19 +25,339 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 4; width: 100%">2</div>
|
||||
<div style="flex: 4; width: 100%">3</div>
|
||||
<div style="flex: 4; width: 100%; display: flex; gap: 5px">
|
||||
<div
|
||||
style="flex: 1; height: 100%; background-color: white; border-radius: 4px; padding: 12px">
|
||||
<div ref="echartPieOne" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div style="flex: 1; height: 100%; background-color: white; border-radius: 4px"> xxxx </div>
|
||||
</div>
|
||||
<!-- 告警矩形 echarts -->
|
||||
<div style="flex: 4; width: 100%; background-color: white; border-radius: 4px; padding: 12px">
|
||||
<div ref="graphChart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue'; // 从 Vue 中导入 ref、onMounted 和 watchEffect
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
defineOptions({
|
||||
name: 'alarmOverview', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
|
||||
const info = ref({});
|
||||
onMounted(() => {});
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
let chartInstanceOne: echarts.ECharts | null = null;
|
||||
const graphChart = ref(null);
|
||||
const echartPieOne = ref(null);
|
||||
const getGraphChart = () => {
|
||||
let dayData = [];
|
||||
let energyAlarm = [];
|
||||
let wgAlarm = [];
|
||||
let equipmentAlarm = [];
|
||||
let total = [];
|
||||
|
||||
// Extend data for 30 days
|
||||
for (let i = 1; i < 30; i++) {
|
||||
dayData.push(`3/${i}`);
|
||||
energyAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
|
||||
wgAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
|
||||
equipmentAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
|
||||
total.push(0); // Assuming the same value for simplicity
|
||||
}
|
||||
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) {
|
||||
let res =
|
||||
params[0].axisValue +
|
||||
'<br/>' +
|
||||
params[0].marker +
|
||||
' ' +
|
||||
params[0].seriesName +
|
||||
' : ' +
|
||||
params[0].data +
|
||||
'<br/>' +
|
||||
params[1].marker +
|
||||
' ' +
|
||||
params[1].seriesName +
|
||||
' : ' +
|
||||
params[1].data +
|
||||
'<br/>' +
|
||||
params[2].marker +
|
||||
' ' +
|
||||
params[2].seriesName +
|
||||
' : ' +
|
||||
params[2].data +
|
||||
'<br/>';
|
||||
return res;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '2%', // 设置图表距离左边的距离
|
||||
right: '2%', // 设置图表距离右边的距离
|
||||
borderWidth: 0,
|
||||
y2: 60, // 距离底边
|
||||
},
|
||||
legend: [
|
||||
{
|
||||
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: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
data: dayData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
shwo: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false, // 不显示刻度值
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
height: 12,
|
||||
start: 0,
|
||||
end: 100,
|
||||
handleSize: '300%', // 设置滑块的大小
|
||||
bottom: 15,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '能源告警',
|
||||
type: 'bar',
|
||||
stack: '能源告警',
|
||||
barMaxWidth: 40,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: 'rgb(246, 189, 22)',
|
||||
},
|
||||
},
|
||||
data: energyAlarm,
|
||||
},
|
||||
{
|
||||
name: '网关告警',
|
||||
type: 'bar',
|
||||
stack: '能源告警',
|
||||
barMaxWidth: 40,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: 'rgb(91, 143, 249)',
|
||||
},
|
||||
},
|
||||
data: wgAlarm,
|
||||
},
|
||||
{
|
||||
name: '设备告警',
|
||||
type: 'bar',
|
||||
stack: '能源告警',
|
||||
barMaxWidth: 40,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: 'rgb(48, 191, 120)',
|
||||
},
|
||||
},
|
||||
data: equipmentAlarm,
|
||||
},
|
||||
{
|
||||
name: '总数',
|
||||
type: 'bar',
|
||||
stack: '能源告警',
|
||||
barMaxWidth: 40,
|
||||
barHight: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#000000',
|
||||
position: 'top',
|
||||
top: '10',
|
||||
formatter: function (value) {
|
||||
return (
|
||||
Number(energyAlarm[value.dataIndex]) +
|
||||
Number(wgAlarm[value.dataIndex]) +
|
||||
Number(equipmentAlarm[value.dataIndex])
|
||||
);
|
||||
},
|
||||
},
|
||||
data: total,
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
const getEchartPieOne = () => {
|
||||
if (chartInstanceOne) {
|
||||
chartInstanceOne.dispose();
|
||||
}
|
||||
chartInstanceOne = echarts.init(echartPieOne.value);
|
||||
var m2R2Data = [
|
||||
{ value: 335, name: '紧急', itemStyle: { color: '#F56E53' } },
|
||||
{ value: 310, name: '重要', itemStyle: { color: '#F7C122' } },
|
||||
{ value: 234, name: '一般', itemStyle: { color: '#3BC27F' } },
|
||||
];
|
||||
const option = {
|
||||
title: [
|
||||
{
|
||||
text: '优先级 / 近30天',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#aaaaaa',
|
||||
},
|
||||
left: '2%',
|
||||
top: '2%',
|
||||
},
|
||||
{
|
||||
text: '优先级',
|
||||
subtext: 12312 + '个',
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
color: 'black',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
color: 'black',
|
||||
},
|
||||
textAlign: 'center',
|
||||
x: '44.3%',
|
||||
y: '46%',
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (parms) {
|
||||
var str = parms.marker + ' :' + parms.data.value;
|
||||
return str;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// 设置图例靠右，上下居中，垂直排列
|
||||
right: 50,
|
||||
top: 'center',
|
||||
orient: 'vertical',
|
||||
// 图例图标设置为圆形
|
||||
icon: 'circle',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '优先级',
|
||||
type: 'pie',
|
||||
center: ['45%', '50%'],
|
||||
radius: ['50%', '70%'],
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'outter',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
formatter: function (parms) {
|
||||
return '[ ' + parms.data.name + ' ] : ' + parms.data.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: true, // 控制标签线是否显示
|
||||
length: 10, // 标签线长度
|
||||
length2: 20, // 标签线引出部分长度
|
||||
// 其他样式属性，如 lineStyle 等
|
||||
},
|
||||
data: m2R2Data,
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstanceOne = echarts.init(echartPieOne.value);
|
||||
chartInstanceOne.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
//渲染第三个图表
|
||||
getGraphChart();
|
||||
//优先级
|
||||
getEchartPieOne();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
|
||||
Reference in New Issue
Block a user