143 lines
4.2 KiB
Vue
143 lines
4.2 KiB
Vue
<style lang='scss' scoped>
|
|
.alarmDetail{
|
|
width: 100%;
|
|
padding: 0rpx $paddingLR;
|
|
&-row{
|
|
padding: 20rpx;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&:last-child{
|
|
border-bottom: none;
|
|
}
|
|
&-label{
|
|
color: #666;
|
|
}
|
|
&-value{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
/* &-bottom-btn{
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
left: $paddingLR;
|
|
} */
|
|
&-popup-content{
|
|
padding: 30rpx $paddingLR;
|
|
}
|
|
.popup-alarmType-box{
|
|
width: 100%;
|
|
border-radius: 40rpx;
|
|
color: #1D9AFD;
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
|
|
}
|
|
.currentSelectValue{
|
|
color: #fff;
|
|
background-color: #1D9AFD;
|
|
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="alarmDetail">
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">场所名称</view>
|
|
<view class="alarmDetail-row-value">德润物业</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">设备类型</view>
|
|
<view class="alarmDetail-row-value">烟雾探测报警器</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">编号</view>
|
|
<view class="alarmDetail-row-value">德润物业</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">位置</view>
|
|
<view class="alarmDetail-row-value">中青大厦18楼101北区</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">警情类型</view>
|
|
<view class="alarmDetail-row-value">
|
|
<text class="pr10" style="color: #FC5D42;">火警</text>
|
|
<tuiIcon name="huozai" color="#FC5D42"></tuiIcon>
|
|
</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">电池电压</view>
|
|
<view class="alarmDetail-row-value">3.0V</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">信号强度</view>
|
|
<view class="alarmDetail-row-value">96mp</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">CPU温度</view>
|
|
<view class="alarmDetail-row-value">20°C</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">发生时间</view>
|
|
<view class="alarmDetail-row-value">2021-1-25 16:01:33</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">详细地址</view>
|
|
<view class="alarmDetail-row-value">福建省福州市闽侯县上街镇乌龙江</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">负责人员</view>
|
|
<view class="alarmDetail-row-value">林工</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">处理时间</view>
|
|
<view class="alarmDetail-row-value">2021年1月25日16:02:35</view>
|
|
</view>
|
|
<view class="alarmDetail-row">
|
|
<view class="alarmDetail-row-label">处理结果</view>
|
|
<view class="alarmDetail-row-value">已处理</view>
|
|
</view>
|
|
<u-button type="primary" @click="alarmDealwithFlag=true">立即处理</u-button>
|
|
<u-popup v-model="alarmDealwithFlag" mode="bottom">
|
|
<view class="alarmDetail-popup-content">
|
|
<view class="popup-alarmType-list">
|
|
<view class="popup-alarmType-box" :class="{currentSelectValue:currentActionAlarmType=='test'}" @click="pickActionFn('test')">火警测试</view>
|
|
<view class="popup-alarmType-box" :class="{currentSelectValue:currentActionAlarmType=='misinformation'}" @click="pickActionFn('misinformation')">火警误报</view>
|
|
<view class="popup-alarmType-box" :class="{currentSelectValue:currentActionAlarmType=='real'}" @click="pickActionFn('real')">真实火警</view>
|
|
</view>
|
|
</view>
|
|
<view class="popup-alarmType-btn flex-between">
|
|
<u-button class="flex1" @click="dealwithLaterFn">稍后处理</u-button>
|
|
<u-button class="flex1" type="primary">确定</u-button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
alarmDealwithFlag:false,
|
|
currentActionAlarmType:"test" // 当前
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
pickActionFn(text){
|
|
this.currentActionAlarmType = text;
|
|
switch (text){
|
|
case "value":
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
dealwithLaterFn(){
|
|
this.alarmDealwithFlag = false;
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|