自定义指标界面
This commit is contained in:
lai
146
src/api/perfManage/customTarget.ts
Normal file
146
src/api/perfManage/customTarget.ts
Normal file
@@ -0,0 +1,146 @@
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { request } from '@/plugins/http-fetch';
|
||||
import { parseObjLineToHump } from '@/utils/parse-utils';
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
|
||||
/**
|
||||
* 查询自定义指标
|
||||
* @param query 查询参数
|
||||
* @returns object
|
||||
*/
|
||||
export async function listCustom(query: Record<string, any>) {
|
||||
let totalSQL = 'select count(*) as total from pm_custom_title where 1=1 ';
|
||||
let rowsSQL = 'select * from pm_custom_title where 1=1 ';
|
||||
|
||||
// 查询
|
||||
let querySQL = '';
|
||||
if (query.neType) {
|
||||
querySQL += ` and ne_type like '%${query.neType}%' `;
|
||||
}
|
||||
|
||||
// 排序
|
||||
let sortSql = ' order by update_time ';
|
||||
if (query.sortOrder === 'asc') {
|
||||
sortSql += ' asc ';
|
||||
} else {
|
||||
sortSql += ' desc ';
|
||||
}
|
||||
// 分页
|
||||
const pageNum = (query.pageNum - 1) * query.pageSize;
|
||||
const limtSql = ` limit ${pageNum},${query.pageSize} `;
|
||||
|
||||
// 发起请求
|
||||
const result = await request({
|
||||
url: `/api/rest/databaseManagement/v1/select/omc_db/pm_custom_title`,
|
||||
method: 'get',
|
||||
params: {
|
||||
totalSQL: totalSQL + querySQL,
|
||||
rowsSQL: rowsSQL + querySQL + sortSql + limtSql,
|
||||
},
|
||||
});
|
||||
|
||||
// 解析数据
|
||||
if (result.code === RESULT_CODE_SUCCESS) {
|
||||
const data: DataList = {
|
||||
total: 0,
|
||||
rows: [],
|
||||
code: result.code,
|
||||
msg: result.msg,
|
||||
};
|
||||
result.data.data.forEach((item: any) => {
|
||||
const itemData = item['pm_custom_title'];
|
||||
if (Array.isArray(itemData)) {
|
||||
if (itemData.length === 1 && itemData[0]['total'] >= 0) {
|
||||
data.total = itemData[0]['total'];
|
||||
} else {
|
||||
data.rows = itemData.map(v => parseObjLineToHump(v));
|
||||
}
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询自定义指标详细
|
||||
* @param id 网元ID
|
||||
* @returns object
|
||||
*/
|
||||
export async function getCustom(id: string | number) {
|
||||
// 发起请求
|
||||
const result = await request({
|
||||
url: `/api/rest/databaseManagement/v1/select/omc_db/pm_custom_title`,
|
||||
method: 'get',
|
||||
params: {
|
||||
SQL: `select * from pm_custom_title where id = ${id}`,
|
||||
},
|
||||
});
|
||||
// 解析数据
|
||||
if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
|
||||
let data = result.data.data[0];
|
||||
return Object.assign(result, {
|
||||
data: parseObjLineToHump(data['pm_custom_title'][0]),
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增自定义指标
|
||||
* @param data 网元对象
|
||||
* @returns object
|
||||
*/
|
||||
export function addCustom(data: Record<string, any>) {
|
||||
let obj: any = {
|
||||
title: data.title,
|
||||
ne_type: data.neType,
|
||||
kpi_id: data.kpiId,
|
||||
object_type: data.objectType,
|
||||
expression: data.expression,
|
||||
period: data.period,
|
||||
description: data.description,
|
||||
kpi_set: data.kpiSet,
|
||||
};
|
||||
|
||||
return request({
|
||||
url: `/api/rest/databaseManagement/v1/omc_db/pm_custom_title`,
|
||||
method: 'post',
|
||||
data: { 'data': [obj] },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改自定义指标
|
||||
* @param data 网元对象
|
||||
* @returns object
|
||||
*/
|
||||
export function updateCustom(data: Record<string, any>) {
|
||||
let obj: any = {
|
||||
title: data.title,
|
||||
ne_type: data.neType,
|
||||
kpi_id: data.kpiId,
|
||||
object_type: data.objectType,
|
||||
expression: data.expression,
|
||||
period: data.period,
|
||||
description: data.description,
|
||||
kpi_set: data.kpiSet,
|
||||
};
|
||||
return request({
|
||||
url: `/api/rest/databaseManagement/v1/omc_db/pm_custom_title?WHERE=id=${data.id}`,
|
||||
method: 'put',
|
||||
data: { data: obj },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除自定义指标
|
||||
* @returns object
|
||||
*/
|
||||
export async function delCustom(data: Record<string, any>) {
|
||||
return request({
|
||||
url: `/api/rest/databaseManagement/v1/omc_db/pm_custom_title?WHERE=id=${data.id}`,
|
||||
method: 'delete',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -765,6 +765,20 @@ export default {
|
||||
exportEmpty: "Export data is empty",
|
||||
showChartSelected: "Show All",
|
||||
realTimeData: "Real Time 5s Data",
|
||||
},
|
||||
customTarget:{
|
||||
kpiId:' Custom Indicator',
|
||||
period:' Granularity',
|
||||
title:' Custom Indicator Title',
|
||||
objectType:' Object type',
|
||||
expression:'Expression',
|
||||
description:' Description',
|
||||
kpiSet:' Statistical Settings',
|
||||
delCustomTip:'Confirm deletion of data item with record number {num}?',
|
||||
delCustom:' Successfully delete record number {num} custom indicator',
|
||||
addCustom:' Add custom indicator',
|
||||
editCustom:' Edit Custom indicator',
|
||||
errorCustomInfo: 'Failed to get information',
|
||||
}
|
||||
},
|
||||
traceManage: {
|
||||
|
||||
@@ -765,6 +765,20 @@ export default {
|
||||
exportEmpty: "导出数据为空",
|
||||
showChartSelected: "显示全部",
|
||||
realTimeData: "实时5s数据",
|
||||
},
|
||||
customTarget:{
|
||||
kpiId:'自定义指标项',
|
||||
period:'颗粒度',
|
||||
title:'自定义指标项标题',
|
||||
objectType:'对象类型',
|
||||
expression:'计算公式',
|
||||
description:'描述',
|
||||
kpiSet:'统计设置',
|
||||
delCustomTip:'确认删除记录编号为 {num} 的数据项?',
|
||||
delCustom:'成功删除记录编号为 {num} 自定义指标',
|
||||
addCustom:'添加自定义指标',
|
||||
editCustom:'编辑自定义指标',
|
||||
errorCustomInfo: '获取信息失败',
|
||||
}
|
||||
},
|
||||
traceManage: {
|
||||
|
||||
@@ -1,23 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, toRaw } from 'vue';
|
||||
import { reactive, onMounted, ref, toRaw } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { Modal } from 'ant-design-vue/lib';
|
||||
import { Form, message, Modal } from 'ant-design-vue/lib';
|
||||
import { SizeType } from 'ant-design-vue/lib/config-provider';
|
||||
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
|
||||
import { ColumnsType } from 'ant-design-vue/lib/table';
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { saveAs } from 'file-saver';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { getTraceRawInfo, listTraceData } from '@/api/traceManage/analysis';
|
||||
const { t } = useI18n();
|
||||
import useDictStore from '@/store/modules/dict';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import {
|
||||
addCustom,
|
||||
delCustom,
|
||||
getCustom,
|
||||
listCustom,
|
||||
updateCustom,
|
||||
} from '@/api/perfManage/customTarget';
|
||||
const { getDict } = useDictStore();
|
||||
const { t, currentLocale } = useI18n();
|
||||
|
||||
/**字典数据 */
|
||||
let dict: {
|
||||
/**原始严重程度 */
|
||||
activeAlarmSeverity: DictType[];
|
||||
} = reactive({
|
||||
activeAlarmSeverity: [],
|
||||
});
|
||||
|
||||
/**查询参数 */
|
||||
let queryParams = reactive({
|
||||
/**移动号 */
|
||||
imsi: '',
|
||||
/**移动号 */
|
||||
msisdn: '',
|
||||
/**网元类型 */
|
||||
neType: '',
|
||||
/**当前页数 */
|
||||
pageNum: 1,
|
||||
/**每页条数 */
|
||||
@@ -27,7 +40,7 @@ let queryParams = reactive({
|
||||
/**查询参数重置 */
|
||||
function fnQueryReset() {
|
||||
queryParams = Object.assign(queryParams, {
|
||||
imsi: '',
|
||||
neType: '',
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
@@ -46,6 +59,8 @@ type TabeStateType = {
|
||||
seached: boolean;
|
||||
/**记录数据 */
|
||||
data: object[];
|
||||
/**勾选记录 */
|
||||
selectedRowKeys: (string | number)[];
|
||||
};
|
||||
|
||||
/**表格状态 */
|
||||
@@ -54,59 +69,31 @@ let tableState: TabeStateType = reactive({
|
||||
size: 'middle',
|
||||
seached: true,
|
||||
data: [],
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
|
||||
/**表格字段列 */
|
||||
let tableColumns: ColumnsType = [
|
||||
{
|
||||
title: t('views.traceManage.analysis.trackTaskId'),
|
||||
dataIndex: 'taskId',
|
||||
title: t('views.perfManage.taskManage.neType'),
|
||||
dataIndex: 'neType',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.imsi'),
|
||||
dataIndex: 'imsi',
|
||||
title: t('views.perfManage.customTarget.kpiId'),
|
||||
dataIndex: 'kpiId',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.msisdn'),
|
||||
dataIndex: 'msisdn',
|
||||
title: t('views.perfManage.customTarget.kpiSet'),
|
||||
dataIndex: 'kpiSet',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.srcIp'),
|
||||
dataIndex: 'srcAddr',
|
||||
title: t('views.perfManage.customTarget.period'),
|
||||
dataIndex: 'threshold',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.dstIp'),
|
||||
dataIndex: 'dstAddr',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.signalType'),
|
||||
dataIndex: 'ifType',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.msgType'),
|
||||
dataIndex: 'msgType',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.msgDirect'),
|
||||
dataIndex: 'msgDirect',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('views.traceManage.analysis.rowTime'),
|
||||
dataIndex: 'timestamp',
|
||||
align: 'center',
|
||||
customRender(opt) {
|
||||
if (!opt.value) return '';
|
||||
return parseDateToStr(opt.value);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('common.operate'),
|
||||
key: 'id',
|
||||
@@ -147,18 +134,59 @@ function fnTableSize({ key }: MenuInfo) {
|
||||
tableState.size = key as SizeType;
|
||||
}
|
||||
|
||||
/**查询备份信息列表, pageNum初始页数 */
|
||||
/**
|
||||
* 自定义指标删除
|
||||
* @param row 记录编号ID
|
||||
*/
|
||||
function fnRecordDelete(row: Record<string, any>) {
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('views.perfManage.customTarget.delCustomTip', { num: row.id }),
|
||||
onOk() {
|
||||
const key = 'delThreshold';
|
||||
message.loading({ content: t('common.loading'), key });
|
||||
delCustom(row).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('views.perfManage.customTarget.delCustom', {
|
||||
num: row.id,
|
||||
}),
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
fnGetList();
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
key: key,
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**查询信息列表, pageNum初始页数 */
|
||||
function fnGetList(pageNum?: number) {
|
||||
if (tableState.loading) return;
|
||||
tableState.loading = true;
|
||||
if (pageNum) {
|
||||
queryParams.pageNum = pageNum;
|
||||
}
|
||||
listTraceData(toRaw(queryParams)).then(res => {
|
||||
listCustom(toRaw(queryParams)).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
|
||||
// 取消勾选
|
||||
if (tableState.selectedRowKeys.length > 0) {
|
||||
tableState.selectedRowKeys = [];
|
||||
}
|
||||
tablePagination.total = res.total;
|
||||
tableState.data = res.rows;
|
||||
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
|
||||
if (
|
||||
tablePagination.total <=
|
||||
(queryParams.pageNum - 1) * tablePagination.pageSize &&
|
||||
queryParams.pageNum !== 1
|
||||
) {
|
||||
tableState.loading = false;
|
||||
fnGetList(queryParams.pageNum - 1);
|
||||
}
|
||||
@@ -167,179 +195,275 @@ function fnGetList(pageNum?: number) {
|
||||
});
|
||||
}
|
||||
|
||||
/**抽屉对象信息状态类型 */
|
||||
/**对话框对象信息状态类型 */
|
||||
type ModalStateType = {
|
||||
/**抽屉框是否显示 */
|
||||
visible: boolean;
|
||||
/**详情框是否显示 */
|
||||
visibleByView: boolean;
|
||||
/**新增框或修改框是否显示 */
|
||||
visibleByEdit: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**网元类型设备对象 */
|
||||
neType: string[];
|
||||
/**网元类型性能测量集 */
|
||||
neTypPerformance: Record<string, any>[];
|
||||
/**网元类型对象类型集 */
|
||||
objectTypeArr: Record<string, any>[];
|
||||
/**已选择性能测量项 */
|
||||
selectedPre: string[];
|
||||
/**表单数据 */
|
||||
from: Record<string, any>;
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
};
|
||||
|
||||
/**抽屉对象信息状态 */
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
visible: false,
|
||||
visibleByView: false,
|
||||
visibleByEdit: false,
|
||||
title: '',
|
||||
neType: [],
|
||||
neTypPerformance: [],
|
||||
objectTypeArr: [],
|
||||
selectedPre: [],
|
||||
from: {
|
||||
rawData: '',
|
||||
rawDataHTML: '',
|
||||
downBtn: false,
|
||||
id: '',
|
||||
neType: '',
|
||||
objectType: '',
|
||||
expression: '',
|
||||
kpiSet: '',
|
||||
title: '',
|
||||
kpiId: '',
|
||||
period: 900,
|
||||
},
|
||||
confirmLoading: false,
|
||||
});
|
||||
|
||||
/**对话框内表单属性和校验规则 */
|
||||
const modalStateFrom = Form.useForm(
|
||||
modalState.from,
|
||||
reactive({
|
||||
neType: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.traceManage.task.neTypePlease'),
|
||||
},
|
||||
],
|
||||
objectType: [
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
t('views.perfManage.customTarget.objectType') +
|
||||
t('common.unableNull'),
|
||||
},
|
||||
],
|
||||
expression: [
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
t('views.perfManage.customTarget.expression') +
|
||||
t('common.unableNull'),
|
||||
},
|
||||
],
|
||||
kpiId: [
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
t('views.perfManage.customTarget.kpiId') + t('common.unableNull'),
|
||||
},
|
||||
],
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
t('views.perfManage.customTarget.title') + t('common.unableNull'),
|
||||
},
|
||||
],
|
||||
period: [
|
||||
{
|
||||
required: true,
|
||||
message:
|
||||
t('views.perfManage.customTarget.period') + t('common.unableNull'),
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
/**性能测量数据集选择初始 */
|
||||
function fnSelectPerformanceInit(value: any) {
|
||||
const performance = useNeInfoStore().perMeasurementList.filter(
|
||||
i => i.neType === value
|
||||
);
|
||||
if (modalState.from.objectType) modalState.from.objectType = '';
|
||||
|
||||
modalState.from.expression = '';
|
||||
const arrSet = new Set<string>();
|
||||
performance.forEach((data: any) => {
|
||||
arrSet.add(data.objectType);
|
||||
});
|
||||
// 组装对象类型options
|
||||
modalState.objectTypeArr = Array.from(arrSet).map((value: any) => ({
|
||||
label: value,
|
||||
value: value,
|
||||
}));
|
||||
|
||||
//进行分组选择
|
||||
const groupedData = performance.reduce((groups: any, item: any) => {
|
||||
const { kpiCode, ...rest } = item;
|
||||
if (!groups[kpiCode]) {
|
||||
groups[kpiCode] = [];
|
||||
}
|
||||
groups[kpiCode].push(rest);
|
||||
return groups;
|
||||
}, {});
|
||||
|
||||
//渲染出性能测量集的选择项
|
||||
modalState.neTypPerformance = Object.keys(groupedData).map(kpiCode => {
|
||||
return {
|
||||
label: kpiCode,
|
||||
options: groupedData[kpiCode].map((item: any) => {
|
||||
return {
|
||||
value: item.kpiId,
|
||||
label:
|
||||
currentLocale.value === 'zh_CN'
|
||||
? JSON.parse(item.titleJson).cn
|
||||
: JSON.parse(item.titleJson).en,
|
||||
kpiCode: kpiCode,
|
||||
};
|
||||
}),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出显示
|
||||
* @param row 记录信息
|
||||
* 对话框弹出显示为 新增或者修改
|
||||
* @param noticeId 网元id, 不传为新增
|
||||
*/
|
||||
function fnModalVisible(row: Record<string, any>) {
|
||||
// 进制转数据
|
||||
const hexString = parseBase64Data(row.rawMsg);
|
||||
const rawData = convertToReadableFormat(hexString);
|
||||
modalState.from.rawData = rawData;
|
||||
// RAW解析HTML
|
||||
getTraceRawInfo(row.id).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
const htmlString = rawDataHTMLScript(res.msg);
|
||||
modalState.from.rawDataHTML = htmlString;
|
||||
modalState.from.downBtn = true;
|
||||
function fnModalVisibleByEdit(id?: string) {
|
||||
if (!id) {
|
||||
modalStateFrom.resetFields();
|
||||
modalState.title = t('views.perfManage.customTarget.addCustom');
|
||||
modalState.visibleByEdit = true;
|
||||
} else {
|
||||
modalState.from.rawDataHTML = t('views.traceManage.analysis.noData');
|
||||
if (modalState.confirmLoading) return;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
modalState.confirmLoading = true;
|
||||
getCustom(id).then(res => {
|
||||
modalState.confirmLoading = false;
|
||||
hide();
|
||||
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||
fnSelectPerformanceInit(res.data.neType);
|
||||
modalState.selectedPre = res.data.kpiSet
|
||||
? res.data.kpiSet.split(',')
|
||||
: [];
|
||||
modalState.from = Object.assign(modalState.from, res.data);
|
||||
modalState.title = t('views.perfManage.customTarget.editCustom');
|
||||
modalState.visibleByEdit = true;
|
||||
} else {
|
||||
message.error(t('views.perfManage.customTarget.errorCustomInfo'), 3);
|
||||
}
|
||||
});
|
||||
modalState.title = t('views.traceManage.analysis.taskTitle', {
|
||||
num: row.imsi,
|
||||
});
|
||||
modalState.visible = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭
|
||||
* 对话框弹出确认执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalVisibleClose() {
|
||||
modalState.visible = false;
|
||||
modalState.from.downBtn = false;
|
||||
modalState.from.rawDataHTML = '';
|
||||
modalState.from.rawData = '';
|
||||
}
|
||||
|
||||
// 将Base64编码解码为字节数组
|
||||
function parseBase64Data(hexData: string) {
|
||||
// 将Base64编码解码为字节数组
|
||||
const byteString = atob(hexData);
|
||||
const byteArray = new Uint8Array(byteString.length);
|
||||
for (let i = 0; i < byteString.length; i++) {
|
||||
byteArray[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
|
||||
// 将每一个字节转换为2位16进制数表示，并拼接起来
|
||||
let hexString = '';
|
||||
for (let i = 0; i < byteArray.length; i++) {
|
||||
const hex = byteArray[i].toString(16);
|
||||
hexString += hex.length === 1 ? '0' + hex : hex;
|
||||
}
|
||||
return hexString;
|
||||
}
|
||||
|
||||
// 转换十六进制字节流为可读格式和ASCII码表示
|
||||
function convertToReadableFormat(hexString: string) {
|
||||
let result = '';
|
||||
let asciiResult = '';
|
||||
let arr = [];
|
||||
let row = 100;
|
||||
for (let i = 0; i < hexString.length; i += 2) {
|
||||
const hexChars = hexString.substring(i, i + 2);
|
||||
const decimal = parseInt(hexChars, 16);
|
||||
const asciiChar =
|
||||
decimal >= 32 && decimal <= 126 ? String.fromCharCode(decimal) : '.';
|
||||
|
||||
result += hexChars + ' ';
|
||||
asciiResult += asciiChar;
|
||||
|
||||
if ((i + 2) % 32 === 0) {
|
||||
arr.push({
|
||||
row: row,
|
||||
code: result,
|
||||
asciiText: asciiResult,
|
||||
function fnModalOk() {
|
||||
modalStateFrom
|
||||
.validate()
|
||||
.then(e => {
|
||||
// if (modalState.selectedPre.length === 0) {
|
||||
// message.error({
|
||||
// content: `${res.msg}`,
|
||||
// duration: 3,
|
||||
// });
|
||||
// }
|
||||
modalState.from.kpiSet = modalState.selectedPre.join(',');
|
||||
const from = toRaw(modalState.from);
|
||||
//return false;
|
||||
modalState.confirmLoading = true;
|
||||
const perfTask = from.id ? updateCustom(from) : addCustom(from);
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
perfTask
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('common.msgSuccess', { msg: modalState.title }),
|
||||
duration: 3,
|
||||
});
|
||||
result = '';
|
||||
asciiResult = '';
|
||||
row += 10;
|
||||
}
|
||||
if (2 + i == hexString.length) {
|
||||
arr.push({
|
||||
row: row,
|
||||
code: result,
|
||||
asciiText: asciiResult,
|
||||
});
|
||||
result = '';
|
||||
asciiResult = '';
|
||||
row += 10;
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
// 信息详情HTMl内容处理
|
||||
function rawDataHTMLScript(htmlString: string) {
|
||||
// 删除所有 <a> 标签
|
||||
// const withoutATags = htmlString.replace(/<a\b[^>]*>(.*?)<\/a>/gi, '');
|
||||
// 删除所有 <script> 标签
|
||||
let withoutScriptTags = htmlString.replace(
|
||||
/<script\b[^>]*>([\s\S]*?)<\/script>/gi,
|
||||
''
|
||||
);
|
||||
// 默认全展开
|
||||
// const withoutHiddenElements = withoutScriptTags.replace(
|
||||
// /style="display:none"/gi,
|
||||
// 'style="background:#ffffff"'
|
||||
// );
|
||||
|
||||
function set_node(node: any, str: string) {
|
||||
if (!node) return;
|
||||
node.style.display = str;
|
||||
node.style.background = '#ffffff';
|
||||
}
|
||||
Reflect.set(window, 'set_node', set_node);
|
||||
function toggle_node(node: any) {
|
||||
node = document.getElementById(node);
|
||||
if (!node) return;
|
||||
set_node(node, node.style.display != 'none' ? 'none' : 'block');
|
||||
}
|
||||
Reflect.set(window, 'toggle_node', toggle_node);
|
||||
function hide_node(node: any) {
|
||||
node = document.getElementById(node);
|
||||
if (!node) return;
|
||||
set_node(node, 'none');
|
||||
}
|
||||
Reflect.set(window, 'hide_node', hide_node);
|
||||
|
||||
// 展开第一个
|
||||
withoutScriptTags = withoutScriptTags.replace(
|
||||
'id="f1c" style="display:none"',
|
||||
'id="f1c" style="display:block"'
|
||||
);
|
||||
return withoutScriptTags;
|
||||
}
|
||||
|
||||
/**信息文件下载 */
|
||||
function fnDownloadFile() {
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('views.traceManage.analysis.taskDownTip'),
|
||||
onOk() {
|
||||
const blob = new Blob([modalState.from.rawDataHTML], {
|
||||
type: 'text/plain',
|
||||
});
|
||||
saveAs(blob, `${modalState.title}_${Date.now()}.html`);
|
||||
},
|
||||
modalStateFrom.resetFields();
|
||||
fnModalCancel();
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
modalState.confirmLoading = false;
|
||||
fnGetList();
|
||||
});
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalCancel() {
|
||||
modalState.visibleByEdit = false;
|
||||
modalState.confirmLoading = false;
|
||||
modalStateFrom.resetFields();
|
||||
modalState.neType = [];
|
||||
modalState.neTypPerformance = [];
|
||||
modalState.selectedPre = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择性能指标,填充进当前计算公式的值
|
||||
*/
|
||||
function fnSelectPer(s: any, option: any) {
|
||||
modalState.from.expression += s;
|
||||
}
|
||||
|
||||
/**
|
||||
* 多选框取消性能指标 表达式的变化
|
||||
*/
|
||||
function fnDelPer(s: any, option: any) {
|
||||
modalState.from.expression = modalState.from.expression.replace(s, '');
|
||||
}
|
||||
|
||||
// function checkText(e:any){
|
||||
// console.log(e);
|
||||
// const reg = /^[*+-/]*$/;
|
||||
|
||||
// }
|
||||
|
||||
onMounted(() => {
|
||||
// 初始字典数据
|
||||
Promise.allSettled([getDict('active_alarm_severity')]).then(resArr => {
|
||||
if (resArr[0].status === 'fulfilled') {
|
||||
dict.activeAlarmSeverity = resArr[0].value;
|
||||
}
|
||||
});
|
||||
|
||||
Promise.allSettled([
|
||||
// 获取网元网元列表
|
||||
useNeInfoStore().fnNelist(),
|
||||
// 获取性能测量集列表
|
||||
useNeInfoStore().fnNeTaskPerformance(),
|
||||
]).finally(() => {
|
||||
// 获取列表数据
|
||||
fnGetList();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -354,26 +478,15 @@ onMounted(() => {
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="6" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.traceManage.analysis.imsi')"
|
||||
name="imsi"
|
||||
:label="t('views.traceManage.task.neType')"
|
||||
name="neType "
|
||||
>
|
||||
<a-input
|
||||
v-model:value="queryParams.imsi"
|
||||
:allow-clear="true"
|
||||
:placeholder="t('views.traceManage.analysis.imsiPlease')"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.traceManage.analysis.msisdn')"
|
||||
name="imsi"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="queryParams.msisdn"
|
||||
:allow-clear="true"
|
||||
:placeholder="t('views.traceManage.analysis.msisdnPlease')"
|
||||
></a-input>
|
||||
<a-auto-complete
|
||||
v-model:value="queryParams.neType"
|
||||
:options="useNeInfoStore().getNeSelectOtions"
|
||||
allow-clear
|
||||
:placeholder="t('views.traceManage.task.neTypePlease')"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :xs="24">
|
||||
@@ -396,12 +509,17 @@ onMounted(() => {
|
||||
|
||||
<a-card :bordered="false" :body-style="{ padding: '0px' }">
|
||||
<!-- 插槽-卡片左侧侧 -->
|
||||
<template #title> </template>
|
||||
<template #title>
|
||||
<a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('common.addText') }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip>
|
||||
<a-tooltip placement="topRight">
|
||||
<template #title>{{ t('common.searchBarText') }}</template>
|
||||
<a-switch
|
||||
v-model:checked="tableState.seached"
|
||||
@@ -410,15 +528,15 @@ onMounted(() => {
|
||||
size="small"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<a-tooltip placement="topRight">
|
||||
<template #title>{{ t('common.reloadText') }}</template>
|
||||
<a-button type="text" @click.prevent="fnGetList()">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<a-tooltip placement="topRight">
|
||||
<template #title>{{ t('common.sizeText') }}</template>
|
||||
<a-dropdown trigger="click">
|
||||
<a-dropdown trigger="click" placement="bottomRight">
|
||||
<a-button type="text">
|
||||
<template #icon><ColumnHeightOutlined /></template>
|
||||
</a-button>
|
||||
@@ -458,9 +576,18 @@ onMounted(() => {
|
||||
<template v-if="column.key === 'id'">
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip>
|
||||
<template #title>查看详情</template>
|
||||
<a-button type="link" @click.prevent="fnModalVisible(record)">
|
||||
<template #icon><ProfileOutlined /></template>
|
||||
<template #title>{{ t('common.editText') }}</template>
|
||||
<a-button
|
||||
type="link"
|
||||
@click.prevent="fnModalVisibleByEdit(record.id)"
|
||||
>
|
||||
<template #icon><FormOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.deleteText') }}</template>
|
||||
<a-button type="link" @click.prevent="fnRecordDelete(record)">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
@@ -469,42 +596,130 @@ onMounted(() => {
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 详情框 -->
|
||||
<!-- 新增框或修改框 -->
|
||||
<a-modal
|
||||
width="800px"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:visible="modalState.visibleByEdit"
|
||||
:title="modalState.title"
|
||||
:visible="modalState.visible"
|
||||
@cancel="fnModalVisibleClose"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOk"
|
||||
@cancel="fnModalCancel"
|
||||
>
|
||||
<div class="raw-title">
|
||||
{{ t('views.traceManage.analysis.signalData') }}
|
||||
</div>
|
||||
<a-row
|
||||
class="raw"
|
||||
:gutter="16"
|
||||
v-for="v in modalState.from.rawData"
|
||||
:key="v.row"
|
||||
<a-form name="modalStateFrom" layout="horizontal">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.traceManage.task.neType')"
|
||||
name="neType"
|
||||
v-bind="modalStateFrom.validateInfos.neType"
|
||||
>
|
||||
<a-col class="num" :span="2">{{ v.row }}</a-col>
|
||||
<a-col class="code" :span="12">{{ v.code }}</a-col>
|
||||
<a-col class="txt" :span="10">{{ v.asciiText }}</a-col>
|
||||
<a-select
|
||||
v-model:value="modalState.from.neType"
|
||||
:options="useNeInfoStore().getNeSelectOtions"
|
||||
@change="fnSelectPerformanceInit"
|
||||
:allow-clear="false"
|
||||
:placeholder="t('views.traceManage.task.neTypePlease')"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.perfManage.customTarget.objectType')"
|
||||
name="kpiSobjectTypeet"
|
||||
v-show="modalState.from.neType"
|
||||
v-bind="modalStateFrom.validateInfos.objectType"
|
||||
>
|
||||
<a-select
|
||||
placeholder="Please select"
|
||||
v-model:value="modalState.from.objectType"
|
||||
:options="modalState.objectTypeArr"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider />
|
||||
<div class="raw-title">
|
||||
{{ t('views.traceManage.analysis.signalDetail') }}
|
||||
<a-button
|
||||
type="dashed"
|
||||
size="small"
|
||||
@click.prevent="fnDownloadFile"
|
||||
v-if="modalState.from.downBtn"
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.perfManage.customTarget.kpiId')"
|
||||
name="kpiId"
|
||||
v-bind="modalStateFrom.validateInfos.kpiId"
|
||||
>
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
{{ t('views.traceManage.analysis.taskDownText') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
|
||||
<a-input v-model:value="modalState.from.kpiId" allow-clear>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.perfManage.customTarget.period')"
|
||||
name="period"
|
||||
v-bind="modalStateFrom.validateInfos.period"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="modalState.from.period"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
:options="[
|
||||
{ label: '5S', value: 5 },
|
||||
{ label: '1M', value: 60 },
|
||||
{ label: '5M', value: 300 },
|
||||
{ label: '15M', value: 900 },
|
||||
{ label: '30M', value: 1800 },
|
||||
{ label: '60M', value: 3600 },
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item
|
||||
:label="t('views.perfManage.customTarget.title')"
|
||||
name="title"
|
||||
v-bind="modalStateFrom.validateInfos.title"
|
||||
>
|
||||
<a-input v-model:value="modalState.from.title" allow-clear> </a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:label="t('views.perfManage.customTarget.expression')"
|
||||
name="expression"
|
||||
v-bind="modalStateFrom.validateInfos.expression"
|
||||
>
|
||||
<a-input v-model:value="modalState.from.expression" allow-clear >
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="21" :md="21" :xs="24">
|
||||
<a-form-item name="perSelect">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
style="margin-left: 80px"
|
||||
placeholder="Please select"
|
||||
allow-clear
|
||||
v-model:value="modalState.selectedPre"
|
||||
:options="modalState.neTypPerformance"
|
||||
@select="fnSelectPer"
|
||||
@deselect="fnDelPer"
|
||||
></a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item
|
||||
:label="t('views.perfManage.customTarget.description')"
|
||||
name="description"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="modalState.from.description"
|
||||
:auto-size="{ minRows: 2, maxRows: 6 }"
|
||||
:maxlength="250"
|
||||
:show-count="true"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</PageContainer>
|
||||
</template>
|
||||
@@ -513,26 +728,4 @@ onMounted(() => {
|
||||
.table :deep(.ant-pagination) {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.raw {
|
||||
&-title {
|
||||
color: #000000d9;
|
||||
font-size: 24px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.num {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
.code {
|
||||
background-color: #e7e6ff;
|
||||
}
|
||||
.txt {
|
||||
background-color: #ffe3e5;
|
||||
}
|
||||
|
||||
&-html {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user