| | |
| | | <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)"> |
| | | <img style="width: 11%;" :src="getStatusImgUrl(item.oporation)" alt=""> |
| | | <img class="orange" :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> |
| | |
| | | } |
| | | 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.$message.warn("设备处于关机状态!"); |
| | | this.$notification.warning({ |
| | | message:'消息', |
| | | description:"设备处于关机状态!" |
| | | }); |
| | | return false; |
| | | } |
| | | console.log(item); |
| | |
| | | .equipment_box img{ |
| | | width: 45%; |
| | | } |
| | | |
| | | .containerequip{ |
| | | overflow: auto; |
| | | } |
| | | |
| | | @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; |
| | | } |
| | | |
| | |
| | | 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> |