<template>
|
<div class="box">
|
<el-row :gutter="10">
|
<el-col class="left" :span="4">
|
<div style="padding-top: 20px">
|
<div
|
@click="change(item)"
|
v-for="(item, index) in dataArr"
|
:key="'butBox' + index"
|
class="butBox"
|
:style="focus == item ? highlightImg : defaultImg"
|
>
|
{{ item }}
|
</div>
|
</div>
|
</el-col>
|
<el-col class="right" :span="20">
|
<div style="height: 100%">
|
<div class="boxTop">
|
<div style="margin:20px 20px">
|
<el-table :data="table1.data">
|
<el-table-column width="100" label="平台标志" prop="logo" align="center" >
|
<template><div class="bg"></div></template>
|
</el-table-column>
|
<el-table-column width="200" label="平台名称" prop="name" align="center" ></el-table-column>
|
<el-table-column width="100" label="平台类型" prop="type" align="center" >
|
<template slot-scope="scope"><div class="type">{{scope.row.type}}</div></template>
|
</el-table-column>
|
<el-table-column min-width="350" label="平台主页" prop="url" align="center" ></el-table-column>
|
<el-table-column width="200" label="平台描述" prop="describe" align="center" ></el-table-column>
|
<el-table-column width="100" label="创建者" prop="create" align="center" ></el-table-column>
|
<el-table-column width="180" label="创建时间" prop="createTime" align="center" ></el-table-column>
|
<el-table-column width="100" label="告警设置" prop="giveAlarm" align="center" >
|
<template slot-scope="scope">
|
<el-switch
|
v-model="scope.row.giveAlarm"
|
active-color="#0CB8FF"
|
inactive-color="#ff4949">
|
</el-switch></template>
|
</el-table-column>
|
<el-table-column width="80" label="编辑" align="center">
|
<template slot-scope="scope">
|
<div class="edit" @click="handleClick(scope.row)"></div>
|
</template>
|
</el-table-column>
|
<el-table-column label="删除" width="80" align="center">
|
<template slot-scope="scope">
|
<div class="delete" @click="handleClick(scope.row)"></div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="boxBottom">
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<div class="box1">
|
<div class="title">{{focus}}</div>
|
<div class="group">
|
<div class="text">启停状态</div>
|
<div class="status">正常启动</div>
|
</div>
|
<div class="group">
|
<div class="text">链接状态</div>
|
<div class="status">正常链接</div>
|
</div>
|
<div class="group">
|
<div class="text">故障时间</div>
|
<div class="status">无故障</div>
|
</div>
|
<div class="group">
|
<div class="text">更新时间</div>
|
<div>2024-11-01 11:08:48</div>
|
</div>
|
<div class="log">
|
<div class="logTitle">异常日志</div>
|
<div class="logText">8C-11-C 11:35:(6 00 DE0- bierntomhya;ahi.:mn.nf;, imaint:ga:he店户:famu:"sn,sac:1:</div>
|
<div class="logText">8C-11-C 11:35:(6 00 DE0- bierntomhya;ahi.:mn.nf;, imaint:ga:he店户:famu:"sn,sac:1:</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col style="overflow:auto;" :span="12">
|
<el-table :data="table2.data">
|
<el-table-column align="center" label="序号" type="index" width="60">
|
</el-table-column>
|
<el-table-column
|
v-for="(item, index) in table2.tableTh"
|
:key="index"
|
:label="item.label"
|
:prop="item.prop"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column label="操作" min-width="60" align="center">
|
<template slot-scope="scope">
|
<el-button
|
type="primary"
|
@click="handleClick(scope.row)"
|
size="small"
|
>检验</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "ConditionMonitoring",
|
data() {
|
return {
|
focus: "作战概念开发与验证平台",
|
highlightImg: {
|
backgroundImage: `url(${require("@/assets/images/ConditionMonitoring/highlight.png")})`,
|
},
|
defaultImg: {
|
backgroundImage: `url(${require("@/assets/images/ConditionMonitoring/default.png")})`,
|
},
|
dataArr: [
|
"作战概念开发与验证平台",
|
"作战系统设计与评估平台",
|
"作战方案推演与分析平台",
|
"战法创新与作战运用研究平台",
|
"战略综合集成研讨厅",
|
"态势显示分系统",
|
"综合管控分系统",
|
"数据管理分系统",
|
"仿真资源管理系统",
|
],
|
table2: {
|
data: [
|
{
|
subsystemName: "作战概念开发与验证平台",
|
interactionStatus: "正常",
|
updateTime: "2024-01-26",
|
},
|
{
|
subsystemName: "作战系统设计与评估平台",
|
interactionStatus: "正常",
|
updateTime: "2024-01-26",
|
},
|
{
|
subsystemName: "作战方案推演与分析平台",
|
interactionStatus: "正常",
|
updateTime: "2024-01-26",
|
},
|
{
|
subsystemName: "战法创新与作战运用研究平台",
|
interactionStatus: "正常",
|
updateTime: "2024-01-26",
|
},
|
{
|
subsystemName: "战略综合集成研讨厅",
|
interactionStatus: "正常",
|
updateTime: "2024-01-26",
|
},
|
{
|
subsystemName: "态势显示分系统",
|
interactionStatus: "正常",
|
updateTime: "2024-01-26",
|
},
|
{
|
subsystemName: "综合管控分系统",
|
interactionStatus: "正常",
|
updateTime: "2024-01-26",
|
},
|
{
|
subsystemName: "数据管理分系统",
|
interactionStatus: "正常",
|
updateTime: "2024-01-26",
|
},
|
{
|
subsystemName: "仿真资源管理系统",
|
interactionStatus: "正常",
|
updateTime: "2024-01-26",
|
},
|
],
|
tableTh: [
|
{
|
label: "分系统名称",
|
prop: "subsystemName",
|
},
|
{
|
label: "交互状态",
|
prop: "interactionStatus",
|
},
|
{
|
label: "更新时间",
|
prop: "updateTime",
|
},
|
],
|
},
|
table1: {
|
data: [
|
{
|
name: "作战概念开发与验证平台",
|
type: "默认应用",
|
url: "http://10.64.33.1859080/imcloud2/e/space/task?id=1762040579103117314",
|
describe: "",
|
create:"管理员",
|
createTime: "2024-02-26 17:03:06",
|
giveAlarm: true,
|
}
|
],
|
},
|
};
|
},
|
methods: {
|
change(value) {
|
this.focus = value;
|
this.table1.data.name = value
|
this.table1 = {
|
data: [
|
{
|
name: value,
|
type: "默认应用",
|
url: "http://10.64.33.1859080/imcloud2/e/space/task?id=1762040579103117314",
|
describe: "",
|
create:"管理员",
|
createTime: "2024-02-26 17:03:06",
|
giveAlarm: true,
|
}
|
],
|
}
|
},
|
handleClick(row) {},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.box {
|
width: 100%;
|
height: 100%;
|
.el-row {
|
height: 100%;
|
padding: 0 20px 20px;
|
.el-col {
|
height: 100%;
|
}
|
}
|
.left {
|
background-size: 100% 100%;
|
background-image: url("~@/assets/images/ConditionMonitoring/left.png");
|
.butBox {
|
width: 90%;
|
margin: 0px auto 30px;
|
text-align: center;
|
height: 40px;
|
line-height: 40px;
|
font-size: 18px;
|
cursor: pointer;
|
background-size: 100% 100%;
|
color: #fff;
|
}
|
}
|
.right {
|
background-image: url("~@/assets/images/ConditionMonitoring/right.png");
|
background-size: 100% 100%;
|
.boxTop {
|
width: 100%;
|
height: 20%;
|
// margin-bottom: 20px;
|
.type{
|
width: 75px;
|
height: 25px;
|
line-height: 22px;
|
background: #066932;
|
color: #22C707;
|
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.35);
|
border-radius: 4px;
|
border: 1px solid #FFFFFF;
|
margin:0 auto;
|
}
|
.bg{
|
width: 50px;
|
height: 50px;
|
margin:0 auto;
|
background-image: url("~@/assets/images/ConditionMonitoring/bg.png");
|
background-size: 100% 100%;
|
}
|
.edit{
|
width: 38px;
|
height: 38px;
|
margin:0 auto;
|
background-image: url("~@/assets/images/ConditionMonitoring/edit.png");
|
background-size: 100% 100%;
|
}
|
.delete{
|
width: 38px;
|
height: 38px;
|
margin:0 auto;
|
background-image: url("~@/assets/images/ConditionMonitoring/delete.png");
|
background-size: 100% 100%;
|
}
|
}
|
.boxBottom {
|
width: 100%;
|
height: 78%;
|
.box1{
|
width: 100%;
|
height: 100%;
|
background-color: #2D4C9E;
|
color: #fff;
|
.title{
|
padding-top:20px;
|
margin-bottom:10px;
|
font-size: 24px;
|
margin-left:15px;
|
}
|
.group{
|
display: flex;
|
line-height: 37px;
|
height: 37px;
|
font-size: 20px;
|
font-weight: 400;
|
margin-bottom:4px;
|
.text{
|
width: 130px;
|
text-align: center;
|
}
|
.status{
|
width: 115px;
|
// height:37px;
|
text-align: center;
|
background-color: #00E572;
|
}
|
}
|
.log{
|
width: 88%;
|
height: 56%;
|
background-color: #181C40;
|
margin:20px auto 0;
|
padding:10px 20px;
|
.logTitle{
|
width: auto;
|
height: 30px;
|
// font-family: Source Han Sans SC;
|
font-weight: 400;
|
font-size: 24px;
|
color: #0CB8FF;
|
// line-height: 10px;
|
}
|
.logText{
|
line-height: 30px;
|
width: 100%;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
}
|
}
|
/deep/ .el-table {
|
background-color: rgba(0, 0, 0, 0);
|
.computeNode {
|
background-image: url("~@/assets/images/InferentialTaskControl/computeNode.png");
|
background-size: 100% 100%;
|
width: 35px;
|
height: 35px;
|
margin: 0 auto;
|
}
|
thead {
|
tr {
|
th {
|
background-color: #1C305F;
|
border-bottom: 0px;
|
.cell {
|
font-weight: 400;
|
font-size: 18px;
|
color: #fff;
|
text-shadow: 0px 0px 2px #00fbff;
|
}
|
}
|
}
|
}
|
tbody {
|
tr {
|
background-color: rgba(0, 0, 0, 0);
|
td {
|
background-color: #181C40;
|
border-bottom: 0px;
|
.cell {
|
font-size: 16px;
|
color: #fff;
|
}
|
}
|
}
|
tr:hover {
|
// border: 2px solid #4b96dd;
|
td {
|
background-color: #2d468b;
|
.cell {
|
color: #fff;
|
}
|
}
|
}
|
}
|
}
|
/deep/ .el-table::before {
|
height: 0px;
|
}
|
</style>
|
