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>
|