smsb-web-develop/src/views/test-api.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <div class="c-sibling-item--v">
      <div
        class="l-flex--row inline u-color--blue u-font-size--sm u-bold has-active"
        @click="onChoose"
      >
        {{ tip }}
      </div>
    </div>
    <div class="l-flex__fill l-flex c-sibling-item--v">
      <div class="l-flex__fill l-flex--col c-sibling-item">
        <span class="c-sibling-item--v far u-font-size--sm u-bold">在线时长统计</span>
        <div class="c-sibling-item--v l-grid--info mini">
          <button
            class="o-button"
            @click="onTriggerOnlineDurationSnap"
          >
            触发快照
          </button>
          <button
            class="o-button"
            @click="onGetOnlineDurationByDevice"
          >
            设备总时长
          </button>
          <button
            class="o-button"
            @click="onGetOnlineDurationReport"
          >
            设备日报
          </button>
        </div>
        <span class="c-sibling-item--v far u-font-size--sm u-bold">自助广告统计</span>
        <div class="c-sibling-item--v l-grid--info mini">
          <button
            class="o-button"
            @click="onTriggerAdSnap"
          >
            触发快照
          </button>
          <button
            class="o-button"
            @click="onGetAdReportForPlatfrom"
          >
            平台日报
          </button>
          <button
            class="o-button"
            @click="onGetAdReportForTenant"
          >
            租户日报
          </button>
          <button
            class="o-button"
            @click="onGetAdReportForDevice"
          >
            设备日报
          </button>
          <button
            class="o-button"
            @click="onGetAdCollectForPlatfrom"
          >
            平台汇总
          </button>
          <button
            class="o-button"
            @click="onGetAdCollectForTenant"
          >
            租户汇总
          </button>
          <button
            class="o-button"
            @click="onGetAdCollectForDevice"
          >
            设备汇总
          </button>
        </div>
        <span class="c-sibling-item--v far u-font-size--sm u-bold">数据</span>
        <div class="c-sibling-item--v l-grid--info mini">
          <button
            class="o-button"
            @click="onGetDepartmentDeviceTree"
          >
            部门设备树
          </button>
        </div>
      </div>
      <div class="l-flex__none c-sibling-item far u-width--lg u-font-size--sm u-overflow-y--auto">
        <pre
          class="l-flex__fill"
          style="white-space: break-spaces;"
        ><code>{{ responseData }}</code></pre>
      </div>
    </div>
    <single-device-dialog
      ref="deviceDialog"
      @confirm="onConfirm"
    />
  </wrapper>
</template>

<script>
import { parseTime } from '@/utils'
import {
  triggetOnlineDurationSnap,
  getOnlineDurationByDevice,
  getOnlineDurationReport,
  triggerAdSnap,
  getAdReport,
  getAdCollect
} from '@/api/statistics'
import { getDepartmentDeviceTree } from '@/api/device'

export default {
  name: 'TestApi',
  data () {
    return {
      device: null,
      responseData: null
    }
  },
  computed: {
    tip () {
      return this.device?.name || '点击选择设备'
    },
    deviceId () {
      return this.device?.id
    }
  },
  methods: {
    onChoose () {
      this.$refs.deviceDialog.show(this.device)
    },
    onConfirm ({ value, done }) {
      this.device = value
      done()
    },
    onData (data) {
      this.responseData = data
    },
    checkDevice () {
      if (this.device) {
        return true
      }
      this.$message({
        type: 'warning',
        message: '请先选择设备'
      })
      return false
    },
    getMonth () {
      const endDate = new Date()
      endDate.setDate(endDate.getDate() - 1)
      const startDate = new Date(endDate.getTime())
      startDate.setMonth(startDate.getMonth() - 1)
      return {
        startDate: parseTime(startDate, '{y}-{m}-{d}'),
        endDate: parseTime(endDate, '{y}-{m}-{d}')
      }
    },
    onTriggerOnlineDurationSnap () {
      const endDate = new Date()
      endDate.setDate(endDate.getDate() - 1)
      triggetOnlineDurationSnap({ endDate: parseTime(endDate, '{y}-{m}-{d}') }).then(() => {
        this.$message({
          type: 'success',
          message: '触发完成'
        })
      })
    },
    onGetOnlineDurationByDevice () {
      this.checkDevice() && getOnlineDurationByDevice(this.deviceId).then(this.onData)
    },
    onGetOnlineDurationReport () {
      const { startDate, endDate } = this.getMonth()
      this.checkDevice() && getOnlineDurationReport({
        deviceId: this.deviceId,
        from: startDate,
        to: endDate
      }).then(this.onData)
    },
    async onTriggerAdSnap () {
      const endDate = new Date()
      endDate.setDate(endDate.getDate() - 1)
      let startDate = new Date(endDate.getTime())
      startDate.setMonth(startDate.getMonth() - 1)
      while (startDate <= endDate) {
        try {
          await triggerAdSnap(parseTime(startDate, '{y}-{m}-{d}'))
        } catch (e) {
          console.log('onTriggerAdSnap fail', parseTime(startDate, '{y}-{m}-{d}'))
        }
        startDate = new Date(startDate.setDate(startDate.getDate() + 1))
      }
      this.$message({
        type: 'success',
        message: '触发完成'
      })
    },
    onGetAdReportForPlatfrom () {
      getAdReport(this.getMonth()).then(this.onData)
    },
    onGetAdReportForTenant () {
      getAdReport({
        tenant: this.$store.getters.tenant,
        ...this.getMonth()
      }).then(this.onData)
    },
    onGetAdReportForDevice () {
      this.checkDevice() && getAdReport({
        deviceId: this.deviceId,
        ...this.getMonth()
      }).then(this.onData)
    },
    onGetAdCollectForPlatfrom () {
      getAdCollect().then(this.onData)
    },
    onGetAdCollectForTenant () {
      getAdCollect({ tenant: this.$store.getters.tenant }).then(this.onData)
    },
    onGetAdCollectForDevice () {
      this.checkDevice() && getAdCollect({ deviceId: this.deviceId }).then(this.onData)
    },
    onGetDepartmentDeviceTree () {
      getDepartmentDeviceTree().then(this.onData)
    }
  }
}
</script>