<template>
|
<flex-layout direction="row">
|
<div class="main">
|
<div class="item">
|
<div class="inner">
|
<chart-wrapper title="服务器磁盘">
|
<pie-chart ref="pieDisk" id="pieDisk"></pie-chart>
|
</chart-wrapper>
|
</div>
|
</div>
|
<div class="item">
|
<div class="inner">
|
<chart-wrapper title="cpu使用率">
|
<pie-chart ref="pieCPU" id="pieCPU"></pie-chart>
|
</chart-wrapper>
|
</div>
|
</div>
|
<div class="item">
|
<div class="inner">
|
<chart-wrapper title="服务器内存">
|
<pie-chart ref="pieMemory" id="pieMemory"></pie-chart>
|
</chart-wrapper>
|
</div>
|
</div>
|
<div class="item">
|
<div class="inner">
|
<chart-wrapper title="DBM">
|
<pie-chart ref="pieDBM" id="pieDBM"></pie-chart>
|
</chart-wrapper>
|
</div>
|
</div>
|
</div>
|
<div class="right" slot="footer">
|
<el-row :gutter="10" type="flex" justify="end">
|
<el-tooltip effect="dark" content="短信猫和声光告警的配置">
|
<el-button
|
type="warning"
|
icon="iconfont el-icon-gaojing"
|
circle
|
@click="alarmAlert"
|
></el-button>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="换肤">
|
<el-button
|
type="primary"
|
icon="iconfont el-icon-pifu"
|
circle
|
@click="handleClick"
|
></el-button>
|
</el-tooltip>
|
</el-row>
|
<div class="table-status">
|
<flex-box title="线程状态" size="mini">
|
<el-table stripe size="small" :data="analogData" :show-header="false">
|
<el-table-column prop="label" align="center" label="模拟量名称">
|
</el-table-column>
|
<el-table-column prop="value" align="center" label="模拟量值">
|
</el-table-column>
|
</el-table>
|
</flex-box>
|
</div>
|
</div>
|
|
<!-- 短信猫和声光告警的配置 -->
|
<el-dialog
|
title="短信猫和声光告警的配置"
|
width="600px"
|
:visible.sync="alarmAlertStatus"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<alarm-alert
|
v-if="alarmAlertStatus"
|
:visible.sync="alarmAlertStatus"
|
></alarm-alert>
|
</el-dialog>
|
<el-drawer
|
title="我是标题"
|
:visible.sync="pifuDrawer"
|
size="360px"
|
:with-header="false"
|
>
|
<pifu-list></pifu-list>
|
</el-drawer>
|
</flex-layout>
|
</template>
|
|
<script>
|
import PifuList from "@/layout/components/PifuList";
|
import PieChart from "@/components/chart/PieChart";
|
import ChartWrapper from "@/components/ChartWrapper";
|
import FlexBox from "@/components/FlexBox";
|
import alarmAlert from "@/layout/components/alarmAlert";
|
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("serverManageSocket");
|
|
let pieOption = function () {
|
return {
|
title: {
|
text: "",
|
},
|
series: [
|
{
|
name: "",
|
data: [{ value: 0, name: "暂无数据" }],
|
},
|
],
|
};
|
};
|
let diskOpts = pieOption();
|
let CPUOpts = pieOption();
|
let memoryOpts = pieOption();
|
let DBMOpts = pieOption();
|
export default {
|
name: "",
|
components: {
|
PifuList,
|
PieChart,
|
ChartWrapper,
|
FlexBox,
|
alarmAlert,
|
},
|
mixins: [WSMixin],
|
data() {
|
return {
|
pifuDrawer: false,
|
alarmAlertStatus: false,
|
analogData: [],
|
serverInfo: {
|
disk: {
|
progress: 0,
|
message: "服务器数据磁盘总量：未知;剩余：未知",
|
},
|
cpu: {
|
progress: 0,
|
message: "TM:未知",
|
},
|
memory: {
|
progress: 0,
|
message: "FM:未知",
|
},
|
linkNum: {
|
progress: 0,
|
message: "DBC:未知",
|
},
|
},
|
processInfo: {
|
// 0:异常 1:正常 2:暂未开启
|
alarm: 0, //告警标识位
|
behind: 0, //落后标识位
|
displan: 0, //放电计划标识位
|
power: 0, //机房停电标识位
|
control: 0, //线程监控标识位
|
sql: 0, //服务器数据实时更新
|
link: 0, //服务器连接
|
},
|
};
|
},
|
computed: {
|
processAlarmMsg() {
|
let result = "未知";
|
switch (this.processInfo.alarm) {
|
case 0:
|
result = "异常";
|
break;
|
case 1:
|
result = "正常";
|
break;
|
case 2:
|
result = "未启用";
|
break;
|
}
|
return result;
|
},
|
processBehindMsg() {
|
let result = "未知";
|
switch (this.processInfo.behind) {
|
case 0:
|
result = "异常";
|
break;
|
case 1:
|
result = "正常";
|
break;
|
case 2:
|
result = "未启用";
|
break;
|
}
|
return result;
|
},
|
processDisplanMsg() {
|
let result = "未知";
|
switch (this.processInfo.displan) {
|
case 0:
|
result = "异常";
|
break;
|
case 1:
|
result = "正常";
|
break;
|
case 2:
|
result = "未启用";
|
break;
|
}
|
return result;
|
},
|
processPowerMsg() {
|
let result = "未知";
|
switch (this.processInfo.power) {
|
case 0:
|
result = "异常";
|
break;
|
case 1:
|
result = "正常";
|
break;
|
case 2:
|
result = "未启用";
|
break;
|
}
|
return result;
|
},
|
processControlMsg() {
|
let result = "未知";
|
switch (this.processInfo.control) {
|
case 0:
|
result = "异常";
|
break;
|
case 1:
|
result = "正常";
|
break;
|
case 2:
|
result = "未启用";
|
break;
|
}
|
return result;
|
},
|
processSqlMsg() {
|
let result = "未知";
|
switch (this.processInfo.sql) {
|
case 0:
|
result = "异常";
|
break;
|
case 1:
|
result = "正常";
|
break;
|
}
|
return result;
|
},
|
processLinkMsg() {
|
let result = "未知";
|
switch (this.processInfo.link) {
|
case 0:
|
result = "异常";
|
break;
|
case 1:
|
result = "正常";
|
break;
|
}
|
return result;
|
},
|
themeInfo() {
|
return "当前主题：" + this.$store.state.theme.themeName;
|
},
|
logoUrl() {
|
let logoConfig = this.logoConfig;
|
let image = gjdw;
|
switch (logoConfig.fileName) {
|
case "nfdw":
|
image = nfdw;
|
break;
|
case "gjdx":
|
image = gjdx;
|
break;
|
case "qwh":
|
image = qwh;
|
break;
|
}
|
return image;
|
},
|
},
|
methods: {
|
alarmAlert() {
|
this.alarmAlertStatus = !this.alarmAlertStatus;
|
},
|
handleClick() {
|
this.pifuDrawer = true;
|
},
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
if (res.code) {
|
let data = res.data;
|
console.log(data);
|
this.setServerData(data["serverState"]);
|
this.setProcessState(data["processSurvey"]);
|
} else {
|
this.setServerData();
|
}
|
this.updateTableData();
|
},
|
setServerData(data) {
|
if (data) {
|
// 设置服务器磁盘信息
|
this.serverInfo.disk.progress = data.diskRate;
|
diskOpts.series[0].data = [
|
{
|
value: data.totalDiscSpace - data.freeDiscSpace,
|
name: "已使用(G)",
|
},
|
{
|
value: data.freeDiscSpace,
|
name: "未使用(G)",
|
},
|
];
|
this.serverInfo.disk.message =
|
"服务器数据磁盘总量" +
|
(data.totalDiscSpace - data.freeDiscSpace) +
|
"G/" +
|
data.totalDiscSpace +
|
"G";
|
|
// 设置服务器cpu信息
|
this.serverInfo.cpu.progress = data.serverCpuRate;
|
CPUOpts.series[0].data = [
|
{
|
value: data.serverCpuRate,
|
name: "已使用",
|
},
|
{
|
value: 100 - data.serverCpuRate,
|
name: "未使用",
|
},
|
];
|
this.serverInfo.cpu.message =
|
"CPU使用率:" + data.serverCpuRate + "/100";
|
|
// 设置服务器内存的信息
|
this.serverInfo.memory.progress = data.memRate;
|
memoryOpts.series[0].data = [
|
{
|
value: (data.totalMem - data.freeMen).toHold(2),
|
name: "已使用(G)",
|
},
|
{
|
value: data.freeMen,
|
name: "未使用(G)",
|
},
|
];
|
this.serverInfo.memory.message =
|
"服务器内存:" +
|
(data.totalMem - data.freeMen).toHold(2) +
|
"G/" +
|
data.totalMem +
|
"G";
|
|
// 设置服务器的连接数
|
this.serverInfo.linkNum.progress = data.connRate;
|
DBMOpts.series[0].data = [
|
{
|
value: data.dbCOnnCount,
|
name: "已使用",
|
},
|
{
|
value: data.dbConnMax - data.dbCOnnCount,
|
name: "未使用",
|
},
|
];
|
this.serverInfo.linkNum.message =
|
"DBC:" + data.dbCOnnCount + "/" + data.dbConnMax;
|
|
// 更新服务器更新和连接状态
|
var nowtime = new Date(data.note.replace(/\-/g, "/"));
|
var sertime = new Date(data.serverDatetime.replace(/\-/g, "/"));
|
var timelong = Math.abs(parseInt(sertime - nowtime));
|
if (timelong / (1000 * 60) > 2) {
|
this.processInfo.sql = 0;
|
} else {
|
this.processInfo.sql = 1;
|
}
|
this.processInfo.link = 1;
|
|
this.setOption();
|
} else {
|
this.processInfo.sql = 0;
|
this.processInfo.link = 0;
|
}
|
},
|
checkTimeOut2(temp) {
|
var flag = 0;
|
if (temp != undefined) {
|
let startTime = new Date(temp.processTime);
|
let endTime = new Date(temp.note);
|
let totalms = (endTime.getTime() - startTime.getTime()) / 1000;
|
if (totalms < temp.outTime) {
|
flag = 1;
|
}
|
}
|
return flag;
|
},
|
/**
|
* 设置线程状态
|
* @param data 线程状态数据
|
*/
|
setProcessState(data) {
|
if (data) {
|
let alarmBatt = false; //电池告警
|
let alarmDev = false; //设备告警
|
let alarmCap = false; //容量告警
|
let badmon = false; //落后单体
|
// 遍历并处理数据
|
data.forEach((item) => {
|
switch (item.serverName) {
|
// 告警线程
|
case "BMS_FBSDEV_ALARM":
|
if (item.processName == "BMS_FBSDEV_ALARM_BATT") {
|
if (item.serverFlag == 0) {
|
alarmBatt = 0;
|
} else {
|
alarmBatt = this.checkTimeOut2(item);
|
}
|
} else if (item.processName == "BMS_FBSDEV_ALARM_DEV") {
|
if (item.serverFlag == 0) {
|
alarmDev = 0;
|
} else {
|
alarmDev = this.checkTimeOut2(item);
|
}
|
}
|
|
if (this.processInfo.alarm == 2 || item.serverFlag == 2) {
|
this.processInfo.alarm = 2;
|
} else {
|
this.processInfo.alarm = alarmBatt && alarmBatt;
|
}
|
break;
|
// 电池落后
|
case "BMS_FBSDEV_BADBATT":
|
if (item.processName == "BMS_FBSDEV_BADBATT_MON") {
|
//落后单体线程
|
if (item.serverFlag == 0) {
|
badmon = 0;
|
} else {
|
badmon = this.checkTimeOut2(item);
|
}
|
} else if (item.processName == "BMS_FBSDEV_BADBATT_CAP") {
|
//容量告警线程
|
if (item.serverFlag == 0) {
|
alarmCap = 0;
|
} else {
|
alarmCap = this.checkTimeOut2(item);
|
}
|
}
|
if (this.processInfo.behind == 2 || item.serverFlag == 2) {
|
this.processInfo.behind = 2;
|
} else {
|
this.processInfo.behind = badmon && alarmCap;
|
}
|
break;
|
// 放电计划线程
|
case "BMS_FBSDEV_PLAN":
|
if (item.processName == "BMS_FBSDEV_PLAN") {
|
if (item.serverFlag == 0) {
|
this.processInfo.displan = 0;
|
} else {
|
this.processInfo.displan = this.checkTimeOut2(item);
|
}
|
}
|
if (this.processInfo.displan == 2 || item.serverFlag == 2) {
|
this.processInfo.displan = 2;
|
}
|
break;
|
case "BMS_FBSDEV_POWER_FAIL":
|
if (item.processName == "BMS_FBSDEV_POWER_FAIL") {
|
if (item.serverFlag == 0) {
|
this.processInfo.power = 0;
|
} else {
|
this.processInfo.power = this.checkTimeOut2(item);
|
}
|
}
|
if (this.processInfo.power == 2 || item.serverFlag == 2) {
|
this.processInfo.power = 2;
|
}
|
break;
|
// 线程监控线程
|
case "BMS_FBSDEV_LISTEN":
|
if (item.processName == "BMS_FBSDEV_LISTEN") {
|
if (item.serverFlag == 0) {
|
this.processInfo.control = 0;
|
} else {
|
this.processInfo.control = this.checkTimeOut2(item);
|
}
|
}
|
if (this.processInfo.control == 2 || item.serverFlag == 2) {
|
this.processInfo.control = 2;
|
}
|
break;
|
}
|
});
|
}
|
},
|
setOption() {
|
this.$refs.pieDisk.setOption(diskOpts);
|
this.$refs.pieCPU.setOption(CPUOpts);
|
this.$refs.pieMemory.setOption(memoryOpts);
|
this.$refs.pieDBM.setOption(DBMOpts);
|
},
|
updateTableData() {
|
this.analogData = [
|
{
|
label: "服务器实时更新数据",
|
value: this.processSqlMsg,
|
},
|
{
|
label: "服务器连接",
|
value: this.processLinkMsg,
|
},
|
{
|
label: "落后单体监测线程",
|
value: this.processBehindMsg,
|
},
|
{
|
label: "告警监测线程",
|
value: this.processAlarmMsg,
|
},
|
{
|
label: "放电计划监测线程",
|
value: this.processDisplanMsg,
|
},
|
{
|
label: "机房停电监测线程",
|
value: this.processPowerMsg,
|
},
|
{
|
label: "线程监控程序运行",
|
value: this.processControlMsg,
|
},
|
];
|
},
|
},
|
|
mounted() {
|
this.setOption();
|
},
|
};
|
</script>
|
|
<style scoped>
|
.main {
|
height: 100%;
|
display: grid;
|
/* grid-template-rows: 1fr 1fr; */
|
grid-template-columns: 1fr 1fr;
|
grid-auto-rows: 1fr;
|
grid-auto-columns: 1fr;
|
grid-gap: 8px;
|
overflow: hidden;
|
}
|
.item {
|
position: relative;
|
}
|
.inner {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
}
|
.right {
|
width: 400px;
|
padding: 8px;
|
/* height: 100%; */
|
}
|
.table-status {
|
margin-top: 20px;
|
}
|
</style>
|
