<template>
|
<div class="ITM-left m-l-d flex2">
|
<!-- <div class="itm-container-top"> -->
|
<!-- <div class="room top-desc">
|
<div class="reg-img-1-2"></div>
|
<div class="reg-num">
|
<span class="div1">{{ down }}</span>
|
</div>
|
<div class="desc1">待处理 Critical</div>
|
</div>
|
<div class="room top-desc">
|
<div class="reg-img-1-1"></div>
|
<div class="reg-num">
|
<span class="div2">{{ warning }}</span>
|
</div>
|
<div class="desc1">待处理 Warning</div>
|
</div> -->
|
<!-- </div> -->
|
|
<!-- </div> -->
|
<div class="itm-container-bottom">
|
<div class="flex top-desc">
|
<div class="desc1">网络布局</div>
|
<div class="flex">
|
<el-input placeholder="请输入ip地址" clearable class="input" @en v-model="searchip"></el-input>
|
<el-button class="button" @click="searchAreaByIp">搜索</el-button>
|
</div>
|
</div>
|
<div id="myDiv" class="service-list-arr">
|
<div
|
class="service-list-arr-item"
|
v-for="(item, index) of areas"
|
:key="index"
|
@click="toArea(item.areaCode)"
|
>
|
<div class="service-list-arr-item_content" :class="[item.areaStatic&&item.areaStatic.alarm>0?'error':'']">
|
{{ item.areaDeviceCount }}
|
<!-- <span class="num">个</span> -->
|
</div>
|
<div class="dot" :class="[item.areaStatic&&item.areaStatic.alarm>0?'error':'']">{{ item.areaCode }}区</div>
|
</div>
|
</div>
|
|
<div class="flex top-desc">
|
<div class="desc1">告警预览</div>
|
</div>
|
<div class="container-equ">
|
<itm-line :areas="areas"></itm-line>
|
</div>
|
</div>
|
|
<div v-if="!chartclose" @click="closeself" class="chart-close"></div>
|
</div>
|
</template>
|
<script>
|
import itmLine from "./components/chart-itm-line";
|
import {apiSearchAreaByIp} from "@/api/area";
|
|
export default {
|
components: {itmLine},
|
props: {
|
areas: [],
|
chartclose: false,
|
},
|
data() {
|
return {
|
num: 0,
|
timer: null,
|
down: 0,
|
warning: 0,
|
searchip: '',
|
};
|
},
|
methods: {
|
//获取数据
|
closeself() {
|
this.$emit("show", false);
|
},
|
toArea(areacode) {
|
this.$router.push({path: "/area", query: {code: areacode}});
|
},
|
async searchAreaByIp() {
|
if (this.searchip.trim()) {
|
this.$modal.loading()
|
const res = await apiSearchAreaByIp(this.searchip.trim())
|
console.log('res', res)
|
this.$modal.closeLoading()
|
if (res && res.areaCode) {
|
await this.$modal.confirm('此ip位于' + res.areaCode + '区,桥架端口:' + (res.networkPort||'-') + ',是否前往？')
|
this.$router.push({path: "/area", query: {code: res.areaCode, networkPort: res.networkPort || ''}});
|
|
} else {
|
this.$message.warning('未找到对应区域')
|
}
|
}
|
},
|
},
|
mounted() {
|
},
|
destroyed() {
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.ITM-left {
|
/* background: #e9f4fd; */
|
|
width: 31.67rem;
|
padding-left: $width-screen3-margin-d;
|
padding-right: $width-screen3-margin-d;
|
// padding-top: $width-screen3-margin-d * 1;
|
position: fixed;
|
padding-left: 0;
|
top: calc($height-header - 2rem);
|
|
/* max-height: 100vh; */
|
/* overflow-y: scroll; */
|
padding-left: $width-screen3-margin-d;
|
padding-right: $width-screen3-margin-d;
|
// padding-top: $width-screen3-margin-d * 1;
|
position: fixed;
|
width: 47.8rem;
|
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; */
|
/* right: 162.336rem; */
|
left: -1rem;
|
|
/* zoom: 0.8; */
|
/* top: 2.818rem; */
|
zoom: 1.12;
|
|
/* top: 0; */
|
/* top: calc($height-header - 0rem); */
|
.chart-close {
|
width: 2.6rem;
|
height: 2.6rem;
|
position: absolute;
|
right: 5rem;
|
top: 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: 15.67rem;
|
padding-top: 1rem;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-evenly;
|
|
.room {
|
width: 14.7rem;
|
}
|
}
|
|
.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: 86.3rem;
|
max-height: 86.3rem;
|
padding-top: 1rem;
|
overflow-y: scroll;
|
|
.service-list-arr {
|
//background-color: #f2f8fd;
|
//overflow: hidden;
|
min-height: 62.3rem;
|
width: 41rem;
|
margin-left: -1rem;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
padding-top: 2rem;
|
|
.service-list-arr-item {
|
align-items: center;
|
margin: 0 auto;
|
margin-bottom: 1.2rem;
|
position: relative;
|
|
//width: 9.45rem;
|
.service-list-arr-item_content {
|
font-size: 2.8rem;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 600;
|
|
text-align: center;
|
font-family: Impact;
|
color: #278afa;
|
line-height: 8.7rem;
|
background-image: url("../../assets/main-map/num_bg.png");
|
width: 8.7rem;
|
height: 8.7rem;
|
background-size: 100% 100%;
|
|
.num {
|
font-size: 1.39rem;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
color: #117aee;
|
line-height: 2rem;
|
}
|
}
|
|
.service-list-arr-item_content.error {
|
color: #fa2727;
|
}
|
|
.dot {
|
line-height: 3.2rem;
|
font-size: 2.11rem;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
color: #012b5e;
|
line-height: 3.2rem;
|
text-align: center;
|
}
|
|
.dot.error {
|
color: #fa2727;
|
}
|
}
|
|
.service-list-arr-item:hover::before {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
|
content: "";
|
background-color: #059ce293;
|
}
|
|
.service-list-arr-item:last-child {
|
margin-left: 1rem;
|
}
|
|
.div2 {
|
font-size: 2rem;
|
font-family: Impact;
|
color: #fda928;
|
line-height: 2.42rem;
|
text-align: center;
|
margin-left: auto;
|
margin-right: 0;
|
}
|
}
|
|
//overflow-x: unset;
|
.top-desc {
|
margin-bottom: 1rem;
|
|
.reg-img-1-1 {
|
margin-top: 0.8rem;
|
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");
|
}
|
|
.desc1 {
|
font-size: 2.33rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #012b5e;
|
line-height: 3.33rem;
|
margin-top: 0.8rem;
|
// margin: 1rem;
|
margin-top: 1.5rem;
|
}
|
|
.input {
|
margin-top: 1.3rem;
|
height: 3.33rem;
|
lin-height: 3.33rem;;
|
margin-left: 1.5rem;
|
width: 20rem;
|
}
|
|
.button {
|
margin-top: 1.3rem;
|
//height: 3.33rem;
|
//lin-height: 3.33rem;;
|
}
|
|
.reg-num {
|
text-align: center;
|
margin: 0 auto;
|
margin-top: 1.5rem;
|
|
.div1 {
|
font-size: 2rem;
|
font-family: Impact;
|
color: #c10b0b;
|
line-height: 2.42rem;
|
text-align: center;
|
margin-left: auto;
|
margin-right: 0;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
