<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 class="orange" :style="'background-image:url('+ getBackgroundUrl(item.oporation) +')'" :src="getImgUrl(item.equipmentTypePictures)">
|
</div>
|
</div>
|
</div>
|
<p style="margin-top: 5px;">
|
<!--<span ref="message">{{item.equipmentName}}</span>-->
|
<span ref="message">{{item.equipmentName}}({{item.equipmentId}})</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
<equment-detai-model ref="equmentDetaiModel"></equment-detai-model>
|
</a-card>
|
</template>
|
|
<script>
|
import EqumentDetaiModel from './EqumentDetaiModel'
|
import {getFileAccessHttpUrl} from '@/api/manage';
|
import {
|
getAction
|
} from '@/api/manage'
|
|
export default {
|
name: 'EquipmentLayout',
|
components: { EqumentDetaiModel },
|
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)
|
},
|
getBackgroundUrl(imgurl){
|
return require("../../../../../assets/"+imgurl+".gif");
|
},
|
openDetail(item) {
|
if(item.oporation == 0){
|
this.$message.warn("设备处于关机状态！");
|
return false;
|
}
|
console.log(item);
|
this.$refs.equmentDetaiModel.initData(item.id);
|
this.$refs.equmentDetaiModel.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%;
|
}
|
@media screen and (min-width: 1920px){
|
.containerequip{
|
height: 640px!important;
|
overflow: scroll;
|
}
|
}
|
@media screen and (min-width: 1680px) and (max-width: 1920px){
|
.containerequip{
|
height: 640px!important;
|
overflow: scroll;
|
}
|
}
|
@media screen and (min-width: 1400px) and (max-width: 1680px){
|
.containerequip{
|
height: 493px!important;
|
overflow: scroll;
|
}
|
}
|
@media screen and (min-width: 1280px) and (max-width: 1400px){
|
.containerequip{
|
height: 493px!important;
|
overflow: scroll;
|
}
|
}
|
@media screen and (max-width: 1280px){
|
.containerequip{
|
height: 394px!important;
|
overflow: scroll;
|
}
|
}
|
.container_content {
|
width: 100%;
|
/*display: flex;*/
|
/*flex-wrap: wrap;*/
|
/*justify-content: space-between;*/
|
/*align-items: center;*/
|
position: relative;
|
}
|
|
.container_content .contnet {
|
width: 20%;
|
display: inline-block;
|
text-align: center;
|
margin-bottom: 5%;
|
/*float: left;*/
|
}
|
|
.container_content .contnet p {
|
padding-top: 5%;
|
}
|
|
.container_content .contnet img {
|
padding: 5%;
|
}
|
|
.addclass {
|
/*float: left;*/
|
/*position: absolute;*/
|
/*top: 0;*/
|
/*left: 0;*/
|
}
|
|
.noaddclass {
|
/*float: left;*/
|
}
|
|
/*.addclass .content_equipment img {*/
|
/*border-bottom: 2px solid #e957ff;*/
|
/*!*padding-bottom: 8%;*!*/
|
/*}*/
|
.addclass p {
|
border-bottom: 2px solid #e957ff;
|
/*padding-bottom: 8%;*/
|
}
|
</style>
|
