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