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

<template>
  <div class="info__bg l-flex--col  center jcenter ">
    <div class="info">
      <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">
          {{ levelMap[alarm.level] }}
        </div>
      </div>
      <div class="l-flex--row center alarm__type">
        {{ alarm.type }}
      </div>
      <div
        v-for="(row, index) in rows"
        :key="index"
        class="l-flex--row info__row c-sibling-item--v far"
      >
        <div
          v-for="item in row"
          :key="item.key"
          class="l-flex--row l-flex__fill"
        >
          <div class="l-flex__none l-flex--row center row__label">
            {{ item.label }}
          </div>
          <div class="l-flex__fill row__value">
            {{ alarm[item.key] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlarmInfo',
  components: {},
  props: {
    alarm: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      levelMap: ['普通等级', '提示等级', '紧急等级'],
      rows: [
        [
          {
            label: '发生时间',
            key: 'happenTime'
          },
          {
            label: 'MAC',
            key: 'mac'
          }
        ],
        [
          {
            label: '系统配置预处理方式',
            key: 'handle'
          },
          {
            label: '执行结果',
            key: 'status'
          }
        ],
        [
          {
            label: '位置',
            key: 'address'
          }
        ]
      ]
    }
  },
  methods: {
    colorStyle () {
      return this.alarm
        ? {
          color: ['#04A681', '#FFA000', '#F40645'][this.alarm.level]
        }
        : null
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  color: #f40645;
  width: 640px;
  height: 360px;
  &__bg {
    width: 720px;
    height: 440px;
    background: url("~@/assets/v1/bg_alarm.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  &__row {
    height: 40px;
    opacity: 0.5;
    font-size: 16px;
    background: rgba(#7b102c, 0.5);
    margin: 0 16px;
    .row__label {
      color: #9ea9cd;
      width: 150px;
    }
    .row__value {
      color: #fff;
    }
  }

  &__deviceName {
    line-height: 48px;
    font-size: 32px;
    font-weight: bold;
    margin: 20px 0 15px 0;
  }
  .alarm {
    &__icon {
      width: 24px;
      height: 24px;
      background-repeat: no-repeat;
      background-size: 100%;
    }
    &__name {
      font-size: 24px;
      line-height: 36px;
      font-weight: 500;
    }
    &__type {
      font-size: 32px;

      line-height: 48px;
      font-weight: bold;
      margin: 15px 0 15px 0;
    }
  }
}
</style>