---首页
This commit is contained in:
lai
@@ -1,12 +1,429 @@
|
||||
<script setup lang="ts">
|
||||
import { PageContainer } from '@ant-design-vue/pro-layout';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
|
||||
import {onMounted,onUnmounted} from "vue";
|
||||
import {ColumnsType} from "ant-design-vue/lib/table";
|
||||
import {parseDateToStr} from "@/utils/date-utils";
|
||||
import {SizeType} from "ant-design-vue/lib/config-provider";
|
||||
import {reactive,toRaw} from "vue";
|
||||
import {listNotice} from "@/api/system/notice";
|
||||
import {listUser} from "@/api/system/user";
|
||||
import {listMain} from "@/api/system/home";
|
||||
const userStore = useUserStore();
|
||||
const { appName, appVersion } = useAppStore();
|
||||
import { TooltipComponent, TooltipComponentOption } from 'echarts/components';
|
||||
import { GaugeChart, GaugeSeriesOption } from 'echarts/charts';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import * as echarts from 'echarts/core';
|
||||
import {
|
||||
TitleComponent,
|
||||
TitleComponentOption,
|
||||
LegendComponent,
|
||||
LegendComponentOption
|
||||
} from 'echarts/components';
|
||||
import { PieChart, PieSeriesOption } from 'echarts/charts';
|
||||
import { LabelLayout } from 'echarts/features';
|
||||
|
||||
|
||||
echarts.use([TooltipComponent,
|
||||
GaugeChart,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
PieChart,
|
||||
CanvasRenderer,
|
||||
LabelLayout]);
|
||||
|
||||
type EChartsOption = echarts.ComposeOption<
|
||||
TooltipComponentOption | GaugeSeriesOption
|
||||
| TitleComponentOption
|
||||
| LegendComponentOption
|
||||
| PieSeriesOption
|
||||
>;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var option: any;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: 'Referer of a Website',
|
||||
subtext: 'Fake Data',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
/*
|
||||
onMounted(()=>{
|
||||
var chartDom = document.getElementById('main')!;
|
||||
var myChart = echarts.init(chartDom);
|
||||
option && myChart.setOption(option);
|
||||
})*/
|
||||
|
||||
/**表格字段列 */
|
||||
//customRender(){} ----单元格处理
|
||||
let tableColumns: ColumnsType = [
|
||||
{
|
||||
title: '对象',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
key:'status'
|
||||
},
|
||||
{
|
||||
title: '网元状态',
|
||||
dataIndex: 'status',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '刷新时间',
|
||||
dataIndex: 'refresh',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '版本',
|
||||
dataIndex: 'version',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: 'IP地址',
|
||||
dataIndex: 'ipAddress',
|
||||
key: 'groupName',
|
||||
align: 'center',
|
||||
}
|
||||
];
|
||||
/**表格状态类型 */
|
||||
type TabeStateType = {
|
||||
/**加载等待 */
|
||||
loading: boolean;
|
||||
/**紧凑型 */
|
||||
size: string;
|
||||
/**斑马纹 */
|
||||
striped: boolean;
|
||||
/**搜索栏 */
|
||||
seached: boolean;
|
||||
/**记录数据 */
|
||||
data: object[];
|
||||
/**勾选记录 */
|
||||
selectedRowKeys: (string | number)[];
|
||||
};
|
||||
|
||||
/**表格状态 */
|
||||
let tableState: TabeStateType = reactive({
|
||||
loading: false,
|
||||
size: 'middle',
|
||||
striped: false,
|
||||
seached: false,
|
||||
data: [],
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
|
||||
|
||||
/**表格状态 */
|
||||
let nfInfo: any = reactive({
|
||||
obj:"OMC",
|
||||
version:"1.6.1",
|
||||
status:"正常",
|
||||
number:"",
|
||||
outTimeDate:"",
|
||||
});
|
||||
|
||||
/**查询网元状态列表 */
|
||||
function fnGetList() {
|
||||
if (tableState.loading) return;
|
||||
tableState.loading = true;
|
||||
listMain().then(res => {
|
||||
tableState.data = res;
|
||||
tableState.loading = false;
|
||||
var rightNum=0;
|
||||
var errorNum=0;
|
||||
|
||||
for (let i=0;i<res.length;i++){
|
||||
if (res[i].status=='正常'){
|
||||
rightNum++;
|
||||
}else{
|
||||
errorNum++;
|
||||
}
|
||||
}
|
||||
echarts.init(document.getElementById('echarts-records')).clear();
|
||||
var chartDom = document.getElementById('echarts-records');
|
||||
var myChart = echarts.init(chartDom);
|
||||
|
||||
var option;
|
||||
option = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '网元状态',
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
center:['50%','50%'],
|
||||
data: [
|
||||
{ value: rightNum, name: '正常' },
|
||||
{ value: errorNum, name: '异常' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
|
||||
,label:{
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
window.onresize = function () { // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
|
||||
myChart.resize();
|
||||
option.resize();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**點擊網元名 */
|
||||
function init(e: any) {
|
||||
console.log(toRaw(e))
|
||||
let realData=toRaw(e);
|
||||
|
||||
var chartDom = document.getElementById('echarts-records');
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.clear(); //怕遗留以前得元素
|
||||
var option;
|
||||
|
||||
|
||||
var nfMenUsage= Math.round(realData.memUsage.nfUsedMem/ realData.memUsage.totalMem* 10000) / 100.00 ;
|
||||
var nfMaxDiskSpace =Math.round(realData.diskSpace.partitionInfo[1].used/ realData.diskSpace.partitionInfo[1].total* 10000) / 100.00 ;
|
||||
option = {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Nf Memory usage',
|
||||
center: ['17%', '50%'],
|
||||
radius:'80%',
|
||||
type: 'gauge',
|
||||
progress: {
|
||||
show: true
|
||||
},
|
||||
pointer: { //仪表盘的指针
|
||||
//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
|
||||
show: true,
|
||||
//指针长度
|
||||
length: '60%',
|
||||
|
||||
},
|
||||
title:{
|
||||
offsetCenter: [0, '90%'],
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}',
|
||||
textStyle:{
|
||||
fontSize:18
|
||||
},
|
||||
offsetCenter: [0, '60%'],
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: nfMenUsage,
|
||||
name: 'MEM'
|
||||
}
|
||||
]},{
|
||||
center: ['50%', '50%'],
|
||||
name: 'Nf CPU usage',
|
||||
radius:'80%',
|
||||
type: 'gauge',
|
||||
progress: {
|
||||
show: true
|
||||
},
|
||||
|
||||
title:{
|
||||
offsetCenter: [0, '90%'],
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}',
|
||||
textStyle:{
|
||||
fontSize:18
|
||||
},
|
||||
offsetCenter: [0, '60%'],
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: realData.cpuUsage.nfCpuUsage/100,
|
||||
name: 'CPU'
|
||||
}],
|
||||
|
||||
},
|
||||
{
|
||||
center: ['83%', '50%'],
|
||||
name: 'NF maximum disk usage',
|
||||
radius:'80%',
|
||||
type: 'gauge',
|
||||
progress: {
|
||||
show: true
|
||||
},
|
||||
title: {
|
||||
offsetCenter: [0, '90%'],
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}',
|
||||
textStyle:{
|
||||
fontSize:18
|
||||
},
|
||||
offsetCenter: [0, '60%'],
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: nfMaxDiskSpace,
|
||||
name: 'DiskSpace'
|
||||
}],
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
window.onresize = function () { // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
|
||||
myChart.resize();
|
||||
option.resize();
|
||||
}
|
||||
|
||||
nfInfo.obj=realData.name;
|
||||
nfInfo.number=realData.serialNum;
|
||||
nfInfo.outTimeDate=realData.expiryDate;
|
||||
|
||||
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
|
||||
fnGetList();
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
/**查询用户列表
|
||||
function fnGetList() {
|
||||
if (tableState.loading) return;
|
||||
tableState.loading = true;
|
||||
queryParams.beginTime = queryRangePicker.value[0];
|
||||
queryParams.endTime = queryRangePicker.value[1];
|
||||
listUser(toRaw(queryParams)).then(res => {
|
||||
if (res.code === 1 && Array.isArray(res.rows)) {
|
||||
// 取消勾选
|
||||
if (tableState.selectedRowKeys.length > 0) {
|
||||
tableState.selectedRowKeys = [];
|
||||
}
|
||||
tablePagination.total = res.total;
|
||||
tableState.data = res.rows;
|
||||
}
|
||||
tableState.loading = false;
|
||||
});
|
||||
}*/
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageContainer :breadcrumb="false">
|
||||
<template #content> 展示统计数据 </template>
|
||||
<a-row :gutter="16"> </a-row>
|
||||
<PageContainer :breadcrumb="false" >
|
||||
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="14" :md="16" :xs="24">
|
||||
<!-- 表格列表 -->
|
||||
<a-table
|
||||
class="table"
|
||||
row-key="id"
|
||||
:columns="tableColumns"
|
||||
:loading="tableState.loading"
|
||||
:data-source="tableState.data"
|
||||
:pagination="false"
|
||||
:scroll="{ x: true }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<div v-if="record.status == '正常'"><a-tag color="blue" @click="init(record)">{{ record.name }}</a-tag></div>
|
||||
<div v-else><a-tag color="pink" >{{ record.name }}</a-tag> </div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-col>
|
||||
<a-col :lg="10" :md="8" :xs="24">
|
||||
<a-card title="运行状态" style="margin-bottom: 16px">
|
||||
<div id="echarts-records" style="width: 100%;min-height:200px"></div>
|
||||
|
||||
</a-card>
|
||||
<a-card title="简略信息" style="margin-top: 16px">
|
||||
<a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
|
||||
<a-descriptions-item label="对象">{{ nfInfo.obj }}</a-descriptions-item>
|
||||
<template v-if="nfInfo.obj === 'OMC'">
|
||||
<a-descriptions-item label="版本号" >{{ nfInfo.version }}</a-descriptions-item>
|
||||
<a-descriptions-item label="系统状态">{{ nfInfo.status }}</a-descriptions-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-descriptions-item label="序列号" >{{ nfInfo.number }}</a-descriptions-item>
|
||||
<a-descriptions-item label="许可证到期日期">{{ nfInfo.outTimeDate }}</a-descriptions-item>
|
||||
</template>
|
||||
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</PageContainer>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user