smsb-web-develop/src/views/dashboard/components/DeviceGroups.vue

<template>
  <div class="l-flex--col c-device-groups">
    <div class="l-flex__none l-flex--row c-device-groups__header u-bold has-bottom-padding--sm has-bottom-border">
      <el-dropdown
        class="l-flex__none c-sibling-item"
        trigger="click"
        @command="onCommand"
      >
        <div class="l-flex--row inline has-active">
          <i
            class="c-sibling-item u-font-size--md"
            :class="icon"
          />
          <span class="c-sibling-item near u-font-size">{{ title }}</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            icon="el-icon-s-grid"
            command="tile"
          >
            网格
          </el-dropdown-item>
          <el-dropdown-item
            icon="el-icon-s-operation"
            command="level"
          >
            层级
          </el-dropdown-item>
          <el-dropdown-item
            icon="el-icon-menu"
            command="rect"
          >
            方块图
          </el-dropdown-item>
          <el-dropdown-item
            v-if="isTenantAdmin"
            icon="el-icon-star-off"
            command="attention"
          >
            我的关注
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div
        v-if="hasData && isMaintainer"
        class="l-flex__none l-flex--row inline c-sibling-item u-pointer"
        @click="onVolume"
      >
        <svg-icon
          class="u-font-size--lg"
          icon-class="volume"
        />
      </div>
      <slot />
      <div class="l-flex__fill" />
      <div
        v-if="supportCardStyle"
        class="l-flex__none l-flex--row u-color--blue u-font-size--sm has-active"
        @click="onSwitchCardStyle"
      >
        {{ tip }}
      </div>
    </div>
    <component
      :is="activeComponent"
      class="l-flex__self c-device-groups__content u-overflow-y--auto"
      :card-style="cardStyle"
      v-bind="$attrs"
      @change="onChange"
    />
    <volume-drawer ref="drawer" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import DeviceGroupTile from './DeviceGroupTile.vue'
import DeviceGroupLevel from './DeviceGroupLevel.vue'
import DeviceGroupRect from './DeviceGroupRect.vue'
import DeviceGroupAttention from './DeviceGroupAttention.vue'
import VolumeDrawer from './DrawerVolumeSettings.vue'

const groupStyleCommands = ['tile', 'level', 'rect']
const cardStyleCommands = ['big', 'medium']

export default {
  name: 'DeviceGroups',
  components: {
    DeviceGroupTile,
    DeviceGroupLevel,
    DeviceGroupRect,
    DeviceGroupAttention,
    VolumeDrawer
  },
  data () {
    let options = {
      groupStyle: groupStyleCommands[0],
      cardStyle: cardStyleCommands[0]
    }
    try {
      options = {
        ...options,
        ...JSON.parse(localStorage.getItem(`MSR_DASHBOARD__STYLE__${this.$store.getters.account}`))
      }
    } catch (e) {
      console.log(e)
    }

    return {
      groupStyle: groupStyleCommands.includes(options.groupStyle) ? options.groupStyle : groupStyleCommands[0],
      cardStyle: cardStyleCommands.includes(options.cardStyle) ? options.cardStyle : cardStyleCommands[0],
      groups: []
    }
  },
  computed: {
    ...mapGetters(['isMaintainer', 'isTenantAdmin', 'account']),
    title () {
      switch (this.groupStyle) {
        case 'attention':
          return '我的关注'
        case 'rect':
          return '方块图'
        default:
          return '设备列表'
      }
    },
    icon () {
      switch (this.groupStyle) {
        case 'tile':
          return 'el-icon-s-grid'
        case 'rect':
          return 'el-icon-menu'
        case 'attention':
          return 'el-icon-star-off'
        default:
          return 'el-icon-s-operation'
      }
    },
    activeComponent () {
      switch (this.groupStyle) {
        case 'tile':
          return 'DeviceGroupTile'
        case 'rect':
          return 'DeviceGroupRect'
        case 'attention':
          return 'DeviceGroupAttention'
        default:
          return 'DeviceGroupLevel'
      }
    },
    hasData () {
      return this.groups.some(({ children }) => children.some(({ onlineStatus }) => onlineStatus === 1))
    },
    supportCardStyle () {
      switch (this.groupStyle) {
        case 'rect':
          return false
        default:
          return true
      }
    },
    tip () {
      if (this.cardStyle === 'big') {
        return '切换至简洁模式'
      }
      return '切换至详情模式'
    }
  },
  methods: {
    onCommand (groupStyle) {
      this.groupStyle = groupStyle
      this.saveOptions(groupStyleCommands.includes(groupStyle) ? groupStyle : '', this.cardStyle)
    },
    onVolume () {
      this.$refs.drawer.show(this.groups)
    },
    onChange (groups) {
      this.groups = groups
    },
    onSwitchCardStyle () {
      const next = this.cardStyle === 'big' ? 'medium' : 'big'
      this.cardStyle = next
      this.saveOptions(this.groupStyle, cardStyleCommands.includes(next) ? next : '')
    },
    saveOptions (groupStyle, cardStyle) {
      localStorage.setItem(`MSR_DASHBOARD__STYLE__${this.account}`, JSON.stringify({ groupStyle, cardStyle }))
    }
  }
}
</script>

<style lang="scss" scoped>
.c-device-groups {
  padding: $spacing 0 $spacing--3xs;

  &__header {
    margin: 0 $spacing;
  }

  &__content {
    padding: $spacing;
  }
}
</style>