|
|
@@ -0,0 +1,176 @@
|
|
|
+<template>
|
|
|
+ <div class="detail">
|
|
|
+ <nav-bar></nav-bar>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell :title="info.deviceName" value-class="cell-title-value" title-style="width:100%;">
|
|
|
+ <template #right-icon v-if="info.time">
|
|
|
+ <van-tag v-if="info.endTime">告警结束</van-tag>
|
|
|
+ <van-tag v-else type="danger">正在告警</van-tag>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell title="所属机构" :value="info.orgName" />
|
|
|
+ <van-cell title="告警分类" :value="dataTypeText"></van-cell>
|
|
|
+ <van-cell title="告警类型" :value="info.sourceTypeDes"></van-cell>
|
|
|
+ <van-cell title="告警开始时间" :value="renderTime(info.time)"></van-cell>
|
|
|
+ <van-cell title="告警结束时间" :value="renderTime(info.endTime)"></van-cell>
|
|
|
+ <van-cell title="持续时长" :value="durationText" />
|
|
|
+ <van-cell title="告警值" :value="valueText" />
|
|
|
+ <van-cell title="告警内容" :value="info.content" />
|
|
|
+
|
|
|
+ <!-- <van-cell title="处置时间" :value="renderTime(info.doTime)" /> -->
|
|
|
+ <!-- <van-cell title="处置人" :value="info.doByUser" /> -->
|
|
|
+ <!-- <van-cell title="处置内容" :value="info.doContent" /> -->
|
|
|
+ <select-cell
|
|
|
+ title="处置类型"
|
|
|
+ is-row
|
|
|
+ v-model="formData.doType"
|
|
|
+ :data-list="getDictItem('alarm_deal_type')"
|
|
|
+ required>
|
|
|
+ </select-cell>
|
|
|
+ <van-field
|
|
|
+ v-model="formData.doContent"
|
|
|
+ rows="1"
|
|
|
+ autosize
|
|
|
+ required
|
|
|
+ :maxlength="200"
|
|
|
+ placeholder="请输入处置内容"
|
|
|
+ label="处置内容"></van-field>
|
|
|
+ <div class="big-btn-box" >
|
|
|
+ <van-button type="info" size="large" @click="onSubmit">提交处置</van-button>
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { detail,dealAlarm } from '@/api/iot/alarmCenter.js'
|
|
|
+import NavBar from '@/components/NavBar'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import { durationText } from '@/utils/date.js'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+export default {
|
|
|
+ name:'iot_alarmCenter_dealAlarm',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ info: {},
|
|
|
+ search: {
|
|
|
+ sensorId: this.$route.query.id
|
|
|
+ },
|
|
|
+ formData:{
|
|
|
+ doContent:null,
|
|
|
+ doType:null,
|
|
|
+ id:this.$route.query.id,
|
|
|
+ },
|
|
|
+ dictList:[],
|
|
|
+ dicts:['alarm_deal_type']
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ components: { NavBar },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['dictionary']),
|
|
|
+ stateUpdateTimeText() {
|
|
|
+ if (this.info.stateUpdateTime == null) {
|
|
|
+ return '未上报'
|
|
|
+ }
|
|
|
+
|
|
|
+ return dayjs(this.info.stateUpdateTime).format('YYYY年M月D日H时m分')
|
|
|
+ },
|
|
|
+ dataTypeText() {
|
|
|
+ if (!this.info || this.info.dataType == null) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.info.dataType == '0') {
|
|
|
+ return '动环类告警'
|
|
|
+ } else if (this.info.dataType == '1') {
|
|
|
+ return '视频类告警'
|
|
|
+ } else {
|
|
|
+ return '未知'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ durationText() {
|
|
|
+ let endTime = this.info.endTime ? this.info.endTime : new Date()
|
|
|
+
|
|
|
+ let minutes = dayjs(endTime).diff(this.info.time, 'minute')
|
|
|
+ if (minutes < 1) {
|
|
|
+ return dayjs(endTime).diff(this.info.time, 'second') + '秒'
|
|
|
+ } else {
|
|
|
+ return durationText(minutes)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ valueText() {
|
|
|
+ if (!this.info || this.info.valueText == null) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+ return `${this.info.valueText}${this.info.alarmValue ? this.info.alarmValue : ''}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getInfo()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getInfo() {
|
|
|
+ detail(this.search.sensorId).then(r => {
|
|
|
+ this.info = r.data
|
|
|
+ })
|
|
|
+ //获取告警处置类型情况字典
|
|
|
+ // this.getDictHandler('alarm_deal_type', res => {
|
|
|
+ // this.dictList = res
|
|
|
+ // this.dictList.forEach(item => {
|
|
|
+ // item.text = item.dictLabel
|
|
|
+ // item.value = item.dictValue
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ onSubmit(){
|
|
|
+
|
|
|
+ let {doContent,doType} = this.formData;
|
|
|
+ if(!doType){
|
|
|
+ this.$toast('请选择告警处置类型');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!doContent){
|
|
|
+ this.$toast('请输入告警处置内容');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.submit(this.formData);
|
|
|
+ },
|
|
|
+ submit(formData)
|
|
|
+ {
|
|
|
+ //alert(JSON.stringify(data))
|
|
|
+ let requestData={doType:parseInt(formData.doType),doContent:formData.doContent,id:formData.id}
|
|
|
+ dealAlarm(requestData).then(res=>{
|
|
|
+ this.$toast.success('提交成功');
|
|
|
+ this.$router.replace({
|
|
|
+ name:'iot_alarmCenter',
|
|
|
+ path:'/iot/alarmCenter',
|
|
|
+ params:{event:'refresh'},
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ renderTime(dateTime) {
|
|
|
+ if (!dateTime) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+ return dayjs(dateTime).format('YYYY年M月D日H时m分')
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.cell-title-value {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.detail {
|
|
|
+ margin: 15px;
|
|
|
+}
|
|
|
+.cell-gather-alarm-value {
|
|
|
+ color: #ee0a24;
|
|
|
+}
|
|
|
+.big-btn-box{
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+</style>
|