MCSManager/public/template/server.html

<div id='ServerList' class="OneContainer">
	<div class="row">
		<div class="col-md-12 ">
			<div class="Panel PanelBlack" style="margin-bottom: 8px;">
				<div class="PanelTitle">服务端实例列表</div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-sm-12 PanelItemF">
							<div class="PanelItem" v-on:click="newServerx()">
								<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> 引导创建应用（推荐）
							</div>
							<div class="PanelItem" v-on:click="newServer()">
								<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 直接创建新应用（高级）
							</div>
							<div class="PanelItem" v-on:click="opt_all('start')">
								<span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> 启动所有应用
							</div>
							<div class="PanelItem" v-on:click="opt_all('stop')">
								<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span> 关闭所有应用
							</div>
							<div class="PanelItem" v-on:click="newDocker()">
								<span class="glyphicon glyphicon-send" aria-hidden="true"></span> 创建虚拟镜像
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 新的应用列表 -->
	<div class="container-fluid" style="padding: 0px;">
		<div class="row">
			<div class="col-sm-4" v-for="item of items">
				<a href="javascript:void(0);" class="FontBlack" v-on:click="toConsole(item.serverName);">
					<div class="Panel AppInlineBlockList ">
						<!-- <div class="PanelTitle"></div> -->
						<div class="PanelBody">

							<div class="AppInlineBlockListTitle">
								<h4 v-if="item.data.jarName == '' && !item.data.highCommande">
									<s v-text="item.serverName"></s>
									<span class="AppInlineBlockListTitleTip color-high-red">未配置</span>
								</h4>
								<h4 v-if="item.data.highCommande">
									<span v-text="item.serverName"></span>
									<span class="AppInlineBlockListTitleTip "><span class="FontGray">自定义</span></span>
								</h4>
								<h4 v-if="item.data.jarName != '' && !item.data.highCommande">
									<span v-text="item.serverName"></span>
									<span class="AppInlineBlockListTitleTip"><span class="FontGray">普通端</span></span>
								</h4>
							</div>
							<div class="AppInlineBlockListBody">
								<div class="row">
									<div class="col-xs-9">
										<span v-if="item.data.run" class="color-green"> 状态: 正在运行 </span>
										<span v-else="item.data.run" class="color-red"> 状态: 关闭 </span>
										<hr style="margin-top: 8px;margin-bottom: 10px;">
										<p>
											<span class="FontGray">创建时间:</span>
											<span v-text="item.data.createDate"></span>
										</p>

										<p>
											<span class="FontGray">最后启动:</span>
											<span v-text="item.data.lastDate"></span>
										</p>
										<p>
											<span class="FontGray">时间期限:</span>
											<span v-text="item.data.timeLimitDate || '无限期'"></span>
										</p>
										<p>
											<span class="FontGray">端: </span>
											<span v-text="item.data.jarName"></span>
										</p>
									</div>
									<div class="col-xs-3">
										<a href="javascript:void(0);" class="mbuttonWhite"
											v-on:click="toTerminal(item.serverName);">
											<span class="glyphicon glyphicon-console" aria-hidden="true">
											</span>&nbsp; 终端
										</a>
										<a href="javascript:void(0);" class="mbuttonWhite"
											v-on:click="toConsole(item.serverName);">
											<span class="glyphicon glyphicon-th-large" aria-hidden="true">
											</span>&nbsp; 管理
										</a>
										<a href="javascript:void(0);" class="mbuttonWhite"
											v-on:click="onRedirect('./template/component/server.html','server/get',item.serverName);">
											<span class="glyphicon glyphicon-cog" aria-hidden="true"> </span>&nbsp; 参数
										</a>
										<a href="javascript:void(0);" class="mbuttonWhite"
											v-on:click="toDeleteServer(item.serverName)">
											<span class="glyphicon glyphicon-trash" aria-hidden="true"> </span>&nbsp; 删除
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>

</div>
<style>
	.FontBlack {
		color: #141414;
	}

	.FontGray {
		color: #797676;
	}

	.mbuttonWhite {
		display: block;
		margin-bottom: 2px;
		color: #292929;
		border: 1px solid #797676;
		padding: 2px 4px;
		text-align: center;
		margin-right: 10px;
	}

	.AppInlineBlockListTitle {
		position: relative;
	}

	.AppInlineBlockListTitleMuem {
		position: absolute;
		right: 12px;
		top: 0px;
		font-size: 14px;
		color: rgb(26, 26, 26);
	}

	.AppInlineBlockListTitleMuem>a {
		color: #2e2e2e;
		display: inline-block;
		margin-left: 6px;
		border-radius: 1px;
	}

	.AppInlineBlockListBorderRed {
		border-top: 3px solid rgb(196, 46, 46);
	}

	.AppInlineBlockListBorderBlack {
		border-top: 3px solid #2e2e2e;
	}

	.AppInlineBlockListBorderGreen {
		border-top: 3px solid rgb(37, 146, 37);
	}

	.AppInlineBlockList {
		display: inline-block;
		width: 100%;
		margin: 6px 8px 8px 0px;
		transition: all .4s;
		/* border-top: 3px solid rgb(255, 255, 255); */
	}

	.AppInlineBlockList:hover {
		border: 1px solid rgb(0, 139, 222);
	}

	.AppInlineBlockListTitleTip {
		border: 1px solid rgb(63, 216, 63);
		border-radius: 3px;
		padding: 2px 3px;
		font-weight: 400;
		letter-spacing: 1px;
		font-size: 10px;
	}

	.AppInlineBlockListBody p,
	.AppInlineBlockListBody span {
		/* display: block; */
		margin-bottom: 1px;
	}
</style>


<script>
	MI.rListener('onload', function () {
		VIEW_MODEL.newVue('ServerList', {
			el: '#ServerList',
			methods: {
				toConsole: function (serverName) {
					MCSERVER.listenServername = serverName;
					RES.redirectPage('./template/component/console.html', 'server/console', serverName);
				},
				onRedirect: function (link, api, serverName) {
					RES.redirectPage(link, api, serverName);
				},
				newServer: function () {
					RES.redirectPage('./template/component/newserver.html', null, '');
				},
				newServerx: function () {
					RES.redirectPage('./template/component/newserverx.html', null, '');
				},
				opt_all: function (command) {
					if (confirm("您真的要执行这个影响所有服务器的操作吗？")) {
						WS.sendMsg('server/opt_all', command);
						setTimeout(function () {
							PAGE.refresh();
						}, 2000);
					}
				},
				toDeleteServer: function (serverName) {
					var result = confirm('是否删除 [' + serverName + '] 这个服务端？\n注意: 删除服务器并不会删除服务端文件,只会从控制面板删除！');
					if (!result) return;
					WS.sendMsg('server/delete', serverName);
					RES.redirectPage('./template/server.html', 'server/view');
				},
				toTerminal: function (serverName) {
					//设置全局监听变量
					MCSERVER.listenServername = serverName;
					RES.redirectPage('./template/component/terminal.html', null, '');
				},
				newDocker: function () {
					RES.redirectPage('./template/component/new_docker_image.html', null, '');
				}
			}
		});
	});

	MI.rListener('onend', function () { });
</script>