<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['3'] && switchDeviceStatus['3'].online || 0 }}</span>
|
<span class="div2">个</span>
|
</div>
|
<div class="reg-desc">
|
从无到有
|
</div>
|
</div>
|
<div class="flex1 reg-img-service">
|
<div class="reg-img-2-2"></div>
|
<div class="reg-num flex">
|
<span class="div1">{{ switchDeviceStatus['3'] && switchDeviceStatus['3'].offline || 0 }}</span>
|
<span class="div2">个</span>
|
</div>
|
<div class="reg-desc">
|
从有到无
|
</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="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
|
prop="deviceNameDNS"
|
label="Device Name">
|
</el-table-column>
|
<!-- <el-table-column
|
prop="deviceNameDNS"
|
label="DNS">
|
</el-table-column> -->
|
<el-table-column
|
prop="ipAddress"
|
label="Ip Address"
|
width="150"
|
>
|
</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-column
|
prop="cabinetName"
|
label="Cabinet Name" width="150">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.cabinetName" placeholder="请选择机柜" filterable clearable>
|
<el-option
|
v-for="item in cabinetList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="areaCode"
|
label="Area Code">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.areaCode" placeholder="请选择区域" filterable clearable>
|
<el-option
|
v-for="item in areaList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="Operator">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="primary"
|
|
@click="handleConfirm(scope.row)">确认</el-button>
|
</template>
|
</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";
|
import {getSwitchBord,getAreaCode,AssignSwitch} from "@/api/area";
|
|
export default {
|
components: {itmEqu, itmLine},
|
props: {
|
areas: [],
|
chartclose: false,
|
switchDeviceStatus: {},
|
switchInfo: {},
|
},
|
mounted(){
|
this.getSwitchBord()
|
this.getAreaCode()
|
},
|
data() {
|
return {
|
showSwitchBoardInfoTable: false,
|
cabinetList:[],
|
areaList:[],
|
}
|
},
|
methods: {
|
async handleConfirm(row) {
|
// 检查必填项
|
if (!row.cabinetName || !row.areaCode) {
|
this.$message.error('交换机柜名和区域代码不能为空');
|
return;
|
}
|
|
// if (!row.cabinetName) {
|
// this.$message.error('交换机柜名不能为空');
|
// return;
|
// }
|
|
let confirmRes= await this.$confirm('确认提交吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
|
if(confirmRes=="confirm"){
|
let deviceInfo = {
|
deviceInfo: {
|
cabinetName: row.cabinetName,
|
switchName: row.deviceNameDNS,
|
port: row.nasPort,
|
macAddress: row.macAddress,
|
ipAddress: row.ipAddress,
|
areaCode: row.areaCode,
|
}
|
};
|
|
let res= await AssignSwitch(deviceInfo)
|
|
if(res.isSuccess){
|
this.showSwitchBoardInfoTable=false
|
this.$emit("refresh", "")
|
}
|
|
}
|
},
|
closeself() {
|
this.$emit("show", false);
|
},
|
showSwitchBoard(){
|
this.$router.push({path: "/switch-board"});
|
// this.$router.push({path: "/area", query: {code: '01'}});
|
},
|
|
getSwitchBord(){
|
getSwitchBord().then((res) => {
|
this.cabinetList = res.cabinetList || [];
|
});
|
},
|
|
getAreaCode(){
|
getAreaCode().then((res) => {
|
this.areaList = res.cabinetList || [];
|
});
|
},
|
},
|
};
|
</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>
|
