miduo_gm/src/main/resources/templates/findServerInfo.html

344 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta name="renderer" content="webkit|ie-comp|ie-stand"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<!-- <![endif]&ndash;&gt;-->
<link rel="stylesheet" type="text/css" href="h-ui/css/H-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="h-ui.admin/css/H-ui.admin.css"/>
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="h-ui.admin/skin/default/skin.css" id="skin"/>
<link rel="stylesheet" type="text/css" href="h-ui.admin/css/style.css"/>
<!-- IE6支持 -->
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('*');</script>
<title>服务器列表信息</title>
</head>
<body>
<nav class="breadcrumb">
<i class="Hui-iconfont">&#xe67f;</i> 首页
<span class="c-gray en">&gt;</span> 服务器管理
<span class="c-gray en">&gt;</span> 服务器信息
<a class="btn btn-success radius r" style="margin-top:3px;padding-bottom: 3px;"
href="javascript:location.replace('/findServerInfoNotCache');" title="刷新">
<i class="Hui-iconfont">&#xe68f;</i>
</a>
</nav>
<div class="page-container" style="text-align: center">
<h2><span style="color:red;">服务器信息</span></h2>
<div class="text-c">
<div style="text-align: left;">
<div th:id="serverIds" style="float: left;width: 230px;"></div>
<div th:id="statuss" style="float: left;width: 120px;margin-left: 10px;"></div>
<button class="btn btn-secondary radius" style="margin-left: 10px;height: 40px;line-height: 40px;" type="button" onclick="updateServers()">批量修改</button>
</div>
<div class="mt-20">
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
<thead>
<tr class="text-c" >
<th width="90">server_id</th>
<th width="130">ip:port</th>
<th width="100">开启类型</th>
<th width="110">服务器名字</th>
<th width="60">渠道</th>
<th width="70">core</th>
<th width="150">开服时间</th>
<th width="100">跨服id当前</th>
<th width="70">状态</th>
<th width="70">新服推荐</th>
<th width="70">版本号</th>
<th width="150">上次重启时间</th>
<!-- <th width="200">游戏端口状态(160*)</th>-->
<!-- <th width="200">支付端口状态(180*)</th>-->
<th width="250">操作</th>
</tr>
</thead>
<tbody>
<tr th:each="obj:${serverInfos}">
<td th:text="${obj.getServer_id()}" style="text-align: center;"></td>
<td th:text="${obj.getIpAndPort()}" style="text-align: center;"></td>
<td th:text="${obj.getOpenType()}" style="text-align: center;"></td>
<td th:text="${obj.getName()}" style="text-align: center;"></td>
<td th:text="${obj.getChannel()}" style="text-align: center;"></td>
<td th:text="${obj.getCoreName()}" style="text-align: center;"></td>
<td th:text="${obj.getOpenTime()}" style="text-align: center;"></td>
<td th:text="${obj.getGroupShow()}" style="text-align: center;"></td>
<th th:switch="${obj.getStatus()}" style="text-align: center;">
<span th:case="-2" class="Hui-iconfont" style="color: #8b0000;">未运营 </span>
<span th:case="0" class="label label-defaunt radius">已关闭</span>
<span th:case="1" class="Hui-iconfont" style="color: #2f332a">维护</span>
<span th:case="2" class="Hui-iconfont" style="color: #00B83F">流畅</span>
<span th:case="3" class="Hui-iconfont" style="color: #9cb945">拥挤</span>
<span th:case="4" class="Hui-iconfont" style="color: #8b0000;">爆满</span>
</th>
<th th:switch="${obj.getIs_new()}" style="text-align: center;">
<span th:case="0" class="label label-defaunt radius">普通</span>
<span th:case="1" class="Hui-iconfont" style="color: #2f332a">新服推荐</span>
</th>
<td th:text="${obj.getVersion()}" style="text-align: center;"></td>
<td th:text="${obj.getRestartTime()}" style="text-align: center;"></td>
<!-- <th th:switch="${obj.getGamePortState()}" style="text-align: center;">-->
<!-- <span th:case="-1" class="Hui-iconfont" style="color:grey;">未检测 </span>-->
<!-- <span th:case="0" class="Hui-iconfont" style="color:red;">关闭 </span>-->
<!-- <span th:case="1" class="Hui-iconfont" style="color:green">开启</span>-->
<!-- </th>-->
<!-- <th th:switch="${obj.getPayPortState()}" style="text-align: center;">-->
<!-- <span th:case="-1" class="Hui-iconfont" style="color:grey;">未检测 </span>-->
<!-- <span th:case="0" class="Hui-iconfont" style="color:red;">关闭 </span>-->
<!-- <span th:case="1" class="Hui-iconfont" style="color:green">开启</span>-->
<!-- </th>-->
<td class="td-manage" style="text-align: center;">
<a href="#" th:id="${obj.getServer_id()}" class="btn btn-success radius" onclick="return editServer(this)">
修改
</a>
<button type="button" th:id="${obj.getServer_id()}" th:attr="status=${obj.getStatusInt()}" onclick="return restartServer(this)" class="btn btn-secondary radius">
重启
</button>
<button type="button" th:id="${obj.getServer_id()}" th:attr="status=${obj.getStatusInt()}" onclick="return cleanupServer(this)" class="btn btn-warning radius">
清库
</button>
<button type="button" th:id="${obj.getServer_id()}" class="btn btn-default radius" onclick="return deleteServer(this)">
删除
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="h-ui.admin/js/H-ui.admin.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<!--多选框-->
<script src="../static/xmSelect/js/xm-select.js"></script>
<script th:inline="javascript">
$('.table-sort').dataTable({
"aaSorting": [[0, "desc"]],//默认第几个排序
"bStateSave": true,//状态保存
"pading": false,
"aoColumnDefs": [
{"orderable": false, "aTargets": [2,4,10,11]}// 不参与排序的列
]
});
var serverInfos = xmSelect.render({
el: '#serverIds', // div的id值
template({name, value}){
return name + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
},
toolbar: { // 工具条【‘全选’,‘清空’】
show: true, // 开启工具条
showIcon: false, // 隐藏工具条的图标
},
tips: '选择服务器', // 让默认值不是“请选择”,而是“选择校区”
filterable: true, // 开启搜索模式默认按照name进行搜索
height:'260px',
model: {
label: {
type: 'block',
block: {
//最大显示数量, 0:不限制
showCount: 1,
//是否显示删除图标
showIcon: true,
}
}
},
prop: {
name: 'name',
value: 'server_id',
},
data: function () {
var infos = [[${serverInfos}]];
for (var i = infos.length - 1; i >= 0; i--) {
// 删除掉所有为2的元素
if(infos[i].statusInt == -2) {
infos.splice(i, 1);
}
}
return infos;
},
});
var serverStatus = xmSelect.render({
el: '#statuss', // div的id值
radio: true,
clickClose: true,
tips: '选择状态', // 让默认值不是“请选择”,而是“选择校区”
height:'260px',
model: {
label: {
type: 'text',
text: {
//左边拼接的字符
left: '',
//右边拼接的字符
right: '',
//中间的分隔符
separator: ', ',
},
}
},
data: [ // 默认是name相当于我们常传的value值和value(相当于我们常传的id)
{name: '停服', value: -5},
{name: '重启', value: -3},
{name: '维护', value: 1},
{name: '流畅', value: 2},
{name: '关闭', value: 0},
{name: '拥挤', value: 3},
{name: '爆满', value: 4},
]
});
// 单个修改服务器
function editServer(obj) {
var serverId = $(obj).attr("id");
window.location = "/toServerInfoEdit?id=" + serverId;
}
// 删除服务器列表
function deleteServer(obj) {
var serverId = $(obj).attr("id");
var msg = "请问是否要删除该服务器:{"+serverId+"},\n\n请确认";
if (confirm(msg) === true) {
$.ajax({
type: "POST",
data: {
"serverId": serverId
},
url: "/deleteServer",
success: function (data) {
if (data === 1) {
alert("操作成功");
window.location.href = '/findServerInfo?quick=0';
}
if (data === 0) {
alert("操作失败");
}
if (data === 2) {
alert("权限不足,操作失败!");
}
}
})
}else {
return false;
}
}
// 重启服务器列表
function restartServer(obj) {
var serverId = $(obj).attr("id");
var status = $(obj).attr("status");
if (status > 1){
alert("服务器处于对外状态,不能重启");
return false;
}
var msg = "请问是否要重启该服务器:{"+serverId+"},\n\n请确认";
if (confirm(msg) === true) {
$.ajax({
type: "POST",
data: {
"serverId": serverId
},
url: "/restartServer",
success: function (data) {
if (data === 1) {
alert("操作成功");
}
if (data === 0) {
alert("操作失败");
}
if (data === 2) {
alert("权限不足,操作失败!");
}
}
})
}else {
return false;
}
}
// 删除服务器列表
function cleanupServer(obj) {
var serverId = $(obj).attr("id");
var status = $(obj).attr("status");
if (status != -2){
alert("服务器未处于未运营状态,不能清库");
return false;
}
var msg = "请问是否要清库该服务器:{"+serverId+"},\n\n请确认";
if (confirm(msg) === false) {
return false;
}
$.ajax({
type: "POST",
data: {
"serverId": serverId
},
url: "/cleanupServer",
success: function (data) {
if (data === 1) {
alert("操作成功");
}
if (data === 0) {
alert("操作失败");
}
if (data === 2) {
alert("权限不足,操作失败!");
}
if (data === 3) {
alert("当前服务器未处于未运营状态,操作失败!");
}
}
})
}
// 批量修改服务器状态
function updateServers() {
// 跨服信息
var serverId = serverInfos.getValue('valueStr');
var status = serverStatus.getValue('valueStr');
if (serverId == "" || status == ""){
alert("服务器或者状态未选择!");
return;
}
$.ajax({
type: "POST",
data: {
"serverId" : serverId,
"status": status
},
url: "/serverListEdit",
success: function (data) {
if (data === 1) {
alert("操作成功");
window.location.href = '/findServerInfo?quick=0';
}
if (data === 0) {
alert("服务器存在未运营状态,操作失败");
}
if (data === 3){
alert("服务器已开启自动开服,无法手动修改,修改请关闭自动开服功能!");
}
}
})
}
</script>
</body>
</html>