smsb-web-develop/src/views/device/detail/index.vue

<template>
  <wrapper
    v-loading="loading"
    class="c-detail"
    fill
  >
    <div class="l-flex__none c-detail__header">
      <template v-if="device">
        <div class="l-flex--row has-padding">
          <span
            class="c-sibling-item o-status"
            :class="statusType"
          >
            {{ statusTip }}
          </span>
          <auto-text
            class="c-sibling-item o-name"
            :text="deviceName"
          />
        </div>
        <el-tabs
          v-model="active"
          class="c-tabs"
        >
          <el-tab-pane
            label="设备信息"
            name="info"
          />
          <!-- <el-tab-pane
            label="运行状态"
            name="status"
          /> -->
        </el-tabs>
      </template>
      <el-result
        v-if="!loading && !device"
        icon="warning"
      >
        <template #extra>
          <el-link
            class="u-pointer"
            type="warning"
            @click="getDevice"
          >
            出错了，点击重试
          </el-link>
        </template>
      </el-result>
    </div>
    <div class="l-flex--col l-flex__fill has-padding">
      <div class="l-flex__fill c-detail__wrapper has-padding u-overflow-y--auto">
        <component
          :is="activeComponent"
          v-if="device"
          :device="device"
        />
      </div>
    </div>
  </wrapper>
</template>

<script>
import {
  getDevice
} from '@/api/device'
import DeviceInfo from './components/DeviceInfo'

export default {
  name: 'DeviceDetail',
  components: {
    DeviceInfo
  },
  data () {
    return {
      loading: true,
      device: null,
      active: 'info'
    }
  },
  computed: {
    isActivated () {
      return this.device?.activate === 2
    },
    isOnline () {
      return this.device?.onlineStatus === 1
    },
    statusType () {
      return this.isActivated
        ? this.isOnline
          ? 'success'
          : 'error'
        : this.device.activate
          ? 'primary'
          : 'warning'
    },
    statusTip () {
      return this.isActivated
        ? this.isOnline
          ? '在线'
          : '离线'
        : this.device.activate
          ? '已激活'
          : '未激活'
    },
    deviceName () {
      return this.device?.name
    },
    activeComponent () {
      switch (this.active) {
        case 'info':
          return 'DeviceInfo'
        default:
          return ''
      }
    }
  },
  created () {
    this.getDevice()
  },
  beforeRouteUpdate (to, from, next) {
    this.getDevice()
    next()
  },
  methods: {
    getDevice () {
      this.loading = true
      getDevice(this.$route.params.id).then(({ data }) => {
        this.device = data
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-detail {
  &__header {
    background-color: #fff;
  }

  &__wrapper {
    border-radius: $radius;
    background-color: #fff;
  }
}

.o-name {
  color: $black;
  font-size: 20px;
  font-weight: bold;
}

.o-status {
  display: inline-block;
  padding: 4px 8px;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
  background-color: $success--dark;

  &.primary {
    background-color: $primary;
  }

  &.error {
    background-color: $error;
  }

  &.warning {
    background: $warning;
  }
}
</style>