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

<template>
  <div
    v-loading="loading"
    class="l-flex--col"
  >
    <template v-if="!loading">
      <warning
        v-if="error"
        @click="getDefaults"
      />
      <template v-else>
        <template v-if="isSuperAdmin || info">
          <tabs
            :items="tabs"
            :active.sync="active"
          />
          <keep-alive>
            <component
              :is="activeComponent"
              class="l-flex__fill"
              :info="info"
              @change="getDefaults"
            />
          </keep-alive>
        </template>
        <template v-else>
          <div class="l-flex__fill l-flex--row center u-color--info">
            <div class="l-flex--col center">
              <div class="has-padding">未绑定接收卡，请联系管理员</div>
            </div>
          </div>
        </template>
      </template>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getReceivingCard } from '@/api/external'
import Tabs from '@/views/device/detail/components/Tabs'
import ReceivingCardTopology from './ReceivingCardTopology'
import ReceivingCardInfo from './ReceivingCardInfo'
import ReceivingCardInfoEdit from './ReceivingCardInfoEdit'

export default {
  name: 'ReceivingCard',
  components: {
    Tabs,
    ReceivingCardTopology,
    ReceivingCardInfo,
    ReceivingCardInfoEdit
  },
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      active: 'topology',
      tabs: [
        { key: 'topology', name: '接收卡状态监测' },
        { key: 'info', name: '接收卡信息' }
      ],
      loading: false,
      error: false,
      info: null
    }
  },
  computed: {
    ...mapGetters(['isSuperAdmin']),
    activeComponent () {
      switch (this.active) {
        case 'topology':
          return 'ReceivingCardTopology'
        case 'info':
          return this.isSuperAdmin ? 'ReceivingCardInfoEdit' : 'ReceivingCardInfo'
        default:
          return null
      }
    }
  },
  activated () {
    this.getDefaults()
  },
  methods: {
    getDefaults () {
      if (this.loading) {
        return
      }
      this.info = null
      this.loading = true
      this.error = false
      getReceivingCard(this.device.id).then(
        ({ data }) => {
          if (data?.topology) {
            data.topology = JSON.parse(data.topology)
          }
          this.info = data
        },
        () => {
          this.error = true
        }
      ).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-card-grid {
  display: grid;
  overflow: auto;

  &.empty {
    position: relative;
    background: url("~@/assets/screen.png") 0 0 / 96px 96px repeat;

    &::after {
      content: "未录入";
      display: inline-flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px;
      height: 64px;
      color: #fff;
      font-size: 18px;
      letter-spacing: 6px;
      background-color: rgba($info--dark, 0.8);
      transform: translate(-50%, -50%);
    }
  }
}

.o-receiving-card {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: $info;
  background: url("~@/assets/screen.png") 0 0 / 100% 100% no-repeat;

  &.normal,
  &.error {
    color: $success--dark;
  }

  &::after {
    content: attr(status);
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    padding: 4px 0;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    background-color: $info;
    transform-origin: top right;
    transform: scale(0.8);
  }

  &.normal::after {
    background-color: $black;
  }

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

  &__status {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding-bottom: 4px;
    color: $black;
    font-size: 14px;
    font-weight: bold;
    background: url("~@/assets/icon_card_unknown.png") 0 0 / 100% 100% no-repeat;
  }

  &.normal {
    .o-receiving-card__status {
      color: $error;
      background-image: url("~@/assets/icon_card_normal.png");
    }
  }

  &.error {
    .o-receiving-card__status {
      background-image: url("~@/assets/icon_card_abnormal.png");
    }
  }

  &__arrow {
    position: absolute;
    z-index: 1;

    &.left {
      transform: rotate(-90deg);
    }

    &.right {
      transform: rotate(90deg);
    }

    &.bottom {
      transform: rotate(180deg);
    }

    &::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 20px;
      width: 6px;
      height: 46px;
      background-color: currentColor;
      transform: translateX(-50%);
    }

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 66px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid currentColor;
      transform: translateX(-50%);
    }
  }
}
</style>