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

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      row-key="id"
      :schema="schema"
      @row-click="onRowClick"
    />
    <confirm-dialog
      ref="eventTargetDialog"
      size="lg fixed"
      title="默认播放配置"
      @confirm="onConfirm"
    >
      <template #default>
        <event-target-picker
          ref="eventTargetPicker"
          class="l-flex__fill"
          :ratio="ratio"
        />
      </template>
    </confirm-dialog>
    <dataset-config-dialog ref="datasetConfigDialog" />
  </wrapper>
</template>

<script>
import {
  EventPriority,
  EventFreq,
  EventTarget,
  PublishType,
  PublishTargetType
} from '@/constant'
import { toDateStr } from '@/utils/event'
import { publish } from '@/api/platform'
import {
  getDevices,
  getSubDevices,
  activateDevice,
  deactivateDevice
} from '@/api/device'
import DatasetConfigDialog from '@/views/ad/automation/dataset/components/DatasetConfigDialog.vue'

export default {
  name: 'DeviceList',
  components: {
    DatasetConfigDialog
  },
  data () {
    const canEdit = this.$store.getters.isOperator

    return {
      ratio: null,
      schema: {
        keepalive: true,
        list: getDevices,
        transform: this.transform,
        transformData: __SUB_DEVICE__ && this.transformTableData,
        filters: [
          { key: 'name', type: 'search', placeholder: '设备名称' }
        ],
        cols: [
          { type: 'refresh', render: __SUB_DEVICE__
            ? (data, h) => data.isMaster
              ? h('i', {
                staticClass: `o-expand-icon u-pointer ${data.loading ? 'el-icon-loading' : 'el-icon-arrow-right'}`,
                class: { expand: data.expand }
              })
              : null
            : null },
          __SUB_DEVICE__
            ? { label: '设备名称', render: (data, h) => data.empty ? h('span', { staticClass: 'u-color--info' }, '暂无备份设备') : data.name, 'min-width': 120 }
            : { prop: 'name', label: '设备名称', 'min-width': 120 },
          { type: 'tag', render: ({ empty, activate, onlineStatus }) => empty
            ? null
            : activate
              ? onlineStatus === 0
                ? { type: 'primary', label: '已启用' }
                : onlineStatus === 1
                  ? { type: 'success', label: '在线' }
                  : { type: 'danger', label: '离线' }
              : { type: 'warning', label: '未激活' }, 'width': 120, 'align': 'center' },
          { label: '运行时间', render: ({ empty, openTime, closeTime }) => empty
            ? null
            : openTime && closeTime
              ? `${openTime} - ${closeTime}`
              : '-', 'min-width': 100 },
          { prop: 'address', label: '地址', 'min-width': 160 },
          { type: 'invoke', width: canEdit ? 240 : 80, render: [
            canEdit ? { label: '默认播放', render: ({ isMaster, activate }) => isMaster && activate, on: this.onSetDefaultProgram } : null,
            canEdit ? { label: '素材包绑定', render: ({ isMaster, activate }) => isMaster && activate, on: this.onSetDataset } : null,
            { label: '详情', render: ({ empty }) => !empty, on: this.onViewDevice }
          ].filter(Boolean) }
        ]
      }
    }
  },
  methods: {
    transform (data) {
      return {
        ...data,
        loaded: false,
        loading: false,
        expand: false,
        subs: [],
        isMaster: true
      }
    },
    transformTableData (data) {
      const arr = []
      data.forEach(item => {
        arr.push(item)
        if (item.loaded && item.expand) {
          arr.push(...item.subs)
        }
      })
      return arr
    },
    onViewDevice (item) {
      this.$router.push({
        name: 'device-detail',
        params: {
          id: item.id
        }
      })
    },
    reloadSubDevices (item) {
      item.loaded = false
      item.children = []
      this.getSubDevices(item)
    },
    getSubDevices (item, pageSize = 999) {
      item.loading = true
      getSubDevices({
        id: item.id,
        pageNum: 1,
        pageSize
      }).then(({ data, totalCount }) => {
        if (totalCount > pageSize) {
          this.getSubDevices(item, totalCount)
        } else {
          item.loading = false
          item.loaded = true
          item.expand = true
          if (data.length === 0) {
            item.subs = [{ id: `${Math.random()}`, empty: true }]
          } else {
            item.subs = data.map(device => {
              return {
                ...device,
                isMaster: false,
                empty: false,
                parent: item
              }
            })
          }
        }
      }, () => {
        item.loading = false
      })
    },
    onRowClick (data) {
      if (__SUB_DEVICE__ && data.isMaster) {
        if (data.loaded) {
          data.expand = !data.expand
        } else if (!data.loading) {
          this.getSubDevices(data)
        }
      }
    },
    onTagClick (data) {
      (data.activate ? deactivateDevice : activateDevice)(data).then(() => {
        if (data.isMaster) {
          this.$refs.table.pageTo()
        } else {
          this.reloadSubDevices(data.parent)
        }
      })
    },
    onSetDefaultProgram (device) {
      this.ratio = device.resolutionRatio
      this.$device = {
        id: device.id,
        name: device.name
      }
      this.$refs.eventTargetDialog.show()
    },
    onConfirm (done) {
      const eventTarget = this.$refs.eventTargetPicker.getValue()
      if (!eventTarget) {
        return
      }
      const { detail } = this.$refs.eventTargetPicker.getSnapshot()
      this.$confirm(
        `${eventTarget.adaptive ? '<p class="u-color--error">上播内容与设备分辨率不一致，可能无法完全适配</p>' : ''}设置后需审核生效，操作完成后请通知相关人员进行审核`,
        '默认播放设置',
        {
          dangerouslyUseHTMLString: true,
          type: 'warning',
          confirmButtonText: '设置'
        }
      ).then(() => publish(
        eventTarget.type === EventTarget.ASSETS
          ? PublishType.ASSET_TO_DEVICE
          : PublishType.PROGRAM_TO_DEVICE,
        [this.$device.id],
        {
          type: PublishTargetType.EVENT,
          detail: {
            priority: EventPriority.SHIM,
            freq: EventFreq.ONCE,
            start: `${toDateStr(new Date())} 00:00:00`,
            target: eventTarget
          }
        },
        {
          programCalendarName: detail?.name,
          resolutionRatio: detail?.resolutionRatio
        }
      )).then(done)
    },
    onSetDataset (device) {
      this.$refs.datasetConfigDialog.show(device)
    }
  }
}
</script>