smsb-web-develop/src/views/device/detail/components/DeviceInfo.vue

<template>
  <div
    class="l-flex--col c-info"
    :class="{ 'l-flex__fill': hasMap }"
  >
    <div class="l-flex--row has-bottom-padding u-bold">设备信息</div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">序列号</div>
        <div class="l-flex__fill c-info__value">{{ device.serialNumber }}</div>
      </div>
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">MAC</div>
        <div class="l-flex__fill c-info__value">{{ device.mac }}</div>
      </div>
    </div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">配置</div>
        <div class="l-flex__fill c-info__value">{{ device.productName }}</div>
      </div>
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">运行时间</div>
        <div class="l-flex__fill c-info__value">{{ device.openTime }} - {{ device.closeTime }}</div>
      </div>
    </div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">分辨率</div>
        <div class="l-flex__fill c-info__value">{{ device.resolutionRatio }}</div>
      </div>
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">内容保护</div>
        <div class="l-flex__fill c-info__value primary">
          <content-protection :device="device" />
        </div>
      </div>
    </div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">地址</div>
        <div class="l-flex__fill c-info__value primary">{{ device.address }}</div>
      </div>
    </div>
    <device-map
      v-if="hasMap"
      class="l-flex__auto"
      :device="device"
    />
  </div>
</template>

<script>
import DeviceMap from './DeviceMap'
import ContentProtection from './external/ContentProtection'

export default {
  name: 'DeviceInfo',
  components: {
    DeviceMap,
    ContentProtection
  },
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  computed: {
    hasMap () {
      const { longitude, latitude } = this.device
      return longitude && latitude
    }
  }
}
</script>