soc_web/src/views/warn/dialog.info.vue

<template>
  <div class="alarm-info">
    <DialogCom title="告警详情" :visible.sync="isShow" width="1200px" >
      <div class="page-body">
        <el-descriptions class="margin-top" :column="2" size="medium" border :label-style="labelStyle" :contentStyle="content_style">

          <el-descriptions-item labelClassName="gx_info_label" label="机构名称">
            {{formData.orgName}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="告警分类" >
            {{dataTypeText()}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="告警类型" >
            {{formData.sourceTypeDes}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="告警开始时间" >
            {{formData.time}}
          </el-descriptions-item>          
          <el-descriptions-item labelClassName="gx_info_label" label="告警结束时间" >
            {{formData.endTime}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="告警值" >
            {{valueText()}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="告警内容" >
            {{formData.content}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="处置时间" >
            {{formData.doTime}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="处置人" >
            {{formData.doByUser}}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="gx_info_label" label="处置类型" >
            {{ getLabel(dict.type.alarm_deal_type, formData.doType, "")}}
          </el-descriptions-item>
          <el-descriptions-item span="2" labelClassName="gx_info_label" label="处置内容" >
            {{formData.doContent}}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">关闭</el-button>
      </div>
    </DialogCom>
  </div>
</template>

<script>
  import { mapState, mapMutations } from "vuex";  
  import {detail} from "@/api/iot/alarmRule";
  import { getLabel } from "@/views/commonOption.js";
  export default {
    components: {},   
    dicts: ["alarm_deal_type"],
    data() {
      const params = this.$route.params;
      return {
        id: params ? params.id : null,
        isShow: false,
        formData: this.reset(),
        formFileListDefualtValue: [],
        labelStyle: {
          'color': '#000',
          'text-align': 'center',
          'height': '40px',
          'min-width': '150px',
          'word-break': 'keep-all'
        },
        content_style: {
          'text-align': 'left',
          'min-width': '300px',
          'word-break': 'break-all'
        },
      };
    },
    props: {},
    watch: {},
    computed: {
      ...mapState(["loginUser"]),
    },
    methods: {
      ...mapMutations([]),
      getLabel,
      reset(other = {}) {
        return {
          ...other,
        };
      },
      async refresh(id, other) {
        if (!id) {
          this.reset(other);
        } else {
          detail(id).then(response => {
            this.formData = response.data;
            this.loading = false;
          })
        }
      },
      async show(id, other = {}) {
        this.id = id;
        await this.refresh(id, other);
        this.isShow = true;
      },
      valueText() {
        if (!this.formData || this.formData.valueText == null) {
          return ''
        }

        if(this.formData.alarmValue && (this.formData.alarmValue.includes("°C") || this.formData.alarmValue.includes("%RH") ))
        {
          return this.formData.alarmValue;
        }
        else{
          return this.formData.valueText
        }

        return `${this.formData.valueText}${this.formData.alarmValue ? this.formData.alarmValue : ''}`
      },
      dataTypeText() {
        if (!this.formData || this.formData.dataType == null) {
          return ''
        }

        if (this.formData.dataType == '0') {
          return '动环类告警'
        } else if (this.formData.dataType == '1') {
          return '视频类告警'
        } else {
          return '未知'
        }
    },
      // 事件
      onHide() {
        this.isShow = false;
      },
    },
    mounted() {
    },
  };
</script>