diff --git a/src/api/perfManage/goldTarget.ts b/src/api/perfManage/goldTarget.ts index ef95c9fd..ada352a0 100644 --- a/src/api/perfManage/goldTarget.ts +++ b/src/api/perfManage/goldTarget.ts @@ -1,5 +1,6 @@ import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { request } from '@/plugins/http-fetch'; +import { parseDateToStr } from '@/utils/date-utils'; import { parseObjLineToHump } from '@/utils/parse-utils'; /** @@ -91,8 +92,8 @@ export async function goldData(query: Record) { startTime: query.beginTime, endTime: query.endTime, interval: query.particle, - sortField:query.sortField, - sortOrder:query.sortOrder + sortField: query.sortField, + sortOrder: query.sortOrder, }, timeout: 60_000, }); @@ -116,13 +117,12 @@ export async function getGoldTitleByNE(neType: string) { return result; } - /** * 查询UPF上下行速率数据 * @param query 查询参数 * @returns object */ -export async function listUPFData(timeArr:any) { +export async function listUPFData(timeArr: any) { return await Promise.allSettled([ // 获取参数规则 request({ @@ -130,6 +130,13 @@ export async function listUPFData(timeArr:any) { 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]}' `, + // SQL: `SELECT gold_kpi.kpi_id, sum(gold_kpi.value) as index, 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]}' + // GROUP BY gold_kpi.kpi_id, kpi_title.en_title`, }, timeout: 60_000, }), @@ -148,14 +155,14 @@ export async function listUPFData(timeArr:any) { // 规则数据 if (resArr[0].status === 'fulfilled') { - const itemV:any = resArr[0].value; + 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']; + let data = itemData[0]['gold_kpi']; if (Array.isArray(data)) { try { upData = data.map(v => parseObjLineToHump(v)); @@ -176,7 +183,7 @@ export async function listUPFData(timeArr:any) { let itemData = itemV.data.data; const data = itemData[0]['gold_kpi']; if (Array.isArray(data)) { - try { + try { downData = data.map(v => parseObjLineToHump(v)); } catch (error) { console.error(error); @@ -184,6 +191,37 @@ export async function listUPFData(timeArr:any) { } } } - return {upData,downData}; + return { upData, downData }; }); -} \ No newline at end of file +} + +/** + * 首页查询UPF上下行字节数 + * @param query 查询参数 + * @returns object + */ +export async function listUPFIndex() { + const initTime: Date = new Date(); + const twentyFourHoursAgo: Date = new Date( + initTime.getTime() - 24 * 60 * 60 * 1000 + ); + parseDateToStr; + // 发起请求 + const result = await request({ + url: `/api/rest/databaseManagement/v1/select/omc_db/gold_kpi`, + method: 'get', + params: { + SQL: `SELECT gold_kpi.kpi_id, sum(gold_kpi.value) as Total FROM gold_kpi WHERE 1=1 AND gold_kpi.kpi_id in('UPF.06','UPF.03') AND timestamp BETWEEN '${parseDateToStr( + twentyFourHoursAgo + )}' AND '${parseDateToStr(initTime)}' GROUP BY gold_kpi.kpi_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['gold_kpi']), + }); + } + return result; +} diff --git a/src/utils/parse-utils.ts b/src/utils/parse-utils.ts index 05415cc9..83271e86 100644 --- a/src/utils/parse-utils.ts +++ b/src/utils/parse-utils.ts @@ -148,3 +148,15 @@ export function parseSizeFromKbs(sizeByte: number, timeInterval: number): any { return [(realBit / 1000 / 1000).toFixed(2), ' Mbits/sec']; } + +/** + * 字节数转换单位 + * @param sizeByte 数值大小 + * @returns + */ +export function formatBytes(bytes: number): string { + const units = ['B', 'KB', 'MB', 'GB', 'TB']; + const unitIndex = Math.floor(Math.log2(bytes) / 10); + const result =(bytes / Math.pow(1024, unitIndex)).toFixed(2) + ' ' + units[unitIndex]; + return result; +} diff --git a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue index 8da422e8..b64067d5 100644 --- a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue +++ b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue @@ -15,13 +15,8 @@ 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(); + +const { t } = useI18n(); echarts.use([ GridComponent, BarChart, @@ -106,11 +101,11 @@ function initPicture() { // 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].name = t('views.index.' + realData[i].name); realData[i].itemStyle = { - color: colorList[i] - }; -} + color: colorList[i], + }; + } const optionData: any = { tooltip: { trigger: 'item', @@ -132,30 +127,6 @@ function initPicture() { 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: { formatter: '{c|{c}}\n{b|{b}}', distance: 80, @@ -222,4 +193,3 @@ onMounted(() => { height: 100%; } - diff --git a/src/views/dashboard/overview/components/UPFFlow/index.vue b/src/views/dashboard/overview/components/UPFFlow/index.vue index 907be6af..dd433d7a 100644 --- a/src/views/dashboard/overview/components/UPFFlow/index.vue +++ b/src/views/dashboard/overview/components/UPFFlow/index.vue @@ -102,7 +102,7 @@ function initPicture() { }); var charts = { - unit: '(Kbps)', + unit: '(Mbps)', names: [ t('views.dashboard.overview.UPFFlow.up'), t('views.dashboard.overview.UPFFlow.down'), @@ -152,7 +152,6 @@ function initPicture() { symbolSize: 5, formatter: '{b}', data: charts.value[i], - yAxisIndex: i, }; lineY.push(data); } @@ -213,6 +212,9 @@ function initPicture() { { name: charts.unit, type: 'value', + // splitNumber: 4, + min:0, + max:300, axisLabel: { formatter: '{value}', }, @@ -227,23 +229,7 @@ function initPicture() { }, }, }, - { - 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, }; diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index d824afb1..3b18767f 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -9,15 +9,15 @@ 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 { listUPFIndex } from '@/api/perfManage/goldTarget'; +import { listBase5G } from '@/api/neUser/base5G'; +import { formatBytes } from '@/utils/parse-utils'; 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(0); - /**用户在线信息 */ let onlineInfo: { /**签约用户数量 */ @@ -35,6 +35,17 @@ let onlineInfo: { activeAlarmSeverity: [], }); +/**用户在线信息 */ +let upfFlowInfo: { + /**上行字节数 */ + up: number; + /**下行字节数 */ + down: any; +} = reactive({ + up: 0, + down: 0, +}); + /**总览节点 */ const viewportDom = ref(null); const { isFullscreen, toggle } = useFullscreen(viewportDom); @@ -48,16 +59,28 @@ onMounted(() => { pageNum: '1', pageSize: '20', }), - // listUENum('001'), + listUPFIndex(), + listUENum('001'), ]).then(resArr => { - console.log(resArr) if (resArr[0].status === 'fulfilled') { - onlineInfo.subNum=resArr[0].value.total; + onlineInfo.subNum = resArr[0].value.total; + } + if (resArr[1].status === 'fulfilled') { + resArr[1].value['data'].map((item: any) => { + switch (item.kpiId) { + case 'UPF.03': + upfFlowInfo.up = item.Total; + break; + case 'UPF.06': + upfFlowInfo.down = item.Total; + } + }); + } + + if (resArr[2].status === 'fulfilled') { + console.log(resArr) + } - // if (resArr[1].status === 'fulfilled') { - // console.log(resArr[1].value) - // onlineInfo.ueNum=resArr[1].value.data?.ueNum; - // } }); }); @@ -78,7 +101,7 @@ onMounted(() => {
-

{{onlineInfo.subNum}}

+

{{ onlineInfo.subNum }}

签约用户 @@ -157,20 +180,20 @@ onMounted(() => {
24小时 - 7天 - 30天 +
-

20,301 TB

+

{{formatBytes(upfFlowInfo.up)}}

上行
-

99834 TB

+

{{formatBytes(upfFlowInfo.down)}}

下行