服务监控页面中的服务增加状态显示，离线只显示服务信息，不显示设备信息
This commit is contained in:
home
@@ -1,88 +1,156 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<div>
|
||||
<el-card class="box-card" v-for="(item, index) in serverData" :key="index">
|
||||
<div slot="header" class="device-header">
|
||||
<span>前置服务 {{ item.server_name }} ({{ item.url }}:{{ item.port }} )</span>
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6" v-for="(i, k) in item.devices" :key="k">
|
||||
<el-popover placement="top" trigger="click">
|
||||
<el-menu @select="(index) => setDeviceExec(i, index, item)"
|
||||
:style="{ 'borderRight': 'none' }">
|
||||
<el-menu-item index="device_stop">
|
||||
<span slot="title">暂停</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="device_continue">
|
||||
<span slot="title">启动</span>
|
||||
</el-menu-item>
|
||||
|
||||
</el-menu>
|
||||
<el-card slot="reference"
|
||||
:class="{ 'box-card': true, 'online': i.deviceStatus, 'offline': !i.deviceStatus }">
|
||||
<div slot="header" class="header-title">
|
||||
<span>{{ i.device_name }}</span>
|
||||
</div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
|
||||
<span>设备类型</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left:0px;">：{{ i.device_type }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
|
||||
<span>IP/端口</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left:0px;">：{{ i.config }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
|
||||
<span>活动时间</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left:0px;">：{{ i.startTime }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
|
||||
<span>采集耗时</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left:0px;">：{{ i.captureSpendTime }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
|
||||
<span>成功次数</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left:0px;">：{{ i.success }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
|
||||
<span>失败次数</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left:0px;">：{{ i.failed }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-alert v-if="i.failedMsg" :title="i.failedMsg" type="error" :closable="false">
|
||||
</el-alert>
|
||||
<div v-else style="height:35px;"></div>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<d2-container>
|
||||
<div>
|
||||
<el-card
|
||||
class="box-card"
|
||||
v-for="(item, index) in serverData"
|
||||
:key="index"
|
||||
>
|
||||
<div slot="header" class="device-header">
|
||||
<span
|
||||
>前置服务 {{ item.server_name }} ({{ item.url }}:{{ item.port }} )
|
||||
<el-tag
|
||||
:color="serveStatus[item.status].backgroundColor"
|
||||
:style="{
|
||||
color: serveStatus[item.status].textColor,
|
||||
borderColor: serveStatus[item.status].borderColor,
|
||||
}"
|
||||
>
|
||||
{{ serveStatus[item.status].name }}
|
||||
</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
</d2-container>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6" v-for="(i, k) in item.devices" :key="k">
|
||||
<el-popover placement="top" trigger="click">
|
||||
<el-menu
|
||||
@select="(index) => setDeviceExec(i, index, item)"
|
||||
:style="{ borderRight: 'none' }"
|
||||
>
|
||||
<el-menu-item index="device_stop">
|
||||
<span slot="title">暂停</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="device_continue">
|
||||
<span slot="title">启动</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<el-card
|
||||
slot="reference"
|
||||
:class="{
|
||||
'box-card': true,
|
||||
online: i.deviceStatus,
|
||||
offline: !i.deviceStatus,
|
||||
}"
|
||||
>
|
||||
<div slot="header" class="header-title">
|
||||
<span>{{ i.device_name }}</span>
|
||||
</div>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
:span="5"
|
||||
style="padding-right: 0px; margin-bottom: 5px"
|
||||
>
|
||||
<span>设备类型</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left: 0px"
|
||||
>：{{ i.device_type }}</el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
:span="5"
|
||||
style="padding-right: 0px; margin-bottom: 5px"
|
||||
>
|
||||
<span>IP/端口</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left: 0px"
|
||||
>：{{ i.config }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
:span="5"
|
||||
style="padding-right: 0px; margin-bottom: 5px"
|
||||
>
|
||||
<span>活动时间</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left: 0px"
|
||||
>：{{ i.startTime }}</el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
:span="5"
|
||||
style="padding-right: 0px; margin-bottom: 5px"
|
||||
>
|
||||
<span>采集耗时</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left: 0px"
|
||||
>：{{ i.captureSpendTime }}</el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
:span="5"
|
||||
style="padding-right: 0px; margin-bottom: 5px"
|
||||
>
|
||||
<span>成功次数</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left: 0px"
|
||||
>：{{ i.success }}</el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
:span="5"
|
||||
style="padding-right: 0px; margin-bottom: 5px"
|
||||
>
|
||||
<span>失败次数</span>
|
||||
</el-col>
|
||||
<el-col :span="14" style="padding-left: 0px"
|
||||
>：{{ i.failed }}</el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-alert
|
||||
v-if="i.failedMsg"
|
||||
:title="i.failedMsg"
|
||||
type="error"
|
||||
:closable="false"
|
||||
>
|
||||
</el-alert>
|
||||
<div v-else style="height: 35px"></div>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { unset, map } from 'lodash'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
serverData: [],
|
||||
deviceData: [],
|
||||
deviceCommand: {}
|
||||
deviceCommand: {},
|
||||
serveStatus: {
|
||||
online: {
|
||||
name: '在线',
|
||||
textColor: '#67c23a',
|
||||
backgroundColor: '#f0f9eb',
|
||||
borderColor: '#e1f3d8'
|
||||
},
|
||||
offline: {
|
||||
name: '离线',
|
||||
textColor: '#67c23a',
|
||||
backgroundColor: '#f0f9eb',
|
||||
borderColor: '#e1f3d8'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -109,33 +177,43 @@ export default {
|
||||
async getServe () {
|
||||
this.serverData = await this.$api.QUERY_SERVERS()
|
||||
this.serverData.forEach((element, index) => {
|
||||
this.$api.GET_SERVE_DEVICE_MONITORING('http://' + element.url + ':' + element.port, 'admin', process.env.VUE_APP_HSLSERVER_PASSWORD).then((deviceStatus) => {
|
||||
if (deviceStatus.IsSuccess) {
|
||||
const data = deviceStatus.Content
|
||||
unset(data, '__status')
|
||||
const deviceData = map(data, element => {
|
||||
const config = element.__config.split(' ')
|
||||
return {
|
||||
config: config.length > 0 ? config[2] : '',
|
||||
startTime: element.__startTime,
|
||||
captureSpendTime: element.__captureSpendTime,
|
||||
success: element.__success,
|
||||
failed: element.__failed,
|
||||
failedMsg: element.__failedMsg,
|
||||
deviceStatus: element.__requestEnable,
|
||||
device_name: element.__name,
|
||||
device_type: config.length > 0 ? config[0] : ''
|
||||
}
|
||||
})
|
||||
this.$set(this.serverData[index], 'devices', deviceData)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
message: this.serverData[index].name + '服务请求失败',
|
||||
type: 'error'
|
||||
this.$api
|
||||
.GET_SERVE_DEVICE_MONITORING(
|
||||
'http://' + element.url + ':' + element.port,
|
||||
'admin',
|
||||
process.env.VUE_APP_HSLSERVER_PASSWORD
|
||||
)
|
||||
.then((deviceStatus) => {
|
||||
if (deviceStatus.IsSuccess) {
|
||||
const data = deviceStatus.Content
|
||||
unset(data, '__status')
|
||||
const deviceData = map(data, (element) => {
|
||||
const config = element.__config.split(' ')
|
||||
return {
|
||||
config: config.length > 0 ? config[2] : '',
|
||||
startTime: element.__startTime,
|
||||
captureSpendTime: element.__captureSpendTime,
|
||||
success: element.__success,
|
||||
failed: element.__failed,
|
||||
failedMsg: element.__failedMsg,
|
||||
deviceStatus: element.__requestEnable,
|
||||
device_name: element.__name,
|
||||
device_type: config.length > 0 ? config[0] : ''
|
||||
}
|
||||
})
|
||||
this.$set(this.serverData[index], 'devices', deviceData)
|
||||
this.$set(this.serverData[index], 'status', 'online')
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.serverData[index].name + '服务请求失败',
|
||||
type: 'error'
|
||||
})
|
||||
this.$set(this.serverData[index], 'status', 'offline')
|
||||
|
||||
// this.$delete(this.serverData, index);
|
||||
})
|
||||
this.$delete(this.serverData, index)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -146,35 +224,34 @@ export default {
|
||||
</script>
|
||||
<style scoped>
|
||||
.box-card {
|
||||
margin: 5px 0px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin: 5px 0px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.device-header {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.online {
|
||||
background-color: #67c23a;
|
||||
background-color: #67c23a;
|
||||
}
|
||||
|
||||
.offline {
|
||||
background-color: #666;
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
|
||||
font-size: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user