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