<template>
<view >
<view class="check-message-detail">
<view class="detail-content">
<view class="detail-item" >
<text class="title">设备编号</text>
<text>{{info.devcode}}</text>
</view>
<view class="detail-item" >
<text class="title">设备类型</text>
<text>{{info.alarmContentName}}</text>
</view>
<view class="detail-item" >
<text class="title">设备位置</text>
<text>{{info.position}}</text>
</view>
<view class="detail-item" >
<text class="title">井编号</text>
<text>{{info.wellCode}}</text>
</view>
<view class="detail-item" >
<text class="title">井类型</text>
<text>其他</text>
</view>
<view class="detail-item" >
<text class="title">井名称</text>
<text>{{timeInfo.wellName}}</text>
</view>
<view class="detail-item" >
<text class="title">告警原因</text>
<text>{{info.alarmTypeName}}</text>
</view>
<view class="detail-item" >
<text class="title">告警数值</text>
<text>{{info.alarmValue}}</text>
</view>
<view class="detail-item" >
<text class="title">告警等级</text>
<text>{{info.alarmLevel}}</text>
</view>
<view class="detail-item" >
<text class="title">告警时间</text>
<text>{{info.alarmTime}}</text>
</view>
<view class="detail-item" >
<text class="title">告警状态</text>
<text>{{info.statusName}}</text>
</view>
<view class="detail-item" v-if="info.status !== '1'">
<text class="title">告警取消原因</text>
<text>{{info.jobStatusName}}</text>
</view>
<view class="detail-item" v-if="info.status !== '1' && info.status !== '0'">
<text class="title">备注</text>
<text>{{timeInfo.handleMessage}}</text>
</view>
<view class="detail-item" v-if="info.status !== '1' && info.status !== '0'">
<text class="title">处置人</text>
<text>{{timeInfo.handleJobPerson}}</text>
</view>
<view class="detail-item" v-if="info.status !== '1' && info.status !== '0'">
<text class="title">处置时间</text>
<text>{{timeInfo.alarmTime}}</text>
</view>
<view class="detail-item" v-if="info.status === '0'">
<text class="title">消警时间</text>
<text>{{timeInfo.alarmTime}}</text>
</view>
<view class="button-bottom" v-if="messageId === '1'" @click="ispassShow = true">取消告警</view>
</view>
</view>
<u-popup
:show="ispassShow"
mode="bottom"
:round="10"
:closeOnClickOverlay="false"
@close="close"
>
<view class="popup">
<view class="title">取消告警</view>
<u-form
labelPosition="left"
labelWidth="200rpx"
:model="userInfo"
:rules="rules"
ref="form1"
>
<u-form-item
label="告警取消原因"
prop="name"
borderBottom
@click="showSex = true;"
ref="item1"
>
<u-input
v-model="userInfo.name"
disabled
placeholder="请选择告警取消原因"
border="none"
suffixIcon="arrow-right"
></u-input>
</u-form-item>
<u-form-item
label="备注"
prop="handleMessage"
borderBottom
ref="item1"
>
<u-input
v-model="userInfo.handleMessage"
border="none"
></u-input>
</u-form-item>
</u-form>
<view class="footer">
<button class="allow refuse" @click="ispassShow = false"> 取消</button>
<button class="allow" @click="possQr"> 确认</button>
</view>
</view>
</u-popup>
<u-action-sheet
:show="showSex"
:actions="actions"
title="请选择处理状态"
@close="showSex = false"
@select="sexSelect"
/>
</view>
</template>
<script>
import {getJobInfo, getCancelAlarm} from '@/api/check.js'
export default {
data() {
return {
info: uni.getStorageSync('rowInfo') || {},
messageId:'',
ispassShow: false,
showSex: false,
timeInfo:{}, // 获取告警时间对象
userInfo: {
name: '',
handleMessage: '',
jobStatus:''
},
actions: [{
name: '已处理',
id: '3'
},
{
name: '无需处理',
id: '4'
},
],
rules: {
'handleMessage': {
type: 'string',
required: true,
message: '请填写备注',
trigger: ['blur', 'change']
},
'name': {
type: 'string',
required: true,
message: '请选择如何处理',
trigger: ['blur', 'change']
},
},
}
},
onLoad(option){
this.messageId = option.messageId
},
async onShow(){
if(uni.getStorageSync('rowInfo').jobId !== '') {
const res = await getJobInfo({id:uni.getStorageSync('rowInfo').jobId})
this.timeInfo = res[0]
}
},
methods: {
// 点击确认
// 点击取消告警弹窗中的确认按钮
async possQr() {
if(this.userInfo.jobStatus.trim() !== ''){
delete this.userInfo.name
const res = await getCancelAlarm({...this.userInfo , id:this.info.id})
this.ispassShow = false
this.getAlarmList()
}else {
uni.showToast({
title: `告警取消原因必选`,
icon: 'none',
duration: 2000,
})
}
},
sexSelect(e) {
this.userInfo.name = e.name
this.userInfo.jobStatus = e.id
this.$refs.form1.validateField('name')
},
}
}
</script>
<style lang="scss" scoped>
.check-message-detail {
padding: 18rpx;
height: 100%;
.title {
font-weight: 600;
white-space: nowrap;
margin-right: 20rpx;
}
.detail-content {
padding: 22rpx;
background-color: #fff;
border-radius: 10rpx;
}
.detail-item {
display: flex;
justify-content: space-between;
margin-bottom: 44rpx;
}
}
.button-bottom {
margin-left: 50%;
transform: translateX(-50%);
width: 110rpx;
height: 50rpx;
color: #fff;
line-height: 50rpx;
text-align: center;
border-radius: 20rpx;
font-size: 22rpx;
background-color: red;
}
.popup {
.title {
font-size: 36rpx;
color: #000;
font-weight: 600;
margin-bottom: 32rpx;
text-align: center;
}
.content {
font-size: 32rpx;
color: #000;
margin-bottom: 42rpx;
text-align: center;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
.allow {
color: rgba(197, 0, 10, 1);
height: 68rpx;
padding: 16px 19px;
line-height: 0;
border: 1rpx solid rgba(197, 0, 10, 1);
margin: 0 40rpx;
}
.refuse {
color: rgba(142, 142, 142, 1.0);
border: 1rpx solid rgba(142, 142, 142, 1.0);
background-color: transparent;
}
}
}
</style>
<style lang="scss">
.u-popup__content {
padding: 30rpx 40rpx;
// padding-bottom: 0;
}
</style>
