You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.7 KiB
127 lines
2.7 KiB
<template> |
|
<view> |
|
<view v-for="(item, index) in list" :key="index" class="alarm-box"> |
|
<view class="alarm-left" :style="{ borderColor: item.color }"> |
|
<i>{{ item.alarmName }}</i> |
|
<i>{{ item.levelNanme }}</i> |
|
</view> |
|
<view class="alarm-center"> |
|
<text>{{ item.deviceName }}</text> |
|
<text>品牌:{{ item.brand }}</text> |
|
<text>型号:{{ item.model }}</text> |
|
<text>报警时间:{{ item.alarmTime }}</text> |
|
<view class="alarm-center-btn">一键报送</view> |
|
</view> |
|
<view class="alarm-right"></view> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
colorList: { |
|
特别严重: "rgba(189,49,36,1)", |
|
严重: "rgba(233,157,66,1)", |
|
}, |
|
list: [], |
|
}; |
|
}, |
|
mounted() { |
|
this.deviceList() |
|
}, |
|
methods: { |
|
deviceList() { |
|
this.$u.api.deviceList().then(res => { |
|
if (res.code == 200) { |
|
let data_ = res.data |
|
data_.forEach(v => { |
|
if (v.alarmLevel == 1) { |
|
v.alarmName = '一级' |
|
v.levelNanme = '超级严重' |
|
|
|
} |
|
if (v.alarmLevel == 2) { |
|
v.alarmName = '二级' |
|
v.levelNanme = '严重' |
|
} |
|
v.color = this.colorList[v.levelNanme] |
|
}); |
|
this.list = res.data |
|
} |
|
}) |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.alarm-box { |
|
margin: 0 40rpx 32rpx; |
|
background-color: #ffffff; |
|
border-radius: 20rpx; |
|
display: flex; |
|
flex-direction: row; |
|
|
|
.alarm-left { |
|
width: 160rpx; |
|
height: 160rpx; |
|
text-align: center; |
|
border: 16rpx solid rgba(189, 49, 36, 1); |
|
border-radius: 50%; |
|
margin: 36rpx 36rpx 36rpx 48rpx; |
|
|
|
i { |
|
display: block; |
|
text-align: center; |
|
|
|
&:nth-child(1) { |
|
color: rgba(16, 16, 16, 1); |
|
font-size: 28rpx; |
|
padding-top: 30rpx; |
|
} |
|
|
|
&:nth-child(2) { |
|
color: rgba(190, 190, 190, 1); |
|
font-size: 26rpx; |
|
} |
|
} |
|
} |
|
|
|
.alarm-center { |
|
flex: 1; |
|
color: rgba(154, 154, 154, 1); |
|
font-size: 24rpx; |
|
position: relative; |
|
|
|
text { |
|
display: block; |
|
line-height: 40rpx; |
|
font-size: 24rpx; |
|
|
|
&:nth-child(1) { |
|
color: rgba(0, 0, 0, 1); |
|
font-size: 28rpx; |
|
padding: 28rpx 0 8rpx 0; |
|
} |
|
|
|
&:nth-child(2) {} |
|
} |
|
|
|
.alarm-center-btn { |
|
width: 160rpx; |
|
height: 60rpx; |
|
line-height: 40rpx; |
|
border-radius: 8rpx; |
|
background-color: rgba(58, 98, 215, 0.16); |
|
color: rgba(58, 98, 215, 1); |
|
font-size: 28rpx; |
|
line-height: 60rpx; |
|
text-align: center; |
|
position: absolute; |
|
top: 28rpx; |
|
right: 40rpx; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
</style> |