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

fix: 看板布局调整/多语言补充

Browse Source
This commit is contained in:
TsMask
2024-02-02 15:18:03 +08:00
parent e6ea8641ed
commit bf0d7267f0
8 changed files with 72 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -517,7 +517,7 @@ export default {
title: "Resource Summary", title: "Resource Summary",
sysMem: "SYS Mem", sysMem: "SYS Mem",
sysCpu: "SYS CPU", sysCpu: "SYS CPU",
sysDisk: "SYS Disk", sysDisk: "SYS Store",
neCpu: "NE CPU", neCpu: "NE CPU",
}, },
topology: { topology: {
@@ -533,6 +533,7 @@ export default {
called: "Called", called: "Called",
result: "Result", result: "Result",
time: "Time", time: "Time",
resultOK: "OK",
}, },
}, },
}, },

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

@@ -517,7 +517,7 @@ export default {
title: "资源情况", title: "资源情况",
sysMem: "系统内存", sysMem: "系统内存",
sysCpu: "系统CPU", sysCpu: "系统CPU",
sysDisk: "系统磁盘", sysDisk: "系统存储",
neCpu: "网元CPU", neCpu: "网元CPU",
}, },
topology: { topology: {
@@ -533,6 +533,7 @@ export default {
called: "被叫", called: "被叫",
result: "结果", result: "结果",
time: "时间", time: "时间",
resultOK: "成功",
}, },
} }
}, },

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

@@ -120,33 +120,35 @@ function initPicture() {
title: [ title: [
{ {
text: '', text: '',
show: false,
}, },
{ {
text: t('views.dashboard.overview.alarmTypeBar.topTitle'), text: t('views.dashboard.overview.alarmTypeBar.topTitle'),
textStyle: { textStyle: {
color: '#63C0FA', color: '#fff',
fontSize: '14', fontSize: '14',
fontFamily: 'PingFang', fontFamily: 'PingFang',
fontWeight: '400', fontWeight: '400',
}, },
top: '50%', top: '50%',
left: '6%', left: '0%',
}, },
], ],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{b}',
}, },
grid: [ grid: [
{ {
top: '55%', top: '60%',
left: '15%', left: '15%',
right: '25%', right: '25%',
bottom: '3%', bottom: '10%',
}, },
], ],
legend: { legend: {
orient: 'vertical', orient: 'vertical',
left: '72%', right: '2%',
top: '10%', top: '10%',
data: pieArr.map((item: any) => item.name), //label数组 data: pieArr.map((item: any) => item.name), //label数组
textStyle: { textStyle: {
@@ -154,7 +156,7 @@ function initPicture() {
}, },
}, },
// 饼图设置 // 饼图设置
color: ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'], // color: ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'],
// color: ['#FFAE57', '#FFA500', '#FFAE57', '#1E90FF', '#1E90FF'], //红橙黄蓝绿 为告警级别配色 以严重性依次往下！ // color: ['#FFAE57', '#FFA500', '#FFAE57', '#1E90FF', '#1E90FF'], //红橙黄蓝绿 为告警级别配色 以严重性依次往下！
series: [ series: [
@@ -168,7 +170,7 @@ function initPicture() {
labelLine: { labelLine: {
show: false, show: false,
}, },
center: ['45%', '25%'], center: ['35%', '25%'],
data: pieArr.sort((a: any, b: any) => { data: pieArr.sort((a: any, b: any) => {
return a.value - b.value; return a.value - b.value;
}), }),
@@ -207,23 +209,11 @@ function initPicture() {
}, // 柱子上方的数值 }, // 柱子上方的数值
itemStyle: { itemStyle: {
borderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下） borderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
1, { offset: 0, color: '#f0f5ff' },
0, { offset: 0.5, color: '#adc6ff' },
0, { offset: 1, color: '#2f54eb' },
0, ]), // 渐变
[
{
offset: 0,
color: '#51C5FD',
},
{
offset: 1,
color: '#005BB1',
},
],
false
), // 渐变
}, },
data: firstThreeItems.map((item: any) => item.value), data: firstThreeItems.map((item: any) => item.value),
}, },

22
src/views/dashboard/overview/components/NeResources/index.vue
View File

