<template>
|
<div class="monitor">
|
<split-pane :min-percent="10" :default-percent="17" split="vertical">
|
<template slot="paneL">
|
<div class="organ_tree_ct">
|
<organ-tree ref="orgTree" @on-tree-node-select="onTreeNodeSelect" @tree-data-list="treeDataList"></organ-tree>
|
</div>
|
</template>
|
<template slot="paneR">
|
<a-row>
|
<a-col :span="7" :offset="1" v-for="item in carData" :key="item.deviceId">
|
<a-card>
|
<div class="top-title">
|
<div>{{ item.deviceName }}</div>
|
<div :class="item.status == 1 ? 'onlineStatus' : 'offlineStatus'">
|
{{ item.status == 1 ? '在线' : '离线' }}
|
</div>
|
</div>
|
<!-- 状态详情 -->
|
<div class="top-title">
|
<div class="left-text">CPU</div>
|
<a-progress :percent="item.cpu" :showInfo="false" />
|
<div class="right-text">{{ item.cpu }}%</div>
|
</div>
|
<div class="top-title">
|
<div class="left-text">内存</div>
|
<a-progress :percent="item.memory" :showInfo="false" />
|
<div class="right-text">{{ item.memory }}%</div>
|
</div>
|
<div class="top-title">
|
<div class="left-text">硬盘</div>
|
<a-progress :percent="item.disk" :showInfo="false" />
|
<div class="right-text">{{ item.disk }}%</div>
|
</div>
|
<div class="top-title">
|
<div class="left-text">NPU</div>
|
<a-progress :percent="item.npu" :showInfo="false" />
|
<div class="right-text">{{ item.npu }}%</div>
|
</div>
|
<div class="top-title">
|
<div class="left-text">LAN+网络IN</div>
|
<a-progress :percent="item.lanIn" :showInfo="false" />
|
<div class="right-text">{{ item.lanIn }}Mbps</div>
|
</div>
|
<div class="top-title">
|
<div class="left-text">LAN+网络OU</div>
|
<a-progress :percent="item.lanOut" :showInfo="false" />
|
<div class="right-text">{{ item.lanOut }}Mbps</div>
|
</div>
|
<div class="top-title">
|
<div class="left-text">WAN+网络IU</div>
|
<a-progress :percent="item.wanIn" :showInfo="false" />
|
<div class="right-text">{{ item.wanIn }}Mbps</div>
|
</div>
|
<div class="top-title">
|
<div class="left-text">WAN+网络OUT</div>
|
<a-progress :percent="item.wanOut" :showInfo="false" />
|
<div class="right-text">{{ item.wanOut }}Mbps</div>
|
</div>
|
<div class="top-title">
|
<div class="left-text">温度</div>
|
<a-progress :percent="item.temperature" :showInfo="false" />
|
<div class="right-text">{{ item.temperature }}℃</div>
|
</div>
|
</a-card>
|
</a-col>
|
<!-- 没数据占位图 -->
|
<a-col :span="23" :offset="1" v-if="carData.length === 0">
|
<a-card class="empty">
|
<a-empty />
|
</a-card>
|
</a-col>
|
</a-row>
|
<!-- 分页器 -->
|
<div class="foot-pagination">
|
<a-pagination
|
v-if="total !== 0"
|
:total="total"
|
:show-total="(total) => `总 ${total} 条`"
|
:page-size="queryForm.pageSize"
|
:default-current="queryForm.pageNo"
|
@change="pageChange"
|
/>
|
</div>
|
</template>
|
</split-pane>
|
</div>
|
</template>
|
|
<script>
|
import OrganTree from '../tools/OrganTree'
|
import splitPane from 'vue-splitpane'
|
import { postAction, putAction, getAction } from '@tievd/cube-block/lib/api/manage'
|
// import { JeecgListMixin } from '@tievd/cube-block/lib/mixins/JeecgListMixin'
|
export default {
|
name: 'deviceMonitor',
|
// mixins: [JeecgListMixin],
|
components: {
|
OrganTree,
|
splitPane,
|
},
|
created() {
|
this.treeDataList()
|
},
|
data() {
|
return {
|
queryForm: {
|
pageNo: 1,
|
pageSize: 6,
|
orgCode: '',
|
deviceType: 1,
|
},
|
url: {
|
list: '/jyz/deviceStatus/list',
|
},
|
selectOrg: '',
|
total: 0,
|
carData: [],
|
}
|
},
|
methods: {
|
// 初始化页面
|
initPage() {
|
getAction(this.url.list, this.queryForm).then((res) => {
|
// console.log(res)
|
if (res.code === 200) {
|
if (!res.result) return
|
const { result } = res
|
if (result.records && result.records.length !== 0) {
|
result.records.forEach((item) => {
|
if (item.status === 1) {
|
item.cpu = parseFloat(item.cpu)
|
item.disk = parseFloat(item.disk)
|
item.lanIn = parseFloat(item.lanIn)
|
item.lanOut = parseFloat(item.lanOut)
|
item.memory = parseFloat(item.memory)
|
item.npu = parseFloat(item.npu)
|
item.temperature = parseFloat(item.temperature)
|
item.wanIn = parseFloat(item.wanIn)
|
item.wanOut = parseFloat(item.wanOut)
|
} else {
|
item.cpu = 0
|
item.disk = 0
|
item.lanIn = 0
|
item.lanOut = 0
|
item.memory = 0
|
item.npu = 0
|
item.temperature = 0
|
item.wanIn = 0
|
item.wanOut = 0
|
}
|
})
|
this.total = Number(result.total)
|
this.carData = result.records
|
} else {
|
this.carData = []
|
this.total = 0
|
}
|
}
|
})
|
},
|
onTreeNodeSelect(id, node) {
|
// console.log(id)
|
// console.log(node)
|
// this.selectOrg = this.queryParam.orgCode = node.selectedNodes[0].data.props.orgCode;
|
// console.log(id, this.selectOrg);
|
// this.loadData();
|
this.queryForm.orgCode = node.selectedNodes[0].data.props.orgCode
|
this.initPage()
|
},
|
treeDataList(data) {
|
if (data && data.children.length !== 0) {
|
this.queryForm.orgCode = data.orgCode
|
this.initPage()
|
}
|
},
|
//监听分页
|
pageChange(page) {
|
this.queryForm.pageNo = page
|
this.initPage()
|
},
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@import '~@assets/less/common.less';
|
.organ_tree_ct {
|
height: 74vh;
|
}
|
.monitor{
|
margin-right: 25px;
|
}
|
.top-title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
line-height: 30px;
|
.left-text {
|
width: 130px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-size: 12px;
|
padding-right: 5px;
|
}
|
.right-text {
|
width: 100px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
|
.ant-progress-line {
|
width: 80%;
|
padding-right: 20px;
|
}
|
.ant-card {
|
border-radius: 10px;
|
margin-bottom: 20px;
|
background: linear-gradient(40deg, rgba(38, 43, 53, 0.6), rgba(31, 35, 43, 0.6));
|
border: 1px solid #343a44;
|
box-shadow: 0px 5px 22px 0px rgba(0, 0, 0, 0.1);
|
border-radius: 8px;
|
}
|
|
.onlineStatus {
|
color: #1890ff;
|
}
|
.offlineStatus {
|
color: gray;
|
}
|
.foot-pagination {
|
display: flex;
|
justify-content: center;
|
}
|
.empty {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 74vh;
|
}
|
</style>
|
