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">
      <div class="l-flex--row has-padding">
        <i
          class="l-flex__none o-icon medium o-icon--back el-icon-arrow-left u-bold u-pointer"
          @click="onBack"
        />
        <template v-if="device">
          <i
            v-if="useDashboard"
            class="c-sibling-item c-detail__dashboard el-icon-full-screen has-active u-pointer"
            @click="onDashboard"
          />
          <span
            class="c-sibling-item c-detail__status"
            :class="statusType"
          >
            {{ statusTip }}
          </span>
          <auto-text
            class="c-sibling-item c-detail__name u-bold"
            :text="deviceName"
          />
        </template>
      </div>
      <el-tabs
        v-if="device"
        v-model="active"
        class="c-tabs padding"
      >
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.key"
          :label="tab.label"
          :name="tab.key"
        />
      </el-tabs>
      <warning
        v-else-if="!loading"
        @click="getDevice"
      />
    </div>
    <div
      v-if="device"
      class="l-flex--col l-flex__fill has-padding"
    >
      <keep-alive include="DeviceInfo">
        <component
          :is="active"
          :key="active"
          class="l-flex__fill c-detail__wrapper has-padding u-overflow-y--auto"
          :device="device"
          :online="isOnline"
        />
      </keep-alive>
    </div>
  </wrapper>
</template>

<script>
import { getDevice } from '@/api/device'
import { Access } from '@/constant'
import { ScreenshotCache } from '@/utils/cache'
import {
  start,
  stop,
  addListener
} from './monitor'
import DeviceInfo from './components/DeviceInfo'
import DeviceRuntime from './components/DeviceRuntime'
import DeviceAlarm from './components/DeviceAlarm'
import DeviceInvoke from './components/DeviceInvoke'
import DeviceExternal from './components/DeviceExternal'
import Sensors from './components/external/Sensors'
import DeviceTakeOver from './components/DeviceTakeOver'

export default {
  name: 'DeviceDetail',
  components: {
    DeviceInfo,
    DeviceRuntime,
    DeviceAlarm,
    DeviceInvoke,
    DeviceExternal,
    Sensors,
    DeviceTakeOver
  },
  data () {
    return {
      useDashboard: __DEVICE_DASHBARD__,
      loading: true,
      device: null,
      isActivated: false,
      isOnline: false,
      active: 'DeviceInfo',
      tabs: [
        { key: 'DeviceInfo', label: '设备信息' },
        { key: 'DeviceRuntime', label: '运行状态' },
        { key: 'DeviceAlarm', label: '设备告警' },
        this.accessSet.has(Access.MANAGE_DEVICE) ? { key: 'DeviceInvoke', label: '设备操控' } : null,
        __SENSOR__ ? { key: 'Sensors', label: '传感器' } : null,
        { key: 'DeviceExternal', label: '全链路监测' },
        this.accessSet.has(Access.MANAGE_GROUP) ? { key: 'DeviceTakeOver', label: '接管' } : null
      ].filter(Boolean)
    }
  },
  computed: {
    deviceId () {
      return this.$route.params.id
    },
    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
    }
  },
  watch: {
    deviceId () {
      stop()
      this.active = 'DeviceInfo'
      this.device = null
      this.getDevice()
    }
  },
  created () {
    this.getDevice()
  },
  beforeDestroy () {
    stop()
  },
  methods: {
    onBack () {
      console.log(this.$route.name)
      switch (this.$route.name) {
        case 'device-management-detail':
          this.$router.replace({
            name: 'device-management'
          })
          break
        default:
          this.$router.replace({
            name: 'device-list'
          })
          break
      }
    },
    getDevice () {
      this.loading = true
      const id = this.deviceId
      getDevice(id).then(({ data }) => {
        if (this.deviceId === id) {
          if (data) {
            this.device = data
            this.isActivated = data.activate === 2
            this.isOnline = this.isActivated && data.onlineStatus === 1
            if (!this.isOnline) {
              ScreenshotCache.remove(id)
            }
            start(this.device)
            addListener('online', this.onUpdate)
          } else {
            this.$message({
              type: 'warning',
              message: '设备不存在'
            })
            this.onBack()
          }
        }
      }).finally(() => {
        if (this.deviceId === id) {
          this.loading = false
        }
      })
    },
    onUpdate (online) {
      this.isActivated = true
      this.isOnline = online
      if (!this.isOnline) {
        ScreenshotCache.remove(this.deviceId)
      }
    },
    onDashboard () {
      this.$router.push({
        name: 'device-dashboard',
        params: { id: this.deviceId }
      })
    }
  }
}
</script>

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

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

  &__dashboard {
    font-size: 24px;
  }

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

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

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

    &.warning {
      background: $warning;
    }
  }

  &__name {
    color: $black;
    font-size: 20px;
    line-height: 1;
  }
}
</style>

<style lang="scss">
.o-device-grid-item {
  height: 180px;
  padding: 12px 16px 16px;
  color: $info;
  font-size: 14px;
  line-height: 1;

  &__large {
    font-size: 18px;
  }

  &__largest {
    font-size: 32px;
  }

  &__icon {
    margin-right: 8px;
  }
}
</style>