@@ -29,7 +29,11 @@ const neResourcesChart = ref<any>(null);
// 类别 // 类别
const category = ref<any>([ const category = ref<any>([
{ {
name: t('views.dashboard.overview.resources.neCpu'), name: t('views.dashboard.overview.resources.sysDisk'),
value: 1,
},
{
name: t('views.dashboard.overview.resources.sysMem'),
value: 1, value: 1,
}, },
{ {
@@ -37,11 +41,7 @@ const category = ref<any>([
value: 1, value: 1,
}, },
{ {
name: t('views.dashboard.overview.resources.sysDisk'), name: t('views.dashboard.overview.resources.neCpu'),
value: 1,
},
{
name: t('views.dashboard.overview.resources.sysMem'),
value: 1, value: 1,
}, },
]); ]);
@@ -245,7 +245,7 @@ function fnChangeData(data: any[], itemID: string) {
// console.log(info.id); // console.log(info.id);
// console.log(info.neState.cpu.nfCpuUsage); // console.log(info.neState.cpu.nfCpuUsage);
// console.log(info.neState.cpu.sysCpuUsage); // console.log(info.neState.cpu.sysCpuUsage);
// console.log(info.neState.mem.sysMemUsage); // console.log(info.neState.mem);
// console.log(info.neState.disk); // console.log(info.neState.disk);
let sysCpuUsage = 0; let sysCpuUsage = 0;
let nfCpuUsage = 0; let nfCpuUsage = 0;
@@ -290,10 +290,10 @@ function fnChangeData(data: any[], itemID: string) {
} }
} }
category.value[0].value = nfCpuUsage; category.value[0].value = sysDiskUsage;
category.value[1].value = sysCpuUsage; category.value[1].value = sysMemUsage;
category.value[2].value = sysDiskUsage; category.value[2].value = sysCpuUsage;
category.value[3].value = sysMemUsage; category.value[3].value = nfCpuUsage;
neResourcesChart.value.setOption({ neResourcesChart.value.setOption({
series: [ series: [
{ {

2
src/views/dashboard/overview/components/Topology/index.vue
View File

@@ -21,7 +21,7 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
/**图节点展示 */ /**图节点展示 */
const graphNodeTooltip = new Tooltip({ const graphNodeTooltip = new Tooltip({
offsetX: 10, offsetX: 20,
offsetY: 20, offsetY: 20,
getContent(evt) { getContent(evt) {
if (!evt) return t('views.monitor.topologyBuild.graphNotInfo'); if (!evt) return t('views.monitor.topologyBuild.graphNotInfo');

21
src/views/dashboard/overview/components/UserActivity/index.vue
View File

@@ -15,13 +15,16 @@ let dict: {
cdrCallType: DictType[]; cdrCallType: DictType[];
/**UE 事件认证代码类型 */ /**UE 事件认证代码类型 */
ueAauthCode: DictType[]; ueAauthCode: DictType[];
/**UE 事件认证代码类型 */ /**UE 事件类型 */
ueEventType: DictType[]; ueEventType: DictType[];
/**UE 事件CM状态 */
ueEventCmState: DictType[];
} = reactive({ } = reactive({
cdrSipCode: [], cdrSipCode: [],
cdrCallType: [], cdrCallType: [],
ueAauthCode: [], ueAauthCode: [],
ueEventType: [], ueEventType: [],
ueEventCmState: [],
}); });
onMounted(() => { onMounted(() => {
@@ -31,6 +34,7 @@ onMounted(() => {
getDict('cdr_call_type'), getDict('cdr_call_type'),
getDict('ue_auth_code'), getDict('ue_auth_code'),
getDict('ue_event_type'), getDict('ue_event_type'),
getDict('ue_event_cm_state'),
]).then(resArr => { ]).then(resArr => {
if (resArr[0].status === 'fulfilled') { if (resArr[0].status === 'fulfilled') {
dict.cdrSipCode = resArr[0].value; dict.cdrSipCode = resArr[0].value;
@@ -44,6 +48,9 @@ onMounted(() => {
if (resArr[3].status === 'fulfilled') { if (resArr[3].status === 'fulfilled') {
dict.ueEventType = resArr[3].value; dict.ueEventType = resArr[3].value;
} }
if (resArr[4].status === 'fulfilled') {
dict.ueEventCmState = resArr[4].value;
}
}); });
}); });
</script> </script>
@@ -84,9 +91,9 @@ onMounted(() => {
</div> </div>
<div> <div>
{{ t('views.dashboard.overview.userActivity.called') }}: {{ t('views.dashboard.overview.userActivity.called') }}:
<span :title="item.data.calledParty">{{ <span :title="item.data.calledParty">
item.data.calledParty {{ item.data.calledParty }}
}}</span> </span>
</div> </div>
<div> <div>
{{ t('views.dashboard.overview.userActivity.duration') }}: {{ t('views.dashboard.overview.userActivity.duration') }}:
@@ -152,11 +159,13 @@ onMounted(() => {
</div> </div>
<div v-if="item.type === 'detach'"> <div v-if="item.type === 'detach'">
{{ t('views.dashboard.overview.userActivity.result') }}: {{ t('views.dashboard.overview.userActivity.result') }}:
<span>{{ item.data.detachResult }}</span> <span>{{ t('views.dashboard.overview.userActivity.resultOK') }}</span>
</div> </div>
<div class="card-ue-w33" v-if="item.type === 'cm-state'"> <div class="card-ue-w33" v-if="item.type === 'cm-state'">
{{ t('views.dashboard.overview.userActivity.result') }}: {{ t('views.dashboard.overview.userActivity.result') }}:
<span>{{ item.data.status }}</span> <span>
<DictTag :options="dict.ueEventCmState" :value="item.data.status" />
</span>
</div> </div>
</div> </div>
</template> </template>

10
src/views/dashboard/overview/css/index.css
View File

@@ -209,7 +209,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
height: 72%; height: 60%;
} }
.upfFlowTotal .inner .chart .data .item { .upfFlowTotal .inner .chart .data .item {
display: flex; display: flex;
@@ -228,8 +228,8 @@
/* 资源情况 */ /* 资源情况 */
.resources { .resources {
min-height: 13.6rem; min-height: 18rem rem;
height: 25.5%; height: 33.5%;
} }
.resources .inner .chart { .resources .inner .chart {
width: 100%; width: 100%;
@@ -239,8 +239,8 @@
/* 告警统计 */ /* 告警统计 */
.alarmType { .alarmType {
min-height: 22rem; min-height: 25rem;
height: 54.5%; height: 46.5%;
} }
.alarmType .inner .chart { .alarmType .inner .chart {
width: 100%; width: 100%;

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

@@ -83,7 +83,7 @@ function fnGetState() {
}); });
} }
stateTimeout.value = setTimeout(() => fnGetState(), 10_000); stateTimeout.value = setTimeout(() => fnGetState(), 10_000);
} }
/**初始数据函数 */ /**初始数据函数 */
@@ -97,13 +97,13 @@ function InitData() {
stateInterval.value = setInterval(() => { stateInterval.value = setInterval(() => {
upfTFActive.value = upfTFActive.value >= 2 ? 0 : upfTFActive.value + 1; upfTFActive.value = upfTFActive.value >= 2 ? 0 : upfTFActive.value + 1;
// if (upfTFActive.value === 0) { if (upfTFActive.value === 0) {
// upfTFSend(7); upfTFSend(7);
// } else if (upfTFActive.value === 1) { } else if (upfTFActive.value === 1) {
// upfTFSend(30); upfTFSend(30);
// } else if (upfTFActive.value === 2) { } else if (upfTFActive.value === 2) {
// upfTFSend(0); upfTFSend(0);
// } }
}, 10_000); }, 10_000);
} }
@@ -161,8 +161,8 @@ onMounted(() => {
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
// clearTimeout(stateTimeout.value); clearTimeout(stateTimeout.value);
//clearTimeout(stateInterval.value); clearTimeout(stateInterval.value);
}); });
</script> </script>
@@ -344,7 +344,18 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
</div> </div>
<!-- 告警统计 -->
<div class="alarmType panel">
<div class="inner">
<h3>
<PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
</h3>
<div class="chart">
<AlarnTypeBar />
</div>
</div>
</div>
<!-- 资源情况 --> <!-- 资源情况 -->
<div class="resources panel"> <div class="resources panel">
<div class="inner"> <div class="inner">
@@ -358,19 +369,6 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
</div> </div>
<!-- 告警统计 -->
<div class="alarmType panel">
<div class="inner">
<h3>
<PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
</h3>
<div class="chart">
<AlarnTypeBar />
</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>