<template>
<div class="h-100" style="min-height:calc(100% - 112px)">
<page-table
tabIndex
pagination
:is-level="tableInfo.isLevel"
:api-url="tableInfo.url"
:refresh="tableInfo.refresh"
:data.sync="tableInfo.data"
:query="filterInfo.query"
:list-type-info="listTypeInfo"
:init-curpage="tableInfo.initCurpage"
:field-list="tableInfo.fieldList"
:handle="tableInfo.handle"
@handleClick="handleClick"
>
<template v-slot:col-status="scope">
<span class="table-status" :class="[scope.row.status === 2 ? 'yellow' : scope.row.status === 1 ? 'red' : '']">
{{ scope.row.status === 2 ? "监控异常" : scope.row.status === 1 ? "停止" : "正常"}}
</span>
</template>
</page-table>
<page-dialog
class="page-data-dialog"
:title="dialogInfo.title"
:visible.sync="dialogInfo.visible"
:width="dialogInfo.width"
:bt-loading="dialogInfo.btLoading"
:bt-list="dialogInfo.btList"
@handleClick="handleClick"
>
<page-filter
:query.sync="dialogFilterInfo.query"
:filter-list="dialogFilterInfo.list"
@handleClick="handleClick"
/>
<div style="height:calc(100% - 58px)">
<div
class="h-100 mian-item"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.3)"
>
<div class="contentAll" v-if="applyChartInfo.length">
<div
class="content"
v-for="(item, index) in applyChartInfo"
:key="index"
>
<div class="describe">{{ item.chartName }}</div>
<div class="apply-chart">
<chart-line
height="100px"
:chart-data="item.chartData"
:x-list="xList"
:title-show="false"
:legend-show="false"
:x-axis-show="false"
/>
</div>
</div>
</div>
<div v-else class="noData">该时间段暂无数据</div>
</div>
</div>
</page-dialog>
</div>
</template>
<script>
export default {
data() {
return {
//搜索相关
filterInfo: {
query: {
serverIp: ""
}
},
//表格相关
tableInfo: {
url: this.nozzle.exeQueryList, //接口地址
refresh: 1,
initCurpage: 1,
isLevel: true,
data: [
// {
// "exeName": "ins-ctpq7oqv",
// "serverIp": "127.0.0.1",
// "homePath": "/src/util/ruter",
// "pid": "82731",
// "port": "8080",
// "status": 0,
// "updateTime": "2020-12-10 23:33:00",
// }
],
fieldList: [
{ label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
{
label: "服务器IP",
value: "serverIp",
minWidth: 150,
tooltip: true
},
{ label: "路径", value: "homePath", minWidth: 150, tooltip: true },
{ label: "进程号", value: "pid", width: 120 },
{ label: "端口", value: "port", width: 80 },
{ label: "状态", value: "status", width: 80, type: "slot"},
{
label: "更新时间",
value: "updateTime",
minWidth: 120,
tooltip: true
}
],
handle: {
fixed: "right",
label: "操作",
width: "80",
btList: [
{
label: "查看详情",
size: "small",
type: "text",
event: "detail",
show: true
}
]
}
},
//列表相关
listTypeInfo: {
statusList: [{ key: "正常", value: 0 }, { key: "停止", value: 1 }]
},
//弹窗相关
dialogInfo: {
title: "",
width: "650px",
visible: false,
btLoading: false,
type: "",
btList: [
{ label: "关闭", type: "", icon: "", event: "close", show: true }
]
},
//弹窗搜索相关
dialogFilterInfo: {
query: {
exeName: "",
serverIp: "",
startDate: "",
endDate: ""
},
list: [
{
type: "date",
label: "开始时间",
value: "startDate",
dateType: "datetime",
datePickerOptions: "pickerOptionsStart",
hideLabel: true
},
{
type: "date",
label: "结束时间",
value: "endDate",
dateType: "datetime",
datePickerOptions: "pickerOptionsEnd",
hideLabel: true
},
{
type: "button",
label: "查询",
btType: "primary",
icon: "el-icon-search",
event: "search",
show: true
}
]
},
//应用图表相关
applyChartInfo: [
// {
// chartName: "cpu",
// chartData: {
// nameList: ["cpu"],
// xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
// dataList: [[33,44,55]]
// }
// },
// {
// chartName: "mem",
// chartData: {
// nameList: ["mem"],
// xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
// dataList: [[33,44,55]]
// }
// }
],
xList: [],
loading: false
};
},
watch: {
"dialogInfo.visible"(val) {
if (!val) {
}
}
},
mounted() {
this.filterInfo.query.serverIp = this.$route.query.publicAddress;
this.tableInfo.refresh = Math.random();
},
methods: {
//点击事件
handleClick(event, data) {
switch (event) {
//详情
case "detail":
this.dialogInfo.type = event;
this.dialogInfo.visible = true;
this.dialogInfo.title = `${data.exeName}应用详情`;
let curTime = new Date().getTime();
this.dialogFilterInfo.query.startDate = this.$fn.switchTime(
curTime - 3600 * 1000
);
this.dialogFilterInfo.query.endDate = this.$fn.switchTime(curTime);
this.dialogFilterInfo.query.exeName = data.exeName;
this.dialogFilterInfo.query.serverIp = data.serverIp;
this.handleAjax();
break;
//搜索
case "search":
this.handleAjax();
break;
//关闭
case "close":
this.dialogInfo.visible = false;
break;
}
},
//请求事件
handleAjax() {
this.applyChartInfo = [];
this.loading = true;
this.$http
.post(this.nozzle.exeQueryDetail, this.dialogFilterInfo.query)
.then(res => {
this.loading = false;
if (res.data.code === 200) {
if (res.data.data.length) {
res.data.data.forEach(item => {
if (item.name !== "time") {
this.applyChartInfo.push({
chartName: item.name,
chartData: {
nameList: [item.name],
dataList: [item.data]
}
});
} else {
this.xList = item.data;
}
});
}
}
})
.catch(e => {
this.loading = false;
console.log(e);
});
}
}
};
</script>
<style lang="scss" scoped>
// .page-table {
// color: #000;
// /deep/ .el-table th .cell {
// // color: #000 !important;
// }
// /deep/ .el-table td .cell {
// // color: #000 !important;
// }
// }
.contentAll {
min-height: 250px;
}
.content {
@include fa();
&:not(:first-child) {
padding-top: 10px;
border-top: 1px solid rgb(58, 58, 60);
}
.apply-chart {
width: calc(100% - 50px);
height: 100px;
}
.describe {
width: 50px;
text-align: center;
color: var(--white);
}
}
/deep/ .el-input__inner {
color: #999 !important;
}
/deep/ .el-dialog__body{
height: calc(100% - 116px) !important;
}
</style>
