<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 style="cursor: pointer" @click="openDetail(item)">
|
<div class="equipment_box">
|
<div>
|
<img style="width: 11%;" :src="getStatusImgUrl(item.oporation)" alt="">
|
<img class="deviceImage" :src="getImgUrl(item.equipmentTypePictures)">
|
</div>
|
</div>
|
</div>
|
<p style="margin-top: 5px;">
|
<span 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: []
|
},
|
node: ''
|
},
|
methods: {
|
getImgUrl(img) {
|
if (img == null || img == '') {
|
return require('../../../../../assets/default.png')
|
}
|
return getFileAccessHttpUrl(img)
|
},
|
getStatusImgUrl(imgStatus) {
|
switch (imgStatus) {
|
case 1:
|
case 2:
|
return require('@/assets/yellow.png')
|
case 3:
|
return require('@/assets/green.png')
|
case 22:
|
return require('@/assets/red.png')
|
case 5:
|
return require('@/assets/orange.png')
|
default:
|
return require('@/assets/gray.png')
|
}
|
},
|
openDetail(item) {
|
if (item.oporation == 0) {
|
this.$notification.warning({
|
message: '消息',
|
description: '设备处于关机状态！'
|
})
|
return false
|
}
|
this.$refs.equipmentDetailModal.initData(item.id)
|
this.$refs.equipmentDetailModal.timerModel(item.id)
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.deviceImage {
|
-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>
|
