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"
        @retry="getDefaults"
      />
      <template v-if="canEdit">
        <tabs
          :items="tabs"
          :active.sync="active"
        />
        <keep-alive>
          <component
            :is="activeComponent"
            class="l-flex__fill"
            :info="info"
            @refresh="refresh"
          />
        </keep-alive>
      </template>
      <template v-else-if="!info">
        <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>
  </div>
</template>

<script>
import { getReceivingCard } from '@/api/external'
import {
  send,
  reset
} from '@/views/device/detail/monitor'
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,
      default () {
        return null
      }
    },
    online: {
      type: [Boolean, String],
      default: false
    }
  },
  data () {
    return {
      active: 'topology',
      tabs: [
        { key: 'topology', name: '接收卡状态监测' },
        { key: 'info', name: '接收卡信息' }
      ],
      loading: false,
      error: false,
      info: null
    }
  },
  computed: {
    canEdit () {
      return this.accessSet.has(this.Access.MANAGE_DEVICES)
    },
    activeComponent () {
      switch (this.active) {
        case 'topology':
          return 'ReceivingCardTopology'
        case 'info':
          return this.canEdit ? 'ReceivingCardInfoEdit' : 'ReceivingCardInfo'
        default:
          return null
      }
    }
  },
  activated () {
    !this.info && 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
      })
    },
    refresh (options) {
      if (options.reset) {
        reset('topology')
        this.getDefaults()
      }
      if (options.tip && this.online) {
        this.$confirm(
          `${options.tip}发生变化，需重启设备生效，是否立即重启？`,
          { type: 'warning' }
        ).then(() => {
          send('/restart/ask')
        })
      }
    }
  }
}
</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>