|
|
@ -1,136 +1,12 @@ |
|
|
|
<template> |
|
|
|
<div v-loading="!show" :element-loading-text="$t('common.loading')" :style="!show ? 'height: 500px' : 'height: 100%'" class="app-container"> |
|
|
|
<div v-if="show"> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div style="color: #666;font-size: 13px;"> |
|
|
|
<svg-icon icon-class="system" style="margin-right: 5px" /> |
|
|
|
<span> |
|
|
|
{{ $t('monitor.sys') }}:{{ data.sys.os }} |
|
|
|
</span> |
|
|
|
<span> |
|
|
|
IP:{{ data.sys.ip }} |
|
|
|
</span> |
|
|
|
<span> |
|
|
|
{{ $t('monitor.day') }}:{{ data.sys.day }} |
|
|
|
</span> |
|
|
|
<i class="el-icon-refresh" style="margin-left: 40px" @click="init" /> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span style="font-weight: bold;color: #666;font-size: 15px">{{ $t('monitor.status') }}</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px"> |
|
|
|
<div class="title">{{ $t('monitor.cpu') }}</div> |
|
|
|
<el-tooltip placement="top-end"> |
|
|
|
<div slot="content" style="font-size: 12px;"> |
|
|
|
<div style="padding: 3px;"> |
|
|
|
{{ data.cpu.name }} |
|
|
|
</div> |
|
|
|
<div style="padding: 3px"> |
|
|
|
{{ data.cpu.package }} |
|
|
|
</div> |
|
|
|
<div style="padding: 3px"> |
|
|
|
{{ data.cpu.core }} |
|
|
|
</div> |
|
|
|
<div style="padding: 3px"> |
|
|
|
{{ data.cpu.logic }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<el-progress type="dashboard" :percentage="parseFloat(data.cpu.used)" /> |
|
|
|
</div> |
|
|
|
</el-tooltip> |
|
|
|
<div class="footer">{{ data.cpu.coreNumber }} {{ $t('monitor.core') }}</div> |
|
|
|
</el-col> |
|
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px"> |
|
|
|
<div class="title">{{ $t('monitor.memory') }}</div> |
|
|
|
<el-tooltip placement="top-end"> |
|
|
|
<div slot="content" style="font-size: 12px;"> |
|
|
|
<div style="padding: 3px;"> |
|
|
|
{{ $t('monitor.tality') }}:{{ data.memory.total }} |
|
|
|
</div> |
|
|
|
<div style="padding: 3px"> |
|
|
|
{{ $t('monitor.used') }}:{{ data.memory.used }} |
|
|
|
</div> |
|
|
|
<div style="padding: 3px"> |
|
|
|
{{ $t('monitor.leisure') }}:{{ data.memory.available }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<el-progress type="dashboard" :percentage="parseFloat(data.memory.usageRate)" /> |
|
|
|
</div> |
|
|
|
</el-tooltip> |
|
|
|
<div class="footer">{{ data.memory.used }} / {{ data.memory.total }}</div> |
|
|
|
</el-col> |
|
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px"> |
|
|
|
<div class="title">{{ $t('monitor.exchange') }}</div> |
|
|
|
<el-tooltip placement="top-end"> |
|
|
|
<div slot="content" style="font-size: 12px;"> |
|
|
|
<div style="padding: 3px;"> |
|
|
|
{{ $t('monitor.tality') }}:{{ data.swap.total }} |
|
|
|
</div> |
|
|
|
<div style="padding: 3px"> |
|
|
|
{{ $t('monitor.used') }}:{{ data.swap.used }} |
|
|
|
</div> |
|
|
|
<div style="padding: 3px"> |
|
|
|
{{ $t('monitor.leisure') }}:{{ data.swap.available }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<el-progress type="dashboard" :percentage="parseFloat(data.swap.usageRate)" /> |
|
|
|
</div> |
|
|
|
</el-tooltip> |
|
|
|
<div class="footer">{{ data.swap.used }} / {{ data.swap.total }}</div> |
|
|
|
</el-col> |
|
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px"> |
|
|
|
<div class="title">{{ $t('monitor.disk') }}</div> |
|
|
|
<div class="content"> |
|
|
|
<el-tooltip placement="top-end"> |
|
|
|
<div slot="content" style="font-size: 12px;"> |
|
|
|
<div style="padding: 3px"> |
|
|
|
{{ $t('monitor.tality') }}:{{ data.disk.total }} |
|
|
|
</div> |
|
|
|
<div style="padding: 3px"> |
|
|
|
{{ $t('monitor.leisure') }}:{{ data.disk.available }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<el-progress type="dashboard" :percentage="parseFloat(data.disk.usageRate)" /> |
|
|
|
</div> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
<div class="footer">{{ data.disk.used }} / {{ data.disk.total }}</div> |
|
|
|
</el-col> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
<div> |
|
|
|
<el-row :gutter="6"> |
|
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px"> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span style="font-weight: bold;color: #666;font-size: 15px">{{ $t('monitor.cpu_monitoring') }}</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<v-chart :options="cpuInfo" /> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px"> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span style="font-weight: bold;color: #666;font-size: 15px">{{ $t('monitor.memory_monitoring') }}</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<v-chart :options="memoryInfo" /> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="height:1000px"> |
|
|
|
<iframe |
|
|
|
src="/screen/index.html" |
|
|
|
width="100%" |
|
|
|
height="100%" |
|
|
|
frameborder="0" |
|
|
|
allowfullscreen |
|
|
|
></iframe> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|