<template>
|
<div class="alarm-details">
|
<van-nav-bar title="告警详情" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder>
|
</van-nav-bar>
|
<div class="detailsCon">
|
<div class="card">
|
<div class="commonTitle cardTitle">
|
{{ alarmInfo.alarmName }}
|
</div>
|
<div class="commonTitle">
|
<div class="label">站点名称：</div>
|
<div class="text">
|
{{ alarmInfo.stationName }}
|
</div>
|
</div>
|
<!-- <div class="commonTitle">
|
<div class="label">
|
电池组：
|
</div>
|
<div class="text">
|
{{alarmInfo.alarmData.battGroupName}}
|
</div>
|
</div> -->
|
<div class="commonTitle">
|
<div class="label">告警类型：</div>
|
<div class="text" v-if="alarmInfo.battGroupId == 0">设备告警</div>
|
<div class="text" v-else>电池告警</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">告警等级：</div>
|
<div class="text" v-if="alarmInfo.alarmLevel == 1">一级告警</div>
|
<div class="text" v-else-if="alarmInfo.alarmLevel == 2">二级告警</div>
|
<div class="text" v-else>三级告警</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">告警时间：</div>
|
<div class="text">
|
{{ alarmInfo.alarmTime }}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">创建时间：</div>
|
<div class="text">
|
{{ alarmInfo.createTime }}
|
</div>
|
</div>
|
<div class="commonTitle" v-if="alarmInfo.dispatchTime">
|
<div class="label">派发时间：</div>
|
<div class="text">
|
{{ alarmInfo.dispatchTime }}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">订单状态：</div>
|
<div class="text" v-if="alarmInfo.status == 2 && stepsActive == 0" style="color: #eac406">
|
处理中
|
</div>
|
<div class="text" v-else-if="alarmInfo.status == 2 && stepsActive == 1" style="color: #eac406">
|
待审核
|
</div>
|
<div class="text" v-else-if="alarmInfo.status == 3" style="color: #07c160">
|
已完成
|
</div>
|
<div class="text" v-else-if="alarmInfo.status == 0" style="color: #4b88f9">
|
待派发
|
</div>
|
<div class="text" v-else-if="alarmInfo.status == 1 && userPower == 0" style="color: #4b88f9">
|
已派发
|
</div>
|
<div class="text" v-else style="color: #4b88f9">待处理</div>
|
</div>
|
</div>
|
<!-- 如果是处理中状态 -->
|
<div class="card" v-if="alarmInfo.status == 2 || alarmInfo.status == 3">
|
<div class="commonTitle cardTitle">订单状态：</div>
|
<van-steps :active="stepsActive">
|
<van-step>处理中</van-step>
|
<van-step>待审核</van-step>
|
<van-step>已完成</van-step>
|
</van-steps>
|
</div>
|
<!-- 如果是进入审核状态 -->
|
<div class="card" v-if="
|
(alarmInfo.status == 2 && stepsActive == 1) ||
|
(alarmInfo.status == 2 && stepsActive == 2) ||
|
alarmInfo.status == 3
|
">
|
<div class="commonTitle cardTitle">告警处理：</div>
|
<div class="commonTitle">
|
<div class="label">问题描述：</div>
|
<div class="text">
|
{{ handleInfo.description }}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">处理前照片：</div>
|
<div class="text">
|
<div class="van-uploader__wrapper" v-if="
|
handleInfo.imageBefore &&
|
handleInfo.imageBefore.split(',').length > 0
|
">
|
<div class="van-uploader__preview" v-for="(item, i) in handleInfo.imageBefore.split(',')" :key="i" @click="toShowImgpreview(handleInfo.imageBefore.split(','))">
|
<div class="van-image van-uploader__preview-image">
|
<img :src="$units.getStationSrc(item)" class="van-image__img" style="object-fit: cover" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">处理方法：</div>
|
<div class="text">
|
{{ handleInfo.workWay }}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">处理后照片：</div>
|
<div class="text">
|
<div class="van-uploader__wrapper" v-if="
|
handleInfo.imageAfter &&
|
handleInfo.imageAfter.split(',').length > 0
|
">
|
<div class="van-uploader__preview" v-for="(item, i) in handleInfo.imageAfter.split(',')" :key="i" @click="toShowImgpreview(handleInfo.imageAfter.split(','))">
|
<div class="van-image van-uploader__preview-image">
|
<img :src="$units.getStationSrc(item)" class="van-image__img" style="object-fit: cover" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">意见建议：</div>
|
<div class="text">
|
{{ handleInfo.workSuggest }}
|
</div>
|
</div>
|
</div>
|
<!-- 如果是维护员并且有实时告警 -->
|
<div v-if="userPower != 0 && !isNoAlarm">
|
<div class="subBtn" @click="startHandle" v-if="alarmInfo.status == 1">
|
开始处理
|
</div>
|
<div class="subBtn" @click="toPage('edit')" v-if="alarmInfo.status == 2 && stepsActive == 0">
|
继续处理
|
</div>
|
</div>
|
<!-- 如果是维护员并且实时告警已自动消除 -->
|
<div class="subBtn" @click="completeAlarm" v-else-if="userPower != 0 && isNoAlarm">
|
确认告警自动消除
|
</div>
|
<!-- 如果是管理员未派发 -->
|
<div v-if="userPower == 0 && alarmInfo.status == 0">
|
<div class="card">
|
<div class="commonTitle cardTitle">指派人员：</div>
|
<van-cell :title="assignUser.UName" is-link @click="
|
$router.push({
|
path: '/userList',
|
query: {
|
stationId: alarmInfo.stationId,
|
},
|
})
|
" />
|
</div>
|
<div class="subBtn" @click="toAssign">确认指派</div>
|
</div>
|
<!-- 如果是管理员待审核 -->
|
<div v-if="userPower == 0 && alarmInfo.status == 2 && stepsActive == 1">
|
<div class="card">
|
<van-field v-model="handleInfo.note" rows="2" autosize label="审核意见" type="textarea" placeholder="请输入审核意见…" show-word-limit />
|
</div>
|
<div class="btnCon">
|
<div class="subBtn" @click="suggest(3)">通过</div>
|
<div class="subBtn" @click="suggest(-1)">不通过</div>
|
</div>
|
</div>
|
</div>
|
<van-image-preview v-model="showImgPreview" :images="ImgPreviewList">
|
</van-image-preview>
|
</div>
|
</template>
|
|
<script>
|
import {
|
updateWorkAlarm,
|
searchStatusById,
|
dispatchTask,
|
updateUserWork,
|
} from "@/assets/js/api"
|
import { mapState } from "vuex"
|
import vUpload from "@/components/v-upload.vue"
|
export default {
|
components: {
|
vUpload,
|
},
|
data() {
|
return {
|
isNoAlarm: false,
|
showImgPreview: false,
|
ImgPreviewList: [],
|
stepsActive: 0,
|
alarmInfo: {
|
id: 0,
|
alarmRecId: 0,
|
battGroupId: 0,
|
managerId: 0,
|
status: 0,
|
dispatchTime: "",
|
alarmData: {
|
num: 0,
|
BattGroupId: 0,
|
MonNum: 0,
|
alm_signal_id: 0,
|
alm_level: 0,
|
alm_start_time: "",
|
alm_end_time: "",
|
alm_value: 0,
|
alm_is_confirmed: 0,
|
alm_confirmed_time: "",
|
stationname: "",
|
battGroupName: "",
|
alarmname: "",
|
alarmtype: "",
|
},
|
},
|
handleInfo: {},
|
assignUser: {
|
UName: "请选择指派人员",
|
},
|
}
|
},
|
computed: {
|
...mapState(["userPower"]),
|
},
|
mounted() {
|
this.alarmInfo = JSON.parse(this.$route.query.alarmData)
|
let assignUser = sessionStorage.getItem("assignUser")
|
if (assignUser) {
|
this.assignUser = JSON.parse(assignUser)
|
}
|
this.loadStatus()
|
},
|
destroyed() {
|
sessionStorage.removeItem("assignUser")
|
},
|
methods: {
|
toPage(type) {
|
this.$router.push({
|
path: "/alarmHandle",
|
query: {
|
id: this.alarmInfo.id,
|
type: type,
|
managerId: this.alarmInfo.managerId,
|
stationId: this.alarmInfo.stationId,
|
},
|
})
|
},
|
//确认指派
|
toAssign() {
|
if (this.assignUser.UId) {
|
this.$dialog.confirm({
|
title: "提示",
|
message: `是否确认把该告警指派给${this.assignUser.UName}?`,
|
}).then(() => {
|
let postData = [
|
{
|
id: this.alarmInfo.id,
|
userId: this.assignUser.UId,
|
},
|
]
|
dispatchTask(postData)
|
.then((res) => {
|
let resData = JSON.parse(res.data.result)
|
if (resData.code == 1) {
|
this.$toast("指派成功!")
|
this.loadStatus()
|
sessionStorage.removeItem("assignUser")
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
}).catch(() => {
|
// on cancel
|
})
|
} else {
|
this.$toast('请选择指派人员!')
|
}
|
|
},
|
//确认自动完成告警
|
completeAlarm() {
|
this.$dialog
|
.confirm({
|
title: "提示",
|
message: "请核实确认,该告警是否已自动消除？",
|
})
|
.then(() => {
|
let postData = this.$units.deepClone(this.alarmInfo)
|
postData.status = 3
|
postData.userId = sessionStorage.getItem("userId")
|
updateWorkAlarm(postData)
|
.then((res) => {
|
let resData = JSON.parse(res.data.result)
|
if (resData.code == 1) {
|
this.$toast("确认成功!")
|
this.loadStatus()
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
})
|
.catch(() => {
|
// on cancel
|
})
|
},
|
//点击图片显示图片预览层
|
toShowImgpreview(list) {
|
let arr = []
|
list.map((item) => {
|
arr.push(this.$units.getStationSrc(item))
|
})
|
this.ImgPreviewList = arr
|
this.showImgPreview = true
|
},
|
//查询订单当前最新状态
|
loadStatus() {
|
let postData = {
|
id: this.alarmInfo.id,
|
}
|
searchStatusById(postData)
|
.then((res) => {
|
let resData = JSON.parse(res.data.result)
|
if (resData.code == 1) {
|
this.alarmInfo.status = resData.data.status
|
if (resData.data.dispatchTime) {
|
this.alarmInfo.dispatchTime = resData.data.dispatchTime
|
}
|
if (resData.data.managerId) {
|
this.alarmInfo.managerId = resData.data.managerId
|
}
|
if (
|
resData.data.userWorkList &&
|
resData.data.userWorkList.length > 0
|
) {
|
this.handleInfo = resData.data.userWorkList[0]
|
this.stepsActive = this.handleInfo.checkStatus - 1
|
}
|
if (this.alarmInfo.status != 3 && resData.data.flg == 0) {
|
this.isNoAlarm = true
|
} else {
|
this.isNoAlarm = false
|
}
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
//开始处理
|
startHandle() {
|
let postData = this.$units.deepClone(this.alarmInfo)
|
postData.status = 2
|
postData.userId = sessionStorage.getItem("userId")
|
updateWorkAlarm(postData)
|
.then((res) => {
|
let resData = JSON.parse(res.data.result)
|
if (resData.code == 1) {
|
this.toPage("add")
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
suggest(checkStatus) {
|
this.handleInfo.checkStatus = checkStatus
|
let endTime = this.$units.timeFormat(
|
new Date().getTime,
|
"yyyy-mm-dd hh:MM:ss"
|
)
|
this.handleInfo.endTime = endTime
|
if (this.handleInfo.note == "") {
|
this.$toast("请输入审核意见…")
|
return
|
}
|
updateUserWork(this.handleInfo)
|
.then((res) => {
|
let resData = JSON.parse(res.data.result)
|
if (resData.code == 1) {
|
this.$toast("审核成功!")
|
this.loadStatus()
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
.alarm-details {
|
width: 100%;
|
min-height: 100%;
|
background: #f5f5f5;
|
}
|
|
.detailsCon {
|
padding: 24px;
|
}
|
|
.card {
|
background-color: #ffffff;
|
border-radius: 16px;
|
margin: 0 auto 24px;
|
width: 702px;
|
padding: 24px;
|
box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
|
}
|
|
.commonTitle {
|
font-size: 28px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
line-height: 40px;
|
padding-bottom: 24px;
|
border-bottom: 1px solid #eeeeee;
|
margin-bottom: 22px;
|
display: flex;
|
}
|
|
.cardTitle {
|
font-weight: bold;
|
}
|
|
.commonTitle .label {
|
line-height: 40px;
|
display: inline-block;
|
width: 170px;
|
}
|
|
.commonTitle .text {
|
flex: 1;
|
}
|
|
.subBtn {
|
width: 702px;
|
height: 98px;
|
background: #4b88f9;
|
border-radius: 8px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #ffffff;
|
font-size: 36px;
|
margin-top: 48px;
|
}
|
|
.btnCon {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
}
|
|
.btnCon .subBtn {
|
flex: 1;
|
height: 98px;
|
background: #07c160;
|
border-radius: 8px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #ffffff;
|
font-size: 36px;
|
margin-top: 48px;
|
margin-right: 24px;
|
}
|
|
.btnCon .subBtn:last-of-type {
|
margin-right: 0;
|
background: #f9534b;
|
}
|
</style>
|
