<div class="three" v-show="showfirst">
<div
v-for="(item, index) in allitem"
:key="index"
class="childboxItem"
ref="childitem"
>
<div
class="itembg"
:style="{
'background-image': 'url(' + loadImg(item.imageurl) + ')',
'background-repeat': 'no-repeat',
'background-size': '84% 80%',
'background-position': 'center',
}"
>
<div class="childbox">
<div class="btnbox">
<div v-if="index >= 3 && index <= 6">
<span
v-for="(btn, j) in ['电', '油']"
style="margin-right: 8px"
:key="j"
:class="{ active: item.type === j }"
@click="nxbtn(j, btn, item)"
>{{ btn }}</span
>
</div>
</div>
<p
@click="monchart(`${item.imageurl}`)"
style="cursor: pointer"
>
{{ item.titlemon }}
</p>
<p v-if="item.totalpower != ''">
总作业量: <span>{{ item.totalpower }}</span
><span>TEU</span>
</p>
<p v-if="item.totalpower != ''">
总用电量: <span>{{ item.scpower }}</span
><span>KWH</span>
</p>
<p v-if="item.totalpower != ''">
能耗总量: <span>{{ item.scpower }}</span
><span>KECG</span>
</p>
<p v-if="item.totalpower != ''">
平均单耗: <span>{{ item.fscpower }}</span
><span>KWH/万TEU</span>
</p>
<div v-else>
<p
style="
text-align: center;
font-size: 40px;
line-height: 132px;
letter-spacing: 2px;
margin-left: 16px;
color: rgb(126, 124, 132);
"
>
暂无数据
</p>
</div>
</div>
</div>
<!-- 暂无数据 -->
</div>
</div>
这是data中的v-for渲染div数据
allitem: [
{
titlemon: '岸桥(8台)',
totalpower: '12311',
scpower: '1233',
fscpower: '1124',
imageurl: '/aqbg.png'
},
{
titlemon: '门机(8台)',
totalpower: '',
scpower: '1233',
fscpower: '1124',
imageurl: '/mjbg.png'
},
{
titlemon: '场桥(19台)',
totalpower: '12311',
scpower: '1233',
fscpower: '1124',
imageurl: '/cqbg.png',
},
{
titlemon: '堆高机(10台)',
totalpower: '12311',
scpower: '1233',
fscpower: '1124',
imageurl: '/dgj.png',
type: 0,
},
{
titlemon: '正面吊(8台)',
totalpower: '',
scpower: '1233',
fscpower: '1124',
imageurl: '/zmd.png',
type: 0,
},
{
titlemon: '集卡(47辆)',
totalpower: '12311',
scpower: '1233',
fscpower: '1124',
imageurl: '/jk.png',
type: 0,
},
{
titlemon: '叉车(15辆)',
totalpower: '12311',
scpower: '1233',
fscpower: '1124',
imageurl: '/chache.png',
type: 0,
},
{
titlemon: '其他',
totalpower: '12311',
scpower: '1233',
fscpower: '1124',
imageurl: '/qita.png'
}
],
调用背景图片的方法
loadImg(img) {
return require(`../../imgs${img}`)
},
油电 按钮点击展示对应数据 及 高亮背景色
nxbtn(j, btn, item) {
item.type = j
// if (btn) return
},
效果呈现