admin-ui/src/views/iot/alarm/log/component/detail.vue

<template>
  <div class="system-edit-dic-container">
    <!-- 日志详情 -->
    <el-dialog :title="$t('message.alarmCenter.dialogTitleLogDetail')" v-model="isShowDialog" width="700">
        <el-descriptions
          :column="2"
          border
        >
          <!-- 规则名称 -->
          <el-descriptions-item :label="$t('message.alarmCenter.labels.ruleName')">{{ ruleForm.ruleName }}</el-descriptions-item>
          <!-- 告警类型 -->
          <el-descriptions-item :label="$t('message.alarmCenter.labels.alarmType')">
            <!-- 规则告警 -->
            <span v-if="ruleForm.type == 1">{{$t('message.alarmCenter.ruleAlarm')}}</span>
            <!-- 设备自主告警 -->
            <span v-else-if="ruleForm.type == 2">{{$t('message.alarmCenter.deviceSelfAlarm')}}</span>
            <!-- 规则告警升级 -->
            <span v-else-if="ruleForm.type == 3">{{$t('message.alarmCenter.ruleAlarmUpgrade')}}</span>
            <!-- 设备告警 -->
            <span v-else>{{$t('message.alarmCenter.deviceAlarm')}}</span>
          </el-descriptions-item>
          <!-- 产品名称 -->
          <el-descriptions-item :label="$t('message.alarmCenter.labels.productName')">{{ product_name }}</el-descriptions-item>
          <!-- 设备名称 -->
          <el-descriptions-item :label="$t('message.alarmCenter.labels.deviceName')">{{ devcie_name }}</el-descriptions-item>
          <!-- 告警级别 -->
          <el-descriptions-item :label="$t('message.alarmCenter.labels.alarmLevel')">{{ alarmLevel_name }}</el-descriptions-item>
          <!-- 告警时间 -->
          <el-descriptions-item :label="$t('message.alarmCenter.labels.alarmTime')">{{ ruleForm.createdAt }}</el-descriptions-item>
          <!-- 告警数据 -->
          <el-descriptions-item :label="$t('message.alarmCenter.labels.alarmData')" span="2">
            <JsonViewer style="width:100%;" :value="jsonData" boxed sort theme="jv-dark" />
          </el-descriptions-item>
          <!-- 处理意见 -->
          <el-descriptions-item :label="$t('message.alarmCenter.labels.handleOpinion')" span="2">{{ ruleForm.content }}</el-descriptions-item>
        </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <!-- 取消 -->
          <el-button @click="onCancel">{{ $t('message.alarmCenter.actions.cancel') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, computed } from 'vue';
import api from '/@/api/alarm';
import 'vue3-json-viewer/dist/index.css';
import { useI18n } from 'vue-i18n';

interface DicState {
  isShowDialog: boolean;
  ruleForm: any;
  product_name: '';
  devcie_name: '';
  alarmLevel_name: '';
  jsonData: {};
}

export default defineComponent({
  name: 'Edit',

  setup() {
    const { locale, t } = useI18n();
    const currentLocale = computed(() => locale.value);
    const state = reactive<DicState>({
      isShowDialog: false,
      product_name: '',
      devcie_name: '',
      alarmLevel_name: '',
      ruleForm: {},
      jsonData: {},
    });

    // 打开弹窗
    const openDialog = (row: any) => {
      //resetForm();
      api.log.detail(row.id).then((res: any) => {
        state.ruleForm = res.data;
        state.jsonData = JSON.parse(res.data.data);
        state.product_name = res.data.product.name;
        state.devcie_name = res.data.devcie.name;
        state.alarmLevel_name = res.data.alarmLevel.name;
      });

      state.isShowDialog = true;
    };
    // const resetForm = () => {
    //   state.ruleForm = {};
    // };

    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };

    return {
      currentLocale,
      openDialog,
      closeDialog,
      onCancel,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="scss">
.el-form-item {
  margin-bottom: 0;
}
</style>