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",
sysMem: "SYS Mem",
sysCpu: "SYS CPU",
sysDisk: "SYS Disk",
sysDisk: "SYS Store",
neCpu: "NE CPU",
},
topology: {
@@ -533,6 +533,7 @@ export default {
called: "Called",
result: "Result",
time: "Time",
resultOK: "OK",
},
},
},

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

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

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

@@ -120,33 +120,35 @@ function initPicture() {
title: [
{
text: '',
show: false,
},
{
text: t('views.dashboard.overview.alarmTypeBar.topTitle'),
textStyle: {
color: '#63C0FA',
color: '#fff',
fontSize: '14',
fontFamily: 'PingFang',
fontWeight: '400',
},
top: '50%',
left: '6%',
left: '0%',
},
],
tooltip: {
trigger: 'item',
formatter: '{b}',
},
grid: [
{
top: '55%',
top: '60%',
left: '15%',
right: '25%',
bottom: '3%',
bottom: '10%',
},
],
legend: {
orient: 'vertical',
left: '72%',
right: '2%',
top: '10%',
data: pieArr.map((item: any) => item.name), //label数组
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'], //红橙黄蓝绿 为告警级别配色 以严重性依次往下！
series: [
@@ -168,7 +170,7 @@ function initPicture() {
labelLine: {
show: false,
},
center: ['45%', '25%'],
center: ['35%', '25%'],
data: pieArr.sort((a: any, b: any) => {
return a.value - b.value;
}),
@@ -207,23 +209,11 @@ function initPicture() {
}, // 柱子上方的数值
itemStyle: {
borderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
color: new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0,
color: '#51C5FD',
},
{
offset: 1,
color: '#005BB1',
},
],
false
), // 渐变
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#f0f5ff' },
{ offset: 0.5, color: '#adc6ff' },
{ offset: 1, color: '#2f54eb' },
]), // 渐变
},
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>([
{
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,
},
{
@@ -37,11 +41,7 @@ const category = ref<any>([
value: 1,
},
{
name: t('views.dashboard.overview.resources.sysDisk'),
value: 1,
},
{
name: t('views.dashboard.overview.resources.sysMem'),
name: t('views.dashboard.overview.resources.neCpu'),
value: 1,
},
]);
@@ -245,7 +245,7 @@ function fnChangeData(data: any[], itemID: string) {
// console.log(info.id);
// console.log(info.neState.cpu.nfCpuUsage);
// console.log(info.neState.cpu.sysCpuUsage);
// console.log(info.neState.mem.sysMemUsage);
// console.log(info.neState.mem);
// console.log(info.neState.disk);
let sysCpuUsage = 0;
let nfCpuUsage = 0;
@@ -290,10 +290,10 @@ function fnChangeData(data: any[], itemID: string) {
}
}
category.value[0].value = nfCpuUsage;
category.value[1].value = sysCpuUsage;
category.value[2].value = sysDiskUsage;
category.value[3].value = sysMemUsage;
category.value[0].value = sysDiskUsage;
category.value[1].value = sysMemUsage;
category.value[2].value = sysCpuUsage;
category.value[3].value = nfCpuUsage;
neResourcesChart.value.setOption({
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({
offsetX: 10,
offsetX: 20,
offsetY: 20,
getContent(evt) {
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[];
/**UE 事件认证代码类型 */
ueAauthCode: DictType[];
/**UE 事件认证代码类型 */
/**UE 事件类型 */
ueEventType: DictType[];
/**UE 事件CM状态 */
ueEventCmState: DictType[];
} = reactive({
cdrSipCode: [],
cdrCallType: [],
ueAauthCode: [],
ueEventType: [],
ueEventCmState: [],
});
onMounted(() => {
@@ -31,6 +34,7 @@ onMounted(() => {
getDict('cdr_call_type'),
getDict('ue_auth_code'),
getDict('ue_event_type'),
getDict('ue_event_cm_state'),
]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.cdrSipCode = resArr[0].value;
@@ -44,6 +48,9 @@ onMounted(() => {
if (resArr[3].status === 'fulfilled') {
dict.ueEventType = resArr[3].value;
}
if (resArr[4].status === 'fulfilled') {
dict.ueEventCmState = resArr[4].value;
}
});
});
</script>
@@ -84,9 +91,9 @@ onMounted(() => {
</div>
<div>
{{ t('views.dashboard.overview.userActivity.called') }}:
<span :title="item.data.calledParty">{{
item.data.calledParty
}}</span>
<span :title="item.data.calledParty">
{{ item.data.calledParty }}
</span>
</div>
<div>
{{ t('views.dashboard.overview.userActivity.duration') }}:
@@ -152,11 +159,13 @@ onMounted(() => {
</div>
<div v-if="item.type === 'detach'">
{{ t('views.dashboard.overview.userActivity.result') }}:
<span>{{ item.data.detachResult }}</span>
<span>{{ t('views.dashboard.overview.userActivity.resultOK') }}</span>
</div>
<div class="card-ue-w33" v-if="item.type === 'cm-state'">
{{ t('views.dashboard.overview.userActivity.result') }}:
<span>{{ item.data.status }}</span>
<span>
<DictTag :options="dict.ueEventCmState" :value="item.data.status" />
</span>
</div>
</div>
</template>

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

@@ -209,7 +209,7 @@
display: flex;
flex-direction: column;
justify-content: space-around;
height: 72%;
height: 60%;
}
.upfFlowTotal .inner .chart .data .item {
display: flex;
@@ -228,8 +228,8 @@
/* 资源情况 */
.resources {
min-height: 13.6rem;
height: 25.5%;
min-height: 18rem rem;
height: 33.5%;
}
.resources .inner .chart {
width: 100%;
@@ -239,8 +239,8 @@
/* 告警统计 */
.alarmType {
min-height: 22rem;
height: 54.5%;
min-height: 25rem;
height: 46.5%;
}
.alarmType .inner .chart {
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(() => {
upfTFActive.value = upfTFActive.value >= 2 ? 0 : upfTFActive.value + 1;
// if (upfTFActive.value === 0) {
// upfTFSend(7);
// } else if (upfTFActive.value === 1) {
// upfTFSend(30);
// } else if (upfTFActive.value === 2) {
// upfTFSend(0);
// }
if (upfTFActive.value === 0) {
upfTFSend(7);
} else if (upfTFActive.value === 1) {
upfTFSend(30);
} else if (upfTFActive.value === 2) {
upfTFSend(0);
}
}, 10_000);
}
@@ -161,8 +161,8 @@ onMounted(() => {
});
onBeforeUnmount(() => {
// clearTimeout(stateTimeout.value);
//clearTimeout(stateInterval.value);
clearTimeout(stateTimeout.value);
clearTimeout(stateInterval.value);
});
</script>
@@ -344,7 +344,18 @@ onBeforeUnmount(() => {
</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="inner">
@@ -358,19 +369,6 @@ onBeforeUnmount(() => {
</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>
</template>