You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
2.8 KiB
133 lines
2.8 KiB
<template>
|
|
<div class="stzone">
|
|
<!-- 新增服务器 -->
|
|
<div class="stadd">
|
|
<div class="stitem">
|
|
<label>服务器名称：</label>
|
|
<input type="text" placeholder="请输入服务器名称">
|
|
</div>
|
|
<div class="stitem">
|
|
<label>服务器IP：</label>
|
|
<input type="text" placeholder="请输入服务器IP">
|
|
</div>
|
|
<div class="stitem">
|
|
<label>服务器端口：</label>
|
|
<input type="text" placeholder="请输入服务器端口">
|
|
|
|
</div>
|
|
<div class="stitem">
|
|
<button>新增</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- 监控的服务器列表 -->
|
|
<div class="msbox">
|
|
<div class="msdiv">
|
|
<table class="mstable">
|
|
<tr>
|
|
<th>服务器名称</th>
|
|
<th>服务器IP</th>
|
|
<th>服务器端口</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
<tr v-for="val in serverlist" :id="val.id">
|
|
<td>{{val.scname}}</td>
|
|
<td>{{val.addr}}</td>
|
|
<td>{{ val.port }}</td>
|
|
<td>
|
|
<router-link :to="'/sce?id='+val.id">编辑</router-link>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
/* 系统设置 */
|
|
.stzone {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
|
|
float: left;
|
|
height: 100%;
|
|
}
|
|
|
|
.stadd {
|
|
padding: 20px 10px 10px 14px;
|
|
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
background-color: #fff;
|
|
height: 60px;
|
|
}
|
|
|
|
.stadd .stitem {
|
|
width: 25%;
|
|
float: left;
|
|
}
|
|
|
|
.msdiv {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
background-color: #f5f5f5;
|
|
/* background-color: #eee9e9; */
|
|
}
|
|
|
|
/* 表格间隔变色 */
|
|
.msdiv .mstable {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border: 1px solid #f8efef;
|
|
|
|
}
|
|
|
|
.msdiv .mstable tr {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
/* background-color: #fff; */
|
|
}
|
|
|
|
.msdiv .mstable tr:hover {
|
|
background-color: #f8efef;
|
|
|
|
}
|
|
|
|
.msdiv .mstable tr td {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
/* 设置偶数行的背景颜色 */
|
|
tr:nth-child(even) {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
/* 设置奇数行的背景颜色 */
|
|
tr:nth-child(odd) {
|
|
background-color: #ffffff;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { Sclist } from '@/api/scinfo'
|
|
export default {
|
|
data() {
|
|
return {
|
|
serverlist: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getscdb()
|
|
},
|
|
methods: {
|
|
getscdb() {
|
|
Sclist().then(res => {
|
|
this.serverlist = res.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|