You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
378 lines
10 KiB
378 lines
10 KiB
<template> |
|
<div class="page"> |
|
<!-- <div class="search_box"> |
|
<el-select class="search_select" placeholder="按服务类别查询"> |
|
</el-select> |
|
<el-input class="search_input" /> |
|
<el-button class="search_button"> |
|
<i class="el-icon-search"></i> |
|
</el-button> |
|
</div> --> |
|
<div class="content_box1"> |
|
<div class="content_title"> |
|
<img src="./icon/icon1.png" alt="" /> |
|
应用服务 |
|
</div> |
|
<div class="flexBox"> |
|
<div |
|
v-for="(item, index) in serviceListData" |
|
:key="index" |
|
class="itemBox" |
|
:style="{ |
|
borderColor: item.color != 'red' ? '#dcdcdc' : '#e14b33', |
|
background: item.color != 'red' ? '' : '#FFF2F2 ', |
|
}" |
|
> |
|
<div |
|
class="item_title" |
|
:style="{ color: item.color != 'red' ? '' : '#E14B33 ' }" |
|
> |
|
{{ item.name }} |
|
</div> |
|
<!-- <div |
|
class="item_EnTitle" |
|
:style="{ color: item.state ? '#999999' : '#E14B33 ' }" |
|
> |
|
AuthApplication |
|
</div> --> |
|
<div |
|
class="color_block" |
|
:style="{ background: item.color != 'red' ? '#4fd069' : '#e14b33' }" |
|
> |
|
<img :src="item.icon" alt=""> |
|
</div> |
|
<div class="item_bottom"> |
|
<div>状态</div> |
|
<div :style="{ color: item.color != 'red' ? '#26B843' : '#E14B33' }"> |
|
{{ item.color != 'red' ? "正常" : "设备异常" }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="content_box2" style="margin-top: 30px; display: flex"> |
|
<div |
|
class="itemBox" |
|
style="width: 240px; height: 216px; position: relative" |
|
v-for="(item, index) in middleListData" |
|
:key="index" |
|
:style="{ |
|
borderColor: item.result != 'result' ? '#dcdcdc' : '#e14b33', |
|
background: item.result != 'result' ? '' : '#FFF2F2 ', |
|
}" |
|
> |
|
<div |
|
class="item_title content_title" |
|
> |
|
<img :src="item.type == 'redis' ? require('./icon/icon2.png') : require('./icon/icon3.png')" alt="" /> |
|
{{ item.type == 'redis' ? 'Redis服务监控' : '数据库监控' }} |
|
</div> |
|
<div |
|
class="color_block" |
|
:style="{ background: item.result != 'result' ? '#4fd069' : '#e14b33' }" |
|
> |
|
<img :src="item.icon" alt=""> |
|
</div> |
|
<div class="item_bottom"> |
|
<div>状态</div> |
|
<div :style="{ color: item.result != 'result' ? '#26B843' : '#E14B33' }"> |
|
{{ item.result != 'result' ? "正常" : "服务已挂" }} |
|
</div> |
|
</div> |
|
</div> |
|
<!-- <div |
|
class="itemBox" |
|
style="width: 240px; height: 216px; position: relative" |
|
> |
|
<div |
|
class="item_title content_title" |
|
style="position: absolute; left: 20px" |
|
> |
|
<img src="./icon/icon2.png" alt="" /> |
|
Redis服务监控 |
|
</div> |
|
<div |
|
style=" |
|
width: 76px; |
|
height: 76px; |
|
background: #4fd069; |
|
margin: 92px 0 14px 0; |
|
" |
|
></div> |
|
<div class="item_bottom"> |
|
<div>状态</div> |
|
<div>正常</div> |
|
</div> |
|
</div> |
|
<div |
|
class="itemBox" |
|
style=" |
|
width: 240px; |
|
height: 216px; |
|
margin-left: 27px; |
|
position: relative; |
|
" |
|
> |
|
<div |
|
class="item_title content_title" |
|
style="position: absolute; left: 20px" |
|
> |
|
<img src="./icon/icon3.png" alt="" /> |
|
数据库监控 |
|
</div> |
|
<div |
|
style=" |
|
width: 76px; |
|
height: 76px; |
|
background: #4fd069; |
|
margin: 92px 0 14px 0; |
|
" |
|
></div> |
|
<div class="item_bottom"> |
|
<div>状态</div> |
|
<div>正常</div> |
|
</div> |
|
</div> --> |
|
</div> |
|
<div class="content_box3"> |
|
<div |
|
class="item_title content_title" |
|
style="margin: 0; width: 100%; margin-bottom: 20px" |
|
> |
|
<img src="./icon/icon5.png" alt="" /> |
|
系统硬件监控 |
|
</div> |
|
<div class="bottom-box"> |
|
<div v-for="(item, index) in serverParamsListData" :key="index" class="itemBox3"> |
|
<div class="ip-title">{{ item[0].ip }}</div> |
|
<div v-for="(i, n) in item" :key="n" class="itemBox3_item"> |
|
<div class="item_title">{{ i.monitorType == 'cpu' ? 'CPU使用率': (i.monitorType == 'memory' ? '内存使用率' : '硬盘使用率') }}</div> |
|
<!-- <div class="item_EnTitle">AuthApplication</div> --> |
|
<div |
|
style=" |
|
width: 57px; |
|
height: 76px; |
|
background: #e8e8e8; |
|
margin: 20px 0 14px 0; |
|
position: relative; |
|
" |
|
> |
|
<div |
|
style=" |
|
background: green; |
|
width: 100%; |
|
height: 33%; |
|
position: absolute; |
|
bottom: 0; |
|
" |
|
:style="i.result == 'result' ? 'height: 66%; background: #F68031' : 'height: 33%; background: green'" |
|
></div> |
|
</div> |
|
<div class="item_bottom"> |
|
<div>状态</div> |
|
<div :style="i.result == 'result' ? 'color: #F68031' : 'color: green'">{{ i.result == 'result' ? '硬件异常' : i.result }}</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { color } from "echarts"; |
|
import { getServiceList, getMiddleList, getServerParamsList } from "@/api/opsVisualization/systemMonitoring"; |
|
|
|
export default { |
|
data() { |
|
return { |
|
list: [ |
|
{ name: "应用服务", value: 1, state: 1 }, |
|
{ name: "应用服务", value: 2, state: 1 }, |
|
{ name: "应用服务", value: 3, state: 0 }, |
|
{ name: "应用服务", value: 4, state: 1 }, |
|
{ name: "应用服务", value: 5, state: 1 }, |
|
{ name: "应用服务", value: 6, state: 1 }, |
|
{ name: "应用服务", value: 7, state: 1 }, |
|
{ name: "应用服务", value: 8, state: 1 }, |
|
{ name: "应用服务", value: 9, state: 1 }, |
|
{ name: "应用服务", value: 10, state: 0 }, |
|
{ name: "应用服务", value: 11, state: 1 }, |
|
{ name: "应用服务", value: 12, state: 1 }, |
|
], |
|
list2: [ |
|
{ name: "应用服务", value: 1, state: 1 }, |
|
{ name: "应用服务", value: 2, state: 1 }, |
|
{ name: "应用服务", value: 3, state: 1 }, |
|
{ name: "应用服务", value: 4, state: 1 }, |
|
{ name: "应用服务", value: 5, state: 1 }, |
|
], |
|
serviceListData: [], |
|
middleListData: [], |
|
serverParamsListData: [], |
|
}; |
|
}, |
|
watch: {}, |
|
computed: {}, |
|
mounted() { |
|
this.init() |
|
}, |
|
methods: { |
|
async init() { |
|
const getServiceListData = await getServiceList() |
|
this.serviceListData = getServiceListData.data.data |
|
const getMiddleListData = await getMiddleList() |
|
this.middleListData = getMiddleListData.data.data |
|
const getServerParamsListData = await getServerParamsList() |
|
let data = getServerParamsListData.data.data; |
|
const groupedData = new Map(); |
|
|
|
data.forEach(item => { |
|
// 获取当前对象的IP地址 |
|
const ip = item.ip; |
|
// 如果Map中还没有这个IP的条目，则创建一个新的数组 |
|
if (!groupedData.has(ip)) { |
|
groupedData.set(ip, []); |
|
} |
|
// 将当前对象添加到对应IP的数组中 |
|
groupedData.get(ip).push(item); |
|
console.log(groupedData); |
|
}); |
|
this.serverParamsListData = Array.from(groupedData.values()); |
|
console.log(this.serverParamsListData) |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.page { |
|
padding: 30px 0 0 238px !important; |
|
} |
|
.search_box { |
|
display: flex; |
|
margin-bottom: 30px; |
|
.search_select { |
|
// width: 138px; |
|
height: 40px; |
|
} |
|
.search_input { |
|
width: 238px; |
|
height: 40px; |
|
margin: 0 14px; |
|
} |
|
/deep/.el-input__inner { |
|
border-radius: 0; |
|
} |
|
.search_button { |
|
width: 50px; |
|
height: 40px; |
|
border-radius: 0; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
.el-icon-search { |
|
font-size: 19px; |
|
color: #c9c9c9; |
|
} |
|
} |
|
} |
|
.content_box1 { |
|
width: 1640px; |
|
// height: 498px; |
|
border: 1px solid #dcdcdc; |
|
padding: 20px 0 0 20px; |
|
} |
|
.content_box3 { |
|
width: 1640px; |
|
// height: 498px; |
|
border: 1px solid #dcdcdc; |
|
padding: 20px; |
|
} |
|
.content_title { |
|
font-size: 20px; |
|
font-weight: bold; |
|
display: flex; |
|
align-items: center; |
|
> img { |
|
margin-right: 13px; |
|
} |
|
} |
|
.flexBox { |
|
display: flex; |
|
margin-top: 20px; |
|
flex-wrap: wrap; |
|
} |
|
.itemBox { |
|
width: 210px; |
|
height: 212px; |
|
border: 1px solid #dcdcdc; |
|
margin: 0 20px 30px 0; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
cursor: pointer; |
|
.color_block { |
|
width: 76px; |
|
height: 76px; |
|
margin: 40px 0 14px 0; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
} |
|
.itemBox3 { |
|
width: 100%; |
|
height: 224px; |
|
// border: 1px solid #dcdcdc; |
|
margin: 0 20px 30px 0; |
|
display: flex; |
|
// flex-direction: column; |
|
align-items: center; |
|
position: relative; |
|
padding-top: 60px; |
|
} |
|
.item_title { |
|
font-weight: bold; |
|
margin: 20px 0 2px 0; |
|
} |
|
.item_EnTitle { |
|
font-size: 14px; |
|
} |
|
.item_bottom { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-between; |
|
> :nth-child(1) { |
|
margin-left: 20px; |
|
font-size: 12px; |
|
color: #333333; |
|
} |
|
> :nth-child(2) { |
|
margin-right: 20px; |
|
font-size: 12px; |
|
color: #26b843; |
|
} |
|
} |
|
.itemBox3_item{ |
|
width: 210px; |
|
height: 182px; |
|
border: 1px solid #dcdcdc; |
|
margin: 0 20px 30px 0; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
.bottom-box{ |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
// max-width: 1280px |
|
} |
|
.ip-title{ |
|
position: absolute; |
|
top: 10px; |
|
left: 10px; |
|
font-weight: bold; |
|
} |
|
</style>
|
|
|