101 lines
2.7 KiB
Vue
101 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<!-- 设备列表 -->
|
||
|
|
<div style="height: 100%; position: relative">
|
||
|
|
<ChartsBox :boxTitle="`设备列表`">
|
||
|
|
<div class="container">
|
||
|
|
<div
|
||
|
|
class="device-item"
|
||
|
|
v-for="(item, index) in deviceList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
:src="
|
||
|
|
item.onLine
|
||
|
|
? `${require('@/assets/image/home-foundation-pit/line_big.png')}`
|
||
|
|
: `${require('@/assets/image/home-foundation-pit/offline_big.png')}`
|
||
|
|
"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
<span :style="item.onLine ? 'color:#71C4FF' : ''">
|
||
|
|
{{ item.name }}
|
||
|
|
</span>
|
||
|
|
<span :style="item.onLine ? 'color:#71C4FF' : ''">
|
||
|
|
{{ item.code }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</ChartsBox>
|
||
|
|
|
||
|
|
<div class="case">
|
||
|
|
<img src="@/assets/image/home-foundation-pit/line.png" alt="" />
|
||
|
|
<span>在线</span>
|
||
|
|
<img src="@/assets/image/home-foundation-pit/offline.png" alt="" />
|
||
|
|
<span>离线</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ChartsBox from '@/components/ChartsBox/index'
|
||
|
|
export default {
|
||
|
|
components: { ChartsBox },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
deviceList: [
|
||
|
|
{ name: '1号设备', code: 'YKD-231', onLine: true },
|
||
|
|
{ name: '2号设备', code: 'YKD-233', onLine: true },
|
||
|
|
{ name: '3号设备', code: 'YKD-232', onLine: false },
|
||
|
|
{ name: '3号设备', code: 'YKD-232', onLine: false },
|
||
|
|
{ name: '3号设备', code: 'YKD-232', onLine: false },
|
||
|
|
{ name: '3号设备', code: 'YKD-232', onLine: false },
|
||
|
|
],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.container {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
// justify-content: space-around;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 12px;
|
||
|
|
|
||
|
|
// transform: translateY(10px);
|
||
|
|
|
||
|
|
.device-item {
|
||
|
|
width: calc((100% - 20px) / 6);
|
||
|
|
margin-right: 4px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .device-item:nth-child(6n) {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.case {
|
||
|
|
font-size: 12px;
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
right: 10px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
span {
|
||
|
|
padding: 0 12px 0 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|