<template>
|
<div class="ITM m-l-d flex2" v-show="!chartclose">
|
<div class="itm-container-top">
|
<div class="flex top-desc">
|
<div class="desc1">ITM设备</div>
|
</div>
|
<div class="container-equ">
|
<itm-equ :info="info" :key="info.code" v-if="info.code"></itm-equ>
|
</div>
|
|
<div class="flex top-desc m-t-4rem">
|
<div class="desc1">{{ code }}区</div>
|
</div>
|
<div class="container-equ-num">
|
<div class="container-equ-num-item">
|
<div class="num g">{{ info.normal || 0 }}</div>
|
<div class="desc2">正常</div>
|
</div>
|
<div class="container-equ-num-item">
|
<div class="num y">{{ info.warn || 0 }}</div>
|
<div class="desc2">预警</div>
|
</div>
|
<div class="container-equ-num-item">
|
<div class="num r">{{ info.alarm || 0 }}</div>
|
<div class="desc2">故障</div>
|
</div>
|
</div>
|
|
<div class="tj-line"></div>
|
<div class="tj-list">
|
<div class="service-list-arr" id="my_serve_info_list">
|
<div class="service-list-arr-item" v-for="(item, index) of data_service_list" :key="index">
|
<div class="time">{{ item.time }}</div>
|
<div class="flex1 service-list-arr-item_content" v-html="item.desc"></div>
|
<div class="dot" :class="item.status"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="!chartclose" @click="closeself" class="chart-close"></div>
|
</div>
|
</template>
|
<script>
|
import itmEqu from "./chart-itm";
|
import { getAreaTjData, getFaultInfo } from "@/api/area";
|
|
export default {
|
props: {
|
code: "",
|
chartclose: false,
|
},
|
components: { itmEqu },
|
data() {
|
return {
|
info: {
|
code: "",
|
},
|
open: true,
|
data_service_list: [],
|
serve_scroll_num: 0,
|
serve_timer: undefined,
|
};
|
},
|
methods: {
|
closeself() {
|
console.log('closeself')
|
// this.open = false;
|
this.$emit("closeself");
|
},
|
async showServe() {
|
this.$modal.loading();
|
{
|
|
const data = await getFaultInfo(this.code);
|
this.data_service_list = [];
|
if (data && data.faultInfo) {
|
var index = 0;
|
for (var item of data.faultInfo) {
|
//需要根据名字过滤
|
this.data_service_list.push({
|
status: item.node == '异常' ? "red" : "green",
|
time: ++index,
|
desc: `${item.areaCode}/${item.portMessage}<br/>${item.cabineName}/${item.switchDeviceName}/${item.switchPort}`,
|
});
|
}
|
setTimeout(() => {
|
this.startScrolling();
|
}, 1000);
|
}
|
console.log("data_service_list", this.data_service_list);
|
}
|
|
this.hideServe = false;
|
// console.log("showServe", this.hideServe);
|
|
this.$modal.closeLoading();
|
},
|
startScrolling() {
|
this.stopScrolling();
|
const myDiv = document.getElementById("my_serve_info_list");
|
this.serve_timer = setInterval(() => {
|
if (myDiv) {
|
myDiv.scrollTo(0, this.serve_scroll_num);
|
this.serve_scroll_num++;
|
if (myDiv.scrollTop >= myDiv.scrollHeight - myDiv.clientHeight) {
|
this.serve_timer && clearInterval(this.serve_timer);
|
this.serve_timer = null;
|
setTimeout(() => {
|
this.serve_scroll_num = 0;
|
this.startScrolling();
|
}, 1500);
|
}
|
}
|
}, 20);
|
},
|
stopScrolling() {
|
this.serve_scroll_num = 0;
|
this.serve_timer && clearInterval(this.serve_timer);
|
},
|
},
|
async mounted() {
|
//获取数据并且传入
|
const { switchAreaInfo } = await getAreaTjData(this.code);
|
//根据标签过滤
|
if (switchAreaInfo) {
|
for (var item of switchAreaInfo) {
|
if (item.areaCode == this.code) {
|
this.info = {
|
...this.info,
|
...item.areaStatic,
|
code: this.code,
|
};
|
}
|
}
|
}
|
this.showServe()
|
},
|
destroyed() {
|
this.stopScrolling();
|
}
|
};
|
</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: 2rem;
|
z-index: 5;
|
/* zoom: 0.8; */
|
top: 6.818rem;
|
zoom: 1.12;
|
|
/* top: 0; */
|
/* top: calc($height-header - 0rem); */
|
.chart-close {
|
width: 2.6rem;
|
height: 2.6rem;
|
position: absolute;
|
right: 1rem;
|
top: 2.5rem;
|
background-size: 100% 100%;
|
background-image: url("../../assets/area/chart-cloase.svg");
|
cursor: pointer;
|
}
|
|
.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: 38.67rem; */
|
padding-top: 1rem;
|
padding-bottom: 1.5rem;
|
|
.top-desc {
|
padding-left: 2.5rem;
|
}
|
|
.container-equ-num {
|
display: flex;
|
|
.container-equ-num-item {
|
margin: 0 auto;
|
flex: 1;
|
text-align: center;
|
|
.num {
|
font-size: 3rem;
|
font-family: Impact;
|
|
line-height: 3.6rem;
|
}
|
|
.num.g {
|
color: #00ae6a;
|
}
|
|
.num.y {
|
color: #e8be19;
|
}
|
|
.num.r {
|
color: #e20909;
|
}
|
|
.desc2 {
|
font-size: 2rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #012b5e;
|
line-height: 2.8rem;
|
}
|
}
|
}
|
}
|
|
.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: 53.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: 2rem;
|
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;
|
}
|
}
|
|
.tj-list {
|
padding: 2.2rem;
|
padding-top: 1.4rem;
|
|
.service-list-arr {
|
// background-color: #f2f8fd;
|
overflow: hidden;
|
height: 30.3rem;
|
|
.service-list-arr-item {
|
width: 100%;
|
min-height: 3rem;
|
/* margin-top: 2.2rem; */
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
height: fit-content;
|
|
.time {
|
font-size: 1.2rem;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #a1b6c8;
|
line-height: 1.7rem;
|
margin-right: 1rem;
|
width: 1.5rem;
|
}
|
|
.service-list-arr-item_content {
|
font-family: PingFangSC-Medium, PingFang SC;
|
color: #235884;
|
line-height: 1.17rem;
|
text-align: left;
|
margin-left: 0.4rem;
|
margin-right: 1.5rem;
|
padding-top: 1rem;
|
|
font-size: 1.4rem;
|
font-weight: 500;
|
line-height: 1.4rem;
|
}
|
|
.dot {
|
width: 0.58rem;
|
height: 0.58rem;
|
border-radius: 50%;
|
margin-top: 0.8rem;
|
margin-left: auto;
|
margin-right: 10px;
|
}
|
|
.dot.red {
|
background: #c10b0b;
|
}
|
|
.dot.yellow {
|
background: #fda928;
|
}
|
|
.dot.green {
|
background: #17a537;
|
}
|
}
|
}
|
}
|
|
.tj-line {
|
width: 30.1rem;
|
// height: 0.1rem;
|
// max-height: 0.1rem;
|
border: 0.1rem solid #ccdeec;
|
background-color:#ccdeec ;
|
margin: 0 auto;
|
margin-top: 2rem;
|
margin-bottom: 1.5rem;
|
}
|
}
|
</style>
|
