158 lines
4.5 KiB
Vue
158 lines
4.5 KiB
Vue
<template>
|
|
<!-- 设备列表 -->
|
|
<div style="height: 100%; position: relative">
|
|
<ChartsBox :boxTitle="`设备列表`">
|
|
<div class="container" v-if="deviceList.length > 0">
|
|
<div class="scroll-container">
|
|
<div
|
|
class="device-item"
|
|
v-for="(item, index) in deviceList"
|
|
:key="index"
|
|
@click="onHandleSelectDevice(index, item.id)"
|
|
>
|
|
<img
|
|
:src="
|
|
item.isOnline == 1
|
|
? `${require('@/assets/image/home-foundation-pit/line_big.png')}`
|
|
: `${require('@/assets/image/home-foundation-pit/offline_big.png')}`
|
|
"
|
|
alt=""
|
|
/>
|
|
<span
|
|
:style="activeIndex === index ? 'color:#0ff' : ''"
|
|
>
|
|
{{ item.devName }}
|
|
</span>
|
|
<span
|
|
:style="activeIndex === index ? 'color:#0ff' : ''"
|
|
>
|
|
{{ item.devCode }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container" v-else>
|
|
<EmptyModel />
|
|
</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'
|
|
import EmptyModel from '@/components/EmptyModel/index.vue'
|
|
import { getMassConcreteListAPI } from '@/api/home-foundation-pit.js'
|
|
export default {
|
|
components: { ChartsBox, EmptyModel },
|
|
data() {
|
|
return {
|
|
deviceList: [],
|
|
activeIndex: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
async getMassConcreteListData() {
|
|
const { data: res } = await getMassConcreteListAPI({
|
|
typeCode: '9000300',
|
|
})
|
|
|
|
console.log(
|
|
`%c🔍 深基坑监测 ----> 设备列表(左二) 数据出参 %c`,
|
|
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
|
'',
|
|
res,
|
|
)
|
|
this.deviceList = res
|
|
if (res.length > 0) {
|
|
this.$emit('handleSelectDevice', res[0].id)
|
|
}
|
|
},
|
|
onHandleSelectDevice(index, id) {
|
|
this.activeIndex = index
|
|
this.$emit('handleSelectDevice', id)
|
|
},
|
|
},
|
|
created() {
|
|
this.getMassConcreteListData()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
|
|
// transform: translateY(10px);
|
|
|
|
.scroll-container {
|
|
flex: 1; // 占据剩余空间
|
|
overflow-y: auto; // 垂直滚动
|
|
scrollbar-width: thin; // Firefox滚动条样式
|
|
scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
|
|
z-index: 9;
|
|
padding: 0 12px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
|
|
/* Webkit浏览器滚动条样式 */
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.device-item {
|
|
width: calc((100% - 20px) / 4);
|
|
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(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.case {
|
|
font-size: 12px;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
padding: 0 12px 0 6px;
|
|
}
|
|
}
|
|
</style>
|