Skip to content
This repository was archived by the owner on Nov 13, 2024. It is now read-only.

Commit c4b3f9a

Browse files
yumao233yumao233
committed
Auto Update code
1 parent 784490d commit c4b3f9a

File tree

9 files changed

+579
-131
lines changed

9 files changed

+579
-131
lines changed

‎src/app/router.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: Copyright(c) 2020 Suwings
33
* @Date: 2021-05-08 22:54:31
4-
* @LastEditTime: 2021-06-30 18:50:53
4+
* @LastEditTime: 2021-07-03 20:22:12
55
* @Description:
66
*/
77
import { createRouter, createWebHistory } from "vue-router";
@@ -10,7 +10,8 @@ import Overview from "./views/Overview";
1010
import Instances from "./views/Instances";
1111
// import About from "./views/About";
1212
import Services from "./views/Services";
13-
import Users from "./views/Users";
13+
// import Users from "./views/Users";
14+
import UserDetail from "./views/UserDetail";
1415

1516
import Analysis from "./views/Analysis";
1617
import News from "./views/News";
@@ -43,9 +44,9 @@ const routes = [
4344
component: Services
4445
},
4546
{
46-
path: "/users",
47-
name: "用户",
48-
component: Users
47+
path: "/private",
48+
name: "个人信息",
49+
component: UserDetail
4950
},
5051
{
5152
path: "/analysis",

‎src/app/views/Instances.vue‎

Lines changed: 136 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,120 @@
11
<!--
22
* @Author: Copyright(c) 2020 Suwings
33
* @Date: 2021-05-08 11:53:54
4-
* @LastEditTime: 2021-07-02 18:53:24
4+
* @LastEditTime: 2021-07-03 22:56:22
55
* @Description:
66
-->
77

88
<template>
9-
<el-row :gutter="20">
10-
<el-col :span="24">
11-
<Panel>
12-
<template #title>应用实例列表</template>
13-
<template #default>
14-
<div class="instance-table-warpper">
15-
<div>
16-
<el-button size="mini" type="success" @click="toNewInstance">
17-
<i class="el-icon-plus"></i> 新建实例
18-
</el-button>
19-
<el-button size="mini" type="primary" @click="refresh">
20-
<i class="el-icon-refresh"></i> 刷新
21-
</el-button>
22-
</div>
23-
<div>
24-
<el-tag style="margin: 0px 12px" v-show="!canInterval" type="danger">
25-
实时刷新已暂停
26-
</el-tag>
27-
<el-button size="mini" type="primary" @click="batOpen">
28-
<i class="el-icon-video-play"></i> 开启
29-
</el-button>
30-
<el-button size="mini" type="primary" @click="batStop">
31-
<i class="el-icon-video-pause"></i> 关闭
32-
</el-button>
33-
<el-button size="mini" type="primary" @click="batKill">
34-
<i class="el-icon-video-pause"></i> 终止
35-
</el-button>
36-
<el-button size="mini" type="danger" @click="batDelete">
37-
<i class="el-icon-delete"></i> 删除
38-
</el-button>
39-
</div>
40-
</div>
41-
<p class="row-mb">
42-
列表只包含成功连接的守护进程中所有实例，其中有 4
43-
个远程主机无法成功链接，请到“分布式服务”查看详情。
44-
</p>
45-
<el-table
46-
:data="instances"
47-
stripe
48-
style="width: 100%"
49-
size="small"
50-
ref="multipleTable"
51-
@selection-change="selectionChange"
52-
>
53-
<el-table-column type="selection" width="55"> </el-table-column>
54-
<!-- <el-table-column prop="instanceUuid" label="UUID" width="240"></el-table-column> -->
55-
<el-table-column prop="nickname" label="实例昵称" width="260"></el-table-column>
56-
<el-table-column prop="status" label="运行状态" width="120"></el-table-column>
57-
<el-table-column prop="type" label="实例类型"></el-table-column>
58-
<el-table-column prop="ip" label="来自于"></el-table-column>
59-
<el-table-column label="操作" style="text-align: center">
60-
<template #default="scope">
61-
<el-button
62-
size="mini"
63-
@click="editInstance(scope.row.serviceUuid, scope.row.instanceUuid)"
64-
>编辑</el-button
65-
>
66-
<el-button
67-
size="mini"
68-
@click="toInstance(scope.row.serviceUuid, scope.row.instanceUuid)"
69-
>管理</el-button
70-
>
71-
<!-- <el-button size="mini" type="danger" @click="delInstance(scope.row)">
9+
<Panel>
10+
<template #title>分布式服务状态</template>
11+
<template #default>
12+
<el-row :gutter="20">
13+
<el-col :span="6" style="margin: -12px 0px">
14+
<LineLabel>
15+
<template #title>已连接远程服务: </template>
16+
<template #default> {{ availableService.length }} 个 </template>
17+
</LineLabel>
18+
</el-col>
19+
<el-col :span="6" style="margin: -12px 0px">
20+
<LineLabel>
21+
<template #title>不可用远程服务: </template>
22+
<template #default> {{ unavailableService.length }} 个 </template>
23+
</LineLabel>
24+
</el-col>
25+
<el-col :span="6" style="margin: -12px 0px">
26+
<LineLabel>
27+
<template #title>实例总数: </template>
28+
<template #default> {{ instances.length }} 个 </template>
29+
</LineLabel>
30+
</el-col>
31+
<el-col :span="6" style="margin: -12px 0px">
32+
<LineLabel>
33+
<template #title>运行中: </template>
34+
<template #default> {{ startedInstance }} 个 </template>
35+
</LineLabel>
36+
</el-col>
37+
</el-row>
38+
<div v-show="unavailableService.length != 0">
39+
<span style="color: red">
40+
<b>警告：</b> 检测到您有一个或以上远程服务无法建立连接，请前往
41+
<a class="alink" href="./services">分布式服务</a>
42+
功能确认各个远程服务器状态，若不修复此问题，则有部分远程实例您可能无法访问和显示。
43+
</span>
44+
</div>
45+
</template>
46+
</Panel>
47+
48+
<Panel>
49+
<template #title>分布式应用实例列表</template>
50+
<template #default>
51+
<div class="instance-table-warpper">
52+
<div>
53+
<el-button size="mini" type="success" @click="toNewInstance">
54+
<i class="el-icon-plus"></i> 新建实例
55+
</el-button>
56+
<el-button size="mini" type="primary" @click="refresh">
57+
<i class="el-icon-refresh"></i> 刷新
58+
</el-button>
59+
</div>
60+
<div>
61+
<el-tag style="margin: 0px 12px" v-show="!canInterval" type="danger">
62+
实时刷新已暂停
63+
</el-tag>
64+
<el-button size="mini" type="primary" @click="batOpen">
65+
<i class="el-icon-video-play"></i> 开启
66+
</el-button>
67+
<el-button size="mini" type="primary" @click="batStop">
68+
<i class="el-icon-video-pause"></i> 关闭
69+
</el-button>
70+
<el-button size="mini" type="primary" @click="batKill">
71+
<i class="el-icon-video-pause"></i> 终止
72+
</el-button>
73+
<el-button size="mini" type="danger" @click="batDelete">
74+
<i class="el-icon-delete"></i> 删除
75+
</el-button>
76+
</div>
77+
</div>
78+
79+
<el-table
80+
:data="instances"
81+
stripe
82+
style="width: 100%"
83+
size="small"
84+
ref="multipleTable"
85+
@selection-change="selectionChange"
86+
>
87+
<el-table-column type="selection" width="55"> </el-table-column>
88+
<!-- <el-table-column prop="instanceUuid" label="UUID" width="240"></el-table-column> -->
89+
<el-table-column prop="nickname" label="实例昵称" width="260"></el-table-column>
90+
<el-table-column prop="status" label="运行状态" width="120"></el-table-column>
91+
<el-table-column prop="type" label="实例类型"></el-table-column>
92+
<el-table-column prop="ip" label="来自于"></el-table-column>
93+
<el-table-column label="操作" style="text-align: center">
94+
<template #default="scope">
95+
<el-button
96+
size="mini"
97+
@click="editInstance(scope.row.serviceUuid, scope.row.instanceUuid)"
98+
>编辑</el-button
99+
>
100+
<el-button
101+
size="mini"
102+
@click="toInstance(scope.row.serviceUuid, scope.row.instanceUuid)"
103+
>管理</el-button
104+
>
105+
<!-- <el-button size="mini" type="danger" @click="delInstance(scope.row)">
72106
删除
73107
</el-button> -->
74-
</template>
75-
</el-table-column>
76-
</el-table>
77-
</template>
78-
</Panel>
79-
</el-col>
80-
</el-row>
108+
</template>
109+
</el-table-column>
110+
</el-table>
111+
</template>
112+
</Panel>
81113
</template>
82114

83115
<script>
84116
import Panel from "../../components/Panel";
117+
import LineLabel from "../../components/LineLabel";
85118
import { ElMessage } from "element-plus";
86119
import axios from "axios";
87120
import { API_SERVICE, API_URL } from "../service/common";
@@ -92,7 +125,12 @@ export default {
92125
canInterval: true,
93126
interval: null,
94127
instances: [],
95-
multipleSelection: [] // 表格多选属性
128+
remoteIps: [],
129+
remoteObjects: [],
130+
multipleSelection: [], // 表格多选属性
131+
availableService: [],
132+
unavailableService: [],
133+
startedInstance: 0
96134
};
97135
},
98136
async mounted() {
@@ -107,7 +145,7 @@ export default {
107145
if (this.interval === null) {
108146
this.interval = setInterval(() => {
109147
if (this.canInterval) this.render();
110-
}, 2000);
148+
}, 5000);
111149
}
112150
},
113151
stopAjaxTask() {
@@ -121,22 +159,41 @@ export default {
121159
async render() {
122160
const result = await axios.get(API_SERVICE);
123161
console.log("响应:", result.data.data);
124-
const remoteObjects = result.data.data;
125-
remoteObjects.forEach((v) => {
162+
this.remoteObjects = result.data.data;
163+
// 初始化数据模型
164+
this.instances = [];
165+
this.remoteIps = [];
166+
this.multipleSelection = []; // 表格多选属性
167+
this.availableService = [];
168+
this.unavailableService = [];
169+
this.startedInstance = 0;
170+
// 开始遍历解析数据
171+
this.remoteObjects.forEach((v) => {
126172
const fromIP = v.ip;
127173
const fromPort = v.port;
174+
const addr = `${v.ip}:${v.port}`;
128175
const instances = v.instances;
129176
const serviceUuid = v.uuid;
130-
// const available = v.available;
177+
const available = v.available;
178+
// 根据可用性识别出所有可用/不可用服务
179+
if (available) {
180+
this.availableService.push(addr);
181+
} else {
182+
this.unavailableService.push(addr);
183+
}
131184
let statusText = null;
132-
this.instances = [];
133185
instances.forEach((instance) => {
134186
//Busy=-1;Stop=0;Stopping=1;Starting=2;Running=3;
135187
if (instance.status == -1) statusText = "忙碌";
136188
if (instance.status == 0) statusText = "未运行";
137189
if (instance.status == 1) statusText = "停止中";
138190
if (instance.status == 2) statusText = "启动中";
139191
if (instance.status == 3) statusText = "正在运行";
192+
193+
// 计算正在运行的实例
194+
if (instance.status != 0) this.startedInstance++;
195+
196+
// 压入所有实例
140197
this.instances.push({
141198
instanceUuid: instance.instanceUuid,
142199
serviceUuid: serviceUuid,
@@ -148,6 +205,7 @@ export default {
148205
});
149206
});
150207
},
208+
151209
// 表格多选函数
152210
selectionChange(v) {
153211
if (v.length == 0) this.canInterval = true;
@@ -199,7 +257,7 @@ export default {
199257
console.log("Kill:", this.multipleSelection);
200258
}
201259
},
202-
components: { Panel }
260+
components: { Panel, LineLabel }
203261
};
204262
</script>
205263

0 commit comments

Comments
 (0)