<template>
|
<div class="layout">
|
<Row>
|
<i-col v-for="(machine,key) in machines" :key="key" :span="getCol">
|
<div class="machine-item">
|
<div class="machine-item-inner">
|
<img src="../../images/machine.png">
|
<div class="img-area screen">
|
<Poptip title="17寸工控一体化屏" placement="right">
|
<div slot="content" v-html="machine.screen"></div>
|
<div class="img-area-inner"></div>
|
</Poptip>
|
</div>
|
<div class="img-area test-slot">
|
<Poptip title="抽屉式板卡测试槽" content="状态信息" placement="right">
|
<div slot="content" v-html="machine.testSlot"></div>
|
<div class="img-area-inner"></div>
|
</Poptip>
|
</div>
|
<div class="img-area smart-interface">
|
<Poptip title="智能转换接口板" content="状态信息" placement="right">
|
<div slot="content" v-html="machine.smartInterface"></div>
|
<div class="img-area-inner"></div>
|
</Poptip>
|
</div>
|
<div class="img-area ac-module">
|
<Poptip title="采集模块" content="状态信息" placement="right">
|
<div slot="content" v-html="machine.acModule"></div>
|
<div class="img-area-inner"></div>
|
</Poptip>
|
</div>
|
<div class="img-area program-power">
|
<Poptip title="程控电源" content="状态信息" placement="right">
|
<div slot="content" v-html="machine.programPower"></div>
|
<div class="img-area-inner"></div>
|
</Poptip>
|
</div>
|
</div>
|
</div>
|
</i-col>
|
</Row>
|
</div>
|
</template>
|
<script>
|
export default {
|
data(){
|
return {
|
machines:[
|
{
|
screen: '17寸工控一体化屏状态信息',
|
testSlot: '抽屉式板卡测试槽状态信息',
|
smartInterface: '抽屉式板卡测试槽状态信息',
|
acModule: '采集模块状态信息',
|
programPower: '程控电源状态信息'
|
},
|
{
|
screen: '17寸工控一体化屏状态信息',
|
testSlot: '抽屉式板卡测试槽状态信息',
|
smartInterface: '抽屉式板卡测试槽状态信息',
|
acModule: '采集模块状态信息',
|
programPower: '程控电源状态信息'
|
},
|
{
|
screen: '17寸工控一体化屏状态信息',
|
testSlot: '抽屉式板卡测试槽状态信息',
|
smartInterface: '抽屉式板卡测试槽状态信息',
|
acModule: '采集模块状态信息',
|
programPower: '程控电源状态信息'
|
},
|
{
|
screen: '17寸工控一体化屏状态信息',
|
testSlot: '抽屉式板卡测试槽状态信息',
|
smartInterface: '抽屉式板卡测试槽状态信息',
|
acModule: '采集模块状态信息',
|
programPower: '程控电源状态信息'
|
}
|
]
|
}
|
},
|
computed: {
|
getCol: function() {
|
console.log(this.machines.length);
|
var machines = this.machines.length;
|
var col = 0;
|
if(machines != 0) {
|
col = Math.ceil(24/machines);
|
}
|
col = col<6?6:col;
|
return col;
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.machine-item {
|
text-align: center;
|
}
|
.machine-item-inner{
|
position: relative;
|
display: inline-block;
|
width: 192px;
|
height: 500px;
|
margin-top: 80px;
|
}
|
.machine-item-inner img{
|
width: auto;
|
height: 100%;
|
}
|
.img-area {
|
position: absolute;
|
}
|
.img-area:hover {
|
cursor: pointer;
|
}
|
/* 板卡测试柜屏幕 */
|
.img-area.screen {
|
top: 30px;
|
left: 40px;
|
}
|
.img-area.screen .img-area-inner {
|
width: 110px;
|
height: 100px;
|
background-color: none;
|
}
|
/* 板卡测试柜测试插槽 */
|
.img-area.test-slot {
|
top: 174px;
|
left: 35px;
|
}
|
.img-area.test-slot .img-area-inner {
|
width: 120px;
|
height: 20px;
|
background-color: none;
|
}
|
/* 板卡测试柜智能转换接口板 */
|
.img-area.smart-interface {
|
top: 270px;
|
left: 35px;
|
}
|
.img-area.smart-interface .img-area-inner {
|
width: 120px;
|
height: 12px;
|
background-color: none;
|
}
|
/* 板卡测试柜采集模块 */
|
.img-area.ac-module {
|
top: 335px;
|
left: 35px;
|
}
|
.img-area.ac-module .img-area-inner {
|
width: 120px;
|
height: 12px;
|
background-color: none;
|
}
|
/* 板卡测试柜称控电源 */
|
.img-area.program-power {
|
top: 395px;
|
left: 35px;
|
}
|
.img-area.program-power .img-area-inner {
|
width: 120px;
|
height: 12px;
|
background-color: none;
|
}
|
</style>
|
