<template>
|
<a-card :bordered="false">
|
<div class="containerequip">
|
<div class="container_content">
|
<div class="contnet" v-for="(item,index) in dataList" :key="index" :class="node == item.equipmentId ? 'addclass' : '' ">
|
|
<div class="content_equipment" @click="openDetail(item)">
|
<div class="equipment_box">
|
<div>
|
<img style="width: 11%;" v-if='item.oporation!==88' :src="getStatusImgUrl(item.oporation)" alt="">
|
<img class="orange" :src="getImgUrl(item.equipmentTypePictures)">
|
</div>
|
</div>
|
</div>
|
<p style="margin-top: 5px;">
|
<span :style="{color:item.oporation===88?'#f00':''}" ref="message">{{item.equipmentName}}({{item.equipmentId}})</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
<equipment-detail-modal ref="equipmentDetailModal"></equipment-detail-modal>
|
</a-card>
|
</template>
|
|
<script>
|
import EquipmentDetailModal from './EquipmentDetailModal'
|
import {getFileAccessHttpUrl} from '@/api/manage';
|
import {
|
getAction
|
} from '@/api/manage'
|
|
export default {
|
name: 'EquipmentLayout',
|
components: { EquipmentDetailModal },
|
props: { dataList: {
|
type: Array,
|
required: true,
|
default: []
|
}, equipmentId: '' ,
|
node:''},
|
data() {
|
return {
|
equipMessageTimer:''
|
}
|
},
|
created() {
|
},
|
mounted() {
|
|
},
|
methods: {
|
getImgUrl(img){
|
if(img == null || img ==''){
|
return require("../../../../../assets/default.png");
|
}
|
return getFileAccessHttpUrl(img)
|
},
|
getStatusImgUrl(imgStaus){
|
if(imgStaus == 1){
|
return require("../../../../../assets/yellow.png");
|
}else if(imgStaus == 2){
|
return require("../../../../../assets/yellow.png");
|
}else if(imgStaus == 3){
|
return require("../../../../../assets/green.png");
|
}else if(imgStaus ==22){
|
return require("../../../../../assets/red.png");
|
}else if(imgStaus ==0){
|
return require("../../../../../assets/gray.png");
|
}else{
|
return require("../../../../../assets/gray.png");
|
}
|
},
|
getBackgroundUrl(imgurl){
|
return require("../../../../../assets/"+imgurl+".gif");
|
},
|
openDetail(item) {
|
if(item.oporation == 0){
|
// this.$message.warn("设备处于关机状态！");
|
this.$notification.warning({
|
message:'消息',
|
description:"设备处于关机状态！"
|
});
|
return false;
|
}
|
console.log(item);
|
this.$refs.equipmentDetailModal.initData(item.id);
|
this.$refs.equipmentDetailModal.timerModel(item.id);
|
// this.equipMessageTimer = setInterval(() => {
|
// setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
|
// },1000*10)
|
}
|
},
|
beforeDestroy(){
|
// clearInterval(this.equipMessageTimer);
|
// this.equipMessageTimer = null
|
}
|
}
|
</script>
|
<style scoped>
|
.gray{
|
background-image: url("../../../../../assets/gray.gif");
|
-webkit-background-size: 100% 100%;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
.green{
|
background-image: url("../../../../../assets/green.gif");
|
-webkit-background-size: 100% 100%;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
.red{
|
background-image: url("../../../../../assets/red.gif");
|
-webkit-background-size: 100% 100%;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
.orange{
|
/*background-image: url("../../../../../assets/orange.gif");*/
|
-webkit-background-size: 100% 100%;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
.equipment_box img{
|
width: 45%;
|
}
|
|
.containerequip{
|
overflow: auto;
|
}
|
|
@media screen and (min-width: 1920px){
|
.containerequip{
|
height: 640px!important;
|
}
|
}
|
@media screen and (min-width: 1680px) and (max-width: 1920px){
|
.containerequip{
|
height: 640px!important;
|
}
|
}
|
@media screen and (min-width: 1400px) and (max-width: 1680px){
|
.containerequip{
|
height: 493px!important;
|
}
|
}
|
@media screen and (min-width: 1280px) and (max-width: 1400px){
|
.containerequip{
|
height: 493px!important;
|
}
|
}
|
@media screen and (max-width: 1280px){
|
.containerequip{
|
height: 394px!important;
|
}
|
}
|
.container_content {
|
width: 100%;
|
position: relative;
|
}
|
|
.container_content .contnet {
|
width: 20%;
|
display: inline-block;
|
text-align: center;
|
margin-bottom: 5%;
|
}
|
|
.container_content .contnet p {
|
padding-top: 5%;
|
}
|
|
.addclass p {
|
border-bottom: 2px solid #e957ff;
|
}
|
</style>
|
