租户的仪表盘
This commit is contained in:
lai
@@ -1,373 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts/core';
|
||||
import {
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
DataZoomComponent,
|
||||
} from 'echarts/components';
|
||||
import { LineChart, LineSeriesOption } from 'echarts/charts';
|
||||
import { UniversalTransition } from 'echarts/features';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { listMain } from '@/api/index';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import { LabelLayout } from 'echarts/features';
|
||||
import { ref, onMounted, markRaw } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import UPFTEST from './tenantUPF.vue';
|
||||
import { BarChart } from 'echarts/charts';
|
||||
import MODULE from './moduleInfo.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
echarts.use([
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
PieChart,
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
LabelLayout,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
DataZoomComponent,
|
||||
LineChart,
|
||||
UniversalTransition,
|
||||
TitleComponent,
|
||||
]);
|
||||
|
||||
/**图DOM节点实例对象 */
|
||||
const statusBar = ref<HTMLElement | undefined>(undefined);
|
||||
|
||||
/**图实例对象 */
|
||||
const statusBarChart = ref<any>(null);
|
||||
|
||||
/**查询网元状态列表 */
|
||||
function fnGetList(one: boolean) {
|
||||
listMain().then(res => {
|
||||
var rightNum = 0;
|
||||
var errorNum = 0;
|
||||
// if (res.length) nfInfo.serialNum = res[0].serialNum;
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
if (res[i].status == '正常' || res[i].status == 'Normal') {
|
||||
rightNum++;
|
||||
} else {
|
||||
errorNum++;
|
||||
}
|
||||
}
|
||||
|
||||
const optionData: any = {
|
||||
title: {
|
||||
text: t('views.dashboard.overview.skim.baseTitle'),
|
||||
textStyle: {
|
||||
//标题内容的样式
|
||||
// color: '#000', //
|
||||
fontStyle: 'normal', //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
|
||||
//fontWeight: "700", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
|
||||
// fontFamily: "PingFangSC-Regular, PingFang SC", //主题文字字体，默认微软雅黑
|
||||
// fontSize: 20 //主题文字字体大小，默认为18px
|
||||
},
|
||||
},
|
||||
// legend: {
|
||||
// top: '10%',
|
||||
// textStyle: {
|
||||
// fontSize: 10
|
||||
// },
|
||||
// data: ['低危', '高位']
|
||||
// },
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '1%',
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
t('views.dashboard.overview.skim.gnbBase'),
|
||||
t('views.dashboard.overview.skim.gnbUeNum'),
|
||||
t('views.dashboard.overview.skim.enbBase'),
|
||||
t('views.dashboard.overview.skim.enbUeNum'),
|
||||
],
|
||||
axisTick: {
|
||||
show: false,
|
||||
}, // 取消坐标轴刻度线
|
||||
axisLine: {
|
||||
show: false, // 取消坐标轴线
|
||||
}, // 取消坐标轴线
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false,
|
||||
}, // 取消坐标轴刻度线
|
||||
axisLine: {
|
||||
show: false, // 取消坐标轴线
|
||||
}, // 取消坐标轴线
|
||||
axisLabel: {
|
||||
show: false,
|
||||
}, // 取消坐标轴刻度线
|
||||
splitLine: {
|
||||
show: false, // 取消网格线
|
||||
}, // 取消网格线
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
3,
|
||||
{
|
||||
value: 5,
|
||||
// itemStyle: {
|
||||
// color: '#f9d3e3',
|
||||
// },
|
||||
},
|
||||
2,
|
||||
4,
|
||||
],
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0], // 设置四个圆角的半径，顺序为左上、右上、右下、左下
|
||||
},
|
||||
label: {
|
||||
show: true, // 显示数值
|
||||
position: 'inside', // 设置显示位置为柱状图内部
|
||||
fontSize: 15, // 设置字体大小
|
||||
formatter: (params: any) => {
|
||||
if (!params.value) return '';
|
||||
return `${params.value}`;
|
||||
},
|
||||
},
|
||||
type: 'bar',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
fnDesign(statusBar.value, optionData);
|
||||
});
|
||||
}
|
||||
|
||||
function fnDesign(container: HTMLElement | undefined, option: any) {
|
||||
if (!container) return;
|
||||
|
||||
if (!statusBarChart.value) {
|
||||
statusBarChart.value = markRaw(echarts.init(container, 'light'));
|
||||
}
|
||||
option && statusBarChart.value.setOption(option);
|
||||
|
||||
// 创建 ResizeObserver 实例
|
||||
var observer = new ResizeObserver(entries => {
|
||||
if (statusBarChart.value) {
|
||||
statusBarChart.value.resize();
|
||||
}
|
||||
});
|
||||
// 监听元素大小变化
|
||||
observer.observe(container);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fnGetList(true);
|
||||
});
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageContainer>
|
||||
<div style="background-color: #f7f8fc; padding: 20px">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
style="
|
||||
background: linear-gradient(135deg, #17ead9, #6078ea);
|
||||
margin: 'left';
|
||||
"
|
||||
class="cardClass"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="10">
|
||||
<a-avatar
|
||||
:size="76"
|
||||
style="
|
||||
background: linear-gradient(135deg, #17ead9, #6078ea);
|
||||
margin-top: 15px;
|
||||
"
|
||||
>
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<h1
|
||||
style="
|
||||
margin-top: 10px;
|
||||
color: #e1f6e1;
|
||||
font-size: 30px;
|
||||
margin-right: 20px;
|
||||
"
|
||||
>
|
||||
{{ t('views.dashboard.overview.skim.users') }}
|
||||
</h1>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-statistic
|
||||
:value="3000"
|
||||
:value-style="{
|
||||
color: '#e1f6e1',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '32px',
|
||||
marginLeft: '50px',
|
||||
}"
|
||||
style="margin-left: -50px"
|
||||
>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- <a-card-meta
|
||||
:title="t('views.dashboard.overview.skim.users')"
|
||||
description="This is the description"
|
||||
style="margin-top: 20px; color: #f7f8fc"
|
||||
class="my-card-meta1"
|
||||
>
|
||||
<template #avatar>
|
||||
<a-avatar
|
||||
:size="64"
|
||||
style="background: linear-gradient(135deg, #17ead9, #6078ea)"
|
||||
>
|
||||
<template #icon><UserOutlined /></template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
</a-card-meta> -->
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="8">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
style="
|
||||
background: linear-gradient(135deg, #ce9ffc, #7367f0);
|
||||
margin: 'center';
|
||||
"
|
||||
class="cardClass"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="10">
|
||||
<a-avatar
|
||||
:size="76"
|
||||
style="
|
||||
background: linear-gradient(135deg, #ce9ffc, #7367f0);
|
||||
margin-top: 15px;
|
||||
"
|
||||
>
|
||||
<template #icon><comment-outlined /></template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<h1
|
||||
style="margin-top: 10px; color: #e1f6e1; font-size: 30px"
|
||||
>
|
||||
{{ t('views.dashboard.overview.skim.imsUeNum') }}
|
||||
</h1>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-statistic
|
||||
:value="2"
|
||||
:value-style="{
|
||||
color: '#e1f6e1',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '32px',
|
||||
marginLeft: '50px',
|
||||
}"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="8">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
style="
|
||||
background: linear-gradient(135deg, #ffe985, #fa742b);
|
||||
margin: 'right';
|
||||
"
|
||||
class="cardClass"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="10">
|
||||
<a-avatar
|
||||
:size="76"
|
||||
style="
|
||||
background: linear-gradient(135deg, #ffe985, #fa742b);
|
||||
margin-top: 15px;
|
||||
"
|
||||
>
|
||||
<template #icon><database-outlined /></template>
|
||||
</a-avatar>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<h1
|
||||
style="margin-top: 10px; color: #e1f6e1; font-size: 30px"
|
||||
>
|
||||
{{ t('views.dashboard.overview.skim.smfUeNum') }}
|
||||
</h1>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-statistic
|
||||
:value="5"
|
||||
:value-style="{
|
||||
color: '#e1f6e1',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '32px',
|
||||
marginLeft: '50px',
|
||||
}"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- <a-col :span="6">
|
||||
<a-card :bordered="false" class="cardClass">
|
||||
<div style="width: 100%; min-height: 200px" ref="statusBar"></div>
|
||||
到时候画饼图 显示四个options 分别45G基站数/用户数
|
||||
</a-card>
|
||||
</a-col> -->
|
||||
</a-row>
|
||||
<MODULE />
|
||||
</div>
|
||||
<div style="background-color: #f7f8fc; padding: 20px">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="14">
|
||||
<a-card :bordered="false" class="cardClass"> <UPFTEST /></a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="10">
|
||||
<a-card :bordered="false" class="cardClass">
|
||||
<div style="width: 100%; min-height: 400px" ref="statusBar"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-card :bordered="false" class="cardClass"> <UPFTEST /></a-card>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</template>
|
||||
@@ -378,16 +27,4 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
/* 设置图表容器大小和位置 */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user