gy-app-shop/pages/home/electricalFire/alarmDetail.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>