OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

完善首页以及告警界面

Browse Source
This commit is contained in:
lai
2024-01-26 14:29:44 +08:00
parent fa96c33972
commit 62bf6be2f1
11 changed files with 594 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/faultManage/actAlarm.ts
View File

@@ -290,12 +290,12 @@ export async function exportAll(query: Record<string, any>) {
/**
* 首页活动告警
* 展示页全部告警
* @param query 查询参数
* @returns bolb
*/
export async function mainGet() {
let totalSQL = `select count(*) as value,alarm_type as name from alarm where alarm_status=1 group by alarm_type`;
let totalSQL = `select count(*) as value,orig_severity as name from alarm group by orig_severity`;
// 发起请求
const result = await request({

26
src/api/neUser/ue.ts
View File

@@ -61,3 +61,29 @@ export async function listUE(query: Record<string, any>) {
// ];
return data;
}
/**
* 查询SMF在线用户数
* @param query 查询参数
* @returns neId
*/
export async function listUENum(neId: String) {
const result = await request({
url: `/api/rest/ueManagement/v1/elementType/smf/objectType/ueNum?neId=${neId}`,
method: 'get',
});
let data: DataList = {
total: 0,
rows: [],
code: result.code,
msg: result.msg,
};
// 解析数据
if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
const rows = parseObjLineToHump(result.data.data);
data.total = rows.length;
data.rows = rows;
}
}

72
src/api/perfManage/goldTarget.ts
View File

@@ -115,3 +115,75 @@ export async function getGoldTitleByNE(neType: string) {
// 解析数据
return result;
}
/**
* 查询UPF上下行速率数据
* @param query 查询参数
* @returns object
*/
export async function listUPFData(timeArr:any) {
return await Promise.allSettled([
// 获取参数规则
request({
url: `/api/rest/databaseManagement/v1/select/omc_db/gold_kpi`,
method: 'get',
params: {
SQL: `SELECT gold_kpi.*,kpi_title.en_title FROM gold_kpi LEFT JOIN kpi_title on gold_kpi.kpi_id=kpi_title.kpi_id where 1=1 and gold_kpi.kpi_id ='UPF.06' and timestamp BETWEEN '${timeArr[0]}' AND '${timeArr[1]}' `,
},
timeout: 60_000,
}),
// 获取对应信息
request({
url: `/api/rest/databaseManagement/v1/select/omc_db/gold_kpi`,
method: 'get',
params: {
SQL: `SELECT gold_kpi.*,kpi_title.en_title FROM gold_kpi LEFT JOIN kpi_title on gold_kpi.kpi_id=kpi_title.kpi_id where 1=1 and gold_kpi.kpi_id ='UPF.03' and timestamp BETWEEN '${timeArr[0]}' AND '${timeArr[1]}' `,
},
timeout: 60_000,
}),
]).then(resArr => {
let upData: any = [];
let downData: any = [];
// 规则数据
if (resArr[0].status === 'fulfilled') {
const itemV:any = resArr[0].value;
// 解析数据
if (
itemV.code === RESULT_CODE_SUCCESS &&
Array.isArray(itemV.data?.data)
) {
let itemData = itemV.data.data;
let data= itemData[0]['gold_kpi'];
if (Array.isArray(data)) {
try {
upData = data.map(v => parseObjLineToHump(v));
} catch (error) {
console.error(error);
}
}
}
}
if (resArr[1].status === 'fulfilled') {
const itemV = resArr[1].value;
// 解析数据
if (
itemV.code === RESULT_CODE_SUCCESS &&
Array.isArray(itemV.data?.data)
) {
let itemData = itemV.data.data;
const data = itemData[0]['gold_kpi'];
if (Array.isArray(data)) {
try {
downData = data.map(v => parseObjLineToHump(v));
} catch (error) {
console.error(error);
}
}
}
}
return {upData,downData};
});
}

16
src/i18n/locales/en-US.ts
View File

@@ -212,6 +212,11 @@ export default {
systemStatus:'Status',
realNeStatus:'Status',
reloadTime:'Refresh Time',
Critical:'Critical',
Major:'Major',
Minor:'Minor',
Warning:'Warning',
Event:'Event'
},
error: {
err403: {
@@ -483,6 +488,17 @@ export default {
arrayMore: "Expand",
},
},
dashboard: {
overview:{
UPFFlow:{
up:'Uplink Rate',
down:'Downlink Rate'
},
AlarmTypeBar:{
alarmTotal:'Total:'
}
}
},
neUser: {
auth: {
authInfo:'Authentication Info',

16
src/i18n/locales/zh-CN.ts
View File

@@ -212,6 +212,11 @@ export default {
systemStatus:'系统状态',
realNeStatus:'网元状态',
reloadTime:'刷新时间',
Critical:'严重告警',
Major:'主要告警',
Minor:'次要告警',
Warning:'警告告警',
Event:'事件告警'
},
error: {
err403: {
@@ -483,6 +488,17 @@ export default {
arrayMore: "展开",
},
},
dashboard: {
overview:{
UPFFlow:{
up:'上行',
down:'下行',
},
AlarmTypeBar:{
alarmTotal:'告警总数:'
}
}
},
neUser: {
auth: {
authInfo:'鉴权信息',

30
src/utils/parse-utils.ts
View File

@@ -118,3 +118,33 @@ export function parseSizeFromKBs(size: number): string {
}
return (size / Math.pow(num, 3)).toFixed(2) + ' TB/s';
}
/**
* 字节数转换速率
* @param sizeByte 数值大小
* @returns
*/
export function parseSizeFromKbs(sizeByte: number, timeInterval: number): any {
// let realBit:any=((sizeByte * 8) / timeInterval);
// if (realBit >= 0 && realBit < 1000) {
// return [realBit.toFixed(2),' bits/sec'];
// }
// if (realBit >= 1000 && realBit < 1000*1000) {
// return [(realBit/1000).toFixed(2) ,' Kbits/sec'];
// }
// if (realBit >= 1000*1000 && realBit < 1000*1000*1000) {
// return [((realBit/1000)/1000).toFixed(2) ,' Mbits/sec'];
// }
// if (realBit >= 1000*1000*1000) {
// return [((realBit/1000*1000)/1000).toFixed(2) ,' Gbits/sec'];
// }
// return [((realBit/1000*1000*1000)/1000).toFixed(2) ,' TB/sec'];
let realBit: any = (sizeByte * 8) / timeInterval;
return [(realBit / 1000 / 1000).toFixed(2), ' Mbits/sec'];
}

274
src/views/dashboard/overview/components/AlarnTypeBar/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<div id="alarmType" class="chart-container"></div>
<div ref="alarmTypeBar" class="chart-container"></div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { markRaw, onMounted, ref } from 'vue';
import { mainGet } from '@/api/faultManage/actAlarm';
import * as echarts from 'echarts/core';
import {
@@ -15,6 +15,12 @@ import { BarChart, PieChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { LabelLayout } from 'echarts/features';
import useI18n from '@/hooks/useI18n';
import {
GridComponentOption,
LegendComponentOption,
LineSeriesOption,
TooltipComponentOption,
} from 'echarts';
const { t, currentLocale } = useI18n();
echarts.use([
GridComponent,
@@ -32,9 +38,15 @@ echarts.use([
CanvasRenderer,
LabelLayout,
]);
/**图DOM节点实例对象 */
const alarmTypeBar = ref<HTMLElement | undefined>(undefined);
/**图实例对象 */
const alarmTypeBarChart = ref<any>(null);
// 将现有数据补全为期望的格式
function completeData(existingData: any, expectedData: any) {
let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
const result = expectedData.map((item: any) => {
const found = existingData.find(
(existingItem: any) => existingItem.name === item.name
@@ -44,161 +56,162 @@ function completeData(existingData: any, expectedData: any) {
return item;
}
});
var lang = currentLocale.value.split('_')[0];
result.forEach((item: any) => {
item.name = t('views.index.' + item.name);
});
// result.forEach((item: any) => {
// item.title = t('views.index.' + item.name);
// });//
console.log(result);
return result;
}
function fnDesign() {
var wantArr = [
{
value: 0,
name: 'Critical',
},
{
value: 0,
name: 'Major',
},
{
value: 0,
name: 'Minor',
},
{
value: 0,
name: 'Warning',
},
{
value: 0,
name: 'Event',
},
];
function initPicture() {
mainGet().then((res: any) => {
const expectedData = [
{
name: 'CommunicationAlarm',
value: 0,
const colorList = ['##ae273e', '#ffb854', '#ffc069', '#99ccff', '#49a9ee'];
let yData: any[] = [];
let realData = completeData(res.data, wantArr).sort(function (
a: any,
b: any
) {
return a.value - b.value;
});
console.log(realData);
// realData.map((item: any) => {
// item.itemStyle={
// color:colorList[i]
// }
// item.name = t('views.index.' + item.name);
// });
for (let i = 0; i < realData.length; i++) {
realData[i].name= t('views.index.' + realData[i].name);
realData[i].itemStyle = {
color: colorList[i]
};
}
const optionData: any = {
tooltip: {
trigger: 'item',
},
{
name: 'EquipmentAlarm',
value: 0,
},
{
name: 'ProcessingFailure',
value: 0,
},
{
name: 'EnvironmentalAlarm',
value: 0,
},
{
name: 'QualityOfServiceAlarm',
value: 0,
},
];
var chartDom = document.getElementById('alarmType');
var myChart = echarts.init(chartDom);
var option: any;
var colorList = [
'#afa3f5',
'#00d488',
'#3feed4',
'#3bafff',
'#f1bb4c',
'#aff',
'rgba(250,250,250,0.5)',
];
option = {
grid: {
bottom: 120,
left: 0,
right: '10%',
},
legend: {
visualMap: {
show: false,
orient: 'vertical',
top: 'middle',
right: '5%',
textStyle: {
color: '#f2f2f2',
fontSize: 25,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1],
},
icon: 'roundRect',
},
series: [
// 主要展示层的
{
radius: ['29%', '59%'],
center: ['50%', '50%'],
name: 'Access From',
type: 'pie',
itemStyle: {
normal: {
color: function (params: any) {
return colorList[params.dataIndex];
},
},
},
labelLine: {
show: true,
length: 10,
length2: 120,
align: 'right',
color: '#000',
},
radius: '75%',
center: ['40%', '48%'],
data: realData,
roseType: 'radius',
// label: {
// formatter: '{c|{c}}\n{b|{b}}',
// rich: {
// c: {
// color: 'rgb(241,246,104)',
// fontSize: 20,
// fontWeight: 'bold',
// lineHeight: 5,
// },
// b: {
// color: 'rgb(98,137,169)',
// fontSize: 15,
// height: 40,
// },
// },
// },
// labelLine: {
// lineStyle: {
// color: 'rgb(98,137,169)',
// },
// smooth: 0.2,
// length: 10,
// length2: 20,
// },
label: {
show: true,
formatter: '({d}%){b}:{c}',
padding: [0, -120],
fontSize:15,
height: 35,
alignTo: 'labelLine',
color: 'auto',
formatter: '{c|{c}}\n{b|{b}}',
distance: 80,
rich: {
name: {
color: '#ff0000', // 修改名称颜色
c: {
color: 'rgb(241,246,104)',
fontSize: 18,
fontWeight: 'bold',
lineHeight: 5,
},
b: {
color: 'rgb(98,137,169)',
fontSize: 15,
height: 30,
},
},
},
data: [
{ value: 1, name: '通信告警' },
{ value: 1, name: '设备告警' },
{ value: 1, name: '服务质量' },
{ value: 1, name: '环境告警' },
{ value: 1, name: '处理错误' },
],
},
// 边框的设置
{
radius: ['54%', '59%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
},
emphasis: {
show: false,
},
},
animation: false,
tooltip: {
show: false,
smooth: 0.2,
length: 10,
length2: 80,
},
itemStyle: {
normal: {
color: 'rgba(250,250,250,0.5)',
},
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 50,
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx: any) {
return Math.random() * 200;
},
data: [
{
value: 1,
},
],
},
],
};
option && myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
// 点击圆形饼状图
myChart.on('click', (params: any) => {
// 根据点击的数据params更新柱状图的数据
// const newData = generateNewData(params.name); // 根据点击的数据生成新的柱状图数据
// updateBarChart(newData); // 更新柱状图
});
fnDesign(alarmTypeBar.value, optionData);
});
}
function fnDesign(container: HTMLElement | undefined, option: any) {
if (!container) return;
const { clientHeight, clientWidth } = container;
alarmTypeBarChart.value = markRaw(
echarts.init(container, 'light', {
width: clientWidth,
height: clientHeight - 36,
})
);
option && alarmTypeBarChart.value.setOption(option);
}
onMounted(() => {
fnDesign();
initPicture();
});
</script>
@@ -209,3 +222,4 @@ onMounted(() => {
height: 100%;
}
</style>

397
src/views/dashboard/overview/components/UPFFlow/index.vue
View File

@@ -2,8 +2,9 @@
<div ref="upfFlow" class="chart-container"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { mainGet } from '@/api/faultManage/actAlarm';
import { onMounted, onUnmounted, ref } from 'vue';
import { listUPFData } from '@/api/perfManage/goldTarget';
import { parseSizeFromKbs } from '@/utils/parse-utils';
import * as echarts from 'echarts/core';
import {
TooltipComponent,
@@ -16,8 +17,11 @@ import {
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeSeriesOption } from 'echarts';
import { markRaw } from 'vue';
import useI18n from '@/hooks/useI18n';
import { parseDateToStr } from '@/utils/date-utils';
const { t } = useI18n();
echarts.use([
TooltipComponent,
@@ -34,198 +38,231 @@ type EChartsOption = echarts.ComposeOption<
| LegendComponentOption
| LineSeriesOption
>;
/**设置定时器ID */
let timeoutDuration = 5 * 1000; // 设置5s进行刷新请求
let loadId: any = null;
// 超时锁屏
function resetTimeout() {
if (loadId) {
clearInterval(loadId);
}
loadId = setInterval(() => {
initPicture();
}, timeoutDuration);
}
/**图DOM节点实例对象 */
const upfFlow = ref<HTMLElement | undefined>(undefined);
/**图实例对象 */
const upfFlowChart = ref<any>(null);
// // 将现有数据补全为期望的格式
// function completeData(existingData: any, expectedData: any) {
// let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
// const result = expectedData.map((item: any) => {
// const found = existingData.find(
// (existingItem: any) => existingItem.name === item.name
// );
// if (found) return found;
// else {
// return item;
// }
// });
// var lang = currentLocale.value.split('_')[0];
// console.log(lang);
// result.forEach((item: any) => {
// item.name = t('views.index.' + item.name);
// });
// return result;
// }
var charts = {
unit: 'Kbps',
names: ['上行', '下行'],
lineX: [
'2018-11-11 17:01',
'2018-11-11 17:02',
'2018-11-11 17:03',
'2018-11-11 17:04',
'2018-11-11 17:05',
'2018-11-11 17:06',
'2018-11-11 17:07',
'2018-11-11 17:08',
'2018-11-11 17:09',
'2018-11-11 17:10',
'2018-11-11 17:11',
'2018-11-11 17:12',
'2018-11-11 17:13',
'2018-11-11 17:14',
'2018-11-11 17:15',
'2018-11-11 17:16',
'2018-11-11 17:17',
'2018-11-11 17:18',
'2018-11-11 17:19',
'2018-11-11 17:20',
],
value: [
[
451, 352, 303, 534, 95, 236, 217, 328, 159, 151, 231, 192, 453, 524, 165,
236, 527, 328, 129, 530,
],
[
360, 545, 80, 192, 330, 580, 192, 80, 250, 453, 352, 28, 625, 345, 65,
325, 468, 108, 253, 98,
],
],
};
var color = ['rgba(23, 255, 243', 'rgba(255,100,97'];
var lineY: any = [];
for (var i = 0; i < charts.names.length; i++) {
var x = i;
if (x > color.length - 1) {
x = color.length - 1;
function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
if (!container) {
return;
}
var data = {
name: charts.names[i],
type: 'line',
color: color[x] + ')',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[x] + ', 0.3)',
},
{
offset: 0.8,
color: color[x] + ', 0)',
},
],
false
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
symbol: 'circle',
symbolSize: 5,
data: charts.value[i],
const { clientHeight, clientWidth } = container;
if (!upfFlowChart.value) {
upfFlowChart.value = markRaw(
echarts.init(container, 'light', {
width: clientWidth,
height: clientHeight - 36,
})
);
}
window.onresize = function () {
// echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
upfFlowChart.value.resize();
};
lineY.push(data);
option && upfFlowChart.value.setOption(option);
}
const optionData: EChartsOption = {
tooltip: {
show: true, //是否显示提示框组件
trigger: 'axis',
},
legend: {
data: charts.names,
textStyle: {
fontSize: 12,
color: 'rgb(0,253,255,0.6)',
},
right: '4%',
},
grid: {
top: '14%',
left: '4%',
right: '4%',
bottom: '12%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: charts.lineX,
axisLabel: {
formatter: function (params: any) {
return params.split(' ')[0] + '\n' + params.split(' ')[1];
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
yAxis: {
name: charts.unit,
type: 'value',
axisLabel: {
formatter: '{value}',
},
splitLine: {
lineStyle: {
color: 'rgb(23,255,243,0.3)',
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
series: lineY,
};
//渲染速率图
function initPicture() {
let queryArr: any = [];
const initTime: Date = new Date();
console.log(initTime)
const startTime: Date = new Date(initTime);
startTime.setHours(0, 0, 0, 0); // 设置为今天的0点
const endTime: Date = new Date(initTime);
endTime.setHours(23, 59, 59, 59); // 设置为今天的12点
queryArr = [parseDateToStr(startTime), parseDateToStr(endTime)];
function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
if (!container) return;
const { clientHeight, clientWidth } = container;
listUPFData(queryArr).then(res => {
let timeArr: any = [];
let upValue: any = [];
let downValue: any = [];
upfFlowChart.value = markRaw(
echarts.init(container, 'light', {
width: clientWidth,
height: clientHeight - 36,
})
);
option && upfFlowChart.value.setOption(option);
res.upData.map((item: any) => {
timeArr.push(item.timestamp);
upValue.push(parseSizeFromKbs(item.value, 60)[0]);
});
res.downData.map((item: any) => {
downValue.push(parseSizeFromKbs(item.value, 60)[0]);
});
var charts = {
unit: '(Kbps)',
names: [
t('views.dashboard.overview.UPFFlow.up'),
t('views.dashboard.overview.UPFFlow.down'),
],
lineX: timeArr,
value: [upValue, downValue],
};
var color = ['rgba(92, 123, 217', 'rgba(166, 215, 144'];
var lineY: any = [];
for (var i = 0; i < charts.names.length; i++) {
var x = i;
if (x > color.length - 1) {
x = color.length - 1;
}
var data = {
name: charts.names[i],
type: 'line',
color: color[x] + ')',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[x] + ', 0.5)',
},
{
offset: 0.8,
color: color[x] + ', 0.5)',
},
],
false
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
symbol: 'circle',
symbolSize: 5,
formatter: '{b}',
data: charts.value[i],
yAxisIndex: i,
};
lineY.push(data);
}
const optionData: EChartsOption = {
tooltip: {
show: true, //是否显示提示框组件
trigger: 'axis',
//formatter:'{a0}:{c0}<br>{a1}:{c1}'
formatter: function (param: any) {
console.log(param);
var tip = '';
if (param !== null && param.length > 0) {
tip += param[0].name + '<br />';
for (var i = 0; i < param.length; i++) {
tip +=
param[i].marker +
param[i].seriesName +
': ' +
param[i].value +
'<br />';
}
}
return tip;
},
},
legend: {
data: charts.names,
textStyle: {
fontSize: 12,
color: 'rgb(0,253,255,0.6)',
},
right: '35%',
},
grid: {
top: '14%',
left: '4%',
right: '4%',
bottom: '12%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: charts.lineX,
axisLabel: {
formatter: function (params: any) {
return params.split(' ')[0] + '\n' + params.split(' ')[1];
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
yAxis: [
{
name: charts.unit,
type: 'value',
axisLabel: {
formatter: '{value}',
},
splitLine: {
lineStyle: {
color: 'rgb(23,255,243,0.3)',
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
{
name: charts.unit,
type: 'value',
axisLabel: {
formatter: '{value}',
},
splitLine: {
lineStyle: {
color: 'rgb(23,255,243,0.3)',
},
},
axisLine: {
lineStyle: {
color: 'rgb(0,253,255,0.6)',
},
},
},
],
series: lineY,
};
fnDesign(upfFlow.value, optionData);
});
}
onMounted(() => {
fnDesign(upfFlow.value, optionData);
setInterval(() => {
upfFlowChart.value.setOption({
legend: {
selected: {
上行: false,
下行: false,
},
},
});
upfFlowChart.value.setOption({
legend: {
selected: {
上行: true,
下行: true,
},
},
});
}, 10000);
initPicture();
resetTimeout();
});
/**组件实例被卸载之后调用 */
onUnmounted(() => {
if (loadId) {
clearInterval(loadId);
}
});
</script>

52
src/views/dashboard/overview/index.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { onMounted, reactive, ref } from 'vue';
import useI18n from '@/hooks/useI18n';
import Topology from './components/Topology/index.vue';
import NeResources from './components/NeResources/index.vue';
@@ -7,17 +7,59 @@ import CDR from './components/CDR/index.vue';
import AlarnDayLine from './components/AlarnDayLine/index.vue';
import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
import UPFFlow from './components/UPFFlow/index.vue';
import { listSub } from '@/api/neUser/sub';
import { listUENum } from '@/api/neUser/ue';
import { graphNodeClickID } from './hooks/useTopology';
import { useFullscreen } from '@vueuse/core';
import useAppStore from '@/store/modules/app';
const appStore = useAppStore();
const { t } = useI18n();
// let subNum = ref<number>(0);
/**用户在线信息 */
let onlineInfo: {
/**签约用户数量 */
subNum: number;
/**告警清除类型 */
ueNum: any;
/**告警清除类型 */
activeAckState: DictType[];
/**原始严重程度 */
activeAlarmSeverity: DictType[];
} = reactive({
subNum: 0,
ueNum: 0,
activeAckState: [],
activeAlarmSeverity: [],
});
/**总览节点 */
const viewportDom = ref<HTMLElement | null>(null);
const { isFullscreen, toggle } = useFullscreen(viewportDom);
onMounted(() => {});
onMounted(() => {
Promise.allSettled([
listSub({
neid: '003',
sortField: 'imsi',
sortOrder: 'asc',
pageNum: '1',
pageSize: '20',
}),
// listUENum('001'),
]).then(resArr => {
console.log(resArr)
if (resArr[0].status === 'fulfilled') {
onlineInfo.subNum=resArr[0].value.total;
}
// if (resArr[1].status === 'fulfilled') {
// console.log(resArr[1].value)
// onlineInfo.ueNum=resArr[1].value.data?.ueNum;
// }
});
});
</script>
<template>
@@ -36,14 +78,14 @@ onMounted(() => {});
<div class="overview panel">
<div class="inner">
<div class="item">
<h4>2,190</h4>
<h4>{{onlineInfo.subNum}}</h4>
<span>
<UserOutlined style="color: #006cff" />
签约用户
</span>
</div>
<div class="item">
<h4>190</h4>
<h4>1000</h4>
<span>
<UserSwitchOutlined style="color: #6acca3" />
语音在线
@@ -69,7 +111,7 @@ onMounted(() => {});
<!--本月告警统计-->
<div class="alarmType panel">
<div class="inner">
<h3>本月告警统计</h3>
<h3>告警统计</h3>
<div class="chart">
<AlarnTypeBar />
</div>

31
src/views/faultManage/active-alarm/index.vue
View File

@@ -48,6 +48,8 @@ let tableColumnsDnd = ref<ColumnsType>([]);
/**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**告警设备类型 */
@@ -627,8 +629,18 @@ function fnExportAll() {
const sortData = {
header: sortArr,
};
exportAll(queryParams).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
res.data = res.data.map((objA: any) => {
let filteredObj: any = {};
sortArr.forEach((key: any) => {
if (objA.hasOwnProperty(key)) {
filteredObj[key] = objA[key];
}
});
return filteredObj;
});
message.success({
content: t('common.msgSuccess', { msg: t('common.export') }),
key,
@@ -875,7 +887,12 @@ onMounted(() => {
{{ t('views.faultManage.activeAlarm.syncMyself') }}
</a-button>
<a-button type="primary" danger @click.prevent="fnClear()">
<a-button
type="primary"
danger
@click.prevent="fnClear()"
:disabled="state.selectedRowKeys.length <= 0"
>
<template #icon>
<DeleteOutlined />
</template>
@@ -887,7 +904,11 @@ onMounted(() => {
{{ t('views.faultManage.activeAlarm.disPlayFilfter') }}
</a-button>
<a-button type="primary" @click.prevent="fnExportAll()">
<a-button
type="primary"
@click.prevent="fnExportAll()"
:disabled="tableState.data.length <= 0"
>
<template #icon> <export-outlined /> </template>
{{ t('views.faultManage.activeAlarm.exportAll') }}
</a-button>
@@ -1240,12 +1261,6 @@ onMounted(() => {
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>

2
src/views/faultManage/history-alarm/index.vue
View File

@@ -651,7 +651,7 @@ onMounted(() => {
<a-select
v-model:value="queryParams.alarm_type"
:placeholder="t('common.selectPlease')"
:options="dict.activeAlarmSeverity"
:options="dict.activeAlarmType"
/>
</a-form-item>
</a-col>