<template>
|
<div class="interactive">
|
<div class="left">
|
<div
|
:class="leftBtnName == item ? 'btn-height' : 'btn'"
|
v-for="(item, index) in leftBtnList"
|
:key="index"
|
@click="leftBtnClick(item, index)"
|
>
|
{{ item }}
|
</div>
|
</div>
|
<div class="right" v-show="leftBtnName == '交互过程监控'">
|
<div class="select" style="width:1500px;">
|
<div class="log">
|
<div class="name">通道异常日志</div>
|
<div class="sum">1</div>
|
</div>
|
<div class="from">
|
<el-form style="margin-bottom: 20px" label-width="120px">
|
<el-row style="height: 50px">
|
<el-form-item style="float: left" label="信源：">
|
<el-select
|
:popper-append-to-body="false"
|
v-model="source.value"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in source.options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item style="float: left" label="信宿：">
|
<el-select
|
:popper-append-to-body="false"
|
v-model="destination.value"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in destination.options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item style="float: left" label="传输方式：">
|
<el-select
|
:popper-append-to-body="false"
|
v-model="transmission.value"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in transmission.options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="refresh">
|
<img src="../assets/img/interactive/refresh_icon.png" alt="" />
|
<div class="name">刷新</div>
|
</div>
|
<div class="call">
|
<img src="../assets/img/interactive/call_icon.png" alt="" />
|
<div class="name">全部报警</div>
|
</div>
|
</div>
|
<el-table :data="table.data" height="85%">
|
<el-table-column label="信源" width="150px">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.source }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="信宿">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.destination }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="传输方式">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.transmission }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态">
|
<template>
|
<img src="../assets/img/interactive/yes.png" alt="" />
|
</template>
|
</el-table-column>
|
<el-table-column label="描述">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.describe }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="传输数据">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.transfer }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="故障报警">
|
<template slot-scope="scope">
|
<el-switch v-model="scope.row.call"> </el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column label="异常处理">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.abnormal }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="更新时间">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.time }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="健康">
|
<template>
|
<img src="../assets/img/interactive/yes.png" alt="" />
|
</template>
|
</el-table-column>
|
<el-table-column label="可用">
|
<template>
|
<img src="../assets/img/interactive/yes.png" alt="" />
|
</template>
|
</el-table-column>
|
<el-table-column label="详情">
|
<template>
|
<img
|
src="../assets/img/interactive/details.png"
|
alt=""
|
@click="detailsClick"
|
/>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="block">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="40"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
<div class="right" v-show="leftBtnName == '交互通道管理'">
|
<div class="select" style="width:1500px;" >
|
<div class="from" style="margin-left:0;">
|
<el-form style="margin-bottom: 20px" label-width="180px">
|
<el-row style="height: 50px">
|
<el-form-item style="float: left;width:300px;" label="信源：">
|
<el-select
|
:popper-append-to-body="false"
|
v-model="source.value"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in source.options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item style="float: left;width:300px;" label="信宿：">
|
<el-select
|
:popper-append-to-body="false"
|
v-model="destination.value"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in destination.options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="refresh" style="margin-left:550px;">
|
<img src="../assets/img/interactive/refresh_icon.png" alt="" />
|
<div class="name">刷新</div>
|
</div>
|
<div class="call" style="margin-left:30px;">
|
<img src="../assets/img/interactive/call_icon.png" alt="" />
|
<div class="name">批量启动</div>
|
</div>
|
<div class="refresh" style="margin-left:30px;">
|
<img src="../assets/img/interactive/refresh_icon.png" alt="" />
|
<div class="name">一键</div>
|
</div>
|
</div>
|
<el-table :data="tablePassageway.data" height="85%">
|
<el-table-column label="信源" width="200px">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.source }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="信宿" width="200px">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.destination }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" width="220px">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.time }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态">
|
<template>
|
<img src="../assets/img/interactive/yes.png" alt="" />
|
</template>
|
</el-table-column>
|
<el-table-column label="说明" width="220px">
|
<template slot-scope="scope">
|
<div style="color:#22C707;">
|
{{ scope.row.describe }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="传输方式" width="220px">
|
<template slot-scope="scope">
|
<el-select
|
:popper-append-to-body="false"
|
v-model="scope.row.transfer"
|
placeholder="请选择传输方式"
|
>
|
<el-option
|
v-for="item in destination.options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
<div>
|
{{ scope.row.transfer }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="编辑">
|
<template>
|
<img src="../assets/img/interactive/bj.png" alt="" />
|
</template>
|
</el-table-column>
|
<el-table-column label="启用">
|
<template>
|
<img src="../assets/img/interactive/qy.png" alt="" />
|
</template>
|
</el-table-column>
|
<el-table-column label="禁用">
|
<template>
|
<img
|
src="../assets/img/interactive/jy.png"
|
alt=""
|
@click="detailsClick"
|
/>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="block">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPagePassageway"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="40"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
leftBtnList: ["交互通道管理", "交互过程监控"],
|
leftBtnName: "交互通道管理",
|
source: {
|
options: [
|
{
|
value: "qx102stect1",
|
label: "qx102stect1"
|
},
|
{
|
value: "qx102stect2",
|
label: "qx102stect2"
|
}
|
],
|
value: ""
|
},
|
destination: {
|
options: [
|
{
|
value: "qx102stect1",
|
label: "qx102stect1"
|
},
|
{
|
value: "qx102stect2",
|
label: "qx102stect2"
|
}
|
],
|
value: ""
|
},
|
transmission: {
|
options: [
|
{
|
value: "qx102stect1",
|
label: "qx102stect1"
|
},
|
{
|
value: "qx102stect2",
|
label: "qx102stect2"
|
}
|
],
|
value: ""
|
},
|
table: {
|
data: [
|
{
|
source: "数据管理分系统",
|
destination: "分系统",
|
transmission: "消息中间件",
|
state: "",
|
describe: "系统管理服务数裾",
|
transfer: "",
|
call: "",
|
abnormal: "通道断开",
|
time: "2024-11-05 09:51:34",
|
healthy: "是",
|
available: "是",
|
details: ""
|
},
|
{
|
source: "数据管理分系统",
|
destination: "分系统",
|
transmission: "消息中间件",
|
state: "是",
|
describe: "网关服务",
|
transfer: "",
|
call: "",
|
abnormal: "传输超时",
|
time: "2024-11-05 18:20:04",
|
healthy: "是",
|
available: "是",
|
details: ""
|
}
|
],
|
tableTh: [
|
{
|
label: "信源",
|
prop: "source"
|
},
|
{
|
label: "信宿",
|
prop: "destination"
|
},
|
{
|
label: "传输方式",
|
prop: "transmission"
|
},
|
{
|
label: "状态",
|
prop: "state"
|
},
|
{
|
label: "描述",
|
prop: "describe"
|
},
|
{
|
label: "传输数据",
|
prop: "transfer"
|
},
|
{
|
label: "故障报警",
|
prop: "call"
|
},
|
{
|
label: "异常处理",
|
prop: "abnormal"
|
},
|
{
|
label: "更新时间",
|
prop: "time"
|
},
|
{
|
label: "健康",
|
prop: "healthy"
|
},
|
{
|
label: "可用",
|
prop: "available"
|
},
|
{
|
label: "详情",
|
prop: "details"
|
}
|
]
|
},
|
tablePassageway: {
|
data: [
|
{
|
source: "数据管理分系统",
|
destination: "作战概念开发与验证平台",
|
transmission: "消息中间件",
|
state: "",
|
describe: "http://10.64.33.87:6868",
|
transfer: "",
|
call: "",
|
abnormal: "通道断开",
|
time: "2024-11-05 09:51:34",
|
healthy: "是",
|
available: "是",
|
details: ""
|
},
|
{
|
source: "作战概念开发与验证平台",
|
destination: "数据管理分系统",
|
transmission: "消息中间件",
|
state: "",
|
describe: "http://10.64.33.87:6868",
|
transfer: "",
|
call: "",
|
abnormal: "通道断开",
|
time: "2024-11-05 09:51:34",
|
healthy: "是",
|
available: "是",
|
details: ""
|
},
|
{
|
source: "数据管理分系统",
|
destination: "作战体系设计与评估平台",
|
transmission: "消息中间件",
|
state: "",
|
describe: "http://10.64.33.87:6868",
|
transfer: "",
|
call: "",
|
abnormal: "通道断开",
|
time: "2024-11-05 09:51:34",
|
healthy: "是",
|
available: "是",
|
details: ""
|
},
|
{
|
source: "作战体系设计与评估平台",
|
destination: "数据管理分系统",
|
transmission: "消息中间件",
|
state: "",
|
describe: "http://10.64.33.87:6868",
|
transfer: "",
|
call: "",
|
abnormal: "通道断开",
|
time: "2024-11-05 09:51:34",
|
healthy: "是",
|
available: "是",
|
details: ""
|
},
|
|
],
|
tableTh: [
|
{
|
label: "信源",
|
prop: "source"
|
},
|
{
|
label: "信宿",
|
prop: "destination"
|
},
|
{
|
label: "创建时间",
|
prop: "time"
|
},
|
|
{
|
label: "状态",
|
prop: "state"
|
},
|
{
|
label: "说明",
|
prop: "describe"
|
},
|
{
|
label: "传输方式",
|
prop: "transmission"
|
},
|
|
{
|
label: "编辑",
|
prop: "healthy"
|
},
|
{
|
label: "启用",
|
prop: "available"
|
},
|
{
|
label: "禁用",
|
prop: "details"
|
}
|
]
|
},
|
currentPage: 1,
|
currentPagePassageway: 1
|
};
|
},
|
methods: {
|
leftBtnClick(item, index) {
|
this.leftBtnName = item;
|
},
|
detailsClick() {},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.interactive {
|
padding: 20px 30px;
|
display: flex;
|
height: 100%;
|
.left {
|
padding-top: 20px;
|
width: 320px;
|
height: 90%;
|
background: url("../assets/img/interactive/left_bg.png") no-repeat;
|
background-size: 100% 100%;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
font-size: 18px;
|
color: #ffffff;
|
.btn {
|
margin: 20px auto;
|
width: 268px;
|
height: 43px;
|
line-height: 43px;
|
text-align: center;
|
background: url("../assets/img/interactive/left_btn.png");
|
}
|
.btn-height {
|
margin: 20px auto;
|
width: 268px;
|
height: 43px;
|
line-height: 43px;
|
text-align: center;
|
background: url("../assets/img/interactive/left_btn_height.png");
|
}
|
}
|
.right {
|
position: relative;
|
margin-left: 30px;
|
padding-top: 20px;
|
height: 90%;
|
.select {
|
display: flex;
|
.log {
|
position: relative;
|
width: 128px;
|
height: 48px;
|
background: radial-gradient(circle, #00c0fa 0%, #015eea 100%);
|
border-radius: 6px;
|
.name {
|
width: 100%;
|
height: 100%;
|
text-align: center;
|
line-height: 48px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
font-size: 18px;
|
color: #ffffff;
|
}
|
.sum {
|
position: absolute;
|
right: -10px;
|
top: -10px;
|
width: 25px;
|
height: 25px;
|
text-align: center;
|
line-height: 25px;
|
background: #10ad40;
|
border-radius: 50%;
|
border: 1px solid #ffffff;
|
font-size: 14px;
|
color: #ffffff;
|
}
|
}
|
.from {
|
margin-left: 300px;
|
}
|
.refresh {
|
margin-left: 10px;
|
display: flex;
|
align-items: center;
|
width: 76px;
|
height: 50px;
|
line-height: 50px;
|
background: #015eea;
|
border-radius: 6px;
|
font-size: 18px;
|
color: #ffffff;
|
img {
|
margin-left: 5px;
|
width: 23px;
|
height: 23px;
|
}
|
.name {
|
margin-left: 5px;
|
}
|
}
|
.call {
|
margin-left: 10px;
|
display: flex;
|
align-items: center;
|
width: 115px;
|
height: 49px;
|
line-height: 49px;
|
background: #083d62;
|
border-radius: 6px;
|
border: 1px solid #4b96dd;
|
font-size: 18px;
|
color: #ffffff;
|
img {
|
margin-left: 5px;
|
width: 23px;
|
height: 23px;
|
}
|
.name {
|
margin-left: 5px;
|
}
|
}
|
}
|
.block {
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
/deep/.el-pagination__total {
|
margin-top: 8px;
|
font-size: 18px;
|
color: #ffffff;
|
}
|
/deep/.el-input__inner {
|
width: 110px;
|
height: 40px;
|
font-size: 18px;
|
}
|
/deep/.btn-prev {
|
margin-top: 6px;
|
color: #fff;
|
background: rgba(0, 0, 0, 0);
|
}
|
/deep/.btn-next {
|
margin-top: 6px;
|
color: #fff;
|
background: rgba(0, 0, 0, 0);
|
}
|
/deep/.el-pager {
|
margin-top: 6px;
|
.number {
|
background: rgba(0, 0, 0, 0);
|
font-size: 18px;
|
color: #fff;
|
}
|
.active {
|
color: #0cb8ff;
|
}
|
}
|
/deep/.el-icon {
|
font-size: 16px;
|
}
|
/deep/.el-pagination__jump {
|
font-size: 18px;
|
color: #fff;
|
}
|
/deep/.el-pagination__editor {
|
width: 100px;
|
margin-left: 10px;
|
.el-input__inner {
|
width: 60px;
|
background: rgba(0, 0, 0, 0);
|
border: 1px solid #409eff;
|
color: #fff;
|
font-size: 18px;
|
}
|
}
|
}
|
}
|
}
|
/deep/ .el-form-item__label {
|
margin-top: 5px;
|
color: #fff;
|
font-size: 16px;
|
}
|
/deep/ .el-select {
|
input {
|
border: 1px solid #4b96dd;
|
background-color: rgba(0, 0, 0, 0);
|
color: #ddd;
|
height: 50px;
|
width: 160px;
|
font-size: 16px;
|
}
|
}
|
/deep/ .el-select-dropdown {
|
border: 1px solid #4b96dd;
|
background-color: #091631;
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
background-color: #2d4c9e;
|
color: #fff;
|
}
|
.el-select-dropdown__item {
|
color: #bbb;
|
}
|
}
|
|
/deep/ .el-table {
|
background-color: rgba(0, 0, 0, 0);
|
|
thead {
|
tr {
|
th {
|
background-color: #2d4c9e;
|
border-bottom: 0px;
|
.cell {
|
font-weight: 400;
|
font-size: 20px;
|
color: #fff;
|
text-shadow: 0px 0px 2px #00fbff;
|
}
|
}
|
}
|
}
|
tbody {
|
font-size: 16px;
|
color: #fff;
|
tr {
|
background-color: rgba(0, 0, 0, 0);
|
td {
|
background-color: rgba(0, 0, 0, 0);
|
border-bottom: 0px;
|
}
|
}
|
tr:hover {
|
border: 2px solid #4b96dd;
|
td {
|
background-color: #2d4c9e;
|
}
|
}
|
}
|
}
|
/deep/ .el-table::before {
|
height: 0px;
|
}
|
</style>
|
|
<style>
|
.el-select-dropdown {
|
border: 1px solid #4b96dd;
|
background-color: #091631;
|
}
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
background-color: #2d4c9e;
|
color: #fff;
|
}
|
.el-select-dropdown__item {
|
color: #bbb;
|
}
|
</style>
|
