smsb-web-develop/src/views/dashboard/v0/AlarmInfo.vue

<template>
  <box
    title="消息通知详情"
    can-full-screen
    fullscreen
    v-on="$listeners"
  >
    <div class="info l-flex--col">
      <div class="l-flex--row center info__deviceName">
        {{ alarm.deviceName }}
      </div>
      <div
        class="l-flex--row center"
        :style="colorStyle"
      >
        <svg-icon
          class="alarm__icon"
          icon-class="v0-alarm"
        />
        <div class="alarm__name">
          {{ level }}
        </div>
      </div>
      <div class="l-flex--row center alarm__type">
        {{ alarm.type }}
      </div>
      <div class="l-flex--row c-sibling-item--v info__row">
        <div class="l-flex__fill l-flex--row center row__label">发生时间</div>
        <div class="l-flex__fill">{{ alarm.happenTime }}</div>
        <div class="l-flex__fill l-flex--row center row__label">截图</div>
        <div class="l-flex__fill">
          <auto-image
            v-if="alarm.asset"
            :src="alarm.asset.url"
            broken="image-broken"
            class="o-image u-pointer"
            style="width: 128px; height: 72px;"
            @click.native="onView"
          />
          <span v-else>-</span>
        </div>
      </div>
      <div class="l-flex--row c-sibling-item--v far info__row">
        <div class="l-flex__fill l-flex--row center row__label">处理方式</div>
        <div class="l-flex__fill">{{ alarm.handle }}</div>
        <div class="l-flex__fill l-flex--row center row__label">处理结果</div>
        <div class="l-flex__fill">{{ alarm.status.label }}</div>
      </div>
      <div class="info__tip l-flex--row center">
        如有疑问，请及时联系管理员，谢谢。
      </div>
    </div>
    <preview-dialog
      ref="previewDialog"
      append-to-body
    />
  </box>
</template>

<script>
import Box from './Box'

export default {
  name: 'AlarmInfo',
  components: {
    Box
  },
  props: {
    alarm: {
      type: Object,
      required: true
    }
  },
  computed: {
    level () {
      return ['普通等级', '提示等级', '紧急等级'][this.alarm?.level]
    },
    colorStyle () {
      return this.alarm
        ? {
          color: ['#04A681', '#FFA000', '#F40645'][this.alarm.level]
        }
        : null
    }
  },
  methods: {
    onView () {
      this.$refs.previewDialog.show(this.alarm.asset)
    }
  }
}
</script>
<style lang="scss" scoped>
.info {
  &__row {
    height: 80px;
    line-height: 1;
    background-color: #313a5a;

    .row__label {
      color: #9ea9cd;
    }
  }

  &__deviceName {
    line-height: 72px;
    font-size: 48px;
    font-weight: bold;
    margin: 50px 0 69px 0;
  }

  .alarm {
    &__icon {
      margin-right: 8px;
      font-size: 32px;
    }

    &__type {
      font-size: 40px;
      line-height: 60px;
      font-weight: bold;
      margin: 40px 0 80px 0;
    }

    &__name {
      font-size: 32px;
      font-weight: 500;
      line-height: 48px;
    }
  }

  &__tip {
    color: #9ea9cd;
    line-height: 42px;
    font-size: 28px;
    margin-top: 80px;
  }
}
</style>