<template>
|
<div class="ITM m-l-d flex2">
|
<div class="itm-container-top">
|
<div class="flex top-desc">
|
<div class="desc1">ITM设备</div>
|
</div>
|
<div class="container-equ">
|
<itm-equ :areas="areas"></itm-equ>
|
</div>
|
</div>
|
<div class="itm-container-bottom">
|
<!-- <div class="flex top-desc">
|
<div class="desc1">告警预览</div>
|
</div>
|
<div class="container-equ">
|
<itm-line :areas="areas"></itm-line>
|
</div> -->
|
<div class="itm-container container-reg">
|
<div class="flex m-t-2rem">
|
<div class="reg-left">已登记</div>
|
<div class="flex1 reg-img-service">
|
<div class="reg-img-1-1"></div>
|
<div class="reg-num flex">
|
<span class="div1">{{ switchDeviceStatus['0'] && switchDeviceStatus['0'].online || 0 }}</span>
|
<span class="div2">个</span>
|
</div>
|
<div class="reg-desc">
|
Online
|
</div>
|
</div>
|
<div class="flex1 reg-img-service">
|
<div class="reg-img-1-2"></div>
|
<div class="reg-num flex">
|
<span class="div1">{{ switchDeviceStatus['0'] && switchDeviceStatus['0'].offline || 0 }}</span>
|
<span class="div2">个</span>
|
</div>
|
<div class="reg-desc">
|
Offline
|
</div>
|
</div>
|
</div>
|
<div class="flex m-t-4rem">
|
<div class="reg-left">异常的</div>
|
<div class="flex1 reg-img-service">
|
<div class="reg-img-2-1"></div>
|
<div class="reg-num flex">
|
<span class="div1">{{ switchDeviceStatus['1'] && switchDeviceStatus['1'].online || 0 }}</span>
|
<span class="div2">个</span>
|
</div>
|
<div class="reg-desc">
|
Online
|
</div>
|
</div>
|
<div class="flex1 reg-img-service">
|
<div class="reg-img-2-2"></div>
|
<div class="reg-num flex">
|
<span class="div1">{{ switchDeviceStatus['1'] && switchDeviceStatus['1'].offline || 0 }}</span>
|
<span class="div2">个</span>
|
</div>
|
<div class="reg-desc">
|
Offline
|
</div>
|
</div>
|
</div>
|
|
|
</div>
|
<div class="itm-container container-alert" v-if="false">
|
<div class="reg-left flex">
|
<div style="margin-right: 0.2rem;">病毒</div>
|
<div>预警</div>
|
</div>
|
<div class="flex1">
|
<div class="reg-img-alert"></div>
|
</div>
|
<div class="flex1">
|
<div class="reg-num flex">
|
<span class="div1">{{ switchDeviceStatus['2'] && switchDeviceStatus['2'].totalCount || 0 }}</span>
|
<span class="div2">个</span>
|
</div>
|
<div class="reg-desc">
|
Viras alert
|
</div>
|
</div>
|
</div>
|
<div class="itm-container container-alert" style="cursor: pointer;margin-top: 1rem" @click="showSwitchBoardInfoTableAdd=true">
|
<div class="flex1">
|
<div class="reg-num flex">
|
<span class="div1">{{ switchInfo.switchInfo && switchInfo.switchInfo.length || 0 }}</span>
|
<span class="div2">个</span>
|
</div>
|
<div class="reg-desc">
|
新增交换机
|
</div>
|
</div>
|
</div>
|
<div class="itm-container container-alert" style="cursor: pointer;margin-top: 1rem" @click="showSwitchBoardInfoTable=true">
|
<div class="flex1">
|
<div class="reg-num flex">
|
<span class="div1">{{ switchInfo.switchInfo && switchInfo.switchInfo.length || 0 }}</span>
|
<span class="div2">个</span>
|
</div>
|
<div class="reg-desc">
|
交换机清单
|
</div>
|
</div>
|
</div>
|
<div class="itm-container container-alert" style="cursor: pointer;margin-top: 1rem" @click="showSwitchBoard">
|
<div class="flex1">
|
<div class="reg-desc">
|
交换机机柜
|
</div>
|
</div>
|
</div>
|
<el-dialog :visible.sync="showSwitchBoardInfoTable" title="交换机清单" append-to-body>
|
<el-table
|
:data="switchInfo.lackSwitchInfo||[]"
|
border
|
style="width: 100%;max-height: 650px;overflow-y: scroll">
|
<!-- <el-table-column-->
|
<!-- fixed-->
|
<!-- label="index"-->
|
<!-- width="80"-->
|
<!-- type="index">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="assetName"-->
|
<!-- label="asset name">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="clentSiteCode"-->
|
<!-- label="clent site code"-->
|
<!-- >-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="createdTime"-->
|
<!-- label="created time">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="dateTimeConnected"-->
|
<!-- label="connected datetime">-->
|
<!-- </el-table-column>-->
|
<el-table-column
|
prop="deviceName"
|
label="device name">
|
</el-table-column>
|
<el-table-column
|
prop="deviceNameDNS"
|
label="DNS">
|
</el-table-column>
|
<el-table-column
|
prop="ipAddress"
|
label="ip address">
|
</el-table-column>
|
<el-table-column
|
width="180"
|
prop="macAddress"
|
label="mac address">
|
</el-table-column>
|
<el-table-column
|
prop="nasPort"
|
label="nas port">
|
</el-table-column>
|
<el-table-column
|
prop="switchType"
|
label="switch type">
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
|
<!-- 新增交换机弹窗 -->
|
|
<el-dialog :visible.sync="showSwitchBoardInfoTableAdd" title="新增交换机" append-to-body>
|
<el-table
|
:data="switchInfo.lackSwitchInfo||[]"
|
border
|
style="width: 100%;max-height: 650px;overflow-y: scroll">
|
<!-- <el-table-column-->
|
<!-- fixed-->
|
<!-- label="index"-->
|
<!-- width="80"-->
|
<!-- type="index">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="assetName"-->
|
<!-- label="asset name">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="clentSiteCode"-->
|
<!-- label="clent site code"-->
|
<!-- >-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="createdTime"-->
|
<!-- label="created time">-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- prop="dateTimeConnected"-->
|
<!-- label="connected datetime">-->
|
<!-- </el-table-column>-->
|
<el-table-column
|
prop="deviceName"
|
label="device name">
|
</el-table-column>
|
<el-table-column
|
prop="deviceNameDNS"
|
label="DNS">
|
</el-table-column>
|
<el-table-column
|
prop="ipAddress"
|
label="ip address">
|
</el-table-column>
|
<el-table-column
|
width="180"
|
prop="macAddress"
|
label="mac address">
|
</el-table-column>
|
<el-table-column
|
prop="nasPort"
|
label="nas port">
|
</el-table-column>
|
<el-table-column
|
prop="switchType"
|
label="switch type">
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
</div>
|
<div v-if="!chartclose" @click="closeself" class="chart-close"></div>
|
</div>
|
</template>
|
<script>
|
import itmEqu from "./components/chart-itm";
|
import itmLine from "./components/chart-itm-line";
|
|
export default {
|
components: {itmEqu, itmLine},
|
props: {
|
areas: [],
|
chartclose: false,
|
switchDeviceStatus: {},
|
switchInfo: {},
|
switchInfoAdd:{}
|
},
|
data() {
|
return {
|
showSwitchBoardInfoTable: false,
|
showSwitchBoardInfoTableAdd:false,
|
}
|
},
|
methods: {
|
closeself() {
|
this.$emit("show", false);
|
},
|
showSwitchBoard(){
|
this.$router.push({path: "/switch-board"});
|
// this.$router.push({path: "/area", query: {code: '01'}});
|
}
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.ITM {
|
width: 31.67rem;
|
padding-left: $width-screen3-margin-d;
|
padding-right: $width-screen3-margin-d;
|
// padding-top: $width-screen3-margin-d * 1;
|
position: fixed;
|
/* position: absolute; */
|
/* right: - 36rem; */
|
/* left: 162.336rem; */
|
right: -1rem;
|
/* zoom: 0.8; */
|
top: 6.818rem;
|
zoom: 1.12;
|
/* top: 0; */
|
top: calc($height-header + 1.5rem);
|
|
.chart-close {
|
width: 2.6rem;
|
height: 2.6rem;
|
position: absolute;
|
right: 4rem;
|
top: 2.5rem;
|
background-size: 100% 100%;
|
background-image: url("../../assets/area/chart-cloase.svg");
|
cursor: pointer;
|
z-index: 3;
|
}
|
|
.itm-container-top {
|
background: #e9f4fd;
|
box-shadow: 0.5rem 0.33rem 2rem 0rem rgba(198, 212, 228, 0.38),
|
inset 0rem 0.17rem 0.25rem 0rem rgba(255, 255, 255, 0.5);
|
border-radius: 0.83rem;
|
//padding: 2.5rem;
|
height: 28.67rem;
|
padding-top: 1rem;
|
|
.top-desc {
|
padding-left: 2.5rem;
|
}
|
}
|
|
.itm-container-bottom {
|
background: #e9f4fd;
|
box-shadow: 0.5rem 0.33rem 2rem 0rem rgba(198, 212, 228, 0.38),
|
inset 0rem 0.17rem 0.25rem 0rem rgba(255, 255, 255, 0.5);
|
border-radius: 0.83rem;
|
padding: 2.5rem;
|
margin-top: 2rem;
|
height: 58.5rem;
|
padding-top: 1rem;
|
}
|
|
.reg-left {
|
font-size: 2rem;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #6c99be;
|
width: 2.5rem;
|
/*实现垂直居中*/
|
align-items: center;
|
/*实现水平居中*/
|
justify-content: center;
|
|
text-align: justify;
|
margin-right: 2.5rem;
|
}
|
|
.reg-img-1-1 {
|
margin: 0 auto;
|
background-size: 100% 100%;
|
width: 6.42rem;
|
height: 6.42rem;
|
background-image: url("../../assets/screen/screen2/reg-img-1-1.png");
|
}
|
|
.reg-img-1-2 {
|
margin: 0 auto;
|
background-size: 100% 100%;
|
width: 6.42rem;
|
height: 6.42rem;
|
background-image: url("../../assets/screen/screen2/reg-img-1-2.png");
|
}
|
|
.reg-img-2-1 {
|
margin: 0 auto;
|
background-size: 100% 100%;
|
width: 6.42rem;
|
height: 6.42rem;
|
background-image: url("../../assets/screen/screen2/reg-img-2-1.png");
|
}
|
|
.reg-img-2-2 {
|
margin: 0 auto;
|
background-size: 100% 100%;
|
width: 6.42rem;
|
height: 6.42rem;
|
background-image: url("../../assets/screen/screen2/reg-img-2-2.png");
|
}
|
|
.top-desc {
|
margin-bottom: 1rem;
|
|
.desc1 {
|
font-size: 2.33rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #012b5e;
|
line-height: 3.33rem;
|
margin-top: 1.5rem;
|
}
|
}
|
|
.itm-container {
|
padding: 1rem;
|
margin-top: 2rem;
|
background: #e9f4fd;
|
box-shadow: 0.5rem 0.33rem 2rem 0rem rgba(198, 212, 228, 0.38),
|
inset 0rem 0.17rem 0.25rem 0rem rgba(255, 255, 255, 0.5);
|
border-radius: 0.33rem;
|
|
.reg-num {
|
text-align: center;
|
margin: 0 auto;
|
margin-top: 0.8rem;
|
|
.div1 {
|
font-size: 2rem;
|
font-family: Impact;
|
color: #278afa;
|
line-height: 2.42rem;
|
text-align: center;
|
margin-left: auto;
|
margin-right: 0;
|
}
|
|
.div2 {
|
font-size: 1rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #278afa;
|
text-align: center;
|
margin: 0 auto;
|
margin-left: 0;
|
margin-right: auto;
|
margin-top: 0.6rem;
|
}
|
}
|
|
.reg-desc {
|
font-size: 1.67rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #6c99be;
|
line-height: 2.33rem;
|
text-align: center;
|
}
|
}
|
|
.container-reg {
|
margin-top: 2rem;
|
|
.reg-img-service {
|
margin: 0 auto;
|
}
|
|
.reg-left {
|
margin-top: 1rem;
|
}
|
}
|
|
.container-alert {
|
background: #e9f4fd;
|
box-shadow: 0.5rem 0.33rem 2rem 0rem rgba(198, 212, 228, 0.38),
|
inset 0rem 0.17rem 0.25rem 0rem rgba(255, 255, 255, 0.5);
|
border-radius: 0.33rem;
|
display: flex;
|
|
.reg-left {
|
margin-top: 0.5rem;
|
}
|
|
.reg-num {
|
margin-top: 1.3rem;
|
}
|
|
.reg-img-alert {
|
background-size: 100% 100%;
|
width: 3.83rem;
|
height: 3.83rem;
|
background-image: url("../../assets/screen/screen2/itm-alert.png");
|
margin-left: 2.6rem;
|
margin-top: 1.3rem;
|
//width: 6.42rem;
|
//height: 6.42rem;
|
}
|
}
|
}
|
</style>
|
