314 lines
7.5 KiB
Vue
314 lines
7.5 KiB
Vue
<template>
|
||
<page-meta>
|
||
<navigation-bar :title="$tt('navBar.alarmHandling')" title-align="center" background-color="#F1F3F9"
|
||
front-color="#000000" />
|
||
</page-meta>
|
||
|
||
<view class="alert-edit">
|
||
<view class="alert-title">
|
||
<view>
|
||
<text class="top-title">
|
||
{{$tt('alert.alertName')}}
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text class="top-num">
|
||
{{ model.alertName }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="alert-info">
|
||
<view class="title">
|
||
<view class="info-title">
|
||
{{$tt('alert.alertInformation')}}
|
||
</view>
|
||
<view class="info-tag"
|
||
:class="{'success': model.alertLevel === 1, 'warning': model.alertLevel === 2, 'error': model.alertLevel === 3}">
|
||
<text>
|
||
{{ getaLertLevelDisplay(model) }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<u--form labelPosition="left" :model="model" labelWidth="75"
|
||
:labelStyle="{ fontSize: '28rpx', color: '#8f9ca2' }">
|
||
<view class="item">
|
||
<u-form-item :label="$tt('alert.serialNumber')">
|
||
{{ model.serialNumber }}
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="item">
|
||
<u-form-item class="item" :label="$tt('alert.deviceName')">
|
||
{{ model.deviceName }}
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="item">
|
||
<u-form-item class="item-bottom" :label="$tt('alert.data')">
|
||
<div style="width:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
|
||
v-html="formatDetail(model.detail)"></div>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
</view>
|
||
<view class="alert-dispose" v-if="model.status !== 1">
|
||
<view class="title">
|
||
<view class="info-title">
|
||
{{$tt('alert.alertProcess')}}
|
||
</view>
|
||
</view>
|
||
<u--form labelPosition="left" :model="model" labelWidth="75"
|
||
:labelStyle="{ fontSize: '28rpx', color: '#8f9ca2' }">
|
||
<view class="item">
|
||
<u-form-item :label="$tt('alert.processAlert')">
|
||
<u-radio-group v-if="model.status === 2" v-model="alertLevel" size="13" labelSize="14">
|
||
<u-radio shape="circle" :name="1" :label="$tt('alert.untreated')"></u-radio>
|
||
<text style="margin-left: 30rpx; font-size: 26rpx;"></text>
|
||
<u-radio shape="circle" :name="3" :label="$tt('alert.processed')"></u-radio>
|
||
</u-radio-group>
|
||
<text v-if="model.status === 3">{{ getaStatusDisplay(model) }}</text>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="item">
|
||
<u-form-item v-if="model.status === 2" :label="$tt('alert.processResult')" labelPosition="top">
|
||
<u-textarea v-model="model.remark" fontSize="13" :placeholder="$tt('alert.inputProcessMsg')"
|
||
confirmType="done" border="none"></u-textarea>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="item">
|
||
<u-form-item v-if="model.status === 3" :label="$tt('alert.processResult')">
|
||
{{ model.remark }}
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="item">
|
||
<u-form-item v-if="model.status === 3" :label="$tt('alert.alertTime')">
|
||
{{ model.createTime }}
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<u-form-item v-if="model.status === 3" :label="$tt('alert.processTime')">
|
||
{{ model.updateTime }}
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
|
||
<view class="btn-wrap" v-if="model.status === 2">
|
||
<u-button :customStyle="{ height: '96rpx' }" type="primary" size="normal" :text="$tt('common.save')"
|
||
@click="handleSaveForm"></u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAlertLog, editAlertLog } from '@/apis/modules/alertLog.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
alertLogId: null, // 告警id
|
||
source: null, // 数据来源-设备/告警列表
|
||
// 详情数据
|
||
model: {
|
||
remark: '',
|
||
},
|
||
alertLevel: 1, // 处理级别
|
||
};
|
||
},
|
||
onLoad: function(option) {
|
||
this.alertLogId = Number(option.alertLogId) || null;
|
||
this.source = Number(option.source) || null;
|
||
this.getAlertDetail();
|
||
},
|
||
methods: {
|
||
// 获取遥控器详情
|
||
getAlertDetail() {
|
||
getAlertLog(this.alertLogId).then(res => {
|
||
const { code, data } = res;
|
||
if (code === 200) {
|
||
this.model = {
|
||
...data
|
||
};
|
||
}
|
||
});
|
||
},
|
||
// 格式化detail字段
|
||
formatDetail(json) {
|
||
if (json == null || json == "") {
|
||
return;
|
||
}
|
||
let item = JSON.parse(json);
|
||
let result = 'id：<span style="color:#F56C6C">' + item.id + '</span>' + '，';
|
||
result = result + 'name：<span style="color:#F56C6C">' + item.name + '</span>' + '，';
|
||
result = result + 'value：<span style="color:#F56C6C">' + item.value + '</span>';
|
||
return result;
|
||
},
|
||
// 保存
|
||
handleSaveForm() {
|
||
const params = {
|
||
...this.model,
|
||
status: this.alertLevel
|
||
};
|
||
editAlertLog(params).then(res => {
|
||
if (res.code === 200) {
|
||
let pages = getCurrentPages();
|
||
let prevPage = pages[pages.length - 2];
|
||
// 更新列表
|
||
if (this.source === 1) {
|
||
// #ifdef H5 || APP-PLUS
|
||
prevPage.$refs.deviceAlertLog.handleSearch();
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
prevPage.$vm.$refs.deviceAlertLog.handleSearch();
|
||
// #endif
|
||
}
|
||
if (this.source === 2) {
|
||
// #ifdef H5 || APP-PLUS
|
||
prevPage.handleSearch();
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
prevPage.$vm.handleSearch();
|
||
// #endif
|
||
}
|
||
uni.navigateBack();
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: this.$tt('common.saveError')
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 获取告警级别显示
|
||
getaLertLevelDisplay(item) {
|
||
const { alertLevel } = item;
|
||
if (alertLevel === 1) {
|
||
return this.$tt('alert.notice');
|
||
} else if (alertLevel === 2) {
|
||
return this.$tt('alert.minor');
|
||
} else if (alertLevel === 3) {
|
||
return this.$tt('alert.warning');
|
||
}
|
||
},
|
||
// 获取告警状态显示
|
||
getaStatusDisplay(item) {
|
||
const { status } = item;
|
||
if (status === 1) {
|
||
return this.$tt('alert.noNeed');
|
||
} else if (status === 2) {
|
||
return this.$tt('alert.Unprocessed');
|
||
} else if (status === 3) {
|
||
return this.$tt('alert.processed');
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
height: 100%;
|
||
background: $uni-bg-color-grey;
|
||
}
|
||
|
||
.alert-edit {
|
||
width: 100%;
|
||
|
||
.alert-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
margin: 14rpx 30rpx 28rpx 30rpx;
|
||
padding: 30rpx 42rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.top-title {
|
||
color: #000;
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.top-num {
|
||
color: #000;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.alert-info,
|
||
.alert-dispose {
|
||
background: #fff;
|
||
margin: 28rpx 30rpx 20rpx 30rpx;
|
||
padding: 0rpx 42rpx 30rpx 42rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.title {
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: solid 1px #D8D8D8;
|
||
margin-bottom: 30rpx;
|
||
|
||
.info-title {
|
||
color: #000;
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.info-tag {
|
||
width: 141rpx;
|
||
height: 52rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 9rpx;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
margin-bottom: 21rpx;
|
||
}
|
||
}
|
||
|
||
.alert-dispose {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.btn-wrap {
|
||
margin: 30rpx;
|
||
}
|
||
|
||
.success {
|
||
color: #fff;
|
||
background-color: #3378FE;
|
||
}
|
||
|
||
.warning {
|
||
color: #fff;
|
||
background-color: #f9ae3d;
|
||
}
|
||
|
||
.error {
|
||
color: #fff;
|
||
background-color: #f56c6c;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
::v-deep .u-form-item__body {
|
||
padding: 5px 0 !important;
|
||
}
|
||
|
||
::v-deep .u-textarea__field {
|
||
font-size: 28rpx !important;
|
||
}
|
||
|
||
::v-deep .u-button--square {
|
||
border-radius: 10rpx;
|
||
}
|
||
</style> |