1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| <template>
| <div class="app-container">
| <el-col v-for="(i, index) in pages" :key="index" :xs="12" :sm="6">
| <el-card class="box-card" :style="{background: i.bgc}" @click.native="open(i.url)">
| <div class="text item">
| <div class="left">
| <img :src="resolveIcon(i.icon)" alt="">
| </div>
| <div class="right">
| <span class="header" :style="{color: i.c}">{{ i.name }}</span> <br>
| <span>{{ i.description }}</span>
| </div>
| </div>
| </el-card>
| </el-col>
| </div>
| </template>
| <script>
| import { pages } from '@/settings'
|
| export default {
| name: 'MonitorDashboard',
| data() {
| return {
| pages: [
| {
| icon: 'nacos.svg',
| name: 'Nacos面板',
| url: pages.nacosUrl,
| description: 'Nacos，微服务注册中心&配置中心',
| c: '#1890ff',
| bgc: 'rgba(236,251,252,0.3)'
| },
| {
| icon: 'elk.svg',
| name: 'ELK面板',
| url: pages.kibanaUrl,
| description: 'ELK，微服务日志中心，统一管理日志',
| c: '#1890ff',
| bgc: 'rgba(236,251,252,0.3)'
| },
| {
| icon: 'skywalking.svg',
| name: 'SkyWalking面板',
| url: pages.skywalkingUrl,
| description: 'SkyWalking，追踪微服务请求',
| c: '#1890ff',
| bgc: 'rgba(236,251,252,0.3)'
| },
| {
| icon: 'grafana.svg',
| name: 'Grafana面板',
| url: pages.grafanaUrl,
| description: 'Grafana，监控Redis,Docker,MySQL等',
| c: '#1890ff',
| bgc: 'rgba(236,251,252,0.3)'
| },
| {
| icon: 'doc.svg',
| name: 'Document中心',
| url: pages.docUrl,
| description: 'Knife4j，微服务API接口文档中心',
| c: '#1890ff',
| bgc: 'rgba(236,251,252,0.3)'
| },
| {
| icon: 'admin.svg',
| name: 'Admin面板',
| url: pages.springBootAdminUrl,
| description: 'Admin，基于SBA的微服务监控中心',
| c: '#1890ff',
| bgc: 'rgba(236,251,252,0.3)'
| },
| {
| icon: 'tx.svg',
| name: 'Tx面板',
| url: pages.txUrl,
| description: 'Tx-Manager，分布式事务管理中心',
| c: '#1890ff',
| bgc: 'rgba(236,251,252,0.3)'
| }
| ]
| }
| },
| methods: {
| resolveIcon(icon) {
| return require(`@/assets/icons/${icon}`)
| },
| open(url) {
| window.open(url, '_blank')
| }
| }
| }
| </script>
| <style scoped>
| .item {
| display: flex;
| flex-wrap: wrap;
| }
| .app-container {
| display: inline-block;
| width: 98.6%;
| }
| .box-card {
| margin: 13px;
| cursor: pointer;
| }
| .header {
| font-weight: 600;
| font-size: 1rem;
| display: inline-flex;
| margin-bottom: 8px;
| }
| .left {
| height: 100%;
| }
| img {
| width: 3.4rem;
| display: inline-block;
| }
| .right {
| margin-left: 10px
| }
| </style>
|
|
