parent
6c430e7835
commit
538b2711e8
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>${title?default("管理系统")}</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<script src="${context}/static/dist/lib.min.js" type="text/javascript"></script>
|
||||
<script src="${context}/static/dist/index.min.js" type="text/javascript"></script>
|
||||
<link href="${context}/static/dist/index.min.css" rel="stylesheet"/>
|
||||
<link href="${context}/static/css/base.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<#include controlHolder("nav")/>
|
||||
<#include screenHolder()/>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,232 @@
|
||||
<div id="app" v-cloak>
|
||||
<el-card class="box-card control">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<a>Nginx 控制中心</a>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<a @click="nginxStart">
|
||||
<el-image v-if="run" :src="'${UrlUtil.getUrl('/static/img/start_.png')}'"
|
||||
style="width: 50px; height: 50px"
|
||||
fit="fill"></el-image>
|
||||
<el-image v-if="!run" :src="'${UrlUtil.getUrl('/static/img/start.png')}'"
|
||||
style="width: 50px; height: 50px"
|
||||
fit="fill"></el-image>
|
||||
</a>
|
||||
<a @click="nginxStop">
|
||||
<el-image v-if="run" :src="'${UrlUtil.getUrl('/static/img/stop.png')}'"
|
||||
style="width: 50px; height: 50px"
|
||||
fit="fill"></el-image>
|
||||
<el-image v-if="!run" :src="'${UrlUtil.getUrl('/static/img/stop_.png')}'"
|
||||
style="width: 50px; height: 50px"
|
||||
fit="fill"></el-image>
|
||||
</a>
|
||||
<a @click="nginxReload">
|
||||
<el-image v-if="run" :src="'${UrlUtil.getUrl('/static/img/reload.png')}'"
|
||||
style="width: 50px; height: 50px"
|
||||
fit="fill"></el-image>
|
||||
<el-image v-if="!run" :src="'${UrlUtil.getUrl('/static/img/reload_.png')}'"
|
||||
style="width: 50px; height: 50px"
|
||||
fit="fill"></el-image>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card pane-list" style="width: 260px;height: 140px" v-for="item in services">
|
||||
<div class="pane">
|
||||
<div class="img">
|
||||
<el-image style="width: 60px;height:60px" src="/static/img/http.png"></el-image>
|
||||
|
||||
<a>{{item.title}}</a>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<el-switch
|
||||
v-model="item.valid"
|
||||
active-color="#13ce66"
|
||||
active-text="启用"
|
||||
inactive-text="暂停">
|
||||
inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</div>
|
||||
|
||||
<div class="more" @click="toSet(item)">
|
||||
<el-button type="text" size="mini"><i class="el-icon-s-operation"></i></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<style>
|
||||
#app {
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
width: 1080px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.control a:first-child {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.control a {
|
||||
display: inline-block;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.control a:hover {
|
||||
background: #e7e7e7;
|
||||
}
|
||||
|
||||
.control a:first-child:hover {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.pane-list {
|
||||
box-shadow: 0 0 0 0 inset !important;
|
||||
-webkit-box-shadow: 0 0 0 0 inset !important;
|
||||
}
|
||||
|
||||
.pane-list:hover {
|
||||
box-shadow: 0 0 70px -40px inset !important;
|
||||
-webkit-box-shadow: 0 0 70px -40px inset !important;
|
||||
}
|
||||
|
||||
.pane {
|
||||
width: 240px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pane .img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pane a {
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
font-family: "微软雅黑";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pane .info {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pane .more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var app = new Vue({
|
||||
mixins: [mixinBase, mixinForMgr],
|
||||
el: "#app",
|
||||
data: {
|
||||
services: [],
|
||||
run: ${run?default('false')}
|
||||
},
|
||||
methods: {
|
||||
onLoadService: function () {
|
||||
var param = {
|
||||
pageSize: 0
|
||||
};
|
||||
new Ajax("admin", "services", "find").post(param, function (response) {
|
||||
if (response.errors.length > 0) {
|
||||
nav.e(response.errors[0].message);
|
||||
} else {
|
||||
this.services = response.result;
|
||||
}
|
||||
}.bind(this))
|
||||
},
|
||||
toSet: function (item) {
|
||||
nav.openTab({
|
||||
title: '映射配置',
|
||||
name: 'mapping' + item.id,
|
||||
url: '/admin/locations.htm?servicesId=' + item.id
|
||||
})
|
||||
},
|
||||
startMonitor: function () {
|
||||
if (window.EventSource) {
|
||||
window.evtSource = new EventSource('${UrlUtil.getUrl("/sse/1")}');
|
||||
window.evtSource.addEventListener('message', function (e) {
|
||||
|
||||
var msg = JSON.parse(e.data);
|
||||
if (msg.type == 'NGINX_STATE') {//状态推送
|
||||
if (this.run != msg.object.run) {
|
||||
|
||||
this.$notify.info({
|
||||
title: '提示',
|
||||
message: "Nginx 运行状态发生变化。",
|
||||
duration: 5000
|
||||
});
|
||||
this.run = msg.object.run;
|
||||
}
|
||||
}
|
||||
}.bind(this))
|
||||
}
|
||||
},
|
||||
nginxStart: function () {
|
||||
new Ajax("conf", "nginx", "start").post(function (response) {
|
||||
if (response.errors.length > 0) {
|
||||
nav.e(response.errors[0].message);
|
||||
} else {
|
||||
this.onFind();
|
||||
this.form.dialog = false;
|
||||
}
|
||||
}.bind(this))
|
||||
},
|
||||
nginxStop: function () {
|
||||
new Ajax("conf", "nginx", "stop").post(function (response) {
|
||||
if (response.errors.length > 0) {
|
||||
nav.e(response.errors[0].message);
|
||||
} else {
|
||||
this.onFind();
|
||||
this.form.dialog = false;
|
||||
}
|
||||
}.bind(this))
|
||||
},
|
||||
configFlush: function () {
|
||||
ajax.configFlush();
|
||||
},
|
||||
onRefresh: function () {
|
||||
this.configFlush();
|
||||
this.onFind();
|
||||
},
|
||||
nginxReload: function () {
|
||||
new Ajax("conf", "nginx", "reload").post(function (response) {
|
||||
if (response.errors.length > 0) {
|
||||
nav.e(response.errors[0].message);
|
||||
} else {
|
||||
|
||||
}
|
||||
}.bind(this))
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.onLoadService();
|
||||
this.startMonitor();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in new issue