<Swiper
v-if="deviceData.devices.length !== 0"
:modules="modules"
:slides-per-view="1"
direction="vertical"
:autoplay="{
delay: 30000,
disableOnInteraction: false
}"
:loop="true"
:virtual="Math.ceil((deviceData.devices.length / 2)) > 10"
>
<swiper-slide v-for="(item, idx) in Math.ceil((deviceData.devices.length / 2))" :key="idx" :virtualIndex="idx">
<div class="swiper-container">
<div class="device-info" v-for="(device,newidx) in fn(deviceData.devices,idx)" :key="newidx">
<div class="device-name">
<div class="icon">{{device.deviceCount || 0}}</div>
<div class="name">{{ device.name }}</div>
</div>
<div class="device-status running-block">
<div class="title">
<div class="line"></div>
运行情况
</div>
<div class="data">
<div class="block running">
<div class="label">运行</div>
<div class="value">{{ device.runningStats['runningCount'] || '0' }}</div>
</div>
<div class="block standBy">
<div class="label">待机</div>
<div class="value">{{ device.runningStats['standbyCount'] || '0' }}</div>
</div>
<div class="block standBy">
<div class="label">离线</div>
<div class="value">{{ device.runningStats['offlineCount'] || '0' }}</div>
</div>
<div class="block standBy">
<div class="label">停机</div>
<div class="value">{{ device.runningStats['stoppingCount'] || '0' }}</div>
</div>
</div>
<div class="div-right-border"></div>
</div>
<div class="device-status">
<div class="title">
<div class="line"></div>
报警情况
</div>
<div class="data">
<div class="block warning">
<div class="label">报警</div>
<div class="value">{{ device.healthStats['alarmCount'] || '0' }}</div>
</div>
<div class="block early-waring">
<div class="label">预警</div>
<div class="value">{{ device.healthStats['warningCount'] || '0' }}</div>
</div>
</div>
</div>
</div>
</div>
</swiper-slide>
</Swiper>
const modules = [Autoplay, Virtual, Pagination, Mousewheel]
// 根据一个slide过滤数据显示
const fn = (data, deviceIndex) => {
let newData = data.filter((item, idx) => {
// data.length % 4 == 0
if ((deviceIndex + 1) / 2 < data.length) {
return idx >= deviceIndex * 2 && idx <= deviceIndex * 2 + 1
} else {
return idx >= deviceIndex * 2 - 1 && idx <= (deviceIndex * 2 + (data.length % 2 - 1))
}
})
return newData
}