mirror of
https://gitee.com/beecue/fastbee.git
synced 2026-05-06 15:54:42 +08:00
fix(列表页面): 样式优化
This commit is contained in:
Zhunianya
@@ -26,7 +26,7 @@
|
|||||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column v-if="isAdmin" :label="$t('iot.group.index.637432-8')" align="center" prop="userName" width="100" />
|
<el-table-column v-if="isAdmin" :label="$t('iot.group.index.637432-8')" align="center" prop="userName" width="150" />
|
||||||
<el-table-column :label="$t('iot.group.index.637432-9')" align="left" header-align="center" prop="remark" />
|
<el-table-column :label="$t('iot.group.index.637432-9')" align="left" header-align="center" prop="remark" />
|
||||||
<el-table-column :label="$t('iot.group.index.637432-10')" align="center" class-name="small-padding fixed-width" width="320">
|
<el-table-column :label="$t('iot.group.index.637432-10')" align="center" class-name="small-padding fixed-width" width="320">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|||||||
@@ -48,10 +48,12 @@
|
|||||||
<dict-tag :options="dict.type.iot_device_type" :value="item.deviceType" size="mini" />
|
<dict-tag :options="dict.type.iot_device_type" :value="item.deviceType" size="mini" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row">
|
<div class="info-row" style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
||||||
<span class="info-value" style="display: flex">
|
<span class="info-value" style="display: flex">
|
||||||
{{ $t('product.index.091251-18') }}：
|
{{ $t('product.index.091251-18') }}：
|
||||||
<dict-tag :options="dict.type.iot_network_method" :value="item.networkMethod" size="mini" />
|
<el-tooltip :content="item.networkMethod" placement="top">
|
||||||
|
<dict-tag :options="dict.type.iot_network_method" :value="item.networkMethod" size="mini" />
|
||||||
|
</el-tooltip>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-row">
|
<div class="info-row">
|
||||||
|
|||||||
@@ -30,14 +30,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-button-group style="margin-top: 10px">
|
<div class="card-footer">
|
||||||
<el-button type="danger" size="mini" style="padding: 5px 10px" icon="el-icon-delete" v-hasPermi="['iot:video:remove']" @click="del(item)">{{ $t('del') }}</el-button>
|
<div class="footer-left"></div>
|
||||||
<el-button type="primary" size="mini" style="padding: 5px 15px" icon="el-icon-view" @click="view(item)" v-hasPermi="['iot:video:query']">{{ $t('look') }}</el-button>
|
<div class="footer-actions">
|
||||||
<el-button v-if="!istrue" type="success" size="mini" style="padding: 5px 15px" icon="el-icon-odometer" @click.native.prevent="edit(item)" v-hasPermi="['iot:video:edit']">
|
<el-button-group style="float: right; margin-top: 10px">
|
||||||
{{ $t('edit') }}
|
<el-button type="text" size="mini" style="padding: 5px 10px" icon="el-icon-delete" v-hasPermi="['iot:video:remove']" @click="del(item)">{{ $t('del') }}</el-button>
|
||||||
</el-button>
|
<el-button type="text" size="mini" style="padding: 5px 15px" icon="el-icon-view" @click="view(item)" v-hasPermi="['iot:video:query']">{{ $t('look') }}</el-button>
|
||||||
<el-button v-else type="success" size="mini" style="padding: 5px 15px" icon="el-icon-odometer" :loading="true" disabled>{{ $t('sip.mediaServer.998535-5') }}</el-button>
|
<el-button v-if="!istrue" type="text" size="mini" style="padding: 5px 15px" icon="el-icon-odometer" @click.native.prevent="edit(item)" v-hasPermi="['iot:video:edit']">
|
||||||
</el-button-group>
|
{{ $t('edit') }}
|
||||||
|
</el-button>
|
||||||
|
<el-button v-else type="text" size="mini" style="padding: 5px 15px" icon="el-icon-odometer" :loading="true" disabled>{{ $t('sip.mediaServer.998535-5') }}</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -165,7 +170,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.card-item {
|
.card-item {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 15px 0px;
|
padding: 15px 0px;
|
||||||
@@ -179,4 +184,31 @@ export default {
|
|||||||
::v-deep .pagination-container[data-v-72233bcd] {
|
::v-deep .pagination-container[data-v-72233bcd] {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
.card-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
margin-top: 10px;
|
||||||
|
.footer-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #606266;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.el-icon-delete:hover {
|
||||||
|
color: #f56c6c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,236 +1,375 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12" class="card-box">
|
<el-col :span="12" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div>
|
<div slot="header">
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
<span>
|
||||||
<table cellspacing="0" style="width: 100%;">
|
<i class="el-icon-cpu"></i>
|
||||||
<thead>
|
CPU
|
||||||
<tr>
|
</span>
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-0') }}</div></th>
|
</div>
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-1') }}</div></th>
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
</tr>
|
<table cellspacing="0" style="width: 100%">
|
||||||
</thead>
|
<thead>
|
||||||
<tbody>
|
<tr>
|
||||||
<tr>
|
<th class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-2') }}</div></td>
|
<div class="cell">{{ $t('monitor.server.index.501236-0') }}</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
|
</th>
|
||||||
</tr>
|
<th class="el-table__cell is-leaf">
|
||||||
<tr>
|
<div class="cell">{{ $t('monitor.server.index.501236-1') }}</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-3') }}</div></td>
|
</th>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
|
</tr>
|
||||||
</tr>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-4') }}</div></td>
|
<tr>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
</tr>
|
<div class="cell">{{ $t('monitor.server.index.501236-2') }}</div>
|
||||||
<tr>
|
</td>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-5') }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
|
<div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
<tr>
|
||||||
</div>
|
<td class="el-table__cell is-leaf">
|
||||||
</el-card>
|
<div class="cell">{{ $t('monitor.server.index.501236-3') }}</div>
|
||||||
</el-col>
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ $t('monitor.server.index.501236-4') }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ $t('monitor.server.index.501236-5') }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="12" class="card-box">
|
<el-col :span="12" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header"><span><i class="el-icon-tickets"></i> {{ $t('monitor.server.index.501236-6') }}</span></div>
|
<div slot="header">
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
<span>
|
||||||
<table cellspacing="0" style="width: 100%;">
|
<i class="el-icon-tickets"></i>
|
||||||
<thead>
|
{{ $t('monitor.server.index.501236-6') }}
|
||||||
<tr>
|
</span>
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-0') }}</div></th>
|
</div>
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-6') }}</div></th>
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-7') }}</div></th>
|
<table cellspacing="0" style="width: 100%">
|
||||||
</tr>
|
<thead>
|
||||||
</thead>
|
<tr>
|
||||||
<tbody>
|
<th class="el-table__cell is-leaf">
|
||||||
<tr>
|
<div class="cell">{{ $t('monitor.server.index.501236-0') }}</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-8') }}</div></td>
|
</th>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
|
<th class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
|
<div class="cell">{{ $t('monitor.server.index.501236-6') }}</div>
|
||||||
</tr>
|
</th>
|
||||||
<tr>
|
<th class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-9') }}</div></td>
|
<div class="cell">{{ $t('monitor.server.index.501236-7') }}</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
|
</th>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
|
</tr>
|
||||||
</tr>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-10') }}</div></td>
|
<tr>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
|
<div class="cell">{{ $t('monitor.server.index.501236-8') }}</div>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
<td class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-11') }}</div></td>
|
<div class="cell" v-if="server.mem">{{ server.mem.total }}G</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
|
</td>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
</tr>
|
<div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div>
|
||||||
</tbody>
|
</td>
|
||||||
</table>
|
</tr>
|
||||||
</div>
|
<tr>
|
||||||
</el-card>
|
<td class="el-table__cell is-leaf">
|
||||||
</el-col>
|
<div class="cell">{{ $t('monitor.server.index.501236-9') }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.mem">{{ server.mem.used }}G</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.jvm">{{ server.jvm.used }}M</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ $t('monitor.server.index.501236-10') }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.mem">{{ server.mem.free }}G</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ $t('monitor.server.index.501236-11') }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.mem" :class="{ 'text-danger': server.mem.usage > 80 }">{{ server.mem.usage }}%</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.jvm" :class="{ 'text-danger': server.jvm.usage > 80 }">{{ server.jvm.usage }}%</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="24" class="card-box">
|
<el-col :span="24" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span><i class="el-icon-monitor"></i> {{ $t('monitor.server.index.501236-12') }}</span>
|
<span>
|
||||||
</div>
|
<i class="el-icon-monitor"></i>
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
{{ $t('monitor.server.index.501236-12') }}
|
||||||
<table cellspacing="0" style="width: 100%;">
|
</span>
|
||||||
<tbody>
|
</div>
|
||||||
<tr>
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-13') }}</div></td>
|
<table cellspacing="0" style="width: 100%">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
|
<tbody>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-14') }}</div></td>
|
<tr>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
</tr>
|
<div class="cell">{{ $t('monitor.server.index.501236-13') }}</div>
|
||||||
<tr>
|
</td>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-15') }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
|
<div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-16') }}</div></td>
|
</td>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
</tr>
|
<div class="cell">{{ $t('monitor.server.index.501236-14') }}</div>
|
||||||
</tbody>
|
</td>
|
||||||
</table>
|
<td class="el-table__cell is-leaf">
|
||||||
</div>
|
<div class="cell" v-if="server.sys">{{ server.sys.osName }}</div>
|
||||||
</el-card>
|
</td>
|
||||||
</el-col>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ $t('monitor.server.index.501236-15') }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ $t('monitor.server.index.501236-16') }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="24" class="card-box">
|
<el-col :span="24" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span><i class="el-icon-coffee-cup"></i> {{ $t('monitor.server.index.501236-17') }}</span>
|
<span>
|
||||||
</div>
|
<i class="el-icon-coffee-cup"></i>
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
{{ $t('monitor.server.index.501236-17') }}
|
||||||
<table cellspacing="0" style="width: 100%;table-layout:fixed;">
|
</span>
|
||||||
<tbody>
|
</div>
|
||||||
<tr>
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-18') }}</div></td>
|
<table cellspacing="0" style="width: 100%; table-layout: fixed">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
|
<tbody>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-19') }}</div></td>
|
<tr>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
</tr>
|
<div class="cell">{{ $t('monitor.server.index.501236-18') }}</div>
|
||||||
<tr>
|
</td>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-20') }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
|
<div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-21') }}</div></td>
|
</td>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
</tr>
|
<div class="cell">{{ $t('monitor.server.index.501236-19') }}</div>
|
||||||
<tr>
|
</td>
|
||||||
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-22') }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
|
<div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-23') }}</div></td>
|
<tr>
|
||||||
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
</tr>
|
<div class="cell">{{ $t('monitor.server.index.501236-20') }}</div>
|
||||||
<tr>
|
</td>
|
||||||
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-24') }}</div></td>
|
<td class="el-table__cell is-leaf">
|
||||||
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
|
<div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
<td class="el-table__cell is-leaf">
|
||||||
</table>
|
<div class="cell">{{ $t('monitor.server.index.501236-21') }}</div>
|
||||||
</div>
|
</td>
|
||||||
</el-card>
|
<td class="el-table__cell is-leaf">
|
||||||
</el-col>
|
<div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="1" class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ $t('monitor.server.index.501236-22') }}</div>
|
||||||
|
</td>
|
||||||
|
<td colspan="3" class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="1" class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ $t('monitor.server.index.501236-23') }}</div>
|
||||||
|
</td>
|
||||||
|
<td colspan="3" class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="1" class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ $t('monitor.server.index.501236-24') }}</div>
|
||||||
|
</td>
|
||||||
|
<td colspan="3" class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="24" class="card-box">
|
<el-col :span="24" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span><i class="el-icon-receiving"></i> {{ $t('monitor.server.index.501236-25') }}</span>
|
<span>
|
||||||
</div>
|
<i class="el-icon-receiving"></i>
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
{{ $t('monitor.server.index.501236-25') }}
|
||||||
<table cellspacing="0" style="width: 100%;">
|
</span>
|
||||||
<thead>
|
</div>
|
||||||
<tr>
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
<th class="el-table__cell el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-26') }}</div></th>
|
<table cellspacing="0" style="width: 100%">
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-27') }}</div></th>
|
<thead>
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-28') }}</div></th>
|
<tr>
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-29') }}</div></th>
|
<th class="el-table__cell el-table__cell is-leaf">
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-30') }}</div></th>
|
<div class="cell">{{ $t('monitor.server.index.501236-26') }}</div>
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-31') }}</div></th>
|
</th>
|
||||||
<th class="el-table__cell is-leaf"><div class="cell">{{ $t('monitor.server.index.501236-32') }}</div></th>
|
<th class="el-table__cell is-leaf">
|
||||||
</tr>
|
<div class="cell">{{ $t('monitor.server.index.501236-27') }}</div>
|
||||||
</thead>
|
</th>
|
||||||
<tbody v-if="server.sysFiles">
|
<th class="el-table__cell is-leaf">
|
||||||
<tr v-for="(sysFile, index) in server.sysFiles" :key="index">
|
<div class="cell">{{ $t('monitor.server.index.501236-28') }}</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
|
</th>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
|
<th class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
|
<div class="cell">{{ $t('monitor.server.index.501236-29') }}</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
|
</th>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
|
<th class="el-table__cell is-leaf">
|
||||||
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
|
<div class="cell">{{ $t('monitor.server.index.501236-30') }}</div>
|
||||||
<td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
|
</th>
|
||||||
</tr>
|
<th class="el-table__cell is-leaf">
|
||||||
</tbody>
|
<div class="cell">{{ $t('monitor.server.index.501236-31') }}</div>
|
||||||
</table>
|
</th>
|
||||||
</div>
|
<th class="el-table__cell is-leaf">
|
||||||
</el-card>
|
<div class="cell">{{ $t('monitor.server.index.501236-32') }}</div>
|
||||||
</el-col>
|
</th>
|
||||||
</el-row>
|
</tr>
|
||||||
</div>
|
</thead>
|
||||||
|
<tbody v-if="server.sysFiles">
|
||||||
|
<tr v-for="(sysFile, index) in server.sysFiles" :key="index">
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ sysFile.dirName }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ sysFile.sysTypeName }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ sysFile.typeName }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ sysFile.total }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ sysFile.free }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell">{{ sysFile.used }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="el-table__cell is-leaf">
|
||||||
|
<div class="cell" :class="{ 'text-danger': sysFile.usage > 80 }">{{ sysFile.usage }}%</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getServer } from "@/api/monitor/server";
|
import { getServer } from '@/api/monitor/server';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Server",
|
name: 'Server',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 服务器信息
|
// 服务器信息
|
||||||
server: []
|
server: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getList();
|
this.getList();
|
||||||
this.openLoading();
|
this.openLoading();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/** 查询服务器信息 */
|
/** 查询服务器信息 */
|
||||||
getList() {
|
getList() {
|
||||||
getServer().then(response => {
|
getServer().then((response) => {
|
||||||
this.server = response.data;
|
this.server = response.data;
|
||||||
this.$modal.closeLoading();
|
this.$modal.closeLoading();
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
// 打开加载层
|
||||||
|
openLoading() {
|
||||||
|
this.$modal.loading(this.$i18n.t('monitor.server.index.501236-33'));
|
||||||
|
},
|
||||||
},
|
},
|
||||||
// 打开加载层
|
|
||||||
openLoading() {
|
|
||||||
this.$modal.loading(this.$i18n.t('monitor.server.index.501236-33'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.table-header {
|
.table-header {
|
||||||
background-color: #f5f7fa !important;
|
background-color: #f5f7fa !important;
|
||||||
color: #606266;
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-table {
|
|
||||||
th {
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
color: #606266;
|
color: #606266;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
::v-deep .el-table {
|
||||||
padding: 12px 0;
|
th {
|
||||||
}
|
background-color: #f5f7fa;
|
||||||
|
color: #606266;
|
||||||
.el-table__body tr:hover > td {
|
font-weight: 600;
|
||||||
background-color: #f5f7fa !important;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__body tr:hover > td {
|
||||||
|
background-color: #f5f7fa !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-container {
|
.pagination-container {
|
||||||
@@ -241,7 +380,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-pagination {
|
::v-deep .el-pagination {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